 <script>
        // Initialize the map
        const map = L.map('map').setView([48.58392, 7.74553], 6); // Centered near Strasbourg

        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // Custom airplane icon
        const airplaneIcon = L.icon({
            iconUrl: 'https://bia-facile.fr/images/Airplane_silhouette_blue.svg', // Green airplane icon https://upload.wikimedia.org/wikipedia/commons/6/6f/Airplane_silhouette_blue.svg
            iconSize: [32, 32], // Size of the icon
            iconAnchor: [16, 16], // Anchor point of the icon (centered)
            popupAnchor: [0, -16] // Position of the popup relative to the icon
        });

        // Store active markers
        const activeMarkers = new Map();

        // Function to fetch OpenSky data
        async function fetchOpenSkyData() {
            const username = 'bruno.bernard';
            const password = 'emriHy22o%';
            const url = 'https://opensky-network.org/api/states/all';

            try {
                const response = await fetch(url, {
                    headers: {
                        'Authorization': 'Basic ' + btoa(username + ':' + password)
                    }
                });

                if (!response.ok) {
                    throw new Error('Failed to fetch data: ' + response.status);
                }

                const data = await response.json();
                updatePlanes(data.states);
            } catch (error) {
                console.error('Error fetching OpenSky data:', error);
            }
        }

        // Function to update planes on the map
        function updatePlanes(states) {
            const updatedMarkers = new Set();

            states.forEach(state => {
                const [icao24, callsign, originCountry, timePosition, lastContact, longitude, latitude, altitude, , velocity, heading, ...rest] = state;

                // Only display planes with valid coordinates
                if (latitude && longitude && heading !== null) {
                    const planeId = icao24;

                    // Check if the plane already exists on the map
                    if (activeMarkers.has(planeId)) {
                        const marker = activeMarkers.get(planeId);
                        marker.setLatLng([latitude, longitude]);
                        marker.setRotationAngle(heading);
                    } else {
                        // Create a new marker for the airplane
                        const planeMarker = L.marker([latitude, longitude], {
                            icon: airplaneIcon,
                            rotationAngle: heading,
                            rotationOrigin: 'center center'
                        });

                        planeMarker
                            .addTo(map)
                            .bindPopup(`
                                <strong>Callsign:</strong> ${callsign || 'N/A'}<br>
                                <strong>Country:</strong> ${originCountry}<br>
                                <strong>ICAO24:</strong> ${icao24}<br>
                                <strong>Heading:</strong> ${heading.toFixed(1)}°<br>
                            `);

                        activeMarkers.set(planeId, planeMarker);
                    }

                    updatedMarkers.add(planeId);
                }
            });

            // Remove markers for planes that are no longer active
            activeMarkers.forEach((marker, planeId) => {
                if (!updatedMarkers.has(planeId)) {
                    map.removeLayer(marker);
                    activeMarkers.delete(planeId);
                }
            });
        }

        // Fetch and update planes every 2 seconds
        fetchOpenSkyData();
        setInterval(fetchOpenSkyData, 4000);
    </script>