Skip to content

Instantly share code, notes, and snippets.

@beneverard

beneverard/index.html

Created December 13, 2017 13:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save beneverard/3c8c17762e0c5c1c7b390301a818f047 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save beneverard/3c8c17762e0c5c1c7b390301a818f047 to your computer and use it in GitHub Desktop.
Download ZIP
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/v0.17.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.overlay {
position: absolute;
top: 10px;
left: 10px;
}
.overlay button {
font:600 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #3386c0;
color: #fff;
display: inline-block;
margin: 0;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 3px;
}
.overlay button:hover {
background-color:#4ea0da;
}
</style>
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js' charset='utf-8'></script>
<div id='map'></div>
<div class='overlay'>
<button id='replay'>Replay</button>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidGhlaWRlYWJ1cmVhdSIsImEiOiJVaU9wVmlVIn0.OCGZoNkQ1GU3vOMwspFvBw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [-121.9692, 37.5301],
hash: true,
zoom: 8
});
// San Francisco
var origin = [-122.414, 37.776];
// San Jose
var destination = [-121.894, 37.333];
// A simple line from origin to destination.
var route = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[
-2.216019630432129,
51.49273683683028
],
[
-2.2156575322151184,
51.49280530597748
],
[
-2.2149601578712463,
51.492935564071146
],
[
-2.214316427707672,
51.49305079207453
],
[
-2.2139516472816467,
51.493115920817175
],
[
-2.2135064005851746,
51.493202758995956
],
[
-2.2130852937698364,
51.49328124720752
],
[
-2.212720513343811,
51.49333635587106
],
[
-2.2123610973358154,
51.49335639536854
],
[
-2.212023138999939,
51.49335973528394
],
[
-2.2118112444877625,
51.49334470566274
],
[
-2.211569845676422,
51.49330963652734
],
[
-2.211277484893799,
51.49326287763819
],
[
-2.2108134627342224,
51.493184389395005
],
[
-2.210295796394348,
51.49309922114844
],
[
-2.209872007369995,
51.493027412503196
],
[
-2.209271192550659,
51.492930554151336
],
[
-2.2089788317680354,
51.49288212489827
],
[
-2.2087374329566956,
51.49283870552416
],
[
-2.2085389494895935,
51.492786936216376
],
[
-2.208077609539032,
51.49266836758026
],
[
-2.2074097394943237,
51.49249635901063
],
[
-2.2069939970970154,
51.492389479572495
],
[
-2.206827700138092,
51.49234772972392
],
[
-2.206680178642273,
51.492317669809246
],
[
-2.2065192461013794,
51.49229094986848
],
[
-2.206331491470337,
51.49226756990745
],
[
-2.206108868122101,
51.492255879922425
],
[
-2.2058862447738647,
51.492264229912045
],
[
-2.2056609392166138,
51.49227424989754
],
[
-2.205400764942169,
51.492287609874786
],
[
-2.205151319503784,
51.49229929985166
],
[
-2.204958200454712,
51.492297629855145
],
[
-2.2047731280326843,
51.49228259988377
],
[
-2.20462828874588,
51.49224919992966
],
[
-2.2044995427131653,
51.49219909995259
],
[
-2.20438688993454,
51.49213229989756
],
[
-2.2043144702911377,
51.49205547971325
],
[
-2.2042474150657654,
51.49196529933168
],
[
-2.204201817512512,
51.4918600886611
],
[
-2.2041884064674377,
51.491748197681495
],
[
-2.204201817512512,
51.49165467665202
],
[
-2.2042420506477356,
51.491561155430695
],
[
-2.204330563545227,
51.491449263717406
],
[
-2.2044405341148376,
51.49131733134443
],
[
-2.2048911452293396,
51.490796278241206
],
[
-2.205392718315124,
51.49023513747003
],
[
-2.205859422683716,
51.4896957009915
],
[
-2.2062912583351135,
51.48921471199948
],
[
-2.2064468264579773,
51.48902932947074
],
[
-2.2065111994743347,
51.48897588571888
],
[
-2.2066184878349304,
51.48893580286385
],
[
-2.206752598285675,
51.48890407057864
],
[
-2.2069028019905086,
51.488894049852426
],
[
-2.2070476412773132,
51.4888957199736
],
[
-2.2071656584739685,
51.48885229680274
],
[
-2.2072434425354004,
51.488800522968035
],
[
-2.2072729468345638,
51.488730377678856
],
[
-2.207299768924713,
51.48863518032804
],
[
-2.2074365615844727,
51.48804729052977
],
[
-2.2074633836746216,
51.48793873050493
],
[
-2.2074902057647705,
51.48785355245834
],
[
-2.2075411677360535,
51.48777505490195
],
[
-2.2076189517974854,
51.487689876549595
],
[
-2.20775306224823,
51.48754958244585
],
[
-2.2079381346702576,
51.48734415101514
],
[
-2.207997143268585,
51.48728903510798
],
[
-2.208053469657898,
51.487240599861806
],
[
-2.2081258893012996,
51.48719717511461
],
[
-2.2082412242889404,
51.48714873977089
],
[
-2.2083941102027893,
51.48710531493619
],
[
-2.2086301445961,
51.48704518817375
],
[
-2.2090861201286316,
51.48694831711193
],
[
-2.209751307964325,
51.48682806309369
],
[
-2.210684716701507,
51.48666104309777
],
[
-2.211494743824005,
51.48650905436979
],
[
-2.211848795413971,
51.48644057576637
],
[
-2.211998999118805,
51.486402160895025
],
[
-2.212146520614624,
51.4863470438492
],
[
-2.21236914396286,
51.48626687348173
],
[
-2.2126346826553345,
51.48616331988187
],
[
-2.212951183319092,
51.48603972334189
],
[
-2.213299870491028,
51.48589608369885
],
[
-2.2135305404663086,
51.48580088043027
],
[
-2.2142305970191956,
51.485510258696706
],
[
-2.214415669441223,
51.485445119088524
],
[
-2.214565873146057,
51.485410043876335
],
[
-2.214745581150055,
51.485388330636226
],
[
-2.2149789333343506,
51.48538331988705
],
[
-2.2151961922645564,
51.48540336288047
],
[
-2.2153785824775696,
51.4854484595835
],
[
-2.2155261039733887,
51.48549522648768
],
[
-2.215665578842163,
51.485560366024295
],
[
-2.215794324874878,
51.485637197153
],
[
-2.21587210893631,
51.48570567696294
],
[
-2.2159525752067566,
51.485799210195715
],
[
-2.2160330414772034,
51.48590109439169
],
[
-2.21611887216568,
51.48602636153372
],
[
-2.21623957157135,
51.48621676693054
],
[
-2.21673846244812,
51.486991742096116
],
[
-2.216770648956299,
51.487055209306334
],
[
-2.2167733311653137,
51.48711366586916
],
[
-2.216741144657135,
51.48717212235702
],
[
-2.2166794538497925,
51.48724227004356
],
[
-2.2166097164154053,
51.487302396546134
],
[
-2.216566801071167,
51.48737087385525
],
[
-2.216561436653137,
51.487444361584764
],
[
-2.2165936231613155,
51.487506157992925
],
[
-2.2166499495506287,
51.48756795431734
],
[
-2.2167357802391052,
51.487638101394886
],
[
-2.216818928718567,
51.48770657819985
],
[
-2.216939628124237,
51.48779843716694
],
[
-2.2175726294517517,
51.488291132104735
],
[
-2.2176960110664368,
51.48843977461683
],
[
-2.2178032994270325,
51.488613468623704
],
[
-2.2179052233695984,
51.48878382171849
],
[
-2.2179722785949707,
51.488924112024506
],
[
-2.218009829521179,
51.48908110304563
],
[
-2.2180259227752686,
51.48924310385174
],
[
-2.2180339694023132,
51.48955374296263
],
[
-2.218036651611328,
51.48993619358462
],
[
-2.2180500626564026,
51.49054075963936
],
[
-2.218084931373596,
51.491347391918694
],
[
-2.218092978000641,
51.49179996816888
],
[
-2.2180768847465515,
51.49189682892285
],
[
-2.2180286049842834,
51.491970309357576
],
[
-2.2179803252220154,
51.49204044966204
],
[
-2.217913269996643,
51.49213897990746
],
[
-2.2178328037261963,
51.49224585993291
],
[
-2.2177308797836304,
51.49232100980076
],
[
-2.2175484895706177,
51.49241118947864
],
[
-2.21736878156662,
51.492469639174594
],
[
-2.2171515226364136,
51.49252307883102
],
[
-2.2169262170791626,
51.49257317845204
],
[
-2.2166472673416138,
51.492624948002565
],
[
-2.2163495421409607,
51.49268005745951
],
[
-2.216026335954666,
51.49273558434492
]
]
}
}]
}
// A single point that animates along the route.
// Coordinates are initially set to origin.
var point = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": origin
}
}]
}
// Calculate the distance in kilometers between route start/end point
var lineDistance = turf.lineDistance(route.features[0], 'kilometers');
map.on('click', function(e) {
console.log(e.lngLat);
});
map.on('load', function () {
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('route', {
"type": "geojson",
"data": route
});
map.addSource('point', {
"type": "geojson",
"data": point
});
map.addLayer({
"id": "route",
"source": "route",
"type": "line",
"paint": {
"line-width": 2,
"line-color": "#007cbf"
}
});
map.addLayer({
"id": "point",
"source": "point",
"type": "symbol",
"layout": {
"icon-image": "airport-15",
"icon-rotate": 140
}
});
var counter = 0;
function animate() {
counter = counter + 1;
// Update point geometry to a new position based on the animation
// And the distance the point has travelled along the route.
var updatedPoint = turf.along(route.features[0], counter / 1000 * lineDistance, 'kilometers');
point.features = [updatedPoint];
// Update the source with this new data.
map.getSource('point').setData(point);
// Request the next frame of the animation so long as destination.
// has not been reached.
if (point.features[0].geometry.coordinates[0] !== destination[0]) {
requestAnimationFrame(animate);
}
}
document.getElementById('replay').addEventListener('click', function() {
// Set the coordinates of the original point back to origin
point.features[0].geometry.coordinates = origin;
// Update the source layer
map.getSource('point').setData(point);
counter = 0;
// Restart the animation.
animate(counter);
});
// Start the animation.
animate(counter);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment