Created
December 13, 2017 13:52
-
-
Save beneverard/3c8c17762e0c5c1c7b390301a818f047 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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