React Leaflet LayersControl.Overlay with multiple markers

I have a map that displays a marker for every diferent public facilities in a city and I want to have a group of checkboxes to filter this facilities according to its typology, one checkbox for typology. Each typology will have multiple markers and the map will only show the checked ones.
I'm using react-leaflet v3.

This is what I tried to do:

<MapContainer center={[50,50]} zoom={13} scrollWheelZoom={true} whenCreated={setMap}>
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />     
            <LayersControl position='topright'>
                {typologies.map((typology, index) => (                    
                    <LayersControl.Overlay key={index} checked name={typology}>
                        {publicFacilities.filter((publicFacility) => publicFacility.typology == typology ).map((publicFacility) => (                            
                            <Marker key={publicFacility._id} position={publicFacility.coordinates} />
                        ))}  
                    </LayersControl.Overlay>
                ))}
            </LayersControl>                    
        </MapContainer> 

typologies is a list of strings and publicFacilities is a list of objects.

But with this method I get a checkbox for every single facility.



Read more here: https://stackoverflow.com/questions/66264472/react-leaflet-layerscontrol-overlay-with-multiple-markers

Content Attribution

This content was originally published by Pau Casademont at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: