D3 Examples - Local Easing - pan to a location from a random nearby one

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