CODEWITHSUNDEEP
mappingleafletheatmapjsfiddle
Josh
Josh

Reputation: 1

Heatmap.js w/ Leaflet Rendering Questions

I'm trying to set up a slightly altered version of Patrick Wied's heatmap.js demo w/ leaflet in this jsfiddle, but can't get the heatmap layer to render.

Any idea what's going on? Code below

Thanks in advance for any assistance.

Josh

HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div class="map-container">
  <div id="map-here" style="width: 100%; height: 500px"></div>
  </div>
<div class="heatmap" id="map-canvas">

</div>
<div class="map-controls">

JAVASCRIPT:

var map = L.map('map-here').setView([37.7829, -122.1312], 10);
var baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '[[Attribution]]',
  id: 'mapbox.streets'
}).addTo(map);

var refs = new L.LayerGroup()
refs.addTo(map)
map.refs = refs

var cfg = {
  "radius": 2,
  "maxOpacity": .8,
  "scaleRadius": true,
  "useLocalExtrema": true,
  latField: 'lat',
  lngField: 'lng',
  valueField: 'count'
};


var heatmapLayer = new HeatmapOverlay(cfg);

var testData = {
  max: 8,
  data: [{
    lat: 37.7829,
    lng: -122.1312,
    count: 3
  }, {
    lat: 37.7829,
    lng: -122.1312,
    count: 1
  }, {
    lat: 37.7821,
    lng: -122.1312,
    count: 1
  }, {
    lat: 37.783,
    lng: -122.1312,
    count: 1
  }]
};

var map = new L.Map('map-canvas', {
  center: new L.LatLng(37.7829, -122.1312),
  zoom: 4,
  layers: [refs, heatmapLayer]
});


heatmapLayer.setData(testData);

Upvotes: 0

Views: 824

Answers (1)

Philippe V.
Philippe V.

Reputation: 518

The problem is that you are trying to create two Leaflet maps in two divs (map-here and map-canvas) instead of adding overlays to one single map.

You only need to create one map with as many layers as you want.

//You don't need that map - commeted out
//var map = L.map('map-here').setView([37.7829,-122.1312], 10);
 var baseLayer = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',   {
      maxZoom: 18,
      attribution: '[[Attribution]]',
      id: 'mapbox.streets'
    }
    )
  //.addTo(map);

  var refs = new L.LayerGroup()
  //refs.addTo(map)
  //map.refs = refs

  var cfg = {
    "radius": 2,
    "maxOpacity": .8, 
    "scaleRadius": true, 
    "useLocalExtrema": true,
    latField: 'lat',   
    lngField: 'lng',   
    valueField: 'count' 
  };


  var heatmapLayer = new HeatmapOverlay(cfg);

  var testData = {
  max: 8,
  data: [{lat:37.7829,lng:-122.1312,count:3},{lat:37.7829,lng:-122.1312,count:1},{lat:37.7821,lng:-122.1312,count:1},{lat:37.783,lng:-122.1312,count:1}]
  };

  var map = new L.Map('map-here', {
    center: new L.LatLng(37.7829,-122.1312),
    zoom: 6,
    layers: [baseLayer,refs, heatmapLayer]
  });

  heatmapLayer.setData(testData);

Please look at this fiddle for the visual: https://jsfiddle.net/vaillant/un1rogw2/

Also, what was the role of the refs layer? This layer seems to be empty. And you might want to change the options of your heatmap layer.

When you alter version of tutorials, it would be great to explain what you were hoping to achieve that was not in the initial tutorial.

Upvotes: 1

Related Questions