Skip to content

Commit adab826

Browse files
PetraLee2019PetraLee2019
committed
first push
1 parent bb24305 commit adab826

File tree

4 files changed

+231
-1
lines changed

4 files changed

+231
-1
lines changed

‎README.md

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,20 @@
1-
# Visualizing-Data-with-Leaflet
1+
2+
# Visualizing-Data-with-Leaflet
3+
4+
For USGS(United States Geological Survey) visualization project, I have visualized earthquakes occurring globally using a live API feed provided by the USGS.The USGS is responsible for providing scientific data about natural hazards, the health of our ecosystems and environment; and the impacts of climate and land-use change. The data is updated every 5 mins, and includes all earthquake data for the Past 7 Days. Additional layer of tectonic plates to understand the relationship between tectonic plates and seismic activites is also included.
5+
6+
Many people don't know how much seismic activity is happening around them all the time. Did you know that Southern California has over 10,000 earthquakes each year alone?
7+
8+
This project is an example of how to use Leaflet.js to visualize geoJSON data. The javascript uses Leaflet layer control using basemaps and overlay maps. Below is a screenshot of the visualization.
9+
10+
11+
Web application is deployed at the following link:
12+
Technology stack used in developing this web application is as follows:
13+
leaflet.js
14+
HTML/CSS/Bootstrap/Javascript/GeoJSON
15+
16+
Data Sources used :
17+
https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
18+
https://raw.githubusercontent.com/fraxen/tectonicplates/master/GeoJSON/PB2002_boundaries.json
19+
20+
Images from the final app:

‎index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Geo JSON</title>
6+
<!-- Leaflet CSS & JS -->
7+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
8+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
9+
<!-- D3 cdn -->
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
11+
<!-- Our CSS -->
12+
<link rel="stylesheet" type="text/css" href="style.css">
13+
14+
<link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
15+
16+
</head>
17+
<body>
18+
<!-- The div where we will inject our map -->
19+
<div id="mymap"></div>
20+
21+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
22+
<script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
23+
<script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
24+
<!-- Our JS -->
25+
<script type="text/javascript" src="logic.js"></script>
26+
</body>
27+
</html>

‎logic.js

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
var API_quakes = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"
2+
console.log (API_quakes)
3+
var API_plates = "https://raw.githubusercontent.com/fraxen/tectonicplates/master/GeoJSON/PB2002_boundaries.json"
4+
console.log (API_plates)
5+
6+
function markerSize(magnitude) {
7+
return magnitude * 4;
8+
};
9+
10+
11+
var earthquakes = new L.LayerGroup();
12+
13+
d3.json(API_quakes, function (geoJson) {
14+
L.geoJSON(geoJson.features, {
15+
pointToLayer: function (geoJsonPoint, latlng) {
16+
return L.circleMarker(latlng, { radius: markerSize(geoJsonPoint.properties.mag) });
17+
},
18+
19+
style: function (geoJsonFeature) {
20+
return {
21+
fillColor: Color(geoJsonFeature.properties.mag),
22+
fillOpacity: 0.7,
23+
weight: 0.1,
24+
color: 'black'
25+
26+
}
27+
},
28+
29+
onEachFeature: function (feature, layer) {
30+
layer.bindPopup(
31+
"<h4 style='text-align:center;'>" + new Date(feature.properties.time) +
32+
"</h4> <hr> <h5 style='text-align:center;'>" + feature.properties.title + "</h5>");
33+
}
34+
}).addTo(earthquakes);
35+
createMap(earthquakes);
36+
});
37+
38+
var plateBoundary = new L.LayerGroup();
39+
40+
d3.json(API_plates, function (geoJson) {
41+
L.geoJSON(geoJson.features, {
42+
style: function (geoJsonFeature) {
43+
return {
44+
weight: 2,
45+
color: 'magenta'
46+
}
47+
},
48+
}).addTo(plateBoundary);
49+
})
50+
51+
52+
function Color(magnitude) {
53+
if (magnitude > 5) {
54+
return 'red'
55+
} else if (magnitude > 4) {
56+
return 'darkorange'
57+
} else if (magnitude > 3) {
58+
return 'tan'
59+
} else if (magnitude > 2) {
60+
return 'yellow'
61+
} else if (magnitude > 1) {
62+
return 'darkgreen'
63+
} else {
64+
return 'lightgreen'
65+
}
66+
};
67+
68+
function createMap() {
69+
70+
var highContrastMap = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
71+
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
72+
maxZoom: 18,
73+
id: 'mapbox.high-contrast',
74+
accessToken: 'pk.eyJ1Ijoib2xhd3JlbmNlNzk5IiwiYSI6ImNqZXZvcTBmdDBuY3oycXFqZThzbjc5djYifQ.-ChNrBxEIvInNJWiHX5pXg'
75+
});
76+
77+
var streetMap = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
78+
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
79+
maxZoom: 18,
80+
id: 'mapbox.streets',
81+
accessToken: 'pk.eyJ1Ijoib2xhd3JlbmNlNzk5IiwiYSI6ImNqZXZvcTBmdDBuY3oycXFqZThzbjc5djYifQ.-ChNrBxEIvInNJWiHX5pXg'
82+
});
83+
84+
var darkMap = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
85+
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
86+
maxZoom: 18,
87+
id: 'mapbox.dark',
88+
accessToken: 'pk.eyJ1Ijoib2xhd3JlbmNlNzk5IiwiYSI6ImNqZXZvcTBmdDBuY3oycXFqZThzbjc5djYifQ.-ChNrBxEIvInNJWiHX5pXg'
89+
});
90+
91+
92+
var satellite = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
93+
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
94+
maxZoom: 18,
95+
id: 'mapbox.satellite',
96+
accessToken: 'pk.eyJ1Ijoib2xhd3JlbmNlNzk5IiwiYSI6ImNqZXZvcTBmdDBuY3oycXFqZThzbjc5djYifQ.-ChNrBxEIvInNJWiHX5pXg'
97+
});
98+
99+
100+
var baseLayers = {
101+
"High Contrast": highContrastMap,
102+
"Street": streetMap,
103+
"Dark": darkMap,
104+
"Satellite": satellite
105+
};
106+
107+
var overlays = {
108+
"Earthquakes": earthquakes,
109+
"Plate Boundaries": plateBoundary,
110+
};
111+
112+
var mymap = L.map('mymap', {
113+
center: [40, -99],
114+
zoom: 4.3,
115+
// timeDimension: true,
116+
// timeDimensionOptions: {
117+
// timeInterval: "2018-04-01/2018-04-05",
118+
// period: "PT1H"
119+
// },
120+
// timeDimensionControl: true,
121+
layers: [streetMap, earthquakes, plateBoundary]
122+
});
123+
124+
L.control.layers(baseLayers, overlays).addTo(mymap);
125+
// L.timeDimension.earthquakes.geoJson(earthquakes).addTo(mymap);
126+
// L.control.timeDimension().addTo(mymap);
127+
// var player = new L.TimeDimension.Player({}, timeDimension).addTo(mymap);
128+
129+
// var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer);
130+
// tdWmsLayer.addTo(map);
131+
132+
var legend = L.control({ position: 'bottomright' });
133+
134+
legend.onAdd = function (map) {
135+
136+
var div = L.DomUtil.create('div', 'info legend'),
137+
magnitude = [0, 1, 2, 3, 4, 5],
138+
labels = [];
139+
140+
div.innerHTML += "<h4 style='margin:4px'>Magnitude</h4>"
141+
142+
for (var i = 0; i < magnitude.length; i++) {
143+
div.innerHTML +=
144+
'<i style="background:' + Color(magnitude[i] + 1) + '"></i> ' +
145+
magnitude[i] + (magnitude[i + 1] ? '&ndash;' + magnitude[i + 1] + '<br>' : '+');
146+
}
147+
148+
return div;
149+
};
150+
legend.addTo(mymap);
151+
}
152+
153+
// createMap()

‎style.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
body {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
6+
#mymap,
7+
body,
8+
html {
9+
height: 100%;
10+
}
11+
12+
13+
.info {
14+
padding: 6px 15px;
15+
background: white;
16+
background: rgba(255,255,255,0.8);
17+
box-shadow: 0 0 15px rgba(0,0,0,0.2);
18+
border-radius: 5px;
19+
}
20+
21+
.legend {
22+
line-height: 18px;
23+
color: #555;
24+
}
25+
.legend i {
26+
width: 18px;
27+
height: 18px;
28+
float: left;
29+
margin-right: 8px;
30+
opacity: 0.7;
31+
}

0 commit comments

Comments
 (0)