-
-
Save burritojustice/340a6480647104a0d48e751c2f59ba25 to your computer and use it in GitHub Desktop.
travel by map
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
license: mit |
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 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment