leaflet heatmap.js legend and tooltip

问题

I'm trying to use leaflet, OSM and heatmap.js to create a heatmap showing for instance sales. I have no problem creating the heatmap using simple javascript and heatmap.js, leaflet-heatmap.js, "leaflet heatmap overlay.js", but I'm now trying to add a legend and tooltips as per the example code at https://www.patrick-wied.at/static/heatmapjs/example-legend-tooltip.html I do not know how to combine the simple L. controls with the DOM / canvas that the example uses. And ideally after that, I would love to be able to add some animation so that we can look at the data month by month. Any help would be hugely appreciated

My code so far

    <html>
<head>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <!--Make sure the container you pass has a width and a height because heatmap.js will use the container's dimensions.   -->
    <style>
        html,body,#map{
                width:100vw;
                height:100vh; 
                border:0;
                margin: 0;
                padding: 0;
        }                   
    </style>        
</head>

<body>
    <script src="heatmap.js"></script>              
    <script src="leaflet-heatmap.js"></script>
    <script src="leaflet heatmap overlay.js"></script>
    <script src="..\test1.js"></script>
    
    <script>        
        var min = 1;
        var max = myMax;
        var data = addressPoints.map(function (p) { 
            // normalize intensity values to between 0 and 1 - BUT it's not used!!!!!!!!!!!
            var intensity = parseInt(p[2]) || 0;
            var normalized = (intensity - min) / (max - min);
            return { lat: p[0], lng: p[1], count: parseInt(p[2]) || 0 };
        });
        console.log("DATA", data);

        var testData = {
            max: max,
            data: data
        };
            
        var cfg = {
            "radius": 0.05,
            "maxOpacity": .8, 
            "scaleRadius": true,        //all of NZ was red - radius was 15.  Raduis OK at 0.1
            "useLocalExtrema": true,
            latField: 'lat',
            lngField: 'lng',
            valueField: 'count',
            blur: 0.95,
            gradient: { 
                '.1': 'green',
                '.25': 'yellow',
                '.5': 'orange',
                '.75': 'red'
            }
        };

        var map = new L.Map('map').setView([-36.8484437,174.7600023], 7);

        L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',           
                {maxZoom: 19}).addTo(map); 

        var heatmapLayer = new HeatmapOverlay(cfg).addTo(map);

        heatmapLayer.setData(testData);

    </script>
</body>

来源：https://stackoverflow.com/questions/65014305/leaflet-heatmap-js-legend-and-tooltip

标签

javascript

leaflet

openstreetmap

heatmap