React-leaflet Bounds
Right now I am setting the bounds of my react leaflet map by passing a bounds parameter as shown below:
<div hidden={!this.props.hide && !this.props.toggle} className="map-container">
<Leaflet.Map ref='leaflet-map' bounds={ this.getBounds()} >
<Leaflet.TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'/>
{ this.geoResults().map(this.renderMarker) }
</Leaflet.Map>
</div>
The problem is that sometimes a marker is rendered on the outermost part of the map (in view) so the marker is not even visible unless I drag the map or zoom out one spot. I was trying to fix this with a buffer or trying to plot the bounds then use zoom to zoom out once but nothing seems to work. Do you guys have any ideas?
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.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM