Modification de Un script Python pour visualiser un fichier GPX

La visualisation d'un itinéraire contenu dans n fichier GPX n'est pas chose aisée car il faut associer un fond de carte.

python3 -m http.server 8000

Une solution simple consiste à exécuter un script Python.

Comment faire ?

Taper la commande ci-dessus dans le répertoire où se trouve un fichier index.html, dans lequel on aura stocké ce code, 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visualisation GPX avec Sélection de Fichier</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        #map { height: 80vh; width: 100%; }
        #file-input { margin: 20px; }
    </style>
</head>
<body>
    <div id="file-input">
        <input type="file" id="gpxFile" accept=".gpx" />
        <button onclick="loadGPX()">Charger le fichier GPX</button>
    </div>
    <div id="map"></div>

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <!-- Leaflet GPX JS -->
    <script src="https://cdn.jsdelivr.net/npm/leaflet-gpx@1.5.0/gpx.min.js"></script>

    <script>
        // Initialisation de la carte Leaflet
        const map = L.map('map').setView([48.8566, 2.3522], 13); // Coordonnées de Paris par défaut
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        function loadGPX() {
            const fileInput = document.getElementById('gpxFile');
            const file = fileInput.files[0];

            if (file && file.type === 'application/gpx+xml') {
                const reader = new FileReader();
                
                // Lorsqu'on charge le fichier
                reader.onload = function(event) {
                    const gpxData = event.target.result;

                    // Créer un nouvel objet GPX à partir du contenu du fichier
                    new L.GPX(gpxData, {
                        async: true,
                        marker_options: {
                            startIconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
                            endIconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-red.png',
                            shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png'
                        },
                        polyline_options: {
                            color: 'blue',
                            weight: 5,
                            opacity: 0.75
                        }
                    }).on('loaded', function(e) {
                        map.fitBounds(e.target.getBounds());
                    }).addTo(map);
                };

                // Lire le fichier GPX en tant que texte
                reader.readAsText(file);
            } else {
                alert("Veuillez sélectionner un fichier GPX valide.");
            }
        }
    </script>
</body>
</html>

Puis ouvrir un navigateur et saisir cette URL, 
http://localhost:8000/

Puis choisir un fichier GPX à afficher et valider.