Différences entre les versions de « Un script Python pour visualiser un fichier GPX »
Aller à la navigation
Aller à la recherche
| (4 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
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. | 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, | |||
<pre> | |||
Python3 -m http.server 8000 | |||
</pre> | |||
2) créer la page d'accueil, dans le même répertoire, avec le contenu ci-dessous, | |||
<pre> | <pre> | ||
| Ligne 80 : | Ligne 86 : | ||
</pre> | </pre> | ||
3) Ouvrir un navigateur et saisir cette URL, | |||
http://localhost:8000/ | http://localhost:8000/ | ||
Puis choisir un fichier GPX à afficher et valider. | Puis choisir un fichier GPX à afficher et valider. | ||
Fonctionne aussi sur un client distant en indiquant l'adresse ip. | |||
Version actuelle datée du 28 octobre 2024 à 09:16
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.