I am using React-leaflet v4 and trying to set up two distinct areas on my page a sidebar with buttons / search that can indfluence the leaflet map, and the map area itself.
However if buttons are placed in the sidebar outside of the MapContainer they do not have access to the map and cannot call its methods to for instance panTo a location.
If the sidebar is placed within the MapContainer it essentially shares the space, and the default map buttons sit over the top of it, as does the map itself when zoomed in to take up more screen space as seen in the following images.
default controls sat on top of sidebar map overspilling onto the sidebar
what I want to achieve is a setup where the sidebar and the map are distinct react components where the map and its default controls are constrained to the grey area in the above image, and the sidebar buttons can influence things on the map for instance panTo locations.
I have tried this two ways. The first was to render the component outside of
<div className="App">
<div>
<h1>Faerun Map</h1>
</div>
<div id="map">
<MapContainer
ref={mapRef}
crs={L.CRS.Simple}
zoom={3}
center={[0, 0]}
maxZoom={6}
boundsOptions={{ padding: [800, 300] }}
>
<FantasyMap></FantasyMap>
</MapContainer>
</div>
<Controls mapRef={mapRef}} />
</div>
and then using useMap(). However useMap can only be used as descendants of I have also tried passing the map in as a reference but could not get this to work either.
The second approach was to render the sidebar inside of however this resulted in the issues depicted in the images above.
<div className="App">
<div>
<h1>Faerun Map</h1>
</div>
<div id="map">
<MapContainer
ref={mapRef}
crs={L.CRS.Simple}
zoom={3}
center={[0, 0]}
maxZoom={6}
boundsOptions={{ padding: [800, 300] }}
>
<FantasyMap></FantasyMap>
<Controls mapRef={mapRef} />
</MapContainer>
</div>
</div>
