javascript/heatmap.html

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Heatmap from API</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/Leaflet/Leaflet.heat@gh-pages/dist/leaflet-heat.js"></script>
</head>
<body>
    <div id="map" style="height: 600px; width: 100%;"></div>
    <script>
        // Initialize the map
        var map = L.map('map').setView([0.31038644444444446, 32.58894933333333], 13);

        // Add a tile layer to the map
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Function to fetch data from the API and render the heatmap
        function fetchDataAndRenderHeatmap() {
            // Replace {SECRET_TOKEN} with your actual token
            var url = 'https://platform.airqo.net/api/v2/predict/heatmap?token={SECRET_TOKEN}';

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        var features = data.predictions.features;
                        var heatmapData = features.map(function(feature) {
                            return [feature.geometry.coordinates[1], feature.geometry.coordinates[0], feature.properties.pm2_5];
                        });

                        // Add the heatmap to the map
                        var heat = L.heatLayer(heatmapData, {radius: 25}).addTo(map);
                    } else {
                        console.error('Failed to fetch data:', data.message);
                    }
                })
                .catch(error => console.error('Error fetching data:', error));
        }

        // Call the function to fetch data and render the heatmap
        fetchDataAndRenderHeatmap();
    </script>
</body>
</html>