lemwerks · September 11, 2019 04:26
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset='utf-8' />
    <title>tacography</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.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.eyJ1IjoibGVtd2Vya3MiLCJhIjoiY2puNHp6dzR5M2c1dzNrbjE2aTd5dmp0NSJ9.ajj5Mi0uytGD6EVMN-LxCw'
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/lemwerks/cjzelhwb00dzz1cq520ffe4i0',
        center: [-77.0338,38.8998],
        zoom: 13
      });

      var url = 'https://api.mapbox.com/isochrone/v1/mapbox/walking/-77.0338,38.8998?contours_minutes=5,10,15,20&contours_colors=6706ce,04e813,4286f4&polygons=true&access_token=pk.eyJ1Ijoicmlhc3RyYWQiLCJhIjoiY2pqcmJ5eXJ4MG9hYjNrbmZqNTdlMXIxOSJ9.k7qcqkM4mD2IDbUDjbt_bw'
      var isochrones

      map.on('style.load', function() {
        fetch(url)
          .then(res => res.json())
          .then((out) => {
            isochrones = out;
            map.addSource("isochrones", {
              "type": "geojson",
              "data": isochrones
            });
 // Add isochrones layer. 
            map.addLayer({
              "id": "walking-distances",
              "type": "fill",
              "source": "isochrones",
              "paint": {
                "fill-color": "#fee012",
                "fill-opacity": 0.4,
                "fill-outline-color": "#000000"
              }
            }, "taco-spots"); //Show tacos on top of isochrones. 

            map.on('load', function () {
    
    // When a click event occurs on a feature in the places layer, open a popup at the
    // location of the feature, with description HTML from its properties.
    map.on('click', 'taco-spots', function (e) {
        var coordinates = e.features[0].geometry.coordinates.slice();
        var name = e.features[0].properties.name;
        var rating = e.features[0].properties.rating;

        // Ensure that if the map is zoomed out such that multiple
        // copies of the feature are visible, the popup appears
        // over the copy being pointed to.
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
        }

        new mapboxgl.Popup()
            .setLngLat(coordinates)
            .setHTML(`<h3>${ name }</h3> Rating: ${ rating }`)
            .addTo(map);
    });

    // Change the cursor to a pointer when the mouse is over the places layer.
    map.on('mouseenter', 'taco-spots', function () {
        map.getCanvas().style.cursor = 'pointer';
    });

    // Change it back to a pointer when it leaves.
    map.on('mouseleave', 'taco-spots', function () {
        map.getCanvas().style.cursor = '';
    });
 });
          })
          .catch(err => console.error(err));
      });
    </script>
 </body>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>tacography</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.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.eyJ1IjoibGVtd2Vya3MiLCJhIjoiY2puNHp6dzR5M2c1dzNrbjE2aTd5dmp0NSJ9.ajj5Mi0uytGD6EVMN-LxCw'
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/lemwerks/cjzelhwb00dzz1cq520ffe4i0',
	center: [-77.0338,38.8998],
	zoom: 13
	});

	var url = 'https://api.mapbox.com/isochrone/v1/mapbox/walking/-77.0338,38.8998?contours_minutes=5,10,15,20&contours_colors=6706ce,04e813,4286f4&polygons=true&access_token=pk.eyJ1Ijoicmlhc3RyYWQiLCJhIjoiY2pqcmJ5eXJ4MG9hYjNrbmZqNTdlMXIxOSJ9.k7qcqkM4mD2IDbUDjbt_bw'
	var isochrones

	map.on('style.load', function() {
	fetch(url)
	.then(res => res.json())
	.then((out) => {
	isochrones = out;
	map.addSource("isochrones", {
	"type": "geojson",
	"data": isochrones
	});
	// Add isochrones layer.
	map.addLayer({
	"id": "walking-distances",
	"type": "fill",
	"source": "isochrones",
	"paint": {
	"fill-color": "#fee012",
	"fill-opacity": 0.4,
	"fill-outline-color": "#000000"
	}
	}, "taco-spots"); //Show tacos on top of isochrones.

	map.on('load', function () {

	// When a click event occurs on a feature in the places layer, open a popup at the
	// location of the feature, with description HTML from its properties.
	map.on('click', 'taco-spots', function (e) {
	var coordinates = e.features[0].geometry.coordinates.slice();
	var name = e.features[0].properties.name;
	var rating = e.features[0].properties.rating;

	// Ensure that if the map is zoomed out such that multiple
	// copies of the feature are visible, the popup appears
	// over the copy being pointed to.
	while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
	coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
	}

	new mapboxgl.Popup()
	.setLngLat(coordinates)
	.setHTML(`<h3>${ name }</h3> Rating: ${ rating }`)
	.addTo(map);
	});

	// Change the cursor to a pointer when the mouse is over the places layer.
	map.on('mouseenter', 'taco-spots', function () {
	map.getCanvas().style.cursor = 'pointer';
	});

	// Change it back to a pointer when it leaves.
	map.on('mouseleave', 'taco-spots', function () {
	map.getCanvas().style.cursor = '';
	});
	});
	})
	.catch(err => console.error(err));
	});
	</script>
	</body>