Leaflet.js 和使用 geoJSON 加载的表单文件

Question

After creating a map using leaflet.js and then loading a geoJSON layer, I am trying to add a popup to each feature when clicked - the examples I can find all assume the geoJSON added inline, but I load mine from a file (which I would have thought more common, but anyway..) and I can't get it to work.

I know the geoJSON is OK, because I have this working using Google Maps, but I want to try and do this using Leaflet.js

The below will load the geoJSON layer if I don't attempt the "onEachFeature" call

var map = L.map('map').setView([55.505, -0.09], 7);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href=”http://osm.org/copyright”>OpenStreetMap</a> contributors'
}).addTo(map);

var geojsonLayer = new L.GeoJSON.AJAX('[path-to-geoJSON-file]');

function onEachFeature(feature, layer) {
  if (feature.properties && feature.properties.name) {
    layer.bindPopup(feature.properties.name);
  }
}

L.geoJSON(geojsonLayer, {
  onEachFeature: onEachFeature
}).addTo(map);

//  commewnt out above block and the below works to just load the layer
geojsonLayer.addTo(map);

[edit] as Grzegorz T. has kindly pointed out, this "looks correct as much as I can say", and indeed it does work if I load the geoJSON directly into the geojsonLayer var, either via code-behind or a vanilla ajax call, so the issue with the above is clearly something to do with the GeoJSON.AJAX plugin, which is somehow not loading the geoJSON in quite the way the rest of leaflet expects. If anyone has any ideas I'd be nterested, but am happy enough not using the plugin.

Answer 1

Yet the documentation has not been read. Not only the leaflet but also L.GeoJSON.Ajax had to be looked into. Not only is it described nicely and there are examples, laziness;)

Just change nazwa to name because i used a different geojson file

var map = L.map('map').setView([52.22977, 21.01178], 7);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href=”http://osm.org/copyright”>OpenStreetMap</a> contributors'
}).addTo(map);

function onEachFeature(feature, layer) {
  if (feature.properties && feature.properties.nazwa) {
    layer.bindPopup(feature.properties.nazwa);
  }
}

const geojson = 'https://raw.githubusercontent.com/ppatrzyk/polska-geojson/master/wojewodztwa/wojewodztwa-min.geojson';

let jsonTest = new L.GeoJSON.AJAX(geojson, {
  onEachFeature: onEachFeature
}).addTo(map);

If you do not use jquery and you do not need to run this code on IE, I recommend another solution, ie using fetch, take a look at my example