Modification de Un script Python pour visualiser un fichier GPX

La visualisation d'un itinéraire contenu dans un 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 ?

Une solution consiste à lancer un script Python par la commande ci-dessus,en ayant un fichier index.html dans le même répertoire dont le contenu est ci-dessous, 

<pre>

<!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];

            console.log(file); // Debug : Afficher le fichier sélectionné

            // Vérification du type de fichier
                const reader = new FileReader();

                // Lorsqu'on charge le fichier
                reader.onload = function(event) {
                    const gpxData = event.target.result;
                    console.log(gpxData); // Debug : Afficher le contenu du fichier GPX

                    // 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);
        }
    </script>
</body>
</html>

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

Puis choisir un fichier GPX à afficher et valider.

Marche aussi sur un client distant en indiquant l'adresse ip.