| license: mit |
Built with blockbuilder.org
Leaflet.heat has four methods as follows:
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.
forked from 1Cr18Ni9's block: Leaflet - heatmap
| <!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="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
| <script src="http://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("http://{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> |