Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Last active August 29, 2015 14:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wboykinm/c1941e81be375c294cad to your computer and use it in GitHub Desktop.
Save wboykinm/c1941e81be375c294cad to your computer and use it in GitHub Desktop.
Download ZIP
Local Easing - pan to a location from a random nearby one
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>kenBurns</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
// global profiles data (yes, I know)
var profiles;
$.getJSON('sites.json',function(data) {
profiles = data;
//select one profile at random
var profile;
var map = L.map('map',{ zoomControl: false});
var stamentoner = L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png',{attribution:'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'})
.addTo(map);
// Disable scroll zoom handler.
map.scrollWheelZoom.disable();
if ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch) {
map.dragging.disable();
map.touchZoom.disable();
map.tap.disable();
}
var i = 0;
var newProfile = function() {
profile = profiles[i%profiles.length];
i++;
//Pan in from a random location:
map.setView([(profile.lat + (Math.random()- 0.1)/10),(profile.lon + (Math.random() - 0.1)/10)],profile.zoom);
map.panTo([profile.lat,profile.lon],{animate:true,duration:8});
}
newProfile();
setInterval(newProfile,8000);
});
</script>
</script>
</body>
</html>
Raw
sites.json
[
{
"location":"Cobble Hill",
"lat":40.68654,
"lon": -73.99623,
"zoom":14
},
{
"location":"Memphis",
"lat":35.14953,
"lon": -90.04898,
"zoom":15
},
{
"location":"Yorba Linda",
"lat":33.88863,
"lon": -117.81311,
"zoom":13
},
{
"location":"SoMa",
"lat":37.78091,
"lon":-122.40089,
"zoom":16
},
{
"location":"Santa Fe",
"lat":35.68698,
"lon":-105.93780,
"zoom":16
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment