Un script Python pour visualiser un fichier GPX
Révision datée du 26 octobre 2024 à 19:51 par Denis (discussion | contributions) (Denis a déplacé la page Un script Python vous visualiser un fichier GPX vers 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>
<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.