geoJSON bindPopup example

Question

Trying to overlay geojson data which is working but I want the user to be able to click an area and have a popup show details about that area. Using the exmaple on leaflet's site

L.geoJSON(data, {
    style: function (feature) {
        return {color: feature.properties.color};
    }
}).bindPopup(function (layer) {
   return layer.feature.properties.description;
}).addTo(map);

leaflet example

I get an error on layer.feature not being a property of type L.Layer. I also use the @types/leaflet for angular/typescript types but it's not listed in there.

How do you go about accessing the feature properties of a geojson to bind a popup? Or really, I would like to do an onClick event to grab the info to set form data.

Thanks in advance.

EDIT 1: So I figured out a method that does work.

In my function that is called on map ready, I set layer to type any instead of type L.Layer because the property isn't there until runtime.

this.geojson = L.geoJSON(this.data);
this.geojson.bindPopup((layer: any) => {
    return layer.feature.properties ... ;
}

This will give the popup I was looking for with the data from geojson data. Next will be instead of bindPopup to use an event to set form data.

score 2 · Answer 1 · answered Apr 02 '21 at 10:21

2

You can bind Popup on each layer using onEachFeature method of geoJson(Leaflet) where you can access layer and feature props and using that you can bind popup on layer using feature props to show content.

      onEachFeature: function (feature, layer) {
        layer.addEventListener("click", () => {
          layer.bindPopup(feature.properties.name);
        });
      }
    });

Link https://codesandbox.io/s/geojson-bind-popup-548yv?file=/src/leaflet.js to demonstrate.

In that file you can see the geojson.json file using that we render polygon. So on click of each polygon we bind popup showing city name

answered Apr 02 '21 at 10:21

Ashish Yadav

85
5

I got the popup to work from my edit in my question. How would I go about grabbing the value with the on click event? That was what I was trying to figure out next so I can set the clicked region as the option in form data. – Furman Apr 05 '21 at 19:09
You can capture your feature data on clicked of region or layer and then assign it to variable which can be used in populate in form data – Ashish Yadav Apr 14 '21 at 05:00
This is working fine, Thanks. But I didn't need the 'layer.addEventListener("click", () => {' because it then needed to have a second click to activate the layer. – vr_driver Jul 14 '22 at 08:40

RezaNikfal · Accepted Answer · 2021-04-01T22:16:49.057

If the GeoJSON structure is like this:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {   
        "Prop1": 1,
        "Prop2": "name1"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          79.8046875,
          54.97761367069628
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {   
        "Prop1": 2,
        "Prop2": "name2"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          107.22656249999999,
          30.751277776257812
        ]
      }
    }
  ]
}

You can create an Angular Interface like this:

interface Geojson {
  type: string;
  features: {
    type: string,
    properties:{
      Prop1:number,
      Prop2:string
    }
  }[]
}

And just replace layer: any with layer: Geojson. You don't need to create the interface for all the GeoJSON object. It should just cover the elements that you are looking for. So you can even make it shorter like this:

interface Geojson {
  features: {
    properties:{
      Prop1:number,
      Prop2:string
    }
  }[]
}

Interesting. I'll have to give this a try. Would much rather use `layer: Geojson` vs `layer: any`. — Furman, Apr 05 '21 at 19:08
Of course yes. In the Angular world, using ```any``` is not a good practice. Also if that's the correct answer, don't forget to click on the green tick. — RezaNikfal, Apr 05 '21 at 21:12

geoJSON bindPopup example

2 Answers2