2

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?

3

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.

  • Thank you for your comment. Can you please edit your code? I think there is typo. – Devils Dream Oct 9 '13 at 7:30
  • Its returning following error "Uncaught TypeError: Cannot call method 'forEach' of undefined" – Devils Dream Oct 9 '13 at 7:50
  • 1
    If you want any serious help, please post your code online : jsfiddle.net – simo Oct 9 '13 at 7:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.