-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap.html
334 lines (272 loc) · 8.42 KB
/
map.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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
<!DOCTYPE html>
<html>
<head>
<title>Your Map: Please Change this title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
THESE ARE CALLS TO DIFFERENT EXTERNAL FILES
MAPBOX HAS A JAVASCRIPT LIBRARY THAT YOU NEED
THE NEXT IS A CSS FILE FOR THE MAP
AND THE FINAL ONE IS THE LIBRARY FOR JQUERY, WHICH I USE FOR THE PULLDOWN MENU.
-->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--
THESE ARE CSS STYLES WHAT YOU SHOULD FREELY PLAY WITH
THE STYLES THAT BEGIN WITH # RELATE TO IDS,
THE ONES THAT BEGIN WITH . RELATE TO CLASSES
WHEN YOU GOT EVERYTHING WORKING YOU CAN PLAY WITH THESE AND ADD TO THESE
TO MAKE YOUR FONTS AND LAYOUTS NICE AND LOVELY
-->
<style>
::-webkit-scrollbar {
width: 0px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
}
.info {
padding: 6px 8px;
font: 14px/16px 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;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
body {
display: flex;
}
#select-menu {
position: absolute;
left: 50px;
top: 10px;
z-index: 10;
}
#map {
flex: 2;
height: calc(100vh - 30px);
}
#articlePlace {
flex: 1;
height: calc(100vh - 30px);
overflow: scroll;
margin: 15px;
}
#color-scale {
position: absolute;
bottom: 40px;
right: 10px;
z-index: 10;
background: rgba(255, 255, 255, 0.75);
padding: 5px;
}
#color-scale > div span {
display: inline-block;
height: 25px;
width: 20px;
margin-right: 5px;
vertical-align: middle;
}
#color-scale p {
font-weight: bold;
padding-bottom: 5px;
margin: 0;
}
</style>
</head>
<!-- THE BODY OF THE HTML BEGINS HERE -->
<body>
<!--
THE DIVS BELOW ARE SUPER IMPORTANT:
THEY ARE WHERE THE MAP WILL GO, AND YOUR ARTICLE TEXT WILL GO
YOU WILL CERTAINLY WANT TO STYLE THESE, BOTH THEIR PLACEMENT AND CONTENT
THE MAP SHOULD BE EMPTY.
WHATEVER INTRODUCTORY TEXT YOU WANT CAN GO INTO THE ARTICLEPLACE DIV
-->
<div id='map'>
<div id="dropdown">
<select id="select-menu">
<option value="">All Groups</option>
</select>
</div>
<div id='color-scale'>
<p>Rating</p>
<div><span style='background-color: #ece2f0'></span>1</div>
<div><span style='background-color: #a6bddb'></span>5</div>
<div><span style='background-color: #1c9099'></span>10</div>
</div>
</div>
<div id='articlePlace'> all of your text can go here.</div>
<!--
INSIDE THE MAP DIV ARE TWO THINGS, THE DROP-DOWN MENU AND THE RATING LEGEND
DROP-DOWN MENU: THE ID select–menu IS USED BY THE JQUERY FUNCTION WAY DOWN AT THE BOTTOM
THIS HTML SETS UP THE PULLDOWN MENU
IF YOU HAVE MULTIPLE GROUPS THE JQUERY AT THE BOTTOM
WILL UPDATE THE SELECT MENU FOR YOU
RATING: THIS IS A NEW INNOVATION BY SOMA. I WILL GO OVER IT NEXT WEEK,
IT SHOULD BE THE LAST THING YOU DEAL WITH.
IT IS THERE FOR YOU TO USE THE NEW 'RATING' PROPERTY
TO AUTOMATICALLY SET A COLOR RANGE.
IT IS NOT WORKING IN THIS EXAMPLE.
-->
<!--
THIS IS WHERE THE BROWSER LOADS IN YOUR GEOJSON INFORMATION
MAKING IT A JAVASCRIPT FILE .js, RATHER THAN A GEOJSON FILE
ALLOWS YOU TO LOAD IT LOCALLY WITHOUT DEALING WITH SETTING UP SERVERS ON YOUR MACHINE.
-->
<script type="text/javascript" src="geo-data.js"></script>
<!--
HERE BEGINS ALL THE SCRIPT THAT SETS UP THE MAP
ALL THE COMMENTS FROM HERE WE'LL BE IN JAVASCRIPT COMMENTS //
-->
<script type="text/javascript">
// these seven lines maybe the only lines you need to edit
// you should put in your own access token
// you can change the style of the tiles
// as well as the center and the zoom
// but note that way down below this is a method that auto centers and zooms:
// map.fitBounds(turf.bbox(infoData), { padding: 120, linear: true })
//If you want to control the centering and zoom yourself, comment out that line.
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var map = new mapboxgl.Map({
container: 'map', // HTML container ID
style: 'mapbox://styles/mapbox/light-v10', // style URL
center: [-21.9270884, 64.1436456], // starting position as [lng, lat]
zoom: 13
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
// all of this JavaScript manages what's displayed on hover and click
var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false });
let hoverCurrentId = null
var datalayer;
function updateArticle(e) {
let feature = e.features[0]
document.getElementById("articlePlace").innerHTML = feature.properties.article
}
function startHover(e) {
let feature = e.features[0]
if (hoverCurrentId) {
map.setFeatureState({ source: 'datalayer', id: hoverCurrentId }, { hover: false });
}
hoverCurrentId = feature.id
map.setFeatureState({ source: 'datalayer', id: hoverCurrentId }, { hover: true });
}
function stopHover(e) {
if (hoverCurrentId) {
map.setFeatureState({ source: 'datalayer', id: hoverCurrentId }, { hover: false });
}
hoverCurrentId = null;
}
function drawPopup(e) {
let feature = e.features[0]
map.getCanvas().style.cursor = 'pointer';
var coordinates = e.lngLat;//turf.centerOfMass(feature);
var headline = feature.properties.headline;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
popup.setLngLat(coordinates)
.setHTML(`<h4>${headline}</h4>`)
.addTo(map);
}
function removePopup(e) {
map.getCanvas().style.cursor = '';
popup.remove();
}
map.on('load', function () {
for (let i = 0; i < infoData.features.length; i++) {
infoData.features[i]['id'] = i + 1
}
// the JavaScript below sets up the styles of the colors based on your properties
// color, radius, and rating
// Soma's explanation of 'paint': https://gist.github.com/jsoma/c91cfa7a1f4f8346d95ac2a907f0cb0c
datalayer = map.addLayer({
id: "datalayer",
type: "fill",
source: {
type: "geojson",
data: infoData,
},
paint: {
'fill-color': ['get', 'color'],
// 'fill-color': [
// 'interpolate', ['linear'],
// ["to-number", ["get", "rating"]],
// 1, "#ece2f0",
// 5, "#a6bddb",
// 10, "#1c9099"
// ],
'fill-outline-color': 'white',
'fill-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
1,
0.5
]
}
});
// these functions control Mouse actions
// they make the pop-up headline or update the article text
// When we move the mouse over, draw the popup and change the hover style
map.on('mousemove', 'datalayer', function (e) {
startHover(e)
drawPopup(e)
});
// When we move the mouse away from a point, turn off the hovering and popup
map.on('mouseleave', 'datalayer', function (e) {
stopHover(e)
removePopup(e)
});
// When we click, update the article (the right-hand side)
map.on('click', 'datalayer', function (e) {
updateArticle(e)
})
// very important!! this automatically centers the map and zooms it
map.fitBounds(turf.bbox(infoData), { padding: 0, linear: true })
})
</script>
<script>
// this part is J query / with some mapbox JavaScript
// it changes what is displayed based on the pulldown menu
var groupsObj = {};
$(document).ready(function () {
infoData.features.forEach(function (feature) {
groupsObj[feature.properties.group_id] = feature.properties.group_name;
})
$.each(groupsObj, function (key, value) {
$('#select-menu')
.append($("<option></option>")
.attr("value", value)
.text(value));
});
$('#select-menu').change(function () {
var selectedGroup = $('#select-menu').val();
if (!selectedGroup) {
map.setFilter('datalayer', null);
} else {
map.setFilter('datalayer', ['==', ['get', 'group_name'], selectedGroup]);
}
});
});
</script>
</body>
</html>