React-leaflet: Controls Position

[RobinMalfait]

Hey

How can I change the position of the controls on the map element?
Currently the zoom buttons are at the top left, is there a way to change it?

Thanks

[PaulLeCam]

Hi,

This is purely Leaflet behavior, as per their documentation, it is possible to hide it but not set its position directly in the map properties.

I think you best option is to hide it from the map, <Map zoomControl={false} ...> should work but please let me know if it doesn't, and add the zoom control to the map yourself, as this library does not provide components for controls.

[RobinMalfait]

Hey

I'll try this asap, thing is I used a hack :p
I saw that it had the .left class, so I did something like

.left {
    right: 0!important; 
}

But this is probably better, thanks!

[yantakus]

There is controls position option: http://leafletjs.com/reference.html#control-positions

Did it appear recently or I misunderstand smth?

[PaulLeCam]

As I wrote in my previous message, it's possible to set this in the control options, not the map ones.

[PaulLeCam]

Hi,

The ZoomControl as been added to v0.9.

[RobinMalfait]

Hey @PaulLeCam thank you very much!

[jayenashar]

hi @PaulLeCam i've disabled the zoom control with zoomControl={false} as above added a <ZoomControl> component with position. it works as i expect, but I don't see the zoomControl prop in the https://react-leaflet.js.org/docs/en/components.html#map docs.

[purveshmakode24]

How can i set position other than topright, topleft, bottomleft, bottomright??