Un script Python pour visualiser un fichier GPX

De Wiki de Mémoire Vive
Aller à la navigation Aller à la recherche

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.


Comment faire ?

1) créer un mini serveur web, en lançant cette commande, 

Python3 -m http.server 8000

2) créer la page d'accueil, dans le même répertoire, avec le contenu ci-dessous, 



<!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: '© 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>

3) Ouvrir un navigateur et saisir cette URL, http://localhost:8000/

Puis choisir un fichier GPX à afficher et valider.

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

Récupérée de « https://wiki.memoirevive79.mooo.com/index.php?title=Un_script_Python_pour_visualiser_un_fichier_GPX&oldid=1680 »