-
Notifications
You must be signed in to change notification settings - Fork 38
/
index.html
168 lines (151 loc) · 5.84 KB
/
index.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
165
166
167
168
<!DOCTYPE html>
<html>
<head>
<title>Map Client III: Web Map Interaction</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<style>
/*full screen the map*/
html { height:100%;}
body {
height:100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
/*info panel*/
.info {
z-index: 1000;
position: absolute;
right: 20px;
top: 20px;
padding: 6px 8px;
font: 14px Arial, Helvetica, sans-serif;
text-align: right;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.info h1 {
font-size: 16px;
margin: 0 0 5px;
color: #777777;
}
/*legend panel*/
.legend {
z-index: 1000;
position: absolute;
right: 20px;
bottom: 20px;
padding: 6px 8px;
font: 14px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.legend i {
width: 18px;
height: 16px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
</head>
<body>
<div id='map'></div>
<!-- <div class='info'><h1>US Population Density</h1><div class='update'>Hover over a state</div></div>
<div class='legend'></div> -->
<script type="text/javascript">
// 1. create the map object and the base layer.
var map = L.map('map').setView([37.8, -96], 5);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo(map);
// 2. Create the chorepleth map with interactive functions.
// determine the number of classes and their respective break values.
var grades = [0, 10, 20, 50, 100, 200, 500, 1000];
// determine the color.md ramp. The number of colors is determined by the number of classes.
// try different interpolation method lch, lab, hsl
var colors = chroma.scale(['yellow', 'navy']).mode('hsl').colors(grades.length);
var colors = chroma.scale('YlOrRd').colors(grades.length);
// get the color.md based on the class which the input value falls in.
function getColor(d) {
for (var i = 0; i < grades.length - 1; i++) {
if ( d > grades[i] && d < grades[i+1] ) return colors[i];
}
if (d > grades[grades.length - 1]) return colors[grades.length - 1];
}
// determine the style class based on the input feature
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
};
}
// 3. add the state layer to the map. Also, this layer has some interactive features.
// 3.1 declare an empty/null geojson object
var geojson = null;
// 3.2 interactive features.
// 3.2.1 highlight a feature when the mouse hovers on it.
function highlightFeature(e) {
// e indicates the current event
var layer = e.target; //the target capture the object which the event associates with
layer.setStyle({
weight: 8,
opacity: 0.8,
color: '#e3e3e3',
fillColor: '#e3e00f',
fillOpacity: 0.5
});
// bring the layer to the front.
layer.bringToFront();
// select the update class, and update the contet with the input value.
$(".update").html('<b>' + layer.feature.properties.name + '</b> ' + layer.feature.properties.density + ' people / mi<sup>2</sup>');
}
// 3.2.2 zoom to the highlighted feature when the mouse is clicking onto it.
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
// 3.2.3 reset the hightlighted feature when the mouse is out of its region.
function resetHighlight(e) {
geojson.resetStyle(e.target);
$(".update").html("Hover over a state");
}
// 3.3 add these event the layer obejct.
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
click: zoomToFeature,
mouseout: resetHighlight
});
}
// 3.4 assign the geojson data path, style option and onEachFeature option. And then Add the geojson layer to the map.
geojson = L.geoJson.ajax("assets/us-states.geojson", {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
// 4. create the legend
var labels = [];
for (var i = 0; i < grades.length - 1; i++) {
labels.push('<i style="background:' + colors[i] + '"></i> ' + (grades[i] + 1) + ' - ' + grades[i + 1]);
}
labels.push('<i style="background:' + colors[grades.length - 1] + '"></i> ' + grades[grades.length - 1] + ' +');
$(".legend").html(labels.join('<br>'));
// 5. create the credits
map.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census Bureau</a> | This map is made by <a href="http://geoviz.ceoas.oregonstate.edu">Bo Zhao</a>');
</script>
</body>
</html>