Heatmap.js Leaflet Heatmap

0
votes

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

2
javascriptleafletheatmap

2 Answers

0
votes

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/

0
votes

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.