alex3165 / react-leaflet-draw

React component for leaflet-draw on top of react-leaflet
228 stars 152 forks source link

how to select a specific feature? #42

Open luvwinnie opened 6 years ago

luvwinnie commented 6 years ago

I know that leaflet geojson object which have a function call onEachFeature, however react-leaflet-draw is not implemented. Anyone can help with this?

MehdiJarraya commented 5 years ago

You can refer to a specific feature by its layer. First we have to store all features layers, in my case I used object with this structure( { idFromDb: layer}) JSX

          <FeatureGroup  ref={(reactFGref) => {
            this._onFeatureGroupReady(reactFGref)
          }}>
{arrayFromDb.map((item, index) =>
                          <Polygon key={item.id} someRandomParameter={item}>
)}
   </FeatureGroup>

_onFeatureGroupReady method


 _onFeatureGroupReady = (reactFGref) => {
      reactFGref.leafletElement.eachLayer(function (layer) {
        console.log("eachLayer ", layer.options.someRandomParameter)
        if (layer.options.someRandomParameter) {
          featureLayerObject[layer.options.someRandomParameter.id] = layer;
        }
      });
// update our features layers object in redux (store)
this.props.setFeatureLayerObject(featureLayerObject);
}

Then we can do manipulation for this layer


                            let self = this
                            Object.keys(this.props.featureLayerObject).map(function (key, index) {
                                if (key == self.props.activeItem.id)
                                    self.props.featureLayerObject[key]....
                            });