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?

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-leafletMap documentation:

boundsOptions: object (optional): Options passed to the fitBounds() method.

From leafletfitBounds 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.