Created
April 6, 2018 13:02
-
-
Save xujenna/e1a741960a16ee66981b1b5d7620388a to your computer and use it in GitHub Desktop.
earthquake mapping with mapbox gl
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
| <!-- Documentation: https://www.mapbox.com/mapbox-gl-js/style-spec/#sources-geojson --> | |
| <!-- Mapbox styles: https://github.com/mapbox/mapbox-gl-styles --> | |
| <!-- Earthquake data: https://earthquake.usgs.gov/ --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, | |
| #map { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 100%; | |
| } | |
| </style> | |
| <title> Earthquakes on January 30, 2018 </title> | |
| <script src='https://api.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script> | |
| <link href='https://api.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' /> | |
| </head> | |
| <body> | |
| <div id="map"> </div> | |
| <script> | |
| mapboxgl.accessToken = 'pk.eyJ1IjoieHVqZW5uYSIsImEiOiJjamY5dmdhZHYzNGs2MzNwZGhnajg2NGwyIn0.lpy8HGW02YVRw819jbPLGQ'; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', // you need this | |
| style: 'mapbox://styles/mapbox/dark-v9', // you also need this | |
| center: [-74.0006213, 40.7229971], // [long, lat] Different than leaflet, different than google maps, same as geojson! | |
| zoom: 4, | |
| }); | |
| // Source is where the data is coming from, layer is what you're going to do with it. | |
| map.on('load', function() { | |
| map.addSource('earthquake', { | |
| 'type': 'geojson', | |
| 'data': 'allday.json' | |
| }); | |
| map.addLayer({ | |
| 'id': 'earthquake', | |
| 'type': 'circle', | |
| 'source': 'earthquake', | |
| 'paint': { | |
| 'circle-radius': { | |
| // make the circles larger as the user zooms from 12 to 22 | |
| 'property': 'mag', | |
| 'stops': [ | |
| [0, 5], | |
| [6, 20] | |
| ] | |
| }, | |
| 'circle-color': { | |
| 'property': 'mag', | |
| 'stops': [ | |
| [0, 'yellow'], | |
| [6, 'red'] | |
| ] | |
| }, | |
| 'circle-opacity': { | |
| 'stops': [ | |
| [0, 0.1], | |
| [6, 0.75] | |
| ] | |
| } | |
| } | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment