jennynottingham/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo: Get started with the Isochrone API</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css"
rel="stylesheet"
/>
<!-- Mapbox 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>
<!-- 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>
<div id="map"></div>

<div class="absolute fl my24 mx24 py24 px24 bg-gray-faint round">
<form id="params">
<h4 class="txt-m txt-bold mb6">Choose 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">Choose 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>
</div>
</form>
</div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiamVubnlub3R0aW5naGFtIiwiYSI6ImNqY2F3dnU0djB3YmkycW81ZWdvNnF6cjcifQ.L3oEWYqpIwkjelfsH8LY_Q';

var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/jennynottingham/ckns0i0z5172w17o020o0z4d1', // stylesheet
center: [-77.0369,38.895], // starting position [lng, lat]
zoom: 11.5 // starting zoom
});

// Target the params form in the HTML
var params = document.getElementById('params');

// Create variables to use in getIso()
var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';
var lon = -77.034;
var lat = 38.899;
var profile = 'cycling';
var minutes = 10;

// Set up a marker that you can use to show the query's coordinates
var marker = new mapboxgl.Marker({
'color': '#90ee90'
});

// 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
};

// 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);
});
}

// 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();
}
});

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',
'source': 'iso',
'layout': {},
'paint': {
'fill-color': '#000000',
'fill-opacity': 0.3
}
},
'poi-label'
);

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

// Make the API call
getIso();
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Demo: Get started with the Isochrone API</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- Mapbox GL JS -->
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
	<link
	href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css"
	rel="stylesheet"
	/>
	<!-- Mapbox 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>
	<!-- 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>
	<div id="map"></div>

	<div class="absolute fl my24 mx24 py24 px24 bg-gray-faint round">
	<form id="params">
	<h4 class="txt-m txt-bold mb6">Choose 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">Choose 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>
	</div>
	</form>
	</div>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoiamVubnlub3R0aW5naGFtIiwiYSI6ImNqY2F3dnU0djB3YmkycW81ZWdvNnF6cjcifQ.L3oEWYqpIwkjelfsH8LY_Q';

	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/jennynottingham/ckns0i0z5172w17o020o0z4d1', // stylesheet
	center: [-77.0369,38.895], // starting position [lng, lat]
	zoom: 11.5 // starting zoom
	});

	// Target the params form in the HTML
	var params = document.getElementById('params');

	// Create variables to use in getIso()
	var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';
	var lon = -77.034;
	var lat = 38.899;
	var profile = 'cycling';
	var minutes = 10;

	// Set up a marker that you can use to show the query's coordinates
	var marker = new mapboxgl.Marker({
	'color': '#90ee90'
	});

	// 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
	};

	// 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);
	});
	}

	// 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();
	}
	});

	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',
	'source': 'iso',
	'layout': {},
	'paint': {
	'fill-color': '#000000',
	'fill-opacity': 0.3
	}
	},
	'poi-label'
	);

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

	// Make the API call
	getIso();
	});
	</script>
	</body>
	</html>