Local Easing - pan to a location from a random nearby one by wboykinm

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="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="//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('//tile.stamen.com/toner/{z}/{x}/{y}.png',{attribution:'Map tiles by <a href="//stamen.com">Stamen Design</a>, under <a href="//creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="//openstreetmap.org">OpenStreetMap</a>, under <a href="//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>

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
  }
]