mikepaszkiewicz/drivetimes.html

## drivetimes.html
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Get started with the Isochrone API</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <!-- Import Mapbox GL JS  -->
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
    <!-- Import Assembly -->
    <link href='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.min.css' rel='stylesheet'>
    <script src='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.js'> </script>
    <!-- Import jQuery -->
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- Create a container for the map -->
    <div id='map'></div>

    <!-- Create a sidebar with buttons for each option -->
    <div class='absolute fl my24 mx24 py24 px24 bg-gray-faint round'>
        <form id='params'>
            <h4 class='txt-m txt-bold mb6'>Chose a travel mode:</h4>
            <div class='mb12 mr12 toggle-group align-center'>
                <label class='toggle-container'>
                    <input name='profile' type='radio' value='walking'>
                    <div class='toggle toggle--active-null toggle--null'>Walking</div>
                </label>
                <label class='toggle-container'>
                    <input name='profile' type='radio' value='cycling' checked>
                    <div class='toggle toggle--active-null toggle--null'>Cycling</div>
                </label>
                <label class='toggle-container'>
                    <input name='profile' type='radio' value='driving'>
                    <div class='toggle toggle--active-null toggle--null'>Driving</div>
                </label>
            </div>
            <h4 class='txt-m txt-bold mb6'>Chose a maximum duration:</h4>
            <div class='mb12 mr12 toggle-group align-center'>
                <label class='toggle-container'>
                    <input name='duration' type='radio' value='10' checked>
                    <div class='toggle toggle--active-null toggle--null'>10 min</div>
                </label>
                <label class='toggle-container'>
                    <input name='duration' type='radio' value='20'>
                    <div class='toggle toggle--active-null toggle--null'>20 min</div>
                </label>
                <label class='toggle-container'>
                    <input name='duration' type='radio' value='30'>
                    <div class='toggle toggle--active-null toggle--null'>30 min</div>
                </label>
        </form>
    </div>

    <script>
        // Add your Mapbox access token
        mapboxgl.accessToken = 'pk.eyJ1IjoiaGFiaXRhdG1pa2UiLCJhIjoiY2lsdHVpMWQxMDBjdnVza3NyNnV6Y3N3NCJ9.dWupCOy48vAo8BocejIdtg';
        var lon = -75.3327494
        var lat = 40.0038557
        var map = new mapboxgl.Map({
            container: 'map', // Specify the container ID
            style: 'mapbox://styles/mapbox/streets-v11', // Specify which map style to use
            center: [lon, lat], // Specify the starting position
            zoom: 11.5, // Specify the starting zoom
        });

        // Create variables to use in getIso()
        var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';

        var profile = 'cycling';
        var minutes = 10;

        // Create a function that sets up the Isochrone API query then makes an Ajax call
        function getIso() {
            var query = urlBase + profile + '/' + lon + ',' + lat + '?contours_minutes=' + minutes + '&polygons=true&access_token=' + mapboxgl.accessToken;

            $.ajax({
                method: 'GET',
                url: query
            }).done(function (data) {
                // Set the 'iso' source's data to what's returned by the API query
                map.getSource('iso').setData(data);
            })
        };

        var marker = new mapboxgl.Marker({
            'color': '#314ccd'
        });

        // Create a LngLat object to use in the marker initialization
        // https://docs.mapbox.com/mapbox-gl-js/api/#lnglat
        var lngLat = {
            lon: lon,
            lat: lat
        };

        map.on('load', function () {
            // When the map loads, add the source and layer
            map.addSource('iso', {
                type: 'geojson',
                data: {
                    "type": 'FeatureCollection',
                    "features": []
                }
            });

            map.addLayer({
                'id': 'isoLayer',
                'type': 'fill',
                // Use "iso" as the data source for this layer
                'source': 'iso',
                'layout': {},
                'paint': {
                    // The fill color for the layer is set to a light purple
                    'fill-color': '#5a3fc0',
                    'fill-opacity': 0.3
                }
            }, "poi-label");

            // Initialize the marker at the query coordinates
            marker.setLngLat(lngLat).addTo(map);

            // Make the API call
            getIso();
        });

        // Target the "params" form in the HTML portion of your code
        var params = document.getElementById('params');

        // When a user changes the value of profile or duration by clicking a button, change the parameter's value and make the API query again
        params.addEventListener('change', function (e) {
            if (e.target.name === 'profile') {
                profile = e.target.value;
                getIso();
            } else if (e.target.name === 'duration') {
                minutes = e.target.value;
                getIso();
            }
        });
    </script>
</body>

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

	<head>
	<meta charset='utf-8' />
	<title>Get started with the Isochrone API</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<!-- Import Mapbox GL JS -->
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
	<!-- Import Assembly -->
	<link href='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.min.css' rel='stylesheet'>
	<script src='https://api.mapbox.com/mapbox-assembly/v0.23.2/assembly.js'> </script>
	<!-- Import jQuery -->
	<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}
	</style>
	</head>

	<body>
	<!-- Create a container for the map -->
	<div id='map'></div>

	<!-- Create a sidebar with buttons for each option -->
	<div class='absolute fl my24 mx24 py24 px24 bg-gray-faint round'>
	<form id='params'>
	<h4 class='txt-m txt-bold mb6'>Chose a travel mode:</h4>
	<div class='mb12 mr12 toggle-group align-center'>
	<label class='toggle-container'>
	<input name='profile' type='radio' value='walking'>
	<div class='toggle toggle--active-null toggle--null'>Walking</div>
	</label>
	<label class='toggle-container'>
	<input name='profile' type='radio' value='cycling' checked>
	<div class='toggle toggle--active-null toggle--null'>Cycling</div>
	</label>
	<label class='toggle-container'>
	<input name='profile' type='radio' value='driving'>
	<div class='toggle toggle--active-null toggle--null'>Driving</div>
	</label>
	</div>
	<h4 class='txt-m txt-bold mb6'>Chose a maximum duration:</h4>
	<div class='mb12 mr12 toggle-group align-center'>
	<label class='toggle-container'>
	<input name='duration' type='radio' value='10' checked>
	<div class='toggle toggle--active-null toggle--null'>10 min</div>
	</label>
	<label class='toggle-container'>
	<input name='duration' type='radio' value='20'>
	<div class='toggle toggle--active-null toggle--null'>20 min</div>
	</label>
	<label class='toggle-container'>
	<input name='duration' type='radio' value='30'>
	<div class='toggle toggle--active-null toggle--null'>30 min</div>
	</label>
	</form>
	</div>

	<script>
	// Add your Mapbox access token
	mapboxgl.accessToken = 'pk.eyJ1IjoiaGFiaXRhdG1pa2UiLCJhIjoiY2lsdHVpMWQxMDBjdnVza3NyNnV6Y3N3NCJ9.dWupCOy48vAo8BocejIdtg';
	var lon = -75.3327494
	var lat = 40.0038557
	var map = new mapboxgl.Map({
	container: 'map', // Specify the container ID
	style: 'mapbox://styles/mapbox/streets-v11', // Specify which map style to use
	center: [lon, lat], // Specify the starting position
	zoom: 11.5, // Specify the starting zoom
	});

	// Create variables to use in getIso()
	var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';

	var profile = 'cycling';
	var minutes = 10;

	// Create a function that sets up the Isochrone API query then makes an Ajax call
	function getIso() {
	var query = urlBase + profile + '/' + lon + ',' + lat + '?contours_minutes=' + minutes + '&polygons=true&access_token=' + mapboxgl.accessToken;

	$.ajax({
	method: 'GET',
	url: query
	}).done(function (data) {
	// Set the 'iso' source's data to what's returned by the API query
	map.getSource('iso').setData(data);
	})
	};

	var marker = new mapboxgl.Marker({
	'color': '#314ccd'
	});

	// Create a LngLat object to use in the marker initialization
	// https://docs.mapbox.com/mapbox-gl-js/api/#lnglat
	var lngLat = {
	lon: lon,
	lat: lat
	};

	map.on('load', function () {
	// When the map loads, add the source and layer
	map.addSource('iso', {
	type: 'geojson',
	data: {
	"type": 'FeatureCollection',
	"features": []
	}
	});

	map.addLayer({
	'id': 'isoLayer',
	'type': 'fill',
	// Use "iso" as the data source for this layer
	'source': 'iso',
	'layout': {},
	'paint': {
	// The fill color for the layer is set to a light purple
	'fill-color': '#5a3fc0',
	'fill-opacity': 0.3
	}
	}, "poi-label");

	// Initialize the marker at the query coordinates
	marker.setLngLat(lngLat).addTo(map);

	// Make the API call
	getIso();
	});

	// Target the "params" form in the HTML portion of your code
	var params = document.getElementById('params');

	// When a user changes the value of profile or duration by clicking a button, change the parameter's value and make the API query again
	params.addEventListener('change', function (e) {
	if (e.target.name === 'profile') {
	profile = e.target.value;
	getIso();
	} else if (e.target.name === 'duration') {
	minutes = e.target.value;
	getIso();
	}
	});
	</script>
	</body>

	</html>