Skip to content

Instantly share code, notes, and snippets.

@peterqliu

peterqliu/index.html

Forked from danswick/index.html
Last active May 25, 2016 05:50
Show Gist options
  • Save peterqliu/725cf4082711ae05e7a4c67e36c47873 to your computer and use it in GitHub Desktop.
Save peterqliu/725cf4082711ae05e7a4c67e36c47873 to your computer and use it in GitHub Desktop.
Download ZIP
USGS Earthquake feed browser
Raw
index.html
<!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.eyJ1IjoiZGFuc3dpY2siLCJhIjoieUZiWmwtVSJ9.0cPQywdbPVmvHiHJ6NwdXA';
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