[GIS] Leaflet Heatmap Dynamic data layer

heat mapjavascriptleafletPHP

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 &copy; <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?

Best Answer

You can load dynamically (with ajax) your PHP file and set the content into testData var, as in your previous script. Then execute your original script without any changes.

Note that you will use $.ajax() jquery method to be able to set 'async': false option.

var testData = (function () {
var testData = null;
$.ajax({
    'async': false,
    'global': false,
    'url': 'pat/to/your/heatMapData.php',
    'dataType': "json",
    'success': function (data) {
        testData = data;
    }
});
return testData;
})();

Be sure your PHP file return the wanted values and a well-formated json file. It can be tested online.

Related Question