react-leaflet

How to delete zoom controll from the Map Container react leaflet. Im using react leaflet library

<MapContainer center={[coord.lat, coord.lng]} zoom={10}>

<TileLayer
    attribution='&copy;<a href="https//www.openstreetmap.org/copyright">OpenStreetMap<a/> contributors'
    url="https://api.maptiler.com/maps/outdoor-v2/{z}/{x}/{y}.png?key=7h6rpJcY0Ib55GV7vQkR"

/>
//I need this zoom control but i have another in the map container and i need to delete it
<ZoomControl/>
<RecenterAutomatically lat={coord.lat} lng={coord.lng} />

enter image description here here i have 2 of them

Solution

  • You can set the zoomControl attribute of the <MapContainer> component to false to remove the default zoom control and define your own:

    <MapContainer center={[52.4498, -1.6]} zoom={10} zoomControl={false}>
    ...
    <ZoomControl position="bottomleft" />
</MapContainer>

    There's a StackBlitz here that removes the default zoom control and uses the one I added in the JSX instead (which puts it in the bottom left).