react-leaft FeatureGroup inside LayersControl

user_10883769 0
Viewed 78

I want to group different types of Markers with LayersControl.Overlay in FeatureGroup. But I didn't do that.

Any help?

           <FeatureGroup ref={ (reactFGref) => {this._onFeatureGroupReady(reactFGref);} }>
              <EditControl
                position='topright'
                onEdited={this._onEdited}
                onCreated={this._onCreated}
                onDeleted={this._onDeleted}
                draw={{
                  rectangle: false,
                  circle: false,
                  polyline: false,
                  polygon: false,
                }}
              />
              <LayersControl position="topright" collapsed={false}>
                {hardwareData && hardwareData.map(data => {
                  return(
                  <LayersControl.Overlay key={data.type_id} name={`${data.type_id }`} checked>
                    <Marker>
                      ...
                    </Marker>
                  </LayersControl.Overlay>
                  );
                })}
              </LayersControl>                
            </FeatureGroup>
react-leaflet leaflet
1 Answers

You probably have it the other way around: instead of placing the LayersControl as child of your FeatureGroup, you should have the LayersControl as child of your MapContainer, and your FeatureGroup as child of the LayersControl:

<MapContainer>
  <LayersControl>
    { hardwareData && hardwareData.map(data => (
      <LayersControl.Overlay name={data.type_id} key={data.type_id}>
        <FeatureGroup>
          <Marker /> etc.
        </FeatureGroup>
      </LayersControl.Overlay>
    )}
  </LayersControl>
</MapContainer>
user_51087960
Related