Last active
May 30, 2018 05:00
-
-
Save twelch/051d5070594a1e1426fcf6a080a0e431 to your computer and use it in GitHub Desktop.
Multiple animated paths
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.12.1/mapbox-gl.js'></script> | |
| <script src='http://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| function animatePointAlongPath (type, duration, delay = 0, line, lineStart, lineSource, aPoint, pointSource, onDone, onLocUpdate) { | |
| let aFrame = null; // Animation frame ID | |
| let dPoint = aPoint; | |
| let running = true; // Running state | |
| const startTime = new Date(); | |
| const lineLength = turf.lineDistance(line, 'miles'); | |
| let lineSoFar = []; | |
| if (type === 'grow') { | |
| lineSoFar = lineStart; | |
| } | |
| /* Stop animation loop */ | |
| function stop() { | |
| running = false; | |
| window.cancelAnimationFrame(aFrame); | |
| if (onDone) { | |
| onDone(); | |
| } | |
| } | |
| /* Get new point position and line segment */ | |
| function getGeoms(percDone) { | |
| const curDistance = percDone * lineLength; | |
| dPoint = turf.along(line, curDistance, 'miles'); | |
| if (type === 'grow') { | |
| lineSoFar.geometry.coordinates.push(dPoint.geometry.coordinates); | |
| } else if (type === 'shrink') { | |
| const coords = line.geometry.coordinates; | |
| const curP = turf.along(line, lineLength * percDone, 'miles'); | |
| const endP = turf.point(coords[coords.length - 1]); | |
| lineSoFar = turf.lineSlice(curP, endP, line); | |
| } | |
| return { | |
| point: dPoint, | |
| line: lineSoFar | |
| }; | |
| } | |
| /* Animation loop */ | |
| function animate() { | |
| const curTime = new Date(); | |
| const elapsed = curTime - startTime; | |
| // If not ready yet | |
| if (elapsed < delay) { | |
| return window.requestAnimationFrame(animate); | |
| } | |
| const percDone = (elapsed - delay) / duration; | |
| // If complete | |
| if (percDone >= 1) { | |
| stop(); | |
| return false; | |
| } | |
| const geoms = getGeoms(percDone); | |
| if (geoms) { | |
| if (onLocUpdate) { | |
| onLocUpdate(geoms.point); | |
| } | |
| pointSource.setData(geoms.point); | |
| lineSource.setData(geoms.line); | |
| if (running) { | |
| return window.requestAnimationFrame(animate); | |
| } | |
| } | |
| } | |
| // Start animation and return stop method to caller | |
| aFrame = animate(startTime); | |
| return stop; | |
| } | |
| var Tour = function() { | |
| mapboxgl.accessToken = 'pk.eyJ1IjoidHdlbGNoIiwiYSI6ImNqZW5vazRvcjEyczAyd25xamczMmh3OG0ifQ.vJy47O0vb1Z_F7OWIbZpyg'; | |
| this.videos = {}; | |
| }; | |
| Tour.prototype.start = function() { | |
| this.map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/twelch/cihxvsxy000oeaikoz39jjthw', | |
| center: [-115.17427,36.08035], | |
| zoom: 11, | |
| minzoom: 19 | |
| }); | |
| this.map.on('style.load', function () { | |
| this.startTour(); | |
| }.bind(this)); | |
| }; | |
| var path1 = turf.linestring([ | |
| [-115.17313,36.10199],[-115.17312,36.10095],[-115.17576,36.10093],[-115.17961,36.10086],[-115.18099,36.10084],[-115.18131,36.10055],[-115.18108,36.09515],[-115.18137,36.08572],[-115.18115,36.07942],[-115.18114,36.06611] | |
| ]); | |
| var path2 = turf.linestring([ | |
| [-115.17427,36.00935],[-115.17274,36.01008],[-115.17231,36.01339],[-115.17845,36.01331],[-115.17994,36.0135],[-115.18052,36.02428],[-115.18064,36.0417],[-115.18061,36.0741],[-115.18053,36.091],[-115.18042,36.10823],[-115.18022,36.12265],[-115.17821,36.12605],[-115.17883,36.1278],[-115.17758,36.12814],[-115.17757,36.12814],[-115.17754,36.12817],[-115.17883,36.1278],[-115.1778,36.13003],[-115.17649,36.12973],[-115.17754,36.12817],[-115.17755,36.12816],[-115.17754,36.12817],[-115.17754,36.12817],[-115.17754,36.12817],[-115.17883,36.1278],[-115.1778,36.13003],[-115.17649,36.12973],[-115.17754,36.12817],[-115.17755,36.12816],[-115.17643,36.12972],[-115.17449,36.12941],[-115.17614,36.12692],[-115.17353,36.12586],[-115.17972,36.12763],[-115.17972,36.13302],[-115.16905,36.1464],[-115.16099,36.15563],[-115.16016,36.15909],[-115.15919,36.16771],[-115.15599,36.17227],[-115.14654,36.17541],[-115.14219,36.1741],[-115.14482,36.16953],[-115.14359,36.1692],[-115.14358,36.16921],[-115.14359,36.16918],[-115.13961,36.1673],[-115.13797,36.16659],[-115.1373,36.16767],[-115.13505,36.1713],[-115.13583,36.17164] | |
| ]); | |
| var path3 = turf.flip(turf.linestring([ | |
| [36.16423,-115.13078],[36.16376,-115.13138],[36.16395,-115.13182],[36.16458,-115.1333],[36.16542,-115.13525],[36.16753,-115.14017],[36.16843,-115.14227],[36.16896,-115.14351],[36.16941,-115.1449],[36.16849,-115.14585],[36.16851,-115.1459],[36.16886,-115.14672],[36.16927,-115.14645],[36.16993,-115.14602],[36.17053,-115.14712],[36.1715,-115.14647],[36.17401,-115.14483],[36.17352,-115.14368],[36.17236,-115.14443],[36.17285,-115.14558],[36.17053,-115.14712],[36.17034,-115.14669],[36.17039,-115.14681],[36.17703,-115.14254],[36.17627,-115.14079],[36.17591,-115.14072],[36.17505,-115.1415],[36.17515,-115.14231],[36.17568,-115.14471],[36.17488,-115.15045],[36.17542,-115.15381],[36.17467,-115.15523],[36.17175,-115.15729],[36.16855,-115.15911],[36.16811,-115.15929],[36.16117,-115.16042],[36.15674,-115.16062],[36.15421,-115.16245],[36.14683,-115.16896],[36.13982,-115.17518],[36.13523,-115.17903],[36.13116,-115.18069],[36.12777,-115.18118],[36.12657,-115.18071],[36.12588,-115.17886],[36.12555,-115.1741],[36.1252,-115.1697],[36.12496,-115.16975],[36.12341,-115.17076],[36.12359,-115.17119],[36.12374,-115.17169],[36.12374,-115.17185],[36.12375,-115.17191] | |
| ])); | |
| var path4 = turf.flip(turf.linestring([ | |
| [36.13621,-115.15008],[36.13619,-115.15008],[36.13619,-115.15008],[36.13484,-115.15001],[36.13475,-115.14908],[36.13383,-115.14895],[36.13309,-115.14781],[36.13153,-115.14768],[36.13108,-115.14731],[36.13081,-115.14669],[36.1304,-115.14607],[36.12984,-115.14595],[36.12982,-115.14617],[36.1295,-115.14795],[36.12947,-115.15128],[36.12957,-115.15436],[36.12961,-115.15487],[36.12744,-115.15493],[36.12669,-115.15494],[36.1222,-115.15499],[36.12044,-115.155],[36.11605,-115.15455],[36.11462,-115.15411],[36.11306,-115.1536],[36.11062,-115.15285],[36.10803,-115.15205],[36.10803,-115.1523],[36.10803,-115.15646],[36.10809,-115.16375],[36.10794,-115.16577],[36.10798,-115.16374],[36.10802,-115.16303],[36.10814,-115.16943],[36.10814,-115.16954],[36.10814,-115.16997],[36.10717,-115.16995],[36.10701,-115.16998],[36.10701,-115.16998],[36.1069,-115.17143],[36.10617,-115.17143],[36.10618,-115.17035],[36.10698,-115.17031],[36.10701,-115.16995],[36.10724,-115.16995],[36.10793,-115.16996],[36.10793,-115.16973],[36.10795,-115.16865],[36.10795,-115.16803],[36.10802,-115.1619],[36.10793,-115.15261],[36.10791,-115.15212],[36.10711,-115.15206],[36.10711,-115.15206],[36.10711,-115.15206],[36.10708,-115.15205],[36.10742,-115.15216],[36.10737,-115.15186],[36.1059,-115.15142],[36.10253,-115.15035],[36.10245,-115.14734],[36.10264,-115.14673],[36.10376,-115.14914],[36.10569,-115.14982],[36.10571,-115.15112],[36.10572,-115.15137],[36.10253,-115.15035],[36.1025,-115.14695],[36.10264,-115.14673],[36.10391,-115.14928],[36.10578,-115.14984],[36.10597,-115.14989],[36.1072,-115.15034],[36.10889,-115.15045],[36.11154,-115.1505],[36.11244,-115.14997],[36.11337,-115.1472],[36.11442,-115.14639],[36.11442,-115.14639],[36.11937,-115.14624],[36.12702,-115.14609],[36.1301,-115.14597],[36.13072,-115.14649],[36.13122,-115.14748],[36.13173,-115.14772],[36.13287,-115.14773],[36.13333,-115.14812],[36.13362,-115.14875],[36.13425,-115.14908],[36.13577,-115.14908],[36.13635,-115.14955],[36.13714,-115.15124],[36.13763,-115.15168],[36.13807,-115.15178] | |
| ])); | |
| var path5 = turf.flip(turf.linestring([ | |
| [36.1735,-115.08838],[36.17337,-115.08937],[36.17284,-115.08937],[36.16672,-115.08925],[36.16627,-115.08924],[36.16616,-115.08891],[36.16618,-115.08565],[36.16624,-115.08078],[36.16624,-115.08075],[36.16626,-115.07806],[36.16639,-115.06665],[36.16646,-115.06236],[36.16669,-115.0581],[36.16686,-115.05349],[36.16677,-115.05319],[36.16061,-115.05333],[36.15875,-115.05319],[36.15875,-115.05238],[36.15863,-115.05231],[36.15391,-115.0523],[36.15146,-115.05229],[36.15092,-115.05181],[36.15087,-115.05137],[36.15127,-115.05134],[36.15151,-115.05129],[36.15155,-115.05117],[36.15162,-115.04888],[36.15214,-115.04888],[36.15255,-115.04889],[36.15255,-115.04848],[36.15324,-115.04869],[36.15272,-115.04869],[36.15316,-115.04847],[36.15316,-115.04847],[36.15316,-115.04847],[36.15335,-115.04847],[36.15335,-115.04848],[36.15335,-115.04847],[36.15353,-115.04783],[36.15352,-115.04847],[36.15352,-115.04857],[36.15346,-115.0487],[36.15255,-115.04848],[36.15255,-115.04889],[36.15354,-115.04889],[36.15439,-115.04889],[36.155,-115.04889],[36.155,-115.04976],[36.1575,-115.04976],[36.15751,-115.04872],[36.15751,-115.04755],[36.15761,-115.04736],[36.15948,-115.04741],[36.15948,-115.04748],[36.15948,-115.04769],[36.15938,-115.05316],[36.15937,-115.0537],[36.15909,-115.0621],[36.15922,-115.06341],[36.16027,-115.06337],[36.1622,-115.06343],[36.16274,-115.06339],[36.16268,-115.06342],[36.16124,-115.06344],[36.16078,-115.06336],[36.15909,-115.06356],[36.15907,-115.06769],[36.15906,-115.07221],[36.15886,-115.07221],[36.15665,-115.07221],[36.15262,-115.07219],[36.15118,-115.07236],[36.15118,-115.07288],[36.15118,-115.07403],[36.15125,-115.07426],[36.15567,-115.07443],[36.15685,-115.07445],[36.15685,-115.07423],[36.15686,-115.07039],[36.15686,-115.06793],[36.15687,-115.06562],[36.15679,-115.0655] | |
| ])); | |
| Tour.prototype.startTour = function() { | |
| var time = 0; | |
| var timePerStep = 100; | |
| var interval = setInterval(function() { | |
| time += timePerStep; | |
| if (time === 2000) {this.startPerson(1, 'shrink', path1, "#4999D2", 8000);} | |
| if (time === 4000) {this.startPerson(2, 'shrink', path2, "#0DFF93", 6000);} | |
| if (time === 6000) {this.startPerson(3, 'shrink', path3, "#FF0000", 4000);} | |
| if (time === 8000) {this.startPerson(4, 'shrink', path4, "#FFFC19", 4000);} | |
| if (time === 10000) {this.startPerson(5, 'shrink', path5, "#ED00FF", 4000);} | |
| }.bind(this), timePerStep); | |
| }; | |
| Tour.prototype.startPerson = function(id, type, iPath, color, duration) { | |
| var iPathLength = turf.lineDistance(iPath, 'miles'); | |
| var iPoint = turf.along(iPath, 0, 'miles'); | |
| this.pPointSource = new mapboxgl.GeoJSONSource({ | |
| "type": "geojson", | |
| "data": iPoint, | |
| "maxzoom": 20 | |
| }); | |
| this.map.addSource(id + "-pDot", this.pPointSource); | |
| this.map.addLayer({ | |
| "id": id + "-pDot", | |
| "type": "symbol", | |
| "source": id + "-pDot", | |
| "layout": { | |
| "icon-image": "car-15", | |
| "icon-size": { | |
| "base": 0.5, | |
| "stops": [ | |
| [0,1], | |
| [15,1.2], | |
| [20,2]] | |
| }, | |
| }, | |
| "paint": {}, | |
| "interactive": true | |
| }); | |
| this.pLineSource = new mapboxgl.GeoJSONSource({ | |
| "type": "geojson", | |
| "data": iPath, | |
| "maxzoom": 20 | |
| }); | |
| this.map.addSource(id + "-pLine", this.pLineSource); | |
| this.map.addLayer({ | |
| "id": id + "-pLine", | |
| "type": "line", | |
| "source": id + "-pLine", | |
| "layout": { | |
| "line-join": "round", | |
| "line-cap": "round" | |
| }, | |
| "paint": { | |
| "line-color": color, | |
| "line-opacity": "0.6", | |
| "line-width": 6, | |
| "line-blur": 1 | |
| } | |
| }, id + "-pDot"); | |
| animatePointAlongPath( | |
| type, | |
| duration, | |
| 1000, | |
| iPath, | |
| iPath, | |
| this.pLineSource, | |
| iPoint, | |
| this.pPointSource, | |
| function() { console.log('done animating'); }, | |
| function(newPoint) { console.log('new point', newPoint); } | |
| ) | |
| //type, duration, delay = 0, line, lineStart, lineSource, aPoint, pointSource, onDone, onLocUpdate | |
| }; | |
| Tour.prototype.stopPerson = function() { | |
| this.map.removeLayer('pLine'); | |
| this.map.removeLayer('pDot'); | |
| this.map.removeSource('pLine'); | |
| this.map.removeSource('pDot'); | |
| clearInterval(this.personInterval); | |
| }; | |
| var tour = new Tour(); | |
| tour.start(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment