Heatmap.js Leaflet Heatmap

Question

Im Trying to implement a heatmap to Leaflet via the Leafletplugin //www.patrick-wied.at/static/heatmapjs/plugin-leaflet-layer.html,

but for some reason it seams to ignore my "Value" so all datapoints have the same colour

 window.onload = function() {


        var baseLayer = L.tileLayer(
          'http://{s}.www.toolserver.org/tiles/bw-mapnik/{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: 20
          }
        );

        var cfg = {
          // radius should be small ONLY if scaleRadius is true (or small radius is intended)
          "radius": 0.00007,
          minOpacity: 0.5,
          maxOpacity: 1, 

          // scales the radius based on map zoom
          "scaleRadius": true, 
          // if set to false the heatmap uses the global maximum for colorization
          // if activated: uses the data maximum within the current map boundaries 
          //   (there will always be a red spot with useLocalExtremas true)
          "useLocalExtrema": false,
          // which field name in your data represents the latitude - default "lat"
          latField: 'lat',
          // which field name in your data represents the longitude - default "lng"
          lngField: 'lng',
          // which field name in your data represents the data value - default "value"
          value: 'sig',
          blur:0,

            gradient: {
                // enter n keys between 0 and 1 here
                // for gradient color customization
                '1': 'red',
                '.3': 'yellow',
                '0.9': 'green'
              },

        };


        var heatmapLayer = new HeatmapOverlay(cfg);

        var map = new L.Map('map-canvas', {
          center: new L.LatLng(52.400458, 13.052260),
          zoom: 14,
          layers: [baseLayer, heatmapLayer]
        });

        heatmapLayer.setData(testData);
        // make accessible for debugging
    layer = heatmapLayer;

    };  

my data looks like this:

var testData = {
 data:[{lat:52.40486, lng:13.04916, sig:30}, {lat:52.40486, lng:13.04916, sig:70}, {lat:52.40496, lng:13.04894, sig:67}, {lat:52.40496, lng:13.04894, sig:72}, {lat:52.40486, lng:13.04916, sig:74}, {lat:52.40486, lng:13.04916, sig:78}, {lat:52.40493, lng:13.04925, sig:67},]}

you can se it live on http://www.frief.de/heatmap/test2.html

would be great if someone has an idea, mybe Im just to stupid

Answer 1

Just a quick suggestion.

Have you tried using the Leaflet.Heatmap plug-in by Vladimir Agafonkin(the author of Leaflet.js himself). It seems it's not listed on the plug-ins page.

I think it's faster and probably will be a better solution: https://github.com/Leaflet/Leaflet.heat http://mourner.github.io/simpleheat/demo/

Answer 2

I think this is not working because your code is wrong around here:

    <div class="wrapper">
      <div class="heatmap" id="map-canvas">

      </div>
    </div>

</script> <----THIS     <script src="src/heatmap.js"></script>
<script src="src/leaflet-heatmap.js"></script>

Open link you said is a demo page and inspect code. Fix this orphaned </script tag and see if it's working now.

Answer 3

I know this is old, but I just ran into this issue, so here's how I solved it. In the library "pa7_leaflet_hm.min.js" there's a part where it sets the min/max values, and it's hardcoded to 1 and 0

this._data = []; 
this._max = 1; 
this._min = 0;

Apparently this controls the intensity of the spots based on the value, and this is only overwritten if useLocalExtrema is set to false, which would always set it to the highest visible spot.

If you don't wish to always check the highest value based on the visible area, you can just change the this._max value to something higher, or maybe even set it to a value from the config, to expose it

this._data = []; 
this._max = (this.cfg.max ? this.cfg.max : 1); 
this._min = (this.cfg.min ? this.cfg.min : 0);

this way you would get a more traditional functioning heatmap