Affichage avec le plugin Leaflet-ajax

**Cindy P.** · 16/07/2019, 09h03

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 !

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

Test_point.txt

Cindy

**Doksuri** · 16/07/2019, 11h09

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

**Cindy P.** · 16/07/2019, 14h05

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.

**Doksuri** · 16/07/2019, 14h11

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 ?

**Cindy P.** · 16/07/2019, 14h18

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 ?

**Doksuri** · 16/07/2019, 14h51

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....

**Cindy P.** · 17/07/2019, 08h23

J'ai pu installer Wampserver, et tout fonctionne à merveille !

Merci beaucoup pour ton aide !

Bonne journée

Affichage avec le plugin Leaflet-ajax [LeafLet]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager