Affichage avec le plugin Leaflet-ajax

Version imprimable

16/07/2019, 09h03
Cindy P.

1 pièce(s) jointe(s)

Affichage avec le plugin Leaflet-ajax
Bonjour,

Je suis en train de créer une carte interactive à partir de Leaflet. Je souhaitais intégrer un fichier externe GeoJSON. Sur le tutoriel de Leaflet, il est préconisé de modifier le fichier geojson avec var ma_variable = contenu_fichier_geojson, puis d'enregistrer ce nouveau fichier en .js . Pas de souci là-dessus, ça fonctionne très bien !
Cependant mon problème est que mon fichier geojson que je souhaiterai utiliser va être mise à jour au moins une fois par jour. Et évidemment il est hors de question que je le modifie manuellement à chaque fois ! 8O

J'ai vu qu'il existait le plugin Leaflet-ajax (https://github.com/calvinmetcalf/leaflet-ajax), sauf que je n'arrive pas à le faire fonctionner...
J'ai enregistré l'ensemble des données du plugin en local. Dans mon script html, dans mon <head>,
j'ai bien ajouté l'appel au script : <script type="text/javascript" src="leaflet-ajax-gh-pages/dist/leaflet.ajax.js"></script>.
Mon fichier geojson semble correct (je le mets en pièce jointe).
Enfin dans ma balise <script>, je crée ma carte "mymap" (pas de problème !), et j'appelle mon fichier geojson de la sorte :
Code:

1 2 var geojsonLayer = new L.GeoJSON.AJAX("Test_point.geojson"); geojsonLayer.addTo(mymap);
Et mes données ne s'affichent pas :( Je ne comprends pas vraiment pourquoi...
Je teste mon script html sous Firefox. Ma version de Leaflet est la 1.5.1

Si quelqu'un a des idées sur le pourquoi, ça ne fonctionne pas... Je serais également preneuse d'une autre solution "facile", si jamais !

Merci beaucoup pour votre aide ! :)

Pièce jointe 491282

Cindy
16/07/2019, 11h09
Doksuri

Salut,

je n'ai jamais utilise leaflet-ajax, mais pour mettre a jour de la data, tu peux
- recup ta data en ajax (classique)
- stocker la data dans des variables (pour ne pas refaire des appels ajax inutils)
- clear ton layer
- repeupler ton layer avec la nouvelle data
16/07/2019, 14h05
Cindy P.

J'ai effectivement vu, en farfouillant sur le web, qu'il y avait des solutions en utilisant ajax. Mais je ne connais pas du tout ce langage. Je ne sais même pas comment intégrer de l'ajax dans du html donc ça me parait compliqué pour moi comme solution.
J'y viendrai peut-être si je ne trouve rien de plus simple.
16/07/2019, 14h11
Doksuri

effectivement, si tu debutes, ma solution risque d'etre complexe...
as-tu des erreurs dans la console de debug (F12) => onglet "console"

si tu ajoutes un console.log(geojsonLayer);, qu'as-tu dans la console ?
16/07/2019, 14h18
Cindy P.

Je ne connaissais pas cette ligne de code pour connaître l'erreur en cause (merci !). La console m'indique ce type d'erreur : "Raison: La requête CORS n'est pas HTTP". En regardant l'aide associée, j'appelle bien un fichier local, mon URL commence par "file:///". Alors qu'apparemment l'URL devrait être en https....
Est-ce que tu saurais comment je peux créer une telle adresse ?
16/07/2019, 14h51
Doksuri

ce sont les problemes "types" de crossdomain.
tu ne peux pas faire des appels ajax a un autre domaine (et non plus faire appel a des fichiers locaux file:///....) pour des questions de securite

je t'invite a te faire un serveur local (wampserver) et d'y mettre ton code/fichiers, tu pourras ainsi faire des requetes en http://localhost....
17/07/2019, 08h23
Cindy P.

J'ai pu installer Wampserver, et tout fonctionne à merveille ! :yaisse2:
Merci beaucoup pour ton aide ! :D
Bonne journée