peterqliu/index.html

## 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.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%; }
        .mapboxgl-popup-content {padding:10px;}
        .mapboxgl-popup {pointer-events:none;}
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicGV0ZXJxbGl1IiwiYSI6ImpvZmV0UEEifQ._D4bRmVcGfJvo1wjuOpA1g';
var ne = new mapboxgl.LngLat(-200, 90);
var sw = new mapboxgl.LngLat(180, -90);
var llb = new mapboxgl.LngLatBounds(sw, ne);

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/dark-v8', //stylesheet location
    center: [-74.50, 40], // starting position
    zoom: 0, // starting zoom
    maxBounds: llb
});

$.ajax({url:'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson'}).done(function(json){
    console.log(json)
    var timeObj = {
                    "property": 'time',
                    "stops": [
                      [Date.now()-259200000, '#fff'],
                      [Date.now(), 'white']
                    ]
                }
    map.on('load', function(err, resp){
        map.addSource('quakes', {
            type: 'geojson',
            data: {
                "type": "FeatureCollection",
                "features": []
            }
        })
        .addLayer({
            "id": "quake",
            "type": "circle",
            "source": "quakes",
            "layout": {
            },
            "paint": {
                //"circle-radius-transition": {duration:200},
                "circle-color": "hsl(204, 33%, 32%)",
                "circle-opacity": {
                    "base": 1,
                    'property': 'mag',
                    "stops": [
                      [3, 0.01],
                      [6, 0.4]

                    ]
                },
                'circle-radius': {
                    'property': 'mag',
                    "base": 1.5,
                    'stops': [
                        [{zoom: 0,  value: 3}, 5],
                        [{zoom: 0,  value: 6}, 48],
                        [{zoom: 11, value: 3}, 24],
                        [{zoom: 11, value: 6}, 256],
                        [{zoom: 20, value: 3}, 200],
                        [{zoom: 20, value: 6}, 1800]
                    ]
                },
                'circle-blur': 1
            }
        })
        .addLayer({
            "id": "smalldot",
            "type": "circle",
            "source": "quakes",
            "layout": {
            },
            "paint": {
                "circle-color": timeObj,
                'circle-radius': {
                    "base": 1.25,
                    "stops": [
                      [0, 0.75],
                      [20, 10]
                    ]
                }
            }
        });
        map.getSource('quakes').setData(json);
            var popup = new mapboxgl.Popup({
                closeButton: false,
                closeOnClick: false
            })
        map.on('mousemove', function(e) {
            var feature = map.queryRenderedFeatures([[e.point.x-5,e.point.y-5],[e.point.x+5,e.point.y+5]], {layers:['smalldot']})[0];
                popup.remove();

            if (feature) map.getCanvas().style.cursor = 'pointer' ;

            var people = feature.properties.felt>0 ? feature.properties.felt+' people' : 'nobody'
            popup
            .setLngLat(feature.geometry.coordinates)
                .setHTML('<h2 style="float:left; margin-right:10px">'+feature.properties.mag.toFixed(1)+'</h2>'+feature.properties.place+'<div><div>'+((Date.now()-feature.properties.time)/86400000).toFixed(0)+' days ago ('+people+' felt it)</div>')
                .addTo(map);
        });
    })
})
</script>

</body>
</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.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%; }
	.mapboxgl-popup-content {padding:10px;}
	.mapboxgl-popup {pointer-events:none;}
	</style>
	</head>
	<body>

	<div id='map'></div>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoicGV0ZXJxbGl1IiwiYSI6ImpvZmV0UEEifQ._D4bRmVcGfJvo1wjuOpA1g';
	var ne = new mapboxgl.LngLat(-200, 90);
	var sw = new mapboxgl.LngLat(180, -90);
	var llb = new mapboxgl.LngLatBounds(sw, ne);

	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/dark-v8', //stylesheet location
	center: [-74.50, 40], // starting position
	zoom: 0, // starting zoom
	maxBounds: llb
	});

	$.ajax({url:'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson'}).done(function(json){
	console.log(json)
	var timeObj = {
	"property": 'time',
	"stops": [
	[Date.now()-259200000, '#fff'],
	[Date.now(), 'white']
	]
	}
	map.on('load', function(err, resp){
	map.addSource('quakes', {
	type: 'geojson',
	data: {
	"type": "FeatureCollection",
	"features": []
	}
	})
	.addLayer({
	"id": "quake",
	"type": "circle",
	"source": "quakes",
	"layout": {
	},
	"paint": {
	//"circle-radius-transition": {duration:200},
	"circle-color": "hsl(204, 33%, 32%)",
	"circle-opacity": {
	"base": 1,
	'property': 'mag',
	"stops": [
	[3, 0.01],
	[6, 0.4]

	]
	},
	'circle-radius': {
	'property': 'mag',
	"base": 1.5,
	'stops': [
	[{zoom: 0, value: 3}, 5],
	[{zoom: 0, value: 6}, 48],
	[{zoom: 11, value: 3}, 24],
	[{zoom: 11, value: 6}, 256],
	[{zoom: 20, value: 3}, 200],
	[{zoom: 20, value: 6}, 1800]
	]
	},
	'circle-blur': 1
	}
	})
	.addLayer({
	"id": "smalldot",
	"type": "circle",
	"source": "quakes",
	"layout": {
	},
	"paint": {
	"circle-color": timeObj,
	'circle-radius': {
	"base": 1.25,
	"stops": [
	[0, 0.75],
	[20, 10]
	]
	}
	}
	});
	map.getSource('quakes').setData(json);
	var popup = new mapboxgl.Popup({
	closeButton: false,
	closeOnClick: false
	})
	map.on('mousemove', function(e) {
	var feature = map.queryRenderedFeatures([[e.point.x-5,e.point.y-5],[e.point.x+5,e.point.y+5]], {layers:['smalldot']})[0];
	popup.remove();

	if (feature) map.getCanvas().style.cursor = 'pointer' ;

	var people = feature.properties.felt>0 ? feature.properties.felt+' people' : 'nobody'
	popup
	.setLngLat(feature.geometry.coordinates)
	.setHTML('<h2 style="float:left; margin-right:10px">'+feature.properties.mag.toFixed(1)+'</h2>'+feature.properties.place+'<div><div>'+((Date.now()-feature.properties.time)/86400000).toFixed(0)+' days ago ('+people+' felt it)</div>')
	.addTo(map);
	});
	})
	})
	</script>

	</body>
	</html>