[Leaflet] Utiliser GeoJson généré par Overpass

Bonjour à tous,

Je progresse doucement sur l’utilisation de Leaflet et ses potentialités infinies en webmapping, notamment autour d’OSM ! :sunglasses:
J’ai un petit point de détail sur lequel je bloque, et je voulais avoir votre avis.
Mes fichiers de données, souvent générés en GeoJson via l’API OverPass Turbo (mais idem avec des fichiers GeoJson de QGis) ne contiennent initialement pas de définition de variable
Je dois donc l’ajouter manuellement en écrivant : var mavar = […]; dans le GeoJson ("…" correspond au contenu initial du fichier)
Du coup, je peux appeler “mavar” dans le script leaflet avec la ce genre d’appel :

L.geoJson(mavar, {
    onEachFeature: onEachFeature
}).addTo(map);

Afin de ne pas avoir à modifier l’ensemble de mes GeoJson manuellement, j’aurai aimé ajouter de manière “dynamique” cette déclaration de variable.

J’ai posé la question sur Developpez, et malheureusement la solution proposée m’est hors de portée…
En même temps je parle là bas à de “vrais développeurs” (ce qui n’est et ne seras pas mon cas avant un moment ! :blush: )

Parfois, on trouve des solutions plus simples, donc je tente ma dernière chance ici avec vous.

(et puis comme ça, si certains ne connaissent pas LeafLet, ce sera l’occasion pour eux de le découvrir)

Merci et à +

Sylvain M.

Je pense que tu prends le problème par le mauvais bout quand je lis ça : “”
Le geoJSON est un fichier de données, pas un script que ton navigateur exécute. D’ailleurs, le fait que tu doives rajouter du code JS dans le JSON montre bien que la balise sert à exécuter du code (JS ici en l’occurence).

Dans le principe, je verrais plutôt : “le code HTML contient quelque part un appel à Leaflet avec en paramètre l’URL du fichier geoJSON”. Le passage en paramètre de l’URL pouvant se faire de plusieurs façons, faut regarder la doc de Leaflet (je ne connais pas Leaflet).

Pour plus de d’aide, il faudra voir la page web en question.

Merci beaucoup de te pencher sur ma question,

Voici un lien vers une page de tests :
http://symont.pagesperso-orange.fr/osm/leaflet_demo_megalith.html
J’ai fait une requête sur Overpass sur les mégalithes de Basse-Normandie, exportée en GeoJson.
J’ai ensuite modifié mon fichier de données GeoJson pour le convertir en script (merci d’avoir reformulé mes propos : tu as totalement raison !).

Donc, la question si je comprends bien, c’est “Comment passer en paramètres Leaflet l’URL du fichier de données GeoJson” ? (non modifié)

Sylvain M.

(d’ailleurs, si vous avez des remarques générales sur cette page web, n’étant pas du tout développeur, je prends tous les conseils / critiques !)

A+

Sylvain M.

Pas le temps de regarder mais c’est exactement ça, cherche sur le web comment faire.

Bonjour,

Tu peux essayer cette syntaxe :

  $.getJSON(lien/vers/mon/fichier.geojson", function(myData){
    L.geoJson( myData, {
      onEachFeature: function( feature, layer ){
        <<...>>
      }
    }).addTo(map);
  });

Cela doit marcher en pointant vers un fichier geojson en local sur ta machine ou vers un fichier distant par URL.

Exemple en fichier joint, un fond de carte et des données rafraîchies régulièrement sur les tremblements de terre.

En bonus, un tutoriel leaflet sans séismes ni mégalithes mais avec des rats, offert par Maptime Boston.
EQ.zip (783 Bytes)

Une autre solution qui ne nécessite pas JQuery

function loadJSON(file, callback) {   
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', file, true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
        }
    };
    xobj.send(null);  
}
		
loadJSON('megalith.geojson',function(response) {
    // Parse JSON string into object
    var megalith_JSON = JSON.parse(response);
    var geoJsonLayer = L.geoJson(megalith_JSON, {
        onEachFeature: function (feature, layer) {
            if (feature.properties.name == undefined) {
                var popupname = 'Mégalithe sans nom'; }
            else {
                var popupname = feature.properties.name ; }
            layer.bindPopup('<b>' + popupname + 
                            '</b><br><a href="https://www.openstreetmap.org/' + 
                            feature.id + '">OSM</a>');		
        },
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {
                icon: L.icon({
                iconUrl: 'megalith.png',
                iconSize:     [36, 36], 
                iconAnchor:   [18, 18], 
                popupAnchor:  [0, -18]  })
        })}
    });
    markers.addLayer(geoJsonLayer);
});

Autre alternative trouvée au hasard de ma recherche sur le sujet : le plugin Leaflet-Ajax dispo à https://github.com/calvinmetcalf/leaflet-ajax

Allows you to call JSON via an Ajax call with a jsonp fallback.

var geojsonLayer = new L.GeoJSON.AJAX(“geojson.json”);

Une seule ligne pour charger le GeoJSON, c’est à essayer.

Je n’avais pas vu vos réponses (désolé, je n’ai pas eu d’alerte e-mail).
Merci à vous tous : je pense que la dernière solution sera la plus simple a implémenter pour moi : je vais essayer !
MERCI !

Sylvain M.