-
Notifications
You must be signed in to change notification settings - Fork 0
/
logic.js
116 lines (91 loc) · 3.25 KB
/
logic.js
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
var url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";
var earthquakes = new L.LayerGroup();
d3.json(url).then(function(data) {
L.geoJson(data, {
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng);
},
style: function(feature) {
return {
color: getColor(feature.properties.mag),
fillColor: getColor(feature.properties.mag),
radius: getRadius(feature.properties.mag),
fillOpacity: 0.9
};
},
onEachFeature: function(feature, layer) {
layer.bindPopup("Magnitude: " + feature.properties.mag + "<br>Location: " + feature.properties.place);
}
}).addTo(earthquakes);
var legend = L.control({
position: "bottomright"
});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
mag = [0, 1, 2, 3, 4, 5],
labels = [];
// loop through magnitude intervals and create a label with a colored square for each interval
for (var i = 0; i < mag.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(mag[i] + 1) + '"></i> ' +
mag[i] + (mag[i + 1] ? '–' + mag[i + 1] + '<br>' : '+');
}
return div;
};
legend.addTo(myMap);
});
function getColor(magnitude) {
switch (true) {
case magnitude > 5:
return "#ea2c2c";
case magnitude > 4:
return "#ea822c";
case magnitude > 3:
return "#ee9c00";
case magnitude > 2:
return "#eecc00";
case magnitude > 1:
return "#d4ee00";
default:
return "#98ee00";
}
};
function getRadius(magnitude) {
if (magnitude === 0) {
return 1;
}
return magnitude * 4;
};
var light = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
attribution: "Map data © <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
maxZoom: 18,
id: "mapbox.light",
accessToken: API_KEY
});
var outdoors = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
attribution: "Map data © <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
maxZoom: 18,
id: "mapbox.outdoors",
accessToken: API_KEY
});
var satellite = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
attribution: "Map data © <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors, <a href='https://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
maxZoom: 18,
id: "mapbox.streets-satellite",
accessToken: API_KEY
});
var baseMaps = {
Light: light,
Outdoors: outdoors,
Satellite: satellite
};
var overlayMaps = {
Earthquakes: earthquakes
};
// Create map object and set default layers
var myMap = L.map("map", {
center: [39.0119, -98.4842],
zoom: 5,
layers: [outdoors, earthquakes]
});
L.control.layers(baseMaps, overlayMaps).addTo(myMap);