Question

56

React-leaflet bounds

rated 0 times [ 58] [ 2] / answers: 1 / hits: 19054 / 9 Years ago, wed, january 6, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alenaautump

Add To Favorites

Follow

Total Points: 87

Total Questions: 109

Total Answers: 109

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

alenaautump questions

1 Npm not running in terminal vite

Fri, Nov 12, 21, 00:00, 3 Years ago

1 How to show Antd form validation error message at below the input field?

Sat, Mar 20, 21, 00:00, 3 Years ago

1 React, Single Page Apps, and the Browser's back button

Wed, Feb 17, 21, 00:00, 3 Years ago

1 how to listen to page changes in nextjs

Mon, Jan 25, 21, 00:00, 3 Years ago

1 How do I type a ref callback with useCallback with Typescript?

Fri, Jun 12, 20, 00:00, 4 Years ago

View All

answered 9 Years ago aiyanakatelinp · 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.