-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHeatmap.html
164 lines (146 loc) · 5.53 KB
/
Heatmap.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>CCCA using HeatMap</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.blurInfo {
position: absolute;
top: 10px;
right: 5px;
font-size: 1.25em;
font-family: monospace;
color: #4C4C4C;
width: 240px;
background-color: #FFFFFF;
padding: 10px;
border: 2px solid #57585A;
border-radius: 20px;
}
.blurInfo p span {
background-color: #FFFFFF;
padding: 0 5px;
border-radius: 5px;
}
.blurInfo input[type=range] {
width: 100%;
display: block;
}
</style>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
var map;
require([
"dojo/number",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/map",
"esri/renderers/HeatmapRenderer",
"dojo/domReady!"
], function (number, InfoTemplate, FeatureLayer, Map, HeatmapRenderer){
map = new Map("map", {
basemap: "gray",
zoom: 3,
center: [-103, 18],
minZoom: 3,
maxZoom: 5
});
// --------------------------------------------------------------------
// Format the magnitude value in the pop up to show one decimal place.
// Uses the dojo/number module to perform formatting.
// --------------------------------------------------------------------
formatMagnitude = function (value, key, data){
return number.format(value, {places: 1, locale: "en-us"});
};
var infoTemplate = new InfoTemplate("Attributes",
"Disaster Type: ${text}");
var serviceURL = "https://services8.arcgis.com/v9RrsHPyQp0yVjsL/arcgis/rest/services/mygeodata/FeatureServer/0";
var heatmapFeatureLayerOptions = {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["id", "text"],
infoTemplate: infoTemplate
};
var heatmapFeatureLayer = new FeatureLayer(serviceURL, heatmapFeatureLayerOptions);
var blurCtrl = document.getElementById("blurControl");
var maxCtrl = document.getElementById("maxControl");
var minCtrl = document.getElementById("minControl");
var valCtrl = document.getElementById("valueControl");
var heatmapRenderer = new HeatmapRenderer({
field: "Text",
blurRadius: blurCtrl.value,
maxPixelIntensity: maxCtrl.value,
minPixelIntensity: minCtrl.value
});
console.log("DONE");
heatmapFeatureLayer.setRenderer(heatmapRenderer);
map.addLayer(heatmapFeatureLayer);
/** Add event handlers for interactivity **/
var sliders = document.querySelectorAll(".blurInfo p~input[type=range]");
var addLiveValue = function (ctrl){
var val = ctrl.previousElementSibling.querySelector("span");
ctrl.addEventListener("input", function (evt){
val.innerHTML = evt.target.value;
});
};
for (var i = 0; i < sliders.length; i++) {
addLiveValue(sliders.item(i));
}
blurCtrl.addEventListener("change", function (evt){
var r = +evt.target.value;
if (r !== heatmapRenderer.blurRadius) {
heatmapRenderer.blurRadius = r;
heatmapFeatureLayer.redraw();
}
});
maxCtrl.addEventListener("change", function (evt){
var r = +evt.target.value;
if (r !== heatmapRenderer.maxPixelIntensity) {
heatmapRenderer.maxPixelIntensity = r;
heatmapFeatureLayer.redraw();
}
});
minCtrl.addEventListener("change", function (evt){
var r = +evt.target.value;
if (r !== heatmapRenderer.minPixelIntensity) {
heatmapRenderer.minPixelIntensity = r;
heatmapFeatureLayer.redraw();
}
});
document.getElementById("maxValue").innerHTML = 21;
maxCtrl.value = 21;
heatmapRenderer.maxPixelIntensity = 21;
heatmapRenderer.field = null;
heatmapFeatureLayer.redraw();
// --------------------------------------------------------------------
// When check / uncheck the control for the HeatmapRenderer field,
// we will leave the blurRadius and the minPixelIntensity values the
// same. However we will adjust the maxPixelIntensity value so it
// spreads the colors across the range of magnitude values. For your
// own dataset, you will need to experiment to find what looks good
// based upon the level of geography when you display the heatmap
// and the values in your dataset.
// --------------------------------------------------------------------
});
</script>
</head>
<body>
<div id="map"></div>
<div class="blurInfo">
<p>Blur Radius : <span id="blurValue">10</span></p>
<input id="blurControl" type="range" max=30 min=0 value=10 step=1/>
<p>Max Value : <span id="maxValue">21</span></p>
<input id="maxControl" type="range" max=500 min=0 value=21 step=1/>
<p>Min Value : <span id="minValue">0</span></p>
<input id="minControl" type="range" max=500 min=0 value=0 step=1/>
</div>
</body>
</html>