Horizon Distance plugin..but not working

[francescogola]

Hello!
I'm trying to create a pluging able to show a circle on the map that show the horizon distance according to where we set the pin.

Unfortutately I'm not able to make it working, so I write you here to ask your help if you see any big mistake on the code

    import { onMount } from 'svelte';

    let horizonCircle;

    function initializeMap() {
        if (window.W && window.W.map && typeof window.W.map.on === 'function') {
            console.log("Map is initialized, adding click event listener.");
            W.map.on('click', onMapClick);
        } else {
            console.log("Map not ready, checking again...");
            setTimeout(initializeMap, 500);
        }
    }

    function onMapClick(event) {
        const lat = event.latlng.lat;
        const lon = event.latlng.lng;
        console.log('Clicked coordinates:', lat, lon);

        fetch(`https://api.windy.com/api/point-forecast/v2/${lat}/${lon}/elevation`, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer MY_APY_CODE (POINT FORECATS)'
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log('Elevation data:', data);
            const elevation = data.elevation;
            if (elevation !== undefined) {
                const horizonDistance = calculateHorizonDistance(elevation);
                console.log('Horizon Distance:', horizonDistance);
                drawHorizonCircle(lat, lon, horizonDistance);
            } else {
                console.error('Elevation data not found');
            }
        })
        .catch(error => console.error('Error fetching elevation data:', error));
    }

    function calculateHorizonDistance(elevation) {
        const radiusEarth = 6371; 
        return Math.sqrt(2 * radiusEarth * (elevation / 1000)); 
    }

    function drawHorizonCircle(lat, lon, distance) {
        if (horizonCircle) {
            W.map.removeLayer(horizonCircle);
        }
        console.log('Drawing circle at:', lat, lon, 'with radius:', distance * 1000);
        horizonCircle = L.circle([lat, lon], {
            color: 'blue',
            fillColor: '#30f',
            fillOpacity: 0.2,
            radius: distance * 1000 // Convert km in meters
        }).addTo(W.map);
        console.log('Circle drawn:', horizonCircle);
    }

    onMount(() => {
        console.log("Starting map initialization check...");
        initializeMap();
    });

On the console.log I get always "Map not ready, checking again..."

Any idea what I'm doing wrong?