Skip to content

Heatmap

Add a heatmap to your map.

<!doctype html>
<html lang="en">
    <head>
        <title>Create a heatmap layer</title>
        <meta property="og:description" content="Visualize earthquake frequency by location using a heatmap layer." />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="https://cdn.smartmaps.cloud/packages/smartmaps/maps/umd/maps.min.js"></script>
        <script src="https://cdn.smartmaps.cloud/packages/Leaflet.heat/leaflet-heat.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            html,
            body,
            #map {
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>

        <script>
            const map = new smartmaps.maps.Map('map', 'INSERT API-KEY', {
                center: { lat: 49.02164948779226, lng: 8.439330018049352 },
                zoom: 0
            });

            async function loadEarthquakeData() {
                try {
                    const response = await fetch('../../data/earthquakes.geojson');
                    const data = await response.json();

                    const earthquakes = data.features.map((feature) => {
                        const coords = feature.geometry.coordinates;
                        return [coords[1], coords[0]];
                    });

                    const heat = L.heatLayer(earthquakes, {
                        radius: 25,
                        blur: 15,
                        maxZoom: 17
                    }).addTo(map);
                } catch (error) {
                    console.error('Error loading data:', error);
                }
            }

            loadEarthquakeData();
        </script>
    </body>
</html>