score:12

Accepted answer

solution

you can use boundsoptions attribute of the map component to pass options to the leaflet's fitbounds() method. in those options you can define padding for example to "pad" the bounds.

from react-leaflet map documentation:

boundsoptions: object (optional): options passed to the fitbounds() method.

from leaflet fitbounds options documentation:

padding: equivalent of setting both top left and bottom right padding to the same value.

example

so something like this should work (didn't test in action):

<leaflet.map
  ref='leaflet-map'
  bounds={this.getbounds()}
  boundsoptions={{padding: [50, 50]}}
/>

defining your map element like that should pad the bounds. tune the padding values to suite your needs.

another approach

you could add padding to the bounds in your getbounds() function.


More Query from same tag