Skip to content

Instantly share code, notes, and snippets.

@ivaner

ivaner/index.html

Last active March 25, 2020 19:45
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 ivaner/ea67f8362514cf7e047514f0b7f90302 to your computer and use it in GitHub Desktop.
Save ivaner/ea67f8362514cf7e047514f0b7f90302 to your computer and use it in GitHub Desktop.
Download ZIP
Charlotte Motor Speedway Traffic
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></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.4.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css">
<link rel="stylesheet" href="dash.css">
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#eta {
font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif;
position: absolute;
margin: 0px;
width: 33%;
height: 40px;
top: 0;
bottom: 20%;
padding: 10px;
background-color: #29323C;
color: white;
font-family: sans-serif;
font-size: .50em;
line-height: 2em;
}
#instructions {
position: absolute;
width: 33%;
top: 43px;
background-color: rgba(255, 255, 255, 0.9);
overflow-y: scroll;
font-family: sans-serif;
font-size: 0.8em;
line-height: 1.5em;
}
.duration {
font-size: 2em;
}
</style>
</head>
<body>
<div id='map'></div>
<div id='instructions'></div>
<div id='eta'></div>
<script>
// add the JavaScript here
mapboxgl.accessToken = 'pk.eyJ1IjoiaXZhbnJhbWlzY2FsIiwiYSI6ImNqdWU4dDdibjAwYW4zeXA4aHU1MzdmbmkifQ.DwHnMu8ee4P9ZnSwzFq2Xg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/ivanramiscal/ck2dks1sv0syf1cmic2ddz5t3',
//center: [-122.662323, 45.523751], // starting position
center: [-80.68431,35.3510275], //starting position
zoom: 12
});
// set the bounds of the map
//var bounds = [[-123.069003, 45.395273], [-122.303707, 45.612333]];
//var bounds = [[-106.33716712329031,31.671052589180505],[-106.33437133188126,31.674891085143443]];
//var bounds = [[-106.33840073099428,31.670646136467326],[-106.33289888241755,31.675304734738532]];
var bounds = [[-80.6919, 35.3461],[-80.6745, 35.3568]];
map.setMaxBounds(bounds);
// initialize the map canvas to interact with later
var canvas = map.getCanvasContainer();
// an arbitrary start will always be the same
// only the end or destination will change
//var start = [-122.662323, 45.523751];
//var start = [-106.33696507935969,31.671212721240337];
var start = [-80.68547038190695,35.35050521746834];
// this is where the code for the next step will go
// create a function to make a directions request
function getRoute(end) {
// make a directions request using cycling profile
// an arbitrary start will always be the same
// only the end or destination will change
//var end = [-80.68353788977493,35.35136461409563];
var url = 'https://api.mapbox.com/directions/v5/mapbox/driving-traffic/' + start[0] + ',' + start[1] + ';' + end[0] + ',' + end[1] + '?steps=true&geometries=geojson&access_token=' + mapboxgl.accessToken;
// make an XHR request https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
var req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', url, true);
req.onload = function() {
var data = req.response.routes[0];
var route = data.geometry.coordinates;
var geojson = {
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: route
}
};
// if the route already exists on the map, reset it using setData
if (map.getSource('route')) {
map.getSource('route').setData(geojson);
} else { // otherwise, make a new request
map.addLayer({
id: 'route',
type: 'line',
source: {
type: 'geojson',
data: {
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: geojson
}
}
},
layout: {
'line-join': 'round',
'line-cap': 'round'
},
paint: {
'line-color': '#3887be',
'line-width': 5,
'line-opacity': 0.75
}
});
}
// add turn instructions here at the end
// get the sidebar and add the instructions
var instructions = document.getElementById('instructions');
var steps = data.legs[0].steps;
var tripInstructions = [];
for (var i = 0; i < steps.length; i++) {
tripInstructions.push('<li>' + steps[i].maneuver.instruction) + '</li>';
instructions.innerHTML = tripInstructions;
}
// add turn instructions here at the end
// get the sidebar and add the instructions
var eta = document.getElementById('eta');
var steps = data.legs[0].steps;
var etaValue = [];
for (var i = 0; i < steps.length; i++) {
etaValue.push('<li>' + steps[i].maneuver.instruction) + '</li>';
eta.innerHTML = '<span class="duration">Trip duration: ' + Math.floor(data.duration / 60) + ' min';
}
};
req.send();
}
map.on('load', function() {
// make an initial directions request that
// starts and ends at the same location
getRoute(start);
// Add starting point to the map
map.addLayer({
id: 'point',
type: 'circle',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: start
}
}
]
}
},
paint: {
'circle-radius': 10,
'circle-color': '#3887be'
}
});
// this is where the code from the next step will go
map.on('click', function(e) {
var coordsObj = e.lngLat;
canvas.style.cursor = '';
var coords = Object.keys(coordsObj).map(function(key) {
return coordsObj[key];
});
var end = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: coords
}
}
]
};
if (map.getLayer('end')) {
map.getSource('end').setData(end);
} else {
map.addLayer({
id: 'end',
type: 'circle',
source: {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: coords
}
}]
}
},
paint: {
'circle-radius': 10,
'circle-color': '#f30'
}
});
}
getRoute(coords);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment