index.earthquake.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://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/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.eyJ1Ijoic29yZmxleCIsImEiOiJjaW9rY3BpaHQwMDBjdmtqYm9kYTNoNWl1In0.Dwv1ZDYU4uDwPuVa62zcKA';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
    center: [-96, 37.8], // starting position
    zoom: 3 // starting zoom
});

map.on('style.load', function() {
   map.addSource("quakes", {
       "type": "geojson",
       "data": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson"
   });

   // Once you have a datasource defined, you need to add a layer from that data source to the map.
   // We could, for example, add only earthquakes magnitude 4.0+. Here we just tell it
   // to take all of the data and style it as a circle.
   map.addLayer({
     "id": "quakes", // An id for this layer
     "type": "circle", // As a point layer, we need style a symbol for each point.
     "source": "quakes", // The source layer we defined above
     "paint": {
         "circle-radius": 10,
         "circle-color": "#ff0000",
	 "circle-opacity": {
	     "stops": [[3, 0.2], [15, 0.8]]
          }
     }
   });
});

</script>

</body>
</html>