Différences entre les versions de « Un script Python pour visualiser un fichier GPX »

De Wiki de Mémoire Vive
Aller à la navigation Aller à la recherche
(Page créée avec « 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=dev... »)
 

Version du 26 octobre 2024 à 19:51

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> 

       <input type="file" id="gpxFile" accept=".gpx" />
       <button onclick="loadGPX()">Charger le fichier GPX</button>

   <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
   <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];

           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.

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