Last active
November 28, 2017 17:59
-
-
Save danswick/6435398ba2f37802c2febdde24064e6a to your computer and use it in GitHub Desktop.
USGS Earthquake feed browser
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset='utf-8' /> | |
<title></title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> | |
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.css' rel='stylesheet' /> | |
<style> | |
* { box-sizing: border-box; } | |
html, body, #container { height: 100%; } | |
body { | |
margin:0; | |
padding:0; | |
font-family: helvetica, arial, sans-serif; | |
} | |
#container .feed-heading { | |
height: 60px; | |
padding: 1em 0 0 1em; | |
margin: 0; | |
} | |
#map { | |
width:70%; | |
float: right; | |
height: 100%; | |
position: fixed; | |
right: 0; | |
top: 0; | |
} | |
#feedColumn { | |
width: 30%; | |
float: left; | |
padding: 1em; | |
} | |
#feedSelector { | |
top: 1em; | |
left: 1em; | |
background-color: #fff; | |
} | |
.child-prop, .feed-name, .feed-date { | |
text-transform: capitalize; | |
} | |
.feed-date { | |
width: 50%; | |
border-bottom: 1px solid #999; | |
margin: 2em 0em 1em 0em; | |
padding-bottom: 0.2em; | |
font-weight: bold; | |
} | |
.feed-name { | |
padding: 0.5em; | |
margin: 0 0.5em 0 0; | |
background-color: #777; | |
color: #fff; | |
border-radius: 0.3em; | |
cursor: pointer; | |
transition: all linear 0.2s; | |
border: none; | |
outline: none; | |
font-size: 1em; | |
} | |
.feed-name:hover { | |
background-color: #555; | |
} | |
.child-prop { | |
display: inline-block; | |
margin: 0 0 0.5em 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='container'> | |
<h3 class="feed-heading">USGS Earthquakes</h3> | |
<div id="feedColumn"> | |
<p>Explore the <a href="http://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php">USGS earthquake feed</a> using Mapbox GL JS. Zoom in to click on individual quakes.</p> | |
<div id="feedSelector"></div> | |
</div> | |
<div id='map'></div> | |
</div> | |
<script> | |
var quakeFeeds = { | |
"past hour": { | |
"all earthquakes": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson", | |
"all 2.5+": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_hour.geojson" | |
}, | |
"past day": { | |
"all earthquakes": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson", | |
"all 2.5+": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson", | |
"all 4.5+": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson" | |
}, | |
"past week": { | |
"all earthquakes": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson", | |
"all 2.5+": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson", | |
"all 4.5+": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson" | |
}, | |
"past 30 days": { | |
"all earthquakes": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson", | |
"all 2.5+": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson", | |
"all 4.5+": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_month.geojson", | |
"significant earthquakes": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson" | |
} | |
}; | |
function makeChildProps(obj, currentProp) { | |
var childProps = ''; | |
for (var prop in quakeFeeds[currentProp]) { | |
var el = "<div class='child-prop'><button class='feed-name' data-feedurl='" + quakeFeeds[currentProp][prop] + "'>" + prop + "</button></div>"; | |
childProps += el; | |
} | |
return childProps; | |
} | |
for (var prop in quakeFeeds) { | |
if (!quakeFeeds.hasOwnProperty(prop)) { | |
continue; | |
} | |
$('#feedSelector').append("<div class='feed-date'>" + prop + "</div>" + makeChildProps(quakeFeeds, prop)); | |
console.log(makeChildProps(quakeFeeds, prop)); | |
} | |
$('.feed-name').click(function(e){ | |
var source = map.getSource('earthquakes'); | |
$.ajax({ | |
url: $(e.target).data('feedurl'), | |
complete: function(data) { | |
source.setData(data.responseJSON); | |
console.log(data.responseJSON); | |
} | |
}); | |
}); | |
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og'; | |
var map = new mapboxgl.Map({ | |
container: 'map', | |
style: 'mapbox://styles/mapbox/dark-v8', | |
center: [-103.59179687498357, 40.66995747013945], | |
zoom: 3, | |
}); | |
var usgsEarthquakes = $.ajax({ | |
url: "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_month.geojson" | |
}).done(function(data){ | |
map.on('load', function(){ | |
// Add a new source from our GeoJSON data and set the | |
// 'cluster' option to true. | |
map.addSource("earthquakes", { | |
type: "geojson", | |
data: data, | |
cluster: true, | |
clusterMaxZoom: 14, // Max zoom to cluster points on | |
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50) | |
}); | |
// Use the earthquakes source to create five layers: | |
// One for non-clustered markers, three for each cluster category, | |
// and one for cluster labels. | |
map.addLayer({ | |
"id": "non-cluster-markers", | |
"type": "circle", | |
"source": "earthquakes", | |
"paint": { | |
"circle-radius": 17, | |
"circle-color": "#000", | |
"circle-opacity": 0.7, | |
"circle-blur": 0.2 | |
} | |
}); | |
map.addLayer({ | |
"id": "non-cluster-label", | |
"type": "symbol", | |
"source": "earthquakes", | |
"layout": { | |
"text-field": "{mag}", | |
"text-font": [ | |
"DIN Offc Pro Medium", | |
"Arial Unicode MS Bold" | |
], | |
"text-size": 12 | |
}, | |
"paint": { | |
"text-color": "#eee" | |
} | |
}); | |
// Display the earthquake data in three layers, each filtered to a range of | |
// count values. Each range gets a different fill color. | |
var layers = [ | |
[100, '#f28cb1'], | |
[20, '#f1f075'], | |
[0, '#51bbd6'] | |
]; | |
layers.forEach(function (layer, i) { | |
map.addLayer({ | |
"id": "cluster-" + i, | |
"type": "circle", | |
"source": "earthquakes", | |
"paint": { | |
"circle-color": layer[1], | |
"circle-radius": 18 | |
}, | |
"filter": i == 0 ? | |
[">=", "point_count", layer[0]] : | |
["all", | |
[">=", "point_count", layer[0]], | |
["<", "point_count", layers[i - 1][0]]] | |
}); | |
}); | |
// Add a layer for the clusters' count labels | |
map.addLayer({ | |
"id": "cluster-count", | |
"type": "symbol", | |
"source": "earthquakes", | |
"layout": { | |
"text-field": "{point_count}", | |
"text-font": [ | |
"DIN Offc Pro Medium", | |
"Arial Unicode MS Bold" | |
], | |
"text-size": 12 | |
} | |
}); | |
map.on('mousemove', function (e) { | |
var features = map.queryRenderedFeatures(e.point, { layers: ['non-cluster-markers'] }); | |
map.getCanvas().style.cursor = (features.length) ? 'pointer' : ''; | |
}); | |
map.on('click', function (e) { | |
var features = map.queryRenderedFeatures(e.point, { layers: ['non-cluster-markers'] }); | |
if (!features.length) { | |
return; | |
} | |
var feature = features[0]; | |
// Populate the popup and set its coordinates | |
// based on the feature found. | |
var popupContent = "<h3>" + feature.properties.title + "</h3><p><a href='" + feature.properties.url + "'>Link</a></p>"; | |
var popup = new mapboxgl.Popup() | |
.setLngLat(feature.geometry.coordinates) | |
.setHTML(popupContent) | |
.addTo(map); | |
}); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment