Charger un fichier GPX dans une page HTML

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Charger un fichier GPX dans une page HTML

Message par Jpe54 » 27 juil. 2017, 12:57

Bonjour,

Un tableau de données contenu dans un fichier menu.js de ce style :

Code : Tout sélectionner

function ListeMenu() {
// ================================================================================
// Insérer ici les menus
// ================================================================================
tabMenuSave[0] = "LI";
tabMenuSave[1] = "1er semestre 2017";
tabMenuSave[2] = "2eme semestre 2017";
tabMenuSave[3] = "LI";
// ================================================================================
}
peut être chargé dans une page HTML5 pour traitement et mise en page comme suit :

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>

<script src="menu.js" type="text/javascript"></script> 

</head>
<body>

.....  Ici le traitement de mise en page pour l'affichage ....

</body>
</html>
Comment faire de même avec un fichier "brut" *.GPX de coordonnées GPS pour pouvoir récupérer ensuite les latitudes et longitudes présentes ?

Code : Tout sélectionner

<?xml version="1.0" encoding="UTF-8"?>
<gpx version="1.1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/1"
xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">
<trk>
<trkseg>
<trkpt lat="44.527103" lon="6.408710"><ele>835.1</ele><time>2017-05-10T07:04:00Z</time><speed>2.48</speed></trkpt>
<trkpt lat="44.532170" lon="6.447273"><ele>846.5</ele><time>2017-05-10T07:21:10Z</time><speed>54.76</speed></trkpt>
<trkpt lat="44.527100" lon="6.408627"><ele>831.6</ele><time>2017-05-10T15:34:25Z</time><speed>0.00</speed></trkpt>
</trkseg>
</trk>
</gpx>
Cordialement

Avatar du membre
Frosty
Messages : 123
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: Charger un fichier GPX dans une page HTML

Message par Frosty » 27 juil. 2017, 17:25

Bonjour,

Pour charger/parser du XML cette question StackOverflow pourrait t'aider.

Ensuite où se trouve le fichier XML à traiter ? S'il est accessible via une URL, ces ressources pourraient t'intéresser :
Requête XMLHTTP : voir le tuto ToutJavascript dédié
https://stackoverflow.com/questions/422 ... o-variable
Il est aussi possible de charger le bulldozer JQuery pour se simplifier un peu la vie : http://api.jquery.com/load/

A voir selon tes besoins précis...

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Charger un fichier GPX dans une page HTML

Message par Jpe54 » 31 juil. 2017, 17:24

Merci pour cette intervention.

En fait tout navigateur récent contient un parser et il est plus simple niveau compatibilité d'ouvrir le fichier XML (en fait le fichier GPX nommé 2017.gpx) comme ceci dans le body, éventuellement même en "display:none".

Code : Tout sélectionner

<iframe id="xmldocument" style="display:block" src="2017.gpx"></iframe>
Le problème est que le contenu résultant du fichier 2017.gpx donne ceci :

Code : Tout sélectionner

835.12017-05-10T07:04:00Z2.48 846.52017-05-10T07:21:10Z54.76 831.62017-05-10T15:34:25Z0.00
Donc Impossible ensuite de parcourir ce dernier pour récupérer les latitutes et longitudes puisqu'elles ne figurent pas !

Cela fonctionne si je nomme le fichier en 2017.txt...

Code : Tout sélectionner

<iframe id="xmldocument" style="display:block" src="2017.txt"></iframe>
Voici alors le contenu affiché :

Code : Tout sélectionner

<?xml version="1.0" encoding="UTF-8"?>
<gpx version="1.1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.topografix.com/GPX/1/1"
xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">
<trk>
<trkseg>
<trkpt lat="44.527103" lon="6.408710"><ele>835.1</ele><time>2017-05-10T07:04:00Z</time><speed>2.48</speed></trkpt>
<trkpt lat="44.532170" lon="6.447273"><ele>846.5</ele><time>2017-05-10T07:21:10Z</time><speed>54.76</speed></trkpt>
<trkpt lat="44.527100" lon="6.408627"><ele>831.6</ele><time>2017-05-10T15:34:25Z</time><speed>0.00</speed></trkpt>
</trkseg>
</trk>
</gpx>
Reste qu'ensuite, dans les 2 cas, je n'arrive pas récuperer le contenu de la dom pour un traitement ligne à ligne - récup dans un tableau des latitudes et longitudes - pour calculer la distance du trajet enregistré.

Voici le code complet du fichier HTML :

Code : Tout sélectionner

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>
<body>

<iframe id="xmldocument" style="display:block" src="2017.gpx"></iframe>

<script type="text/javascript">

xmlDoc=getElementById('xmldocument').document;

// C'est ci-dessous que je séche vu la structure du fichier GPX...

alert(document.getElementById('xmldocument').innerHTML);

</script>

</body>
</html>

Avatar du membre
Frosty
Messages : 123
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: Charger un fichier GPX dans une page HTML

Message par Frosty » 02 août 2017, 12:00

Alors, désolé pas le temps de répondre plus dans le détail pour l'instant, mais je suis tombé sur un fil de discussion qui pourrait t'aider (récupération d'un doc XML depuis une iframe + possibilité de le parcourir avec les méthodes/propriétés DOM) :

https://www.developpez.net/forums/d5765 ... he-iframe/

A noter qu'intuitivement j'aurais plutôt tendance à faire une requête Ajax/XMLHTTP et utiliser la méthode de parsing XML préconisée dans la question StackOverflow mise en lien dans mon message précédent, ce qui me paraît (contrairement à toi) moins sujet aux problèmes de compatibilité/interprétation des divers navigateurs (il n'y a qu'à voir comment le comportement change rien qu'en changeant l'extension du fichier à charger, lorsqu'on passe par une iframe), mais bon si tu préfères une iframe on part sur une iframe ;)

Au fait ton script doit fonctionner sur quel(s) navigateur(s) ?

Avatar du membre
Frosty
Messages : 123
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: Charger un fichier GPX dans une page HTML

Message par Frosty » 02 août 2017, 12:30

Déjà en faisant quelques tests, là où il y a un souci avec ton script, est qu'il faut accéder au contenu de l'iframe seulement une fois que ce dernier est chargé, ce qui donne (sur Chrome) :

Code : Tout sélectionner

<script type="text/javascript">
document.getElementById('xmldocument').onload = function() {
    console.log(document.getElementById('xmldocument').contentDocument);
}
</script>

Avatar du membre
Frosty
Messages : 123
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: Charger un fichier GPX dans une page HTML

Message par Frosty » 02 août 2017, 12:56

Pour faire quelques tests de mon côté, ne parvenant pas à faire fonctionner le script en local (problème d'autorisation d'accès aux fichiers locaux par le navigateur avec "file:///..."), j'ai uploadé le fichier GPX et le script dans un répertoire de test de mon site perso.

Lorsque le fichier a l'extension GPX je me retrouve avec une structure assez bizarre : automatiquement Chrome transforme le XML en "texte brut", le met entre balises <html><body><pre> et balance tout ça dans le contenu de l'iframe.

C'est seulement lorsque j'ai modifié l'extension du fichier pour "xml" (=> 2017.xml) que le contenu de l'iframe a été reconnu comme du xml (qu'est-ce que je disais dans un post précédent déjà ? ;) ...)

===> Ceci fonctionne pour récupérer latitude et longitude de chaque "trackpoint" (démo ici). Attention testé uniquement sur Chrome.
Entre <body>...</body> :

Code : Tout sélectionner

<iframe id="xmldocument" style="display:block" src="2017.xml"></iframe>

<script type="text/javascript">

document.getElementById('xmldocument').onload = function() {
    
    var trackpoints = document.getElementById('xmldocument').contentDocument.getElementsByTagName('trkpt');
    
    for (trackpoint of trackpoints) {
        console.log(trackpoint.getAttribute('lat'));
        console.log(trackpoint.getAttribute('lon'));
    }    
}

</script>

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Charger un fichier GPX dans une page HTML

Message par Jpe54 » 03 août 2017, 10:21

Effectivement le codage proposé fonctionne parfaitement avec Chrome si fichier sur serveur.

A la lecture de vos différentes interventions, effectivement pourquoi pas une requête Ajax/XMLHTTP ... sachant que cela devra fonctionner sans incompatibilité de navigateur y compris en local. (lecture depuis un CD par exemple sans obligation de connexion internet active)

Le but étant d'afficher ensuite la distance totale parcourue, en traitant la trace GPX par une routine de calcul javascript de ce type : http://www.geodatasource.com/developers/javascript

En dernier ressort - mais cela fait bricolo - , je peux bien sur extraire en amont les latitudes et longitudes du fichier GPX (via convertisseur GPX > texte présent sur http://www.gpsvisualizer.com/ ) pour fabriquer ensuite un tableau dans un fichier gpx.js (du même acabit que le codage menu.js listé au début de ce post). Du fait de sa présencele chargement des données ne pose plus de problème y compris en local.

Je pensais, à tort que se serait simple d'accéder à un fichier xml gpx... je vais peut être devoir revoir mes ambitions !

Avatar du membre
Frosty
Messages : 123
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: Charger un fichier GPX dans une page HTML

Message par Frosty » 03 août 2017, 16:37

Merci pour ce retour.

Attention, concernant la lecture depuis un CD (ou autre fichier "local"), ça peut coinçer avec Chrome en faisant du Ajax/XMLHTTP.
En effet, le même problème qu'avec l'iframe se pose : le chargement de contenu externe à la page web ne fonctionnera certainement pas avec le protocole "file:///..." (erreur du genre "Cross origin requests are only supported for HTTP.")

Pour remédier à ce problème, il faut proposer 2 options à l'utilisateur :
  • Soit le fichier est local (protocole "file:///"), dans ce cas il faut laisser l'utilisateur choisir lui-même le fichier pour que le navigateur soit d'accord (Chrome au moins fonctionne comme ça).
    Voici un exemple simple et un tuto en anglais très complet.
Sinon, en solution "bricolo", je verrais un bon vieux textarea avec le contenu XML à copier-coller directement (=> liste des coordonnées GPS extraite par le script). Ca devrait réduire le nombre de manips manuelles par rapport au fait de devoir passer en plus par le site http://www.gpsvisualizer.com/ et permettrait tout de même d'avoir une solution fonctionnelle rapidement sur pied, en attendant de mettre en place du Ajax et/ou FileReader.

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Charger un fichier GPX dans une page HTML

Message par Jpe54 » 04 août 2017, 17:56

Merci beaucoup Frosty pour cet échange trés constructif sur ce sujet atypique d'utilisation de fichiers GPX !

Et pour ceux que cela interesserait un lien interessant, parmi d'autres : http://dev.viamichelin.fr/api-js-v1-exemples2.html

Excellente soirée !

Jpe54
Messages : 60
Enregistré le : 10 mars 2017, 14:11

Re: Charger un fichier GPX dans une page HTML

Message par Jpe54 » 06 nov. 2018, 11:32

Bonjour,

Puisque ce site à une vocation de partage de connaissance, je déterre ce fil suite à des informations et surtout la découverte de codes intéressants permettant d'exploiter directement dans une page HTML une trace GPX et beaucoup d'autres choses !

Ceci nécessite l'usage de la librairie javascript OpenSource Leaflet disponible ici : https://leafletjs.com/index.html et ensuite un plugin.

Il en existe de nombreux tous plus intéressants les uns que les autres.

Pour rester sur ce sujet un plugin a particulièrement retenu mon attention : GPX Track affichant le trajet complet (balises trk) sur une carte mais aussi les points d'intérêt (balises wpt). Il est disponible ici https://github.com/mpetazzoni/leaflet-gpx

-=-=-=-=-=-

Reste que, comme le dit Frosty 2 posts au dessus, le chargement direct d'un fichier externe à la page web (fichier présent sur une disque dur du Pc) ne fonctionne pas avec le protocole "file:///..." suite à la sécurité CORS des plusieurs navigateurs (Chrome / IE etc)

le message est le suivant :
Access to XMLHttpRequest at 'file:///D:/POIs_Photos.gpx' from origin 'null' has been blocked by CORS policy:
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.


Bizarrement ce chargement est accepté et affiché avec l'actuel Edge de Windows 10 !

-=-=-=-=-=-

D'autres investigations sur le net m'ont permis de trouver ce bout de code pour passer outre cette sécurité CORS…
lien ici : https://developer.mozilla.org/fr/docs/Web/HTTP/CORS

et le code exemple en question issu de ce site :

Code : Tout sélectionner

var invocation = new XMLHttpRequest();
var url = 'http://truc.autre/resources/credentialed-content/';
    
function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true;
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}
Reste à voir si cela peut effectivement fonctionner avec le script gpx.js du plugin Leaflet (https://github.com/mpetazzoni/leaflet-gpx) utilisant XMLHttpRequest dont l'auteur semble encore assurer une maintenance… (A moins d'une obligation de vraie URL http://)

A suivre … ou voir si d'autres pistes sont possible si l'on ne veut pas proposer à un utilisateur un chargement manuel d'un fichier GPX...

Répondre