Skip to content

Instantly share code, notes, and snippets.

@jbranigan

jbranigan/index.html Secret

Last active March 24, 2021 16:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jbranigan/933e53d29c760597312ba9816ed5cf13 to your computer and use it in GitHub Desktop.
Save jbranigan/933e53d29c760597312ba9816ed5cf13 to your computer and use it in GitHub Desktop.
Download ZIP
Mapbox Lunchbox Session: Directions 2020-05-21
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mapbox Directions Lunchbox</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.map-overlay-container {
position: absolute;
width: 25%;
top: 0;
left: 0;
padding: 10px;
z-index: 1;
}
.map-overlay {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #fff;
border-radius: 3px;
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.map-overlay h2,
.map-overlay p {
margin: 0 0 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="map-overlay-container">
<div class="map-overlay">
<h2 id="overview"></h2>
<ul id="steps"></ul>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYnJhbmlnYW4iLCJhIjoiY2tlMWtmcndiMDA4bzJxbngzbm9zaDg3YyJ9.GvTC2gaBQE4H79yxpPPDCg';
const transformRequest = (url) => {
const hasQuery = url.indexOf("?") !== -1;
const suffix = hasQuery ? "&pluginName=lunchboxDirections" : "?pluginName=lunchboxDirections";
return {
url: url + suffix
}
}
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-82.55825, 35.59081],
zoom: 14,
transformRequest: transformRequest
});
let origin = [-82.564934, 35.588398];
let destination = [-82.551193, 35.593235];
const overviewText = document.getElementById('overview');
const stepsText = document.getElementById('steps');
const setOverview = function (route) {
const routeDistance = route.distance;
const routeDuration = route.duration;
overviewText.innerText = `${(routeDistance / 1609.344).toFixed(1)} miles | ${(routeDuration / 60).toFixed(0)} minutes`;
};
const setRouteLine = function (route) {
const routeLine = {
type: 'FeatureCollection',
features: [{
properties: {},
geometry: route.geometry,
}],
};
map.getSource('route').setData(routeLine);
};
const setSteps = function (steps) {
stepsText.innerText = '';
const maneuvers = {
type: 'FeatureCollection',
features: [
],
};
steps.forEach((step) => {
const listItem = document.createElement('li');
listItem.innerText = step.maneuver.instruction;
stepsText.appendChild(listItem);
const maneuver = {
properties: {
name: step.name,
distance: step.distance,
duration: step.duration,
},
geometry: {
type: 'Point',
coordinates: step.maneuver.location,
},
};
maneuvers.features.push(maneuver);
});
map.getSource('maneuvers').setData(maneuvers);
};
const getDirections = function () {
let request = 'https://api.mapbox.com/directions/v5/';
request += 'mapbox/driving-traffic/';
request += origin.join(',') + ';' + destination.join(',');
request += '?access_token=' + mapboxgl.accessToken;
request += '&geometries=geojson';
request += '&approaches=;curb';
request += '&steps=true';
console.log(request);
fetch(request).then((res) => res.json()).then((res) => {
const route = res.routes[0];
const steps = route.legs[0].steps;
setOverview(route);
setRouteLine(route);
setSteps(steps);
});
};
// marker setup
const start = new mapboxgl.Marker({
draggable: true,
color: 'purple',
}).setLngLat(origin).addTo(map);
const end = new mapboxgl.Marker({
draggable: true,
color: 'green',
}).setLngLat(destination).addTo(map);
const onDragEnd = function () {
origin = start.getLngLat().toArray();
destination = end.getLngLat().toArray();
getDirections();
};
start.on('dragend', onDragEnd);
end.on('dragend', onDragEnd);
map.on('load', () => {
map.addSource('route', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
],
},
});
map.addLayer({
id: 'routeLayer',
type: 'line',
source: 'route',
layout: {},
paint: {
'line-color': 'cornflowerblue',
'line-width': 10,
},
}, 'road-label');
map.addLayer({
id: 'routeArrows',
source: 'route',
type: 'symbol',
layout: {
'symbol-placement': 'line',
'text-field': '→',
'text-rotate': 0,
'text-keep-upright': false,
'symbol-spacing': 100,
'text-size': 22,
'text-offset': [0, -0.1],
},
paint: {
'text-color': 'white',
'text-halo-color': 'white',
'text-halo-width': 1,
},
}, 'road-label');
map.addSource('maneuvers', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
],
},
});
map.addLayer({
id: 'maneuverLayer',
type: 'circle',
source: 'maneuvers',
layout: {},
paint: {
'circle-color': 'green',
},
}, 'poi-label');
getDirections();
});
</script>
</body>
</html>
Raw
start.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mapbox Directions Lunchbox</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.map-overlay-container {
position: absolute;
width: 25%;
top: 0;
left: 0;
padding: 10px;
z-index: 1;
}
.map-overlay {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #fff;
border-radius: 3px;
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.map-overlay h2,
.map-overlay p {
margin: 0 0 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="map-overlay-container">
<div class="map-overlay">
<h2 id="overview"></h2>
<ul id="steps"></ul>
</div>
</div>
<script>
mapboxgl.accessToken = 'MAPBOX_ACCESS_TOKEN';
const transformRequest = (url) => {
const hasQuery = url.indexOf("?") !== -1;
const suffix = hasQuery ? "&pluginName=lunchboxDirections" : "?pluginName=lunchboxDirections";
return {
url: url + suffix
}
}
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-82.55825, 35.59081],
zoom: 14,
transformRequest: transformRequest
});
let origin = [-82.564934, 35.588398];
let destination = [-82.551193, 35.593235];
const overviewText = document.getElementById('overview');
const stepsText = document.getElementById('steps');
const setOverview = function (route) {
const routeDistance = route.distance;
const routeDuration = route.duration;
overviewText.innerText = `${(routeDistance / 1609.344).toFixed(1)} miles | ${(routeDuration / 60).toFixed(0)} minutes`;
};
const setRouteLine = function (route) {
const routeLine = {
type: 'FeatureCollection',
features: [{
properties: {},
geometry: route.geometry,
}],
};
map.getSource('route').setData(routeLine);
};
const setSteps = function (steps) {
stepsText.innerText = '';
const maneuvers = {
type: 'FeatureCollection',
features: [
],
};
steps.forEach((step) => {
const listItem = document.createElement('li');
listItem.innerText = step.maneuver.instruction;
stepsText.appendChild(listItem);
const maneuver = {
properties: {
name: step.name,
distance: step.distance,
duration: step.duration,
},
geometry: {
type: 'Point',
coordinates: step.maneuver.location,
},
};
maneuvers.features.push(maneuver);
});
map.getSource('maneuvers').setData(maneuvers);
};
const getDirections = function () {
let request = 'https://api.mapbox.com/directions/v5/';
request += 'mapbox/driving-traffic/';
request += origin.join(',') + ';' + destination.join(',');
request += '?access_token=' + mapboxgl.accessToken;
// request += '&geometries=geojson';
// request += '&approaches=;curb';
// request += '&steps=true';
console.log(request);
// fetch(request).then((res) => res.json()).then((res) => {
// const route = res.routes[0];
// const steps = route.legs[0].steps;
// setOverview(route);
// setRouteLine(route);
// setSteps(steps);
// });
};
// marker setup
const start = new mapboxgl.Marker({
draggable: true,
color: 'purple',
}).setLngLat(origin).addTo(map);
const end = new mapboxgl.Marker({
draggable: true,
color: 'green',
}).setLngLat(destination).addTo(map);
const onDragEnd = function () {
origin = start.getLngLat().toArray();
destination = end.getLngLat().toArray();
getDirections();
};
start.on('dragend', onDragEnd);
end.on('dragend', onDragEnd);
map.on('load', () => {
map.addSource('route', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
],
},
});
map.addLayer({
id: 'routeLayer',
type: 'line',
source: 'route',
layout: {},
paint: {
'line-color': 'cornflowerblue',
'line-width': 10,
},
}, 'road-label');
map.addLayer({
id: 'routeArrows',
source: 'route',
type: 'symbol',
layout: {
'symbol-placement': 'line',
'text-field': '→',
'text-rotate': 0,
'text-keep-upright': false,
'symbol-spacing': 100,
'text-size': 22,
'text-offset': [0, -0.1],
},
paint: {
'text-color': 'white',
'text-halo-color': 'white',
'text-halo-width': 1,
},
}, 'road-label');
map.addSource('maneuvers', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
],
},
});
map.addLayer({
id: 'maneuverLayer',
type: 'circle',
source: 'maneuvers',
layout: {},
paint: {
'circle-color': 'green',
},
}, 'poi-label');
getDirections();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment