D3 Examples - Leaflet

Leaflet - heatmap
Leaflet.heat has four methods as follows:
setOptions(options)
addLatLng(latlng)
setLatLngs(latlngs)
redraw()
The redraw() method is called by setOptions(), addLatLng(), and setLatLngs() so that you do not need to call it after executing any of these methods.
xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <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>
    <script src="https://leaflet.github.io/leaflet.heat/dist/leaflet-heat.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map{ width:100%; height:100%; }
  </style>
</head>
​
<body>
  
  <div id="map"></div>
  
  <script>
    var map = L.map("map", {
        // MinHang metro station
        center: [31.113154680911418, -238.61920595169067],
        zoom: 15
    });
​
​
    L
        .tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png")
        .addTo(map);
    
    
    // All the following data is generated manually by clicking on this map.
    // map.on("click", function(e){ heat.addLatLng(e.latlng); });
    var latlngs = [[31.11170336451878,-238.6211585998535],[31.11287911621422,-238.62034320831296],[31.11387114538065,-238.61987113952634],[31.113099568035985,-238.61763954162598],[31.112474953211358,-238.61948490142825],[31.111923819070864,-238.62094402313232],[31.111409424319707,-238.62197399139401],[31.112034046154914,-238.62291812896729],[31.11320979375489,-238.62150192260745],[31.1140915948987,-238.62098693847653],[31.114128336435243,-238.62017154693604],[31.114973387851336,-238.61944198608398],[31.113503728379598,-238.6206007003784],[31.112438211034863,-238.6228322982788],[31.111887076681064,-238.62386226654053],[31.110343883468964,-238.623948097229],[31.1094253041717,-238.62072944641113],[31.11170336451878,-238.61931324005124],[31.112438211034863,-238.61841201782224],[31.112144273111003,-238.61682415008548],[31.11096851231465,-238.61776828765866],[31.11107874050787,-238.62171649932858],[31.113099568035985,-238.6219310760498],[31.1140915948987,-238.6209011077881],[31.11449575101879,-238.62030029296875],[31.1151938348096,-238.61969947814939],[31.114642716453993,-238.62098693847653],[31.11515709368546,-238.6202573776245],[31.11320979375489,-238.62257480621338],[31.11379766209421,-238.62274646759033],[31.114201819465734,-238.62150192260745],[31.11287911621422,-238.62257480621338],[31.112254499939105,-238.6236047744751],[31.111593137050775,-238.623948097229],[31.11126245387887,-238.62416267395022],[31.111887076681064,-238.62313270568848],[31.112438211034863,-238.6226177215576],[31.11346698660128,-238.6231756210327],[31.11372417875088,-238.62154483795166],[31.113338390265195,-238.62150192260745],[31.113522099263438,-238.62128734588623],[31.113264906566354,-238.62236022949216],[31.114881534800944,-238.62094402313232],[31.11502849963889,-238.6207938194275],[31.114523307055222,-238.62171649932858],[31.113852774564364,-238.62210273742676],[31.113852774564364,-238.62210273742676],[31.113962999408717,-238.6225318908691],[31.113026084152267,-238.62386226654053],[31.113026084152267,-238.62386226654053],[31.112860745205957,-238.6239695549011],[31.113099568035985,-238.62354040145874],[31.112474953211358,-238.62347602844238],[31.112530066449423,-238.62343311309817],[31.112640292829578,-238.62343311309817],[31.113117938998016,-238.62300395965573],[31.1132832774964,-238.62274646759033],[31.1134210593584,-238.6226177215576],[31.113558841020406,-238.6224889755249],[31.113512913821978,-238.6219310760498],[31.113512913821978,-238.6219310760498],[31.113687437057877,-238.62180233001706],[31.113880330787456,-238.6220008134842],[31.111372681730806,-238.62699508666992],[31.112695405971667,-238.626651763916],[31.11339350300198,-238.62579345703125],[31.116700208655764,-238.62240314483643],[31.116920651603653,-238.6219310760498],[31.117508496961687,-238.62012863159183],[31.115487763290925,-238.6231756210327],[31.11166662204367,-238.6253643035889],[31.112199386541047,-238.62465620040894],[31.11249332429425,-238.62469911575315],[31.113852774564364,-238.62349748611447],[31.113852774564364,-238.62349748611447],[31.114293673173815,-238.62293958663938],[31.11444063892191,-238.62218856811523],[31.11386195997295,-238.6241519451141],[31.112144273111003,-238.62152338027954],[31.112970971202156,-238.6205148696899],[31.113926257808156,-238.6193776130676],[31.11471619908628,-238.6185622215271],[31.115561245269063,-238.61903429031372],[31.116204210151107,-238.62201690673828],[31.11491827603177,-238.62343311309817],[31.115891913466637,-238.6236476898193]];
    
    var heat = L.heatLayer([], {
      radius: 35,
      opacity: 0.8,
      gradient: {
        0.45: "rgb(0,0,255)",
        0.55: "rgb(0,255,255)",
        0.65: "rgb(0,255,0)",
        0.95: "rgb(255,255,0)",
        1.0:  "rgb(255,0,0)"
      }
    }).addTo(map);
    
    
    // Animation
    var index = 0;
    var id = setInterval(function(){
        heat.addLatLng(latlngs[index++]);
        if(index >= latlngs.length - 1){ clearInterval(id); }
    }, 200);
​
    
    // add markers
    latlngs.forEach(function(d, i){
        L.marker(d, {opacity: 0}) // hide points
          .bindPopup("Index: " + i, {keepInView: true})
          .addTo(map);
    });
​
  </script>
</body>
​
    