score:12
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.
Source: stackoverflow.com
Related Query
- Good way to combine React and Leaflet
- Leaflet React get map instance in functional component
- React leaflet not rendering properly
- React leaflet center attribute does not change when the center state changes
- React leaflet draw - marker icon and drag handler is missing
- How to select an area in react leaflet
- React Leaflet popups not working on mobile devices
- React Leaflet - Align Popup on the center of the map
- Edit a single polygon in react leaflet
- Creating a custom Leaflet layer control in React
- How to overlay content on react leaflet (z-index problem)
- React and Leaflet
- Pass A react component to leaflet popup
- Install Overlapping Marker Spiderfier for Leaflet with React
- Registering event with react leaflet
- React Leaflet display legend using MapContainer
- React leaflet and react-leaflet-draw
- React Leaflet: Get objects from MongoDB to Leaflet map as markers (using node.js and express)
- React Leaflet - Marker image fails to load
- How to disable the react leaflet zoom
- Using a Leaflet js plugin in react
- Get current coordinates on dragging react leaflet
- Changing leaflet basemaps with react buttons
- react leaflet -layer control -satellite view
- React Leaflet - Draw Bezier curve
- React Leaflet map to PDF
- Adding Title to React Leaflet Map
- React leaflet map location glitches when not in App.js
- React Leaflet LayersControl.Overlay with multiple markers
- React Leaflet works during development, fails on build time, noting to the lack of constructor icon
More Query from same tag
- How to return geolocation response object to be used in different components?
- add and remove item in array on click reactjs
- React/Mobx: Selecting item in an array
- Adding functions to redux store within reducer is an anti pattern?
- Extract duplicate javascript code using WebPack CommonsChunkPlugin
- React: Axios Error "Error: Network Error", My react app cannot receive axios.post response
- get solar year in react
- How to wait for a .forEach loop to finish its async request before calling method recursively [ReactJS]?
- react-chartjs-2 options are not recognized for Bars
- React Context doesn't render component
- React Ionic, Accessing App.tsx method from component defined through Route Component
- React parent layout depends on children (must rerender when they do)
- Code Splitting with react-loadable gives Error : Cannot find module "."
- how can i fix the history push in reactjs?
- Looping through JSON objects and converting them to React components
- How to override default location of snackbar notification DropZoneArea
- Toggle all data series upon clicking a legend in Apex charts
- React - Django webpack config with dynamic 'output'
- how to render disabled button by if statement?
- defaultValue is pulling the last value in React
- static content not served properly whenTwo react apps hosted behind HAProxy
- React TypeError: Cannot read property 'target' of null
- React-ReduxForm Password Confirmation not working?
- React-Bootstrap Form.Check weird behaviour on first click
- Understanding the changes to react-router in v4
- Issue with setState when trying to pass data from Child to Parent
- Treating warnings as errors because process.env.CI = true. Failed to compile
- How to know array contents are empty
- How to save the state of drag and drop rows in React?
- react-router-dom's Route do not work in my project