ryanbaumann · August 9, 2016 16:42
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Security incidents 2015</title>
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
    <script src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='http://interactive.unocha.org/wrl/js/csv2geojson.js'></script>
    <!-- map element style  -->
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    
    #map {
        position: absolute;
        top: 0;
        bottom: 0px;
        height: 100%;
        width: 100%;
        background-color: #cfe2f7;
    }
    </style>
    <style>
    .mapboxgl-popup {
        max-width: 400px;
        font: 20px/30px 'Roboto', sans-serif;
    }
    </style>
 </head>

 <body>
    <div id='map'>
    </div>
    <script>
    // Create the base map
    mapboxgl.accessToken = 'pk.eyJ1IjoicGFsbWVyb3AiLCJhIjoiY2lmdHpvdmo4MWdoaXU2a3MyaGc5bWw2aSJ9.Gk4vnuaihSNI0IoBcKFWEA';

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/palmerop/cirf3mszc000ig9nhdq7280ka',
        zoom: 2,
        minZoom: 1,
        maxZoom: 3,
        center: [0, 20],
        pitch: 0
    });


    // Add circles
    map.on('load', function() {
        map.addSource('incidents', {
            type: 'vector',
            url: 'mapbox://palmerop.7irmmvis'
        });
        map.addLayer({
            "id": "incidents",
            "type": "circle",
            "source": "incidents",
            "source-layer": "wrl_incidents_2015-0c7437",
            "paint": {
                "circle-color": 'rgba(46,164,221,1)',
                "circle-radius": {
                    "property": 'INCIDENTS',
                    "type": 'interval', //exponential, interval, or categorical
                    "stops": [
                        [1, 2],
                        [5, 4],
                        [10, 6],
                        [25, 8],
                        [50, 10],
                        [75, 15],
                        [101, 20]
                    ]
                }
            }
            /*"paint": {
 			"circle-color": 'rgba(46,164,221,1)',
 			"circle-radius": 10,
 			"circle-blur": 0
        }*/
        });
    });

    // Add controls
    map.addControl(new mapboxgl.Navigation({
        position: 'top-right'
    }));

    // When a click event occurs near a point, open a popup at the location of
    // the feature, with description HTML from its properties.
    map.on('click', function(e) {
        var features = map.queryRenderedFeatures(e.point, {
            layers: ['incidents']
        });

        if (!features.length) {
            return;
        }

        var feature = features[0];

        var popup = new mapboxgl.Popup({
                closeOnClick: true
            })
            .setLngLat(map.unproject(e.point))
            //        .closeButton(true)
            .setHTML(feature.properties.INCIDENTS)
            .addTo(map);
    });

    // Use the same approach as above to indicate that the symbols are clickable
    // by changing the cursor style to 'pointer'.
    map.on('mousemove', function(e) {
        var features = map.queryRenderedFeatures(e.point, {
            layers: ['incidents']
        });
        map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
    });
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Security incidents 2015</title>
	<script src='https://api.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
	<script src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
	<script type="text/javascript" src='http://interactive.unocha.org/wrl/js/csv2geojson.js'></script>
	<!-- map element style -->
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#map {
	position: absolute;
	top: 0;
	bottom: 0px;
	height: 100%;
	width: 100%;
	background-color: #cfe2f7;
	}
	</style>
	<style>
	.mapboxgl-popup {
	max-width: 400px;
	font: 20px/30px 'Roboto', sans-serif;
	}
	</style>
	</head>

	<body>
	<div id='map'>
	</div>
	<script>
	// Create the base map
	mapboxgl.accessToken = 'pk.eyJ1IjoicGFsbWVyb3AiLCJhIjoiY2lmdHpvdmo4MWdoaXU2a3MyaGc5bWw2aSJ9.Gk4vnuaihSNI0IoBcKFWEA';

	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/palmerop/cirf3mszc000ig9nhdq7280ka',
	zoom: 2,
	minZoom: 1,
	maxZoom: 3,
	center: [0, 20],
	pitch: 0
	});


	// Add circles
	map.on('load', function() {
	map.addSource('incidents', {
	type: 'vector',
	url: 'mapbox://palmerop.7irmmvis'
	});
	map.addLayer({
	"id": "incidents",
	"type": "circle",
	"source": "incidents",
	"source-layer": "wrl_incidents_2015-0c7437",
	"paint": {
	"circle-color": 'rgba(46,164,221,1)',
	"circle-radius": {
	"property": 'INCIDENTS',
	"type": 'interval', //exponential, interval, or categorical
	"stops": [
	[1, 2],
	[5, 4],
	[10, 6],
	[25, 8],
	[50, 10],
	[75, 15],
	[101, 20]
	]
	}
	}
	/*"paint": {
	"circle-color": 'rgba(46,164,221,1)',
	"circle-radius": 10,
	"circle-blur": 0
	}*/
	});
	});

	// Add controls
	map.addControl(new mapboxgl.Navigation({
	position: 'top-right'
	}));

	// When a click event occurs near a point, open a popup at the location of
	// the feature, with description HTML from its properties.
	map.on('click', function(e) {
	var features = map.queryRenderedFeatures(e.point, {
	layers: ['incidents']
	});

	if (!features.length) {
	return;
	}

	var feature = features[0];

	var popup = new mapboxgl.Popup({
	closeOnClick: true
	})
	.setLngLat(map.unproject(e.point))
	// .closeButton(true)
	.setHTML(feature.properties.INCIDENTS)
	.addTo(map);
	});

	// Use the same approach as above to indicate that the symbols are clickable
	// by changing the cursor style to 'pointer'.
	map.on('mousemove', function(e) {
	var features = map.queryRenderedFeatures(e.point, {
	layers: ['incidents']
	});
	map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
	});
	</script>
	</body>

	</html>