-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscale-dependent.html
124 lines (104 loc) · 3.4 KB
/
scale-dependent.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!-- https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=visualization-heatmap-scale -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Create a scale-dependent visualization - 4.15</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/core/watchUtils"
], function(WebMap, MapView, Legend, Expand, watchUtils) {
const map = new WebMap({
portalItem: {
id: "559f46c1162d4a09901438d92148e53a"
}
});
const view = new MapView({
container: "viewDiv",
map: map,
constraints: {
snapToZoom: false,
minScale: 1155582
}
});
view.ui.add(
new Legend({
view: view
}),
"bottom-left"
);
view.when().then(function() {
// When the view is ready, clone the heatmap renderer
// from the only layer in the web map
const layer = view.map.layers.getItemAt(0);
const heatmapRenderer = layer.renderer.clone();
// The following simple renderer will render all points as simple
// markers at certain scales
const simpleRenderer = {
type: "simple",
symbol: {
type: "simple-marker",
color: "#c80000",
size: 5
}
};
// When the scale is larger than 1:72,224 (zoomed in passed that scale),
// then switch from a heatmap renderer to a simple renderer. When zoomed
// out beyond that scale, switch back to the heatmap renderer
view.watch("scale", function(newValue) {
layer.renderer =
newValue <= 72224 ? simpleRenderer : heatmapRenderer;
});
});
// Displays instructions to the user for understanding the sample
// And places them in an Expand widget instance
const sampleInstructions = document.createElement("div");
sampleInstructions.style.padding = "10px";
sampleInstructions.style.backgroundColor = "white";
sampleInstructions.style.width = "300px";
sampleInstructions.innerText = [
"As you zoom in, the style will switch from a",
"heatmap to individual points."
].join(" ");
const instructionsExpand = new Expand({
expandIconClass: "esri-icon-question",
expandTooltip: "How to use this sample",
expanded: true,
view: view,
content: sampleInstructions
});
view.ui.add(instructionsExpand, "top-left");
// Hide the instructions when the user starts interacting with the sample
watchUtils.whenTrueOnce(view, "interacting", function() {
instructionsExpand.expanded = false;
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>