<!DOCTYPE html>
<meta charset="utf-8">


<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet-webgl-heatmap@0.2.7/dist/leaflet-webgl-heatmap.min.js" integrity="sha256-wz6Wm2bEl0mr5QI3cHRDlNlcch5wgcUfsaJzcVGUM5s=" crossorigin="anonymous"></script>
    <script src="../static/webgl-heatmap.js"></script>
        
    <style> 
        
        #mapid { height: 100vh; }
    
    </style>

</head>

<body>
    <script
       src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js">
    </script>
    <div id="mapid"></div>

    <script type="text/javascript">
        function getHeatMapData() {
                return fetch( "http://127.0.0.1:5000/main/get-heatmap", { method: "GET"})
                    .then((response) => response.json())
                    .then((json) => {
                        console.log(json);
                        return json;
                });
}
        (async function () {
            // add everything here
            var base = L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' );
            var map = L.map('mapid', {
                            layers : [base],
                            center :[33.44500433, -118.4845288],
                            zoom: 12 
                        });
            var heatmap = new L.webGLHeatmap({
                size: 12,
                units: 'm',
                alphaRange: .4       
            });
            
            const heatMapData = await getHeatMapData();
            // dataPoints is an array of arrays: [[lat, lng, intensity]...]
            heatmap.setData(heatMapData);
            heatmap.multiply(0.60)
            //var heat = L.heatLayer(heatMapData,{
            //radius: 8,
            //blur: 0, 
            //maxZoom: 8,
           // }).addTo(map);
            map.addLayer( heatmap );
            // alternatively, you can skip the for loop and add the whole dataset with heatmap.setData(dataPoints)
    
            //mymap.addLayer(heatmap);
        })();

    </script>
</body>
</html>