3

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>
user14701845
  • 31
  • 4
  • Leaflet doesn't come with any built-in heatmap features. Are you using a plugin? If so, which one? [leaflet.heat](https://github.com/Leaflet/Leaflet.heat) is a popular one. Their [example](http://leaflet.github.io/Leaflet.heat/demo/) seems to be behaving similarly to [google's](https://developers.google.com/maps/documentation/javascript/heatmaplayer). Please post some code so we know how you created your map. – Seth Lutske Nov 28 '20 at 19:58
  • Dear @sethlutske, thank you for answering! I used Patrick Wield's https://github.com/pa7/heatmap.js For the sake of space limitations I entered the code I used in an "edit" of the original post. – user14701845 Nov 30 '20 at 10:23
  • So you chose `scaleRadius` to be true, which is what's causing the behavior you have. I think `scaleRadius: false` would give you what you want. I tried to implement it in [this codesandbox](https://codesandbox.io/s/elastic-lalande-eiyvk), bit its giving me an error about the canvas height. Considering this plugin hasn't been touched in like 5 years, I'm not going to go down the rabbit hole of trying to debug it, but it seems that would be your best lead. Or use a different plugin and see if you can achieve the desired results. – Seth Lutske Nov 30 '20 at 15:49
  • Thank you for the advice! `scaleRadius: false` did not work, but I decided to switch to [leaflet.heat](https://github.com/Leaflet/Leaflet.heat), which seems to work much better. – user14701845 Dec 01 '20 at 12:44
  • For anyone encountering an error about canvas height the radius must be set to at least 1 to have zoom 0. – Grammin Jan 26 '23 at 14:20

0 Answers0