D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
burritojustice
Full window
Github gist
travel by map
<!DOCTYPE html> <html lang="en"> <head> <title>Travel By Map</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://mapzen.com/js/mapzen.css"> <script src="https://mapzen.com/js/mapzen.min.js"></script> <style> #map { height: 100%; width: 100%; position: absolute; } html,body{margin: 0; padding: 0} </style> </head> <body> <div id="map"></div> <script> var center = [37.787,-122.399]; var map = L.Mapzen.map('map', { center: center, zoom: 18, scene: L.Mapzen.BasemapStyles.BubbleWrap, }); // Set locations for panTo. Tip: make sure they are each ~ equidistant from the last. var locations = [[37.787124,-122.399834],[37.78701,-122.399979],[37.786632,-122.399506],[37.786205,-122.398987],[37.786151,-122.399056],[37.785888,-122.399376],[37.785476,-122.399888],[37.785011,-122.400475],[37.784912,-122.400605],[37.784873,-122.400651],[37.7845,-122.401124],[37.784446,-122.401192],[37.783912,-122.401864],[37.783874,-122.401909],[37.783786,-122.402024],[37.783657,-122.402192],[37.783477,-122.402421],[37.783317,-122.402627],[37.783252,-122.40271],[37.782775,-122.403298],[37.781566,-122.404847],[37.781494,-122.404946],[37.781421,-122.40503],[37.780876,-122.405724],[37.780204,-122.406571],[37.779735,-122.407166],[37.7793,-122.407708],[37.77885,-122.408272],[37.778408,-122.408837],[37.777976,-122.409386],[37.777553,-122.40992],[37.777091,-122.410508],[37.776691,-122.411011],[37.776214,-122.411614],[37.775398,-122.412644],[37.775268,-122.412812],[37.775001,-122.413155],[37.774654,-122.41359],[37.774517,-122.413773],[37.774368,-122.413956],[37.774044,-122.414368],[37.773097,-122.415581],[37.772628,-122.415001],[37.772159,-122.414414],[37.772144,-122.414399],[37.771862,-122.414048],[37.77177,-122.414162],[37.771659,-122.414292],[37.77156,-122.414414],[37.771427,-122.414551],[37.771282,-122.414689],[37.771156,-122.414803],[37.771022,-122.41491],[37.770896,-122.415001],[37.770797,-122.41507],[37.770675,-122.415154],[37.770549,-122.415223],[37.770488,-122.415261],[37.770313,-122.415345],[37.770195,-122.415398],[37.770065,-122.415452],[37.769931,-122.41549],[37.769802,-122.415528],[37.769626,-122.415574],[37.769523,-122.415597],[37.76934,-122.415619],[37.769256,-122.415635],[37.769119,-122.41565],[37.768985,-122.41565],[37.768844,-122.41565],[37.768692,-122.415642],[37.768535,-122.415635],[37.766937,-122.415482],[37.765571,-122.415345],[37.765419,-122.415329],[37.765327,-122.415322],[37.765235,-122.415314],[37.765075,-122.415299],[37.764701,-122.415268],[37.763927,-122.415192],[37.763778,-122.415177],[37.763698,-122.415169],[37.763694,-122.415291],[37.763637,-122.416169],[37.763633,-122.416253],[37.763629,-122.416344],[37.76358,-122.417229],[37.763572,-122.417344],[37.763565,-122.417473],[37.763504,-122.418404],[37.7635,-122.418503],[37.763492,-122.418602],[37.763446,-122.419419],[37.763439,-122.419533],[37.763431,-122.419648],[37.763381,-122.420441],[37.763343,-122.421082],[37.763305,-122.421738],[37.762928,-122.421708],[37.762577,-122.42167],[37.761936,-122.421601],[37.761699,-122.421578],[37.761478,-122.421563],[37.760101,-122.421441],[37.759857,-122.42141],[37.75938,-122.421364],[37.759281,-122.421357],[37.758747,-122.421296],[37.758502,-122.421273],[37.758304,-122.42125],[37.757701,-122.421196],[37.757167,-122.421143],[37.756908,-122.42112],[37.75666,-122.421097],[37.756103,-122.421044],[37.755565,-122.42099],[37.755302,-122.420968],[37.755062,-122.420945],[37.753963,-122.420838],[37.753704,-122.420815],[37.753463,-122.420792],[37.752365,-122.420693],[37.752109,-122.420662],[37.751811,-122.42064],[37.75077,-122.420533],[37.750511,-122.42051],[37.750198,-122.420479],[37.749172,-122.420388],[37.748905,-122.420365],[37.748168,-122.420296],[37.748062,-122.420289],[37.746829,-122.420174],[37.746776,-122.420212],[37.746669,-122.420205],[37.74662,-122.420243],[37.746574,-122.420304],[37.746532,-122.42038],[37.746467,-122.420388],[37.746074,-122.42064],[37.745853,-122.420784],[37.745346,-122.421113],[37.744583,-122.421608],[37.744174,-122.421875],[37.744045,-122.421959]]; for (var x = 0; x < locations.length; x++) { var durationTime = 1; // in seconds var loopTime = x * (durationTime * 100); // in miliseconds setTimeout(function(y) { map.panTo(locations[y], {animate: true, duration: durationTime, easeLinearity: 1}); }, loopTime, x); } </script> </body> </html>
https://mapzen.com/js/mapzen.min.js