CODEWITHSUNDEEP
javascriptleafletgeojson
nonothingnull
nonothingnull

Reputation: 37

(Closed) Leaflet.js GeoJson File: How I can get layer name on click event

This year I just have some adventure on Leaflet.JS mapping. I am newbie..

Since I am not familiar with Leaflet.JS with layer events I like to have some suggestion or solution whos have found it.

I have geojson direct to Leaflet like this

var geojsonFeatures =  {
      "type": "FeatureCollection",
      "properties": {'name': 'TestLayer'},
      "features":[
      {
        "type": "Feature",
        "properties": {'id': '01','popupContent': 'id=01'},
        "geometry": {
          "type": "Point",
          "coordinates": [
            175.2756,
            -37.7772
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {'id': '02','popupContent': 'id=02'},
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [
                175.27364730834958,
                -37.77322501372662
              ],
              [
                175.27849674224854,
                -37.776617142149554
              ],
              [
                175.28351783752439,
                -37.784486280685925
              ],
              [
                175.28879642486572,
                -37.781365860467126
              ],
              [
                175.2824878692627,
                -37.7707486617024
              ],
              [
                175.27364730834958,
                -37.77322501372662
              ]
            ]
          ]
        }
      }
    ]};

Then I load it as layer where can be edit to

//--load geojson file to maps--// 
L.geoJson(geojsonFeatures, {
  onEachFeature: onEachFeature
    });

Here, I like to get back GeoJson layer name if possible. I thought I can get from FeatureCollection under properties.name:-

var geojsonFeatures =  {
"type": "FeatureCollection",
"properties": {'name': 'TestLayer'},

Inside onClick Event I try to get layer name back

//--- when click layer: get layer name, object id and json ----//
function onEachFeature(feature, layer) {  //set each layer can be do editing
  drawnItems.addLayer(layer);
  layer.on('click', function(e){
    console.log(e.target.feature.properties.name);
    alert(drawnItems.getLayerId(layer));
  });
}
  1. Result: undefined on console.log for ..properties.name
  2. Result: random no like 100 on alert for ..getLayerId(layer)

But, I still can get layer name. I am stuck here. How to solve this problem?? I already 2 days think on this....

Update 25/2/22

After success get FeatureCollection properties data I move on @GrzegorzT. sample multi-layer-search. My main problem where I can remain this function:

...
.then(function (data) {
    // your name of layer
    // "properties": { "name": "TestLayer" },
    console.log(data.properties.name);

    let layer = new L.GeoJSON(data, {
      onEachFeature: function (feature, layer) {
        layer.on("click", function (e) {
          alert(e.target);
        });

I still need layername and e.target value each time I click layer object(geometry).

Please help me everbody..

Update 28/2/22

I found few method regarding manipulate LeafletJS & GeoJson. Meanwhile bro @Grzegorz T. are really save my days. I closed this thread and open new thread regarding Edit Selected Geometry Only .

Upvotes: 1

Views: 1784

Answers (1)

Grzegorz T.
Grzegorz T.

Reputation: 4113

You need to create a separate geojson data file And then using fetch or some other jquery ajax or axios get the data and add GeoJson to the map.

fetch("geojsonFeatures.geojson")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    // your name of layer
    // "properties": { "name": "TestLayer" },
    console.log(data.properties.name);

    let layer = new L.GeoJSON(data, {
      onEachFeature: function (feature, layer) {
        layer.on("click", function (e) {
          alert(e.target);
        });
      },
    });
  });

EDIT

Full example multi-layer-search
Below is an example of how to add multiple files:

["bar", "pharmacy", "restaurant"].map((json) => {
  fetchData(`./data/${json}.json`).then((data) => {
    L.geoJSON(data, geojsonOpts).addTo(poiLayers);
  });
});

Upvotes: 1

Related Questions