[plugin]PLX_TRACE partager vos ballades GPX sur OpenStreetMap avec leaflet.js

gcyrillus-nomade · mars 2022

Voici un plugin pour PluXml embarquant ... un plugin pour leaflet.js et OpenStreetMap :

Derniere version (multilingue) : https://github.com/gcyrillus/plx_trace/archive/refs/heads/2.16.zip

https://leafletjs.com/ & http://www.osm.org/ (voir le sujet https://forum.pluxml.org/discussion/7152/un-plugin-pour-afficher-des-traces-gpx)

A quoi sert-il ?

Ils vous permet de partager vos cartes de ballades au travers de vos fichiers gpx.

Pour l'utiliser

télécharger cette archive et dézipper le répertoire plx_trace dans le répertoire plugins de votre PluXml.

Activer le plugin

allez dans configuration.

Créer un répertoire ou utiliser l'un de ceux présent en démo.

Glisser / déposer votre fichier fichier gpx dans la zone indiquée ou cliquer sur le bouton 'select file' pour ouvrir l'explorateur.

Option de preview de la carte dans l'admin ainsi que de l'action à effectuer si un fichier gpx du même nom exite déjà (defaut : signaler, autres options a cocher : renommer ou remplacer)

A droite de chaque zone de dépôt de fichier, un menu liste chaque fichiers disponibles.

En cliquant sur l'un deux, un code à copier apparait dans la boite sous la liste.

Copier ce code et coller le dans votre article là ou vous souhaiter afficher votre carte.

**Vous pouvez afficher autant de carte que vous le souhaitez **.

Visuel coté administration

un lien permettant aussi d'effacer un répertoire (ceux de démos par exemple ) en demandant une confirmation
le fichier ajouter en glisser/déposer est notifié et aussitôt disponible dans la liste
la récupération du code se fait en copiant le contenu de la boite sous la liste.

Le plugin est en version 2.16 en attendant vos retour et suggestions pour y retoucher au besoin.

Vous pouvez aussi en faire un fork.

Bonnes ballades.

cpalo · mars 2022

Bonsoir,
Merci pour ce travail...
Je testerai....

LAuCoBa57 · mars 2022

Merci pour le travail

Je ne suis pas en mesure de tester : je parviens à télécharger le plugin, à l'activer et à créer un répertoire pour les traces mais c'est tout
Chez moi impossible d'ajouter un gpx (malgrès modifs des droits) je reçois une erreur 404

Et lorsque j'ajoute le code dans un article rien est ajouté ( exemple : laucoba.ddns.net/blog/index.php?article9/velotaf )

gcyrillus-nomade · mars 2022

Okay, apparemment, c'est du au fait que tu PluXml se trouve dans un répertoire de ton serveur, le script remonte à la racine et forcement ne trouve pas l'arborescence attendu.

Je vais regardé ça, j'avais opté pour les chemins depuis la racine , car en relatif, cela bogger avec l'urlrewriting et MyBetterUrl.
Non seulement , il ne trouve pas le fichier, mais le plugin ne semble pas non plus injecter le code en remplaçant la balise <plx_trace/>.

Il faut que je fasse une installe de plux dans un sous répertoire pour expérimenter ça à la maison.
Dés que j'ai une solution, je la remonte.

Cdt

gcyrillus-nomade · mars 2022

@LAuCoBa57

après quelques tests avec une version en racine, une version en sous-dossier(ta config) et avec urlrewriting ou pas, il s’avère qu'il faut préfixer le lien vers le fichiers de 3 façons différentes . ./ , ../ ou ../../ . Je te propose donc une version modifié qui va se charger de tester ça et de reconstruire le lien vers le fichier selon la config. ~~github.com/gcyrillus/plx_trace/archive/refs/heads/v2.zip~~

Avant de faire le test, supprime le plugin depuis l'administration, de façon à l'effacer entierement ainsi que ses traces de configuration.
remet le repertoire plx_trace dézipper dans le repertoire plugins de Pluxml et active le. Cette version ne demande pas de configuration et la gestion du plugin se fait par le menu vertical principal avec le lien intitulé:TRACE GPX, en principe positionné en dernier dans le menu.

Les liens dans le code à insérer sont de type <script>const gpxFile='plugins/plx_trace/gpx/MonDossier/monFichier.gpx';</script> , Les liens indiquer de cette façon :./plugins/plx_trace/gpx/MonDossier/monFichier.gpx n'ont à priori pas besoin d'être mis à jours en plugins/plx_trace/gpx/MonDossier/monFichier.gpx , un ../../ ou / , eux doivent être retiré. Sinon , reprendre les codes depuis l'admin et mettre à jours ceux déjà utiliser dans les articles.

Par contre, la page que tu avais mis en exemple , ne montrer rien , comme si le plugin n’était pas actif. Si le lien vers le fichier gpx est mauvais, la boite reste visible sans carte avec comme titre Chargement... . Peut tu me confirmer que tu avais bien cet affichage avec le plugin activé ?

Cdt

LAuCoBa57 · mars 2022

@gcyrillus-nomade
Tu parles de cette page ?

gcyrillus-nomade · mars 2022

@LAuCoBa57
oui , pour le coup je n'y vois que <div id="myMapGpx"> </div> dans le code source, manque la constante indiquant le lien vers le fichier gpx, si toutefois tu as le plugin à jour et actif

possible que si tu as installer un editeur en WYSIWYG , que la balise script et <plx_trace/> soit retiré par l'éditeur.
Cdt

LAuCoBa57 · mars 2022

@gcyrillus-nomade
Plugin mis à jour et activé
J'ai désactivé l'éditeur qui en effet avait retiré la balise
Par contre ça ne fonctionne pas

gcyrillus-nomade · mars 2022

@LAuCoBa57

bonsoir, oui, je viens aussi de m'apercevoir qu'il y avait un soucis avec les archives sur github. elles ne fonctionnent pas , pourtant les codes sont identiques à ceux que j'ai en local et ma démo en ligne http://gcyrillus.alwaysdata.net/article245/demo-plx_trace . je vais essayer de régler ça dans la soirée . C'est le genre de choses qui m'arrive tous le temps ... ça marche, mais ça marche pas, puis si ça marche quand même ah bah non, ah ben si , faut juste que je trouve ou ça coince

Bonne soirée.

gcyrillus-nomade · mars 2022

@LAuCoBa57

J'ai mis à jour les fichiers sur Github à https://github.com/gcyrillus/plx_trace/ en ne laissant qu'une branche.
A priori, l'archive dézipper est cette fois-ci 100% fonctionnelle coté front et coté admin. Cette version prend en compte l'emplacement de PluXml (racine ou sous-dossier) et l'activation ou non de l'urlRewriting (pas vérifier avec MyBetterUrl)

tous retours sont les bienvenus

Cdt

LAuCoBa57 · mars 2022

@gcyrillus-nomade
Super ça fonctionne !
Je vais regarder du coté de l'éditeur (j'utilisais TinyMCE mais il "bouffe" certaines balises)

gcyrillus-nomade · mars 2022

Super, content pour toi.

Oui, c'est le soucis des éditeurs en générale, ils nettoient le code avant de le soumettre. Je ne m'en sert pas en générale, j'ai opté pour kzcodemirror qui colorise le code et me convient parfaitement, mais il faut être familier avec le html (balise,attributs,structure,..), et le un peu le css pour coordonner ces deux là, et éventuellement/ponctuellement javascript . Le preview fait le reste pour te confirmer que ça ressemble à ce que tu veut avant de publier .

Bonnes ballades

gcyrillus-nomade · mars 2022

@LAuCoBa57 Petites questions pratiques:

Si le fichier gpx que tu veut téléverser à le même non qu'un fichier déjà présent dans le répertoire. Que faudrait-il qu'il se passe ?
1. écrasé le fichier existant (défaut et comportement actuel)
2. renommé le fichier (avec un N° en plus derrière. etape1.gpx devient etape11.gpx puis etape12.gpx par exemple) ou autre méthode de renommage.
3. ne rien faire en indiquant qu'un fichier du même nom existe déjà

Est ce qu'un preview de la carte gpx televersé serait utile ?

Cdt

LAuCoBa57 · mars 2022

Bonjour @gcyrillus-nomade

A mon avis il peut être intéressant de signaler qu'un fichier avec le même nom existe déjà dans le répertoire ...

Je voulais te signaler que sur mon mobile j'ai le cadre avec Chargement mais rien qui ne se charge
On (en fait ma femme mais elle voulait rester anonyme ) m'a signalé que la carte passe en premier plan par rapport au footer ... ça vient certainement du thème mais je fais remonter!

Maintenant il faut que je regarde pour l'éditeur (on va tenir le blog à 2 et madame ne maitrise pas le html) et pour les url

gcyrillus-nomade · mars 2022

Merci de tes retours.
@LAuCoBa57

pour garder le pied au dessus de la carte : ajoute au css du theme themes/kzMasonic/css/theme.css
```
#nav-footer{z-index: 1000;}` 
```
Cela devrait suffire
Sur mon mobile, la carte s'affiche mais les icônes start/end (rouge et verte) manquent avec le navigateur samsung seules les ombres s'affichent. avec FireFox et chrome, tout est affiché de mon coté.
je vais faire une mise à jour pour la façon de gérer les noms de fichiers en doublons, en mettant en signalement l'option par défaut. autre choix seront ecrasé ou renommer avec des lettres etape1.gpx deviendrait etape1-AAA.gpx , puis etape1-AAB.gpx et ainsi de suite (26x26x26 possibilités + 1 par fichiers du même nom )

~~Je met à jour ce post sitôt la MAJ faite.~~
https://github.com/gcyrillus/plx_trace/
Voici une nouvelle version qui permet de configurer et choisir quoi faire si le fichier existe déjà en cochant un bouton avant de l'envoyer . Par défaut , un fichier du même nom ne sera pas copier ni remplacer.

Cdt

LAuCoBa57 · avril 2022

@gcyrillus-nomade
La modif du css fonctionne parfaitement

Pour ce qui est de mon mobile (iphone avec Chrome ou Safari) j'ai le cadre + Chargement mais rien qui s'affiche

Maintenant je vais m'attaquer à cette histoire d'éditeur

gcyrillus-nomade · avril 2022

~~Okay,~~

Dans chrome/safari pour Iphone, est ce que ta première page d'exemple : http://laucoba.ddns.net/test/carto.html passe ou bien elle aussi pose problème . Cela me permettra de voir si il s'agit d'un probléme provoquer par l’implémentation du plugin pour PLuXml ou si c'est juste inhérent au plugin pour leaflet .

~~Je n'ai pas d'iphone, sur Android Chrome , voici ce que je vois : (samsung idem sans les icônes verte et rouge .. mystéres).~~

Pour l'éditeur, as tu l'option source? ou la possibilité de le désactiver au moment d'ajouter le code et de l'enregistrer. Je comprend que prendre des cours de HTML n'est franchement pas une simple solution
En fait, quel plugin éditeur utilises tu ? (avec le lien vers l'archive que tu utilises)

Cdt

gcyrillus-nomade · avril 2022

@LAuCoBa57

Je viens de mettre une nouvelle version en ligne à ~~https://github.com/gcyrillus/plx_trace/archive/refs/heads/dev2.13.zip~~ https://github.com/gcyrillus/plx_trace

~~Celle-ci permet , au choix, de prévisualisé dans l'admin les cartes (+ maj lien vers fichiers, + index.html dans les répertoires + htaccess) .~~

Ce qui peut éventuellement être intéressant à tester , rapport aux défauts dans l’phone, est la création d'un fichier .htaccess à la création d'un répertoire (ceux-ci seront manquant dans l'archive, git-hub n'en veut pas) il faut donc créer le répertoire depuis l'admin pour générer ce fichier .
Si tu sais créer un fichier .htaccess tu peut aussi le faire et le mettre dans les répertoire ou sont tes fichiers gpx.
Son contenu:

Header add Access-Control-Allow-Origin "*"

~~Cela facilite l’accès aux fichier pour JavaScript . En ajoutant ce fichier dans les répertoires, tu peut déjà tester l'affichage dans l'iphone.~~

Bon WE

LAuCoBa57 · avril 2022

@gcyrillus-nomade
le htaccess n'a pas réglé le problème sur iphone ... par contre la page carto.html fonctionne elle correctement

pour l'éditeur j'utilisais TinyMCE , j'ai essayé plxEditor ...

gcyrillus-nomade · avril 2022

Okay, je pense que je ne vais pas pouvoir regler ce soucis sur iphone. En cherchant un peu, il semblerait qu'il y est des problèmes récurrents d'affichages avec openstreetmap (config serveur ?) De mon coté , les png (carte en fond d’écrans) ne s'affichent pas dans chrome(edge aussi donc) coté administration, => webkit ne peut les charger car le serveur ne reconnait pas la requête et renvoi un code 403 ... (info trouvée dans les outils développeur des navigateurs). Le htaccess permet cependant de chargée le fichier gpx et d'affiché son tracé.
Le problème vient du user-agent envoyer par le navigateur. voir (parmi d'autre liens d'un moteur de recherche ) https://fr.joecomp.com/how-change-user-agent-safari / https://geekflare.com/change-user-agent-in-browser/ etc... (pour chrome, il vaut mieux prendre une extension ), pour safari, la procédure se fait par le menu beaucoup plus simplement a priori). En fait c'est un soucis devenu récurrent avec , par exemple chrome qui rend aussi de plus en plus difficile la modification de ce 'user-agent' .... ce qui une fois de plus me conforte dans l'idée de garder FF comme navigateur principal , Microsoft m'a perdu il y a bien longtemps et chaque nouvelles tentative avec chrome se solde par un gros non! trop intrusif et mauvais joueur à mon gout. J'en suis aussi arrivé à ignorer Opéra.

Pour les éditeurs,

ckeditor bien complet fonctionne bien pour moi.
tinyMCE ne fonctionne pas pour moi : version trouvée ici : https://kazimentou.github.io/ du coup pas testé
J'ai tester le plugin TinyEditor, mais les icônes ne s'affichent pas , alors j'ai laissé tomber (probablement du a avoir PluXml dans un sous-dossier du serveur). j'ai donc laisser tombé cet option.
plxEditor reformate le code, sauf si on passe en mode source et qu'on enregistre en étant en mode source. Mais à la première modif, le code est reformaté. <plx_trace/> est transformé en : (donc pas reconnu par le plugin)

<plx_trace>
</plx_trace>

Il y a du mieux, la balise script n'est pas évincée, mais c'est encore casse-croute.
Je pense à tester à partir d'une balise HTML auto-fermante classique en y accolant un data-attribute.J’essaie de voir ça ce week-end, si plxEditor te convient.
@LAuCoBa57
02/04 Bon ça marche, en utilisant ~~par exemple <br data-use="plx_trace"/>, plus qu'a refaire une MAJ si plxEditor devient ton éditeur.~~ <p data-use="plx_trace"> </p> est une option envisageable et compatible avec les éditeurs qui ne retireront pas la balise script. plxEditor ou plus gros, ckeditor (une version 4.18.x full, est envisageable en MAJ au plugin de Stephane avec un modèle détrompeur pour l'insertion du code).) sont compatibles. Dis moi ce qui te conviendrais . Je ferais toutefois une MAJ au moins pour le code à insérer, je peut faire un fork de ckeditor en 4.18 en version Full avant que celle-ci ne soit effacée de mon PC..

04/04 : voici une version avec CKeditor avec un modèle pour faciliter l'insertion du code dans un article (pour Madame) : https://github.com/gcyrillus/plx_trace/tree/test-laucoba / https://github.com/gcyrillus/plx_trace/archive/refs/heads/test-laucoba.zip
visuel pour l'aperçu CKeditor et modèle :

Cdt

gcyrillus-nomade · avril 2022

@LAuCoBa57

N'ayant pas eu de retour et comme je viens de faire une mise à jour. j'ai passé la version avec CKeditor en pre-release à :https://github.com/gcyrillus/plx_trace/releases/tag/mix si cela t’intéresse toujours.

La mise à jour quand à elle, permet d'afficher autant de carte que l'on veut par page et le code à insérer est réduit à un élément avec un data-attribute pour le fichier gpx. <div data-gpxFile="plugins/plx_trace/gpx/demo/demo.gpx"> </div> compatible avec une majorité d'éditeurs (code à insérer en mode source, bien sur). Cette dernière version est la 2.15 https://github.com/gcyrillus/plx_trace/archive/refs/heads/2.15.zip et c'est cette version qu'il est conseillé d'utiliser.

Cdt

gcyrillus-nomade · avril 2022

Le plugin est depuis la 2.15 multilingue

interface de l'admin
formatage de la date dans la carte
Infos sous la carte affichée.
langue dispos : fr et en

LAuCoBa57 · avril 2022

@gcyrillus-nomade

Désolé de ne pas avoir été très actif ces derniers temps mais Covid au boulot + à la maison

Je regarde ça ce week-end, en tout cas merci beaucoup pour tout ce que tu as fait

gcyrillus-nomade · avril 2022

@LAuCoBa57 , ne soit pas désolé, personne n'est obligé de rien

L'idée m’intéressait au premier abord. PluXml -> gpx <->xml , et un peu de JavaScript auquel me frotter

Cdt

griffon · avril 2022

Bonjour,
Très bon boulot.
Une question : à quoi sert le .htaccess (Header add Access-Control-Allow-Origin *) ? Il pose pb au moins sous PHP 8 sous windows (je n'ai pas testé sous linux) avec le message

dans la console Firefox :
"Erreur d’analyse XML : erreur de syntaxe
Emplacement : http://localhost/plugins/plx_trace/gpx/demo/demo.gpx
Numéro de ligne 1, Colonne 49 :
dans la console Chrome :
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Il suffit de supprimer la ligne.

cdlt.

gcyrillus-nomade · avril 2022

Bonsoir @griffon

Merci beaucoup.

Pour le htaccess, j'ai du l'ajouter car Chrome refusais de me faire le preview dans l'admin (info de la la console à propos des CORS policy) , dans le même temps, @LAuCoBa57 m’indiquai que les cartes ne s'afficher pas sur son Iphone avec Safari ou Chrome. Je suis encore dans l'incertitude de la raison pour laquelle chrome m'indique un soucis dans l'admin sous windows10 (sans le htaccess), mes connaissances et expériences personnelles ne me permettent pas de trouver une piste sur ce qui provoque cela. Pour l'Iphone, je n'ai aucun media d'apple à dispo pour savoir si il y a un soucis similaire, ni pour tester par moi même de visu. Est ce du à un code mal fait , une configuration serveur, une version de PHP .. aucune idée, je n'ai aucune compétence à ce niveau qui me permette de lever un lievre.

Le htaccess, pour le coup, a pour moi, résolue le soucis de preview dans l'admin avec Chrome(-webkit-) et Windows10 / php 7.2.19 ,sans avoir eu encore de retour à propose de safari/chrome pour Iphone. Idem pour le test en ligne à http://pluxml-588.gc/index.php?article1/premier-article (front et admin m'affiche la carte sans sous-aîe )

Tout coup de main est la bienvenue. Je suis partie sur une idée préconçu, il est aussi très probable que mon approche n'est pas la plus concise ni la plus efficace, économique

Pour l'erreur d'analyse de syntaxe, si il y a une erreur 500, il est probable que ce n'est pas du au fichier , mais à la page d'erreur renvoyer . As tu des informations dans ton log d'apache qui indiquerais ce qui provoque cette erreur ?

Il va falloir que je prenne le temps d'ajouter un php 8 sur mon serveur de test pour aussi appréhender ces erreurs. Ce ne sera pas dans ces deux semaines qui viennent pour le moment. Je vais tenter de me documenter sur ce qui provoque cette erreur 500 entre temps.

Merci beaucoup de tes retour.

gcyrillus-nomade · avril 2022

@griffon bonjour,

Après avoir installer une version php 7.3.2 et 8.1.5 , toujours sous windows/apache , le fichier htaccess est pour moi toujours nécessaire pour le preview en Admin et ne provoque aucune erreur 500. sur quel configuration as tu ce soucis ?

(php 8 va m'obliger à revoir un script à propos des archives ZIP, mais cela ne concerne pas ce plugin, c'est le seul défaut que j'ai relevé pour le moment , excepté le $isHTML=false , pour PluXml déjà évoqué sur son fil et qui sera surement corrigé à la prochaine maj)

Cdt

griffon · avril 2022

Bonjour,
Désolé de la réponse tardive.
Le problème vient de la gestion de l'affichage dans script.js (affichage pour le preview en Admin).
L'affichage dans un article ou une statique qui utilise jsTpl.js fonctionne et n'a pas besoin de htaccess

J'ai testé en utilisant uniquement jsTpl.js même en preview Admin. Ca marche très bien : plus de htaccess.

Pour çà j'ai modifié ainsi :

dans admin.php
ajout du code suivant en fin, après la balise </form>

<div id="trace_preview"> </div>
<script src="<?php echo PLX_PLUGINS.$plugin.'/script.js'; ?>"></script>
<script> const prefX = "<?php echo PLX_PLUGINS; ?>"; </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.5.1/gpx.js"></script>
<script src="<?php echo PLX_PLUGINS.$plugin.'/jsTpl.js'; ?>"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />

dans script.js :
1 suppression du code appelé par le setTimeout
2 ajout du code suivant en fin, après la ligne "code.innerHTML=codeTPL; "
el = document.getElementById('trace_preview');
while (el.hasChildNodes()) {
el.removeChild(el.firstChild);
}
if (document.querySelector('input[name="preview"]').checked && tracegpxFile !=='' ) {
newdiv2 = document.createElement( "div" ),
el.appendChild(newdiv2);
el.children[0].setAttribute("data-gpxFile", tracegpxFile);
displayMap(newdiv2, "../../"+tracegpxFile);
};

Voilà.
Si cà peut vous aider.
Cordialement.

gcyrillus-nomade · mai 2022

Bonjour @griffon,

Tout d'abord merci du temps que tu as consacré à ces tests

Je vais voir ces modifications dés que possible et tenter de comprendre pourquoi un fichier situé au même endroit est traité différemment par le navigateur selon un script.
Cependant , le setTimeOut permettais d'actualisé l'image (FF encore) si l'on passait d'un fichier à l'autre dans le select. Mon soucis d’accès était déjà là avant que j'encapsule une partie du script dans ce setTimeOut().j'ai donc du zappé un autre truc en cours de temps.

Cdt et bonne fin de W-E

gcyrillus-nomade · mai 2022

Bonjour @griffon,

en effet , plus de soucis de CORS avec Chrome, maintenant reste a replacer ça dans la boucle d'affichage des répertoires pour que la carte s'affiche bien sous chaque listes et pas en bas de page . Pour le coup, les icônes sont perdues
Je vais reprendre l'idée de détruire et recréer le conteneur à chaque preview plutôt que de mettre à jour uniquement le fichier gpx à (re)charger comme c'est le cas actuellement , je te reconfirmerai une fois la modif faite et l'affichage recallé (conteneurs de preview pour chaque répertoire) dans l'architecture de la page.
Merki et bon W-E

edit : Le problème nécessitant le fichier htaccess vient du fait que les preview étaient affichés dans un object . En reprenant le code est en reinjectant directement dans l'admin tous les lien vers les scripts, un object/iframe n'est plus nécessaire , donc plus de soucis de ce coté :
MAJ https://github.com/gcyrillus/plx_trace/archive/refs/heads/2.16.zip

dominik · juin 2023

Bonjour,
Je découvre ce plugin que je trouve très bien fait.
Un petit souci : pas moyen de téléverser un fichier depuis la partie admin. Ça ne me gêne pas, je copie à la main le fichier dans le dossier gpx.
Un autre problème qui me contrarie un peu plus :
J'ai mis un bandeau fixe en haut de ma page (avec un "sticky" dans le header.php) et, lorsque je fais défiler ma page, ma carte passe par dessus le bandeau.
Comme il n'y a qu'avec ce plugin que j'ai ce problème, y a-t-il un moyen d'y remédier avec une quelconque bidouille... ou une mise à jour :-)
Merci de vos réponses

[plugin]PLX_TRACE partager vos ballades GPX sur OpenStreetMap avec leaflet.js

A quoi sert-il ?

Réponses