Leaflet et fichier json

Pierre96, mardi 24 mai 2022 à 18h58
Modifié

Bonjour J’ai créé un fichier markers.json avec Delphi. J’ai également un fichier html pour générer une carte openstreet map. Comment charger et afficher les markers du fichier json dans mon script? Merci pour votre aide. Cordialement Pierre.

24/05/22 à 18h58
Modifié

+0 -0

Moté, mardi 24 mai 2022 à 20h38
Modifié

Bonjour,

Tu peux soit charger le fichier json via javascript, en faisant une requête, soit l’inclure directement dans ton hmtl.

La première méthode est sans doute plus propre, surtout si tu as beaucoup de données. Mais la deuxième est très facile Tu peux voir comment je fais ça ici, si tu veux :

Petites précisions : tes données doivent bien être en geojson. Aussi, par défaut, Leaflet considère que tes données sont en WGS84 (EPSG:4326).

24/05/22 à 20h38
Modifié

Avant je m’appelais Phigger - La vie, c’est comme les mirabelles - Si vous ne deviez lire qu’un seul de mes articles - PetitMote.fr

+1 -0

Pierre96, mardi 24 mai 2022 à 21h03

Merci beaucoup pour la réponse.

Je ne vois pas dans ton code de marker ni de latitudes et longitudes. Mon projet à pour but d’afficher la route d’un avion du départ à l’arrivée ainsi que les différents points de passage qui sont contenus dans le fichier .json. La méthode est-elle la même ?

Merci Pierre

24/05/22 à 21h03

+0 -0

Moté, mardi 24 mai 2022 à 21h13
Modifié

Si tu déroules sur la droite, les coordonnées sont en fin de ligne à chaque fois. Pense à exporter tes données au format geojson. (Edit : ah tiens, je l’ai déjà dit ça )

24/05/22 à 21h13
Modifié

Avant je m’appelais Phigger - La vie, c’est comme les mirabelles - Si vous ne deviez lire qu’un seul de mes articles - PetitMote.fr

+0 -0

Pierre96, mercredi 25 mai 2022 à 08h47

Merci , je vais mettre tout ceci en pratique. Amicalement Pierre

25/05/22 à 08h47

+0 -0

Pierre96, vendredi 27 mai 2022 à 15h40

Bonjour, J’ai réussi à générer un fichier géojson contenant mes points et les lignes qui les relient.

À tout hasard, saurais-tu comment convertir les linestring en geodesic et les afficher en tant que telles?

En tous cas, Merci pour ton aide qui m’a permis d’avancer sérieusement. Amicalement Pierre

27/05/22 à 15h40

+0 -0

Moté, vendredi 27 mai 2022 à 17h13

En cherchant trèsvite fait, j’ai ce premier résultat qui semble prometteur https://github.com/henrythasler/Leaflet.Geodesic

27/05/22 à 17h13

Avant je m’appelais Phigger - La vie, c’est comme les mirabelles - Si vous ne deviez lire qu’un seul de mes articles - PetitMote.fr

+0 -0

Pierre96, vendredi 27 mai 2022 à 17h49

J’ai trouvé également ce résultat, mais je ne sais pas l’utiliser sur un fichier externe geoSON. Une idée?

27/05/22 à 17h49

+0 -0

Moté, vendredi 27 mai 2022 à 18h23
Modifié

Il y a une méthode pour importer un geojson : https://github.com/henrythasler/Leaflet.Geodesic#geojson-support

Il te reste juste à charger le geojson, soit par requête javascript soit comme j’ai montré plus haut

27/05/22 à 18h23
Modifié

Avant je m’appelais Phigger - La vie, c’est comme les mirabelles - Si vous ne deviez lire qu’un seul de mes articles - PetitMote.fr

+0 -0

Pierre96, samedi 28 mai 2022 à 09h18

Bonjour, J’ai essayé cette méthode, mais sans succès. Mon fichier GeoJSON comporte les points et les lignes comme suit:

var waypoints = {"type": "FeatureCollection", "features":[ 
{"type": "Feature", "geometry":{"type": "Point","coordinates":[2.602011,48.998318]},"properties":{"name":"LFPG"}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[1.220861,49.031696]},"properties":{"name":"EVX"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[2.602011,48.998318],[1.220861,49.031696]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-0.455000,49.928333]},"properties":{"name":"ANGLO"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[1.220861,49.031696],[-0.455000,49.928333]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-2.005006,49.999172]},"properties":{"name":"ORTAC"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-0.455000,49.928333],[-2.005006,49.999172]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-4.330153,49.590343]},"properties":{"name":"LIZAD"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-2.005006,49.999172],[-4.330153,49.590343]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-6.150792,49.529911]},"properties":{"name":"AMPOP"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-4.330153,49.590343],[-6.150792,49.529911]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-8.000000,49.500000]},"properties":{"name":"RATKA"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-6.150792,49.529911],[-8.000000,49.500000]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-15.000000,50.500000]},"properties":{"name":"RODEL"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-8.000000,49.500000],[-15.000000,50.500000]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-20.000000,51.000000]},"properties":{"name":"5120N"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-15.000000,50.500000],[-20.000000,51.000000]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-30.000000,50.500000]},"properties":{"name":"H5030"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-20.000000,51.000000],[-30.000000,50.500000]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-40.000000,49.000000]},"properties":{"name":"4940N"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-30.000000,50.500000],[-40.000000,49.000000]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-50.000000,47.000000]},"properties":{"name":"4750N"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-40.000000,49.000000],[-50.000000,47.000000]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-56.709446,45.746387]},"properties":{"name":"GRAYY"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-50.000000,47.000000],[-56.709446,45.746387]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-60.000000,44.500000]},"properties":{"name":"N4460"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-56.709446,45.746387],[-60.000000,44.500000]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-64.390182,42.574501]},"properties":{"name":"ELERI"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-60.000000,44.500000],[-64.390182,42.574501]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-65.000000,42.000000]},"properties":{"name":"4265N"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-64.390182,42.574501],[-65.000000,42.000000]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-67.000000,41.000000]},"properties":{"name":"4167N"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-65.000000,42.000000],[-67.000000,41.000000]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-70.000000,40.000000]},"properties":{"name":"4070N"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-67.000000,41.000000],[-70.000000,40.000000]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-70.499451,39.352970]},"properties":{"name":"KENDA"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-70.000000,40.000000],[-70.499451,39.352970]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-71.710487,39.409760]},"properties":{"name":"LINND"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-70.499451,39.352970],[-71.710487,39.409760]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-72.830528,39.823357]},"properties":{"name":"OWENZ"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-71.710487,39.409760],[-72.830528,39.823357]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-73.861061,40.017303]},"properties":{"name":"CAMRN"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-72.830528,39.823357],[-73.861061,40.017303]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-73.756943,40.316193]},"properties":{"name":"CHANT"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-73.861061,40.017303],[-73.756943,40.316193]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-73.662560,40.484402]},"properties":{"name":"JAMCA"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-73.756943,40.316193],[-73.662560,40.484402]]}},
{"type": "Feature", "geometry":{"type": "Point","coordinates":[-73.778694,40.639927]},"properties":{"name":"KJFK"}},
{"type": "Feature","properties":{}, "geometry":{"type": "LineString","coordinates":[[-73.662560,40.484402],[-73.778694,40.639927]]}}]}

Je ne puis donc pas associer une variable aux lignes…

28/05/22 à 09h18

+0 -0

Moté, samedi 28 mai 2022 à 10h47

Quelles sont les erreurs de la console JS ? Quel est le code associé ?

Il doit y avoir moyen de filtrer les géométries pour ne garder que les lignes.

28/05/22 à 10h47

Avant je m’appelais Phigger - La vie, c’est comme les mirabelles - Si vous ne deviez lire qu’un seul de mes articles - PetitMote.fr

+0 -0

Pierre96, samedi 28 mai 2022 à 12h36

J’ai fini par réussir a afficher les lignes sous forme de geodesic en utilisant ceci:

const geodesic = new L.Geodesic().addTo(map);
	geodesic.fromGeoJson(waypoints);

Merci mille fois pour ton aide… Pierre

28/05/22 à 12h36

+1 -0

Pierre96, dimanche 29 mai 2022 à 09h53

Bonjour, J’ai une dernière question: J’ai créé un filtre pour ajouter afficher les points en plus des lignes:

function pointFilter(feature) {
	if (feature.geometry.type === "Point") return true
    }

Puis J’affiche les points comme ceci:

var points =  new L.geoJson(waypoints, {filter: pointFilter}).addTo(map);

Comment puis-je changer les icônes standards par des circleMarkers?

Merci de ton aide. Pierre

29/05/22 à 09h53

+0 -0

Moté, dimanche 29 mai 2022 à 12h27

C’est abordé dans le tuto geojson de leaflet, section pointToLayer https://leafletjs.com/examples/geojson/

29/05/22 à 12h27

Avant je m’appelais Phigger - La vie, c’est comme les mirabelles - Si vous ne deviez lire qu’un seul de mes articles - PetitMote.fr

+1 -0

Pierre96, dimanche 29 mai 2022 à 14h21

J’utilise le code suivant:

var geojsonMarkerOptions = {
    radius: 6,
    fillColor: "#000",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 1
};

	L.geoJSON(waypoints, {
    pointToLayer: function (feature, latlng) {
	  if (feature.geometry.type === "Point") {
        return new L.circleMarker(latlng, geojsonMarkerOptions);
	  
    }}}).addTo(map);

Il m’affiche bien les points sous la forme désirée, mais aussi les lignes directes. Comment éviter cet affichage des lignes?

Désolé d’être aussi novice en la matière…

29/05/22 à 14h21

+0 -0

Moté, dimanche 29 mai 2022 à 14h31
Modifié

Pas de soucis

Il faut que tu lui donnes à la fois une fonction pointToLayer, qui lui permet de transcrire les points en vecteur, et une fonction filter, qui lui permet de sélectionner uniquement les points (la fonction que tu avais fait avant). Sinon, tu lui dis juste de transformer les points en cercles, mais pas de filtrer !

Par ailleurs, pour ta fonction de filtre, tu peux la remplacer par :

var points =  new L.geoJson(waypoints, {filter: (feature) => feature.geometry.type === "Point"}).addTo(map);

Deux informations :

c’est un format dit de arrow function qui permet d’avoir une syntaxe très brève.
là, elle retourne directement l’expression feature.geometry.type === "Point", ce qui permet de l’évaluer et de retourner soit true soit false. Plus besoin d’écrire le if, ni le else, et par rapport à ta première version cela retourne quand même false même si tu n’écris pas le else, ce qui est un peu mieux vu que la fonction a un comportement plus prévisible (sinon, la fonction va retourner undefined, qui lorsque convertit en booléen est interprété comme false, mais là on est sûr de tout)

Edit : je suis de retour sur un PC, ça va me permettre de m’étendre un peu plus dans mes explications. Aussi, si jamais ça ne fonctionne pas, n’hésite pas à mettre un code complet, ce qui me permettra de faire des tests, il y a parfois des bouts de syntaxe où je ne suis plus trop sûr.

29/05/22 à 14h31
Modifié

Avant je m’appelais Phigger - La vie, c’est comme les mirabelles - Si vous ne deviez lire qu’un seul de mes articles - PetitMote.fr

+1 -0

Pierre96, dimanche 29 mai 2022 à 14h54

Je comprends, mais comment associer Le PointToLayer au filtre?

29/05/22 à 14h54

+0 -0

Moté, dimanche 29 mai 2022 à 14h59

Quand tu appelles ta fonctio. L.geoJson, tu lui passes en argument un objet, délimité mar les accolades {}. Un objet fonctionne avec un système de clé / valeur. Les deux clés que tu utilises sont filter et pointToLayer. Tu peux passer les deux dans l’objet (et donc 2 fonctions différentes), sans soucis, en les séparant par une virgule !

https://exercism.org/tracks/javascript/concepts/objects

29/05/22 à 14h59

Avant je m’appelais Phigger - La vie, c’est comme les mirabelles - Si vous ne deviez lire qu’un seul de mes articles - PetitMote.fr

+1 -0

Pierre96, dimanche 29 mai 2022 à 15h07

Je tente ceci: L.geoJSON(waypoints, { filter : (feature)=> feature.geometry.type==="Point"}, {pointToLayer: function (feature, latlng) { if (feature.geometry.type === "Point") { return new L.circleMarker(latlng, geojsonMarkerOptions); }}}).addTo(map);

Mais sans succès (Syntax error)

29/05/22 à 15h07

+0 -0

Moté, dimanche 29 mai 2022 à 15h15
Modifié

Il y a un problème dans ta façon de mettre plusieurs attributs dans l’objet, je te laisse vérifier le lien que j’ai mis juste avant. Si le problème persiste après, il faudra que tu me mettes le message d’erreur complet, que je puisse vérifier où est l’erreur.

Edit : je vois déjà une accolade fermante en trop
Edit bis : hmm, non en fait, j’ai rien dit

29/05/22 à 15h15
Modifié

Avant je m’appelais Phigger - La vie, c’est comme les mirabelles - Si vous ne deviez lire qu’un seul de mes articles - PetitMote.fr

+1 -0

Pierre96, dimanche 29 mai 2022 à 18h06
Modifié

Voici le message reçu:

https://drive.google.com/file/d/1GSvajMB3lfFnG7DbR8ShBevmhl_6EpT7/view?usp=sharing

Avec le code suivant:

L.geoJSON(waypoints, {
	filter : (feature)=> feature.geometry.type==="Point"},
    {pointToLayer: function (feature, latlng) {
	  if (feature.geometry.type === "Point") {
        return new L.circleMarker(latlng, geojsonMarkerOptions);
    }}}).addTo(map);

La ligne 1 est la 75 dans le script complet…

29/05/22 à 18h06
Modifié

+0 -0

Pas encore membre ?