Leafletjs heatmap

Viewed 703

Leaflet has a nice heatmap layer, but which I am finding difficulties to handle when zooming into the map. I can set the data to have a radius of 0.1 and they look very nice when I have a zoom level of 8. map atzoom level 8 If a user zooms in to a level of, say 10, the map becomes entirely covered by the heatmap. map at zoom 10 Also, if the user zooms out to level 6 the heatmap becomes invisible. map at zoom level 6

Can anyone, please, let me know how to scale the radius of data points of the heatmap, so as to obtain a similar effect to that of Google Maps Heatmap? Thank you!

EDITED:
I used the heatmap from Patrick Wield heatmap.js
The code I used is as follows:

      <script>
    window.onload = function() {
      var myData = {
        max: 1000,
        data: [
          {lat: 50.32638, lng: 9.81727, count: 1},
          {lat: 50.31009, lng: 9.57019, count: 1},
          {lat: 50.31257, lng: 9.44102, count: 1},
          ]
      };
      var baseLayer = L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{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,
          minZoom: 7
        }
      );
      var cfg = {
        "radius": .1,
        "maxOpacity": 1,
        "scaleRadius": true,
        "useLocalExtrema": true,
        latField: 'lat',
        lngField: 'lng',
        valueField: 'count'
      };
      var heatmapLayer = new HeatmapOverlay(cfg);
      var map = new L.Map('map', {
        center: new L.LatLng(50.339247, 9.902947),
        zoom: 8,
        layers: [baseLayer, heatmapLayer]
      });
      heatmapLayer.setData(myData);
      layer = heatmapLayer;
    };
  </script>
0 Answers
Related