D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
darrenjaworski
Full window
Github gist
live earthquakes worldwide
<!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://api.tiles.mapbox.com/mapbox-gl-js/v0.11.4/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.4/mapbox-gl.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id='map'></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiZGFycmVuamF3b3Jza2kiLCJhIjoiZmQ4OTYyNzJjYzc0OThiZTFjMmViMDE3ZmI0NTJmOTgifQ.3XwMxZz97E3nuPEZLoxohw'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v8', zoom: 2, center: [-170, 25] }); var url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson'; var source = new mapboxgl.GeoJSONSource({ data: url }); window.setInterval(function() { source.setData(url); console.log(source) }, 2000); map.on('style.load', function () { map.addSource('earthquake', source); map.addLayer({ "id": "earthquake", "type": "circle", "source": "earthquake", "paint": { "circle-radius": "2", "circle-color": "#ffffff", "circle-opacity": ".9" } }); }); </script> </body> </html>
https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.4/mapbox-gl.js