Heatmap.js w/ Leaflet Rendering Questions - mapping

Question

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/heatmap.js#2.0.5"></script>
<script src="https://unpkg.com/leaflet-heatmap#1.0.0"></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);

Answer 1

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.