CODEWITHSUNDEEP
angularleafletngx-leaflet
Furman
Furman

Reputation: 3

geoJSON bindPopup example

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.

Upvotes: 0

Views: 1954

Answers (2)

Ashish Yadav
Ashish Yadav

Reputation: 95

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

Upvotes: 2

RezaNikfal
RezaNikfal

Reputation: 993

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

Upvotes: 0

Related Questions