Come rendere heatmap.js su un'immagine?

Question

Sto usando heatmap.js per sovrapporre una heatmap usando il plugin GoogleMaps. Mi piacerebbe essere in grado di scaricare l'immagine come un'immagine insieme alla sovrapposizione di heatmap. Ho provato il metodo heatmapInstance.getDataURL() restituisce solo la regione di sovrapposizione e non insieme all'immagine su cui è sovrapposta.

Answer 1

È necessario creare un ID che viene utilizzato all'interno dei vostri div e script tag

var heatmapInstance = h337.create({ 
    container: document.getElementById('heatMap') 
}); 

Come potete vedere ho ottenuto l'elemento da id 'heatmap'. Quindi, all'interno del vostro div in cui si desidera posizionare l'immagine sulla pagina basta chiamare l'id 'heatmap'

<div id='heatMap'></div> 

Poi basta inserire un'immagine sotto la mappa termica utilizzando css

#heatMap { 
    background-image: url(HinckleyTown.jpg); 
    height: 445px; 
    width: 840px; 
} 

ho usato il lo stesso id per css, html e javascript.