<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Horizon Distance plugin..but not working]]></title><description><![CDATA[<p dir="auto">Hello!<br />
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.</p>
<p dir="auto">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</p>
<pre><code>
    import { onMount } from 'svelte';

    let horizonCircle;

    function initializeMap() {
        if (window.W &amp;&amp; window.W.map &amp;&amp; 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 =&gt; response.json())
        .then(data =&gt; {
            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 =&gt; 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(() =&gt; {
        console.log("Starting map initialization check...");
        initializeMap();
    });


</code></pre>
<p dir="auto">On the console.log I get always "Map not ready, checking again..."</p>
<p dir="auto">Any idea what I'm doing wrong?</p>
]]></description><link>https://community.windy.com/topic/35020/horizon-distance-plugin-but-not-working</link><generator>RSS for Node</generator><lastBuildDate>Fri, 17 Jul 2026 18:29:35 GMT</lastBuildDate><atom:link href="https://community.windy.com/topic/35020.rss" rel="self" type="application/rss+xml"/><pubDate>Thu, 25 Jul 2024 10:49:20 GMT</pubDate><ttl>60</ttl></channel></rss>