/
map5.html
157 lines (147 loc) · 5.5 KB
/
map5.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Earthquakes in Japan</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
/* the layout of the legend panel */
#legend {
position: absolute;
bottom: 0;
right: 0;
width: 110px;
background: #fff;
margin-right: 20px;
margin-bottom: 40px;
padding: 10px 20px 10px 10px;
border-radius: 3px;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
/* each line for a break */
.break {
position: relative;
margin: 0px;
padding: 0px;
}
/* basic style for a dot/circle */
.dot {
display: inline-block;
margin-top: 5px;
border-radius: 50%;
opacity: 0.6;
}
/* the label for the dot */
.dot-label {
position: absolute;
top: 0;
right: 0;
font-style: italic;
}
/* the text color of a hyper link */
a {
color: black
}
</style>
</head>
<body>
<div id="map"></div>
<div id="legend"></div>
<script>
mapboxgl.accessToken =
'pk.eyJ1IjoiamFrb2J6aGFvIiwiYSI6ImNpcms2YWsyMzAwMmtmbG5icTFxZ3ZkdncifQ.P9MBej1xacybKcDN_jehvw';
let map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/dark-v10',
zoom: 5, // starting zoom
minZoom: 4, // minimum zoom level of the map
center: [138, 38] // starting center
});
const grades = [4, 5, 6],
colors = ['rgb(208,209,230)', 'rgb(103,169,207)', 'rgb(1,108,89)'],
radii = [5, 15, 20];
//load data to the map as new layers.
//map.on('load', function loadingData() {
map.on('load', () => { //simplifying the function statement: arrow with brackets to define a function
// when loading a geojson, there are two steps
// add a source of the data and then add the layer out of the source
map.addSource('earthquakes', {
type: 'geojson',
data: 'assets/earthquakes.geojson'
});
map.addLayer({
'id': 'earthquakes-point',
'type': 'circle',
'source': 'earthquakes',
'minzoom': 5,
'paint': {
// increase the radii of the circle as mag value increases
'circle-radius': {
'property': 'mag',
'stops': [
[grades[0], radii[0]],
[grades[1], radii[1]],
[grades[2], radii[2]]
]
},
// change the color of the circle as mag value increases
'circle-color': {
'property': 'mag',
'stops': [
[grades[0], colors[0]],
[grades[1], colors[1]],
[grades[2], colors[2]]
]
},
'circle-stroke-color': 'white',
'circle-stroke-width': 1,
'circle-opacity': 0.6
}
});
// click on tree to view magnitude in a popup
map.on('click', 'earthquakes-point', (event) => {
new mapboxgl.Popup()
.setLngLat(event.features[0].geometry.coordinates)
.setHTML(`<strong>Magnitude:</strong> ${event.features[0].properties.mag}`)
.addTo(map);
});
});
// create legend
const legend = document.getElementById('legend');
//set up legend grades and labels
var labels = ['<strong>Magnitude</strong>'],
vbreak;
//iterate through grades and create a scaled circle and label for each
for (var i = 0; i < grades.length; i++) {
vbreak = grades[i];
// you need to manually adjust the radius of each dot on the legend
// in order to make sure the legend can be properly referred to the dot on the map.
dot_radii = 2 * radii[i];
labels.push(
'<p class="break"><i class="dot" style="background:' + colors[i] + '; width: ' + dot_radii +
'px; height: ' +
dot_radii + 'px; "></i> <span class="dot-label" style="top: ' + dot_radii / 2 + 'px;">' + vbreak +
'</span></p>');
}
// add the data source
const source =
'<p style="text-align: right; font-size:10pt">Source: <a href="https://earthquake.usgs.gov/earthquakes/">USGS</a></p>';
// combine all the html codes.
legend.innerHTML = labels.join('') + source;
</script>
</body>
</html>