Leaflet & Heatmap.js - Nie udało się wykonać "getImageData" na "CanvasRenderingContext2D"

Question

Mam obecnie działającą mapę ulotek i chciałbym skorzystać z dodatku do ulotki Heatmap.js. http://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html

Kod, którego używam, jest bardzo podobny do przykładu w powyższym łączu.

var testData = { 
       max: 8, 
       data: [{lat: 24.6408, lng:46.7728, radius:500, count: 3}] 
      }; 


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

var heatmapLayer = new HeatmapOverlay(cfg); 

map.addLayer(heatmapLayer); 

heatmapLayer.setData(testData); 

Po uruchomieniu mapy nie widzę żadnego znaku mapy ciepła. Wtedy kiedy przesuwać mapę pojawia się następujący błąd w konsoli:

Nie udało się wykonać „getImageData” On „CanvasRenderingContext2D”: Wysokość źródło 0.

Każdy pomysł jak rozwiązać to? Demo na stronie heatmap.js działa świetnie przy prawie identycznym kodzie.

Dzięki!

EDIT:

znalazłem gdzie błąd może być pochodzenia informacji od. Linia 316 w pliku heatmap.js to:

this._height = canvas.height = shadowCanvas.height = +(computed.height.replace(/px/,'')); 

Wysokość jest zwracana jako zero. Szerokość jest jednak ustawiona poprawnie.

Answer 1

Znaleziono rozwiązanie. Okazało się, że mapa nie została w pełni zainicjalizowana, gdy dodawałem do niej heatMapLayer. Jako poprawkę na teraz umieściłem map.addLayer (heatmapLayer) w funkcji timeout, aby upewnić się, że mapa jest w pełni załadowana.

setTimeout(function(){ 
    map.addLayer(heatmapLayer); 
},500)