Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Drive time map
<!DOCTYPE html>
<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=''></script>
<link href='' rel='stylesheet' />
<!-- Import Assembly -->
<link href='' rel='stylesheet'>
<script src=''> </script>
<!-- Import jQuery -->
<script src=''></script>
body {
margin: 0;
padding: 0;
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
<!-- 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 class='toggle-container'>
<input name='profile' type='radio' value='cycling' checked>
<div class='toggle toggle--active-null toggle--null'>Cycling</div>
<label class='toggle-container'>
<input name='profile' type='radio' value='driving'>
<div class='toggle toggle--active-null toggle--null'>Driving</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 class='toggle-container'>
<input name='duration' type='radio' value='20'>
<div class='toggle toggle--active-null toggle--null'>20 min</div>
<label class='toggle-container'>
<input name='duration' type='radio' value='30'>
<div class='toggle toggle--active-null toggle--null'>30 min</div>
// 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 = '';
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;
method: 'GET',
url: query
}).done(function (data) {
// Set the 'iso' source's data to what's returned by the API query
var marker = new mapboxgl.Marker({
'color': '#314ccd'
// Create a LngLat object to use in the marker initialization
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": []
'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
// Make the API call
// 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 ( === 'profile') {
profile =;
} else if ( === 'duration') {
minutes =;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment