I am trying to add heatmap layer to my map. I have tried the following plugin:
http://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html
From this plugin the data came from heatMapData.js. If I put the static data in heatMapData.js like following my heat map is working.
var testData={
max: 500,
data:[
{lat:23.6681520914, lon:90.0811805, value:0.3},
{lat:23.9010258772, lon:90.2883834839, value:0.9},
{lat:23.7930778593, lon:90.423535, value:0.7},
{lat:24.0279042498, lon:90.371648, value:0.5},
{lat:24.1049427335, lon:90.2680428995, value:0.8}
]
};
For this I am using the following code in my index page:
$(function() {
var baseLayer = L.tileLayer(
'http://{s}.tile.cloudmade.com/ad132e106cd246ec961bbdfbe0228fe8/997/256/{z}/{x}/{y}.png',{
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}
);
var heatmapLayer = L.TileLayer.heatMap({
// radius could be absolute or relative
// absolute: radius in meters, relative: radius in pixels
//radius: { value: 15000, absolute: true },
radius: { value: 20, absolute: false },
opacity: 0.8,
gradient: {
0.15: "rgb(0,0,255)",
0.35: "rgb(0,255,255)",
0.65: "rgb(0,255,0)",
0.95: "yellow",
1.0: "rgb(255,0,0)"
}
});
heatmapLayer.setData(testData.data);
var map = new L.Map('map', {
center: new L.LatLng(23.7588, 90.38967),
zoom: 7,
layers: [baseLayer, heatmapLayer]
});
// make accessible for debugging
layer = heatmapLayer;
});
Now I want to add data from my database. I have written a heatMapData.php which gives me following data as JSON format:
[{lat:23.6681520914, lon:90.0811805, value:0.3},
{lat:23.9010258772, lon:90.2883834839, value:0.9},
{lat:23.7930778593, lon:90.423535, value:0.7},
{lat:24.0279042498, lon:90.371648, value:0.5},
{lat:24.1049427335, lon:90.2680428995, value:0.8}]
What should I do to implement dynamic data layer that comes from heatMapData.php?