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.

Answer 1

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
    }
  }[]
}