Différences entre les versions de « Un script Python pour visualiser un fichier GPX »
Aller à la navigation
Aller à la recherche
m (Denis a déplacé la page Un script Python vous visualiser un fichier GPX vers Un script Python pour visualiser un fichier GPX) |
|||
| Ligne 1 : | Ligne 1 : | ||
La visualisation d'un itinéraire contenu dans | 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 | python3 -m http.server 8000 | ||
Version du 26 octobre 2024 à 19:51
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 ?
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.