CODEWITHSUNDEEP
leafletreact-leaflet
borisrorsvort
borisrorsvort

Reputation: 906

How can I set an offset on a centered react-leaflet map?

I’m passing a bounds object to the bounds props on the Map Component (https://react-leaflet.js.org/docs/en/v1/components.html#map).

I’d like that it uses the bounds to center and set the zoom (like it does by default) but with a offset (like for the tooltip) to allow some finetuning from the users part.

I’m getting the bounds from: 

L.geoJson(currentZone.geoJson).getBounds();

Upvotes: 0

Views: 2238

Answers (1)

borisrorsvort
borisrorsvort

Reputation: 906

You can pass a config object for boundsOptions to set paddingTopLeft, paddingBottomRight or padding in the form of an array.

Leaflet doc: https://leafletjs.com/reference-1.3.0.html#fitbounds-options

React leaflet docs: https://react-leaflet.js.org/docs/en/components.html#map

 <Map
    ... attrs
    boundsOptions={{
      paddingBottomRight: [250, 0],
    }}
  >

Upvotes: 1

Related Questions