Add a BoundsMap (<Map> alternative) component #72
Conversation
The `Map` component only supports setting and updating the map view by changing the map `center` and `zoom` props. It is often useful to set the map view by specifying some bounds that must be contained instead. For example: loading a full-screen map to show a country. This commit adds a `BoundsMap` component which extends `Map` and simply takes a `bounds` prop (of type `src/lib/types/bounds`) instead of `center` and `zoom` props. Tests for this component were adapted from those for `Map`.
Shows that the `bounds` property is dynamic
| } | ||
| } | ||
|
|
||
| componentDidUpdate({ bounds: oldBounds }) { |
There was a problem hiding this comment.
I think this would be better as componentDidUpdate(prevProps), as it makes things more clear to anybody that wants to extend BoundsMap.
|
Hi, thanks for the PR. Is there any particular reason for doing it as a separate component rather than adding this behavior to |
|
Calling If you would prefer, I can modify
|
|
I think it makes sense to have the I'm against adding any specific logic in the components regarding specific use cases as in my option the components provided in this lib should always be "dumb" ones, the "smart" ones being in the app. If you're up for it, would you mind updating your PR to add this to |
As requested, there is no validation of bounds vs. center/zoom modes to set the view. Last updated wins.
|
Moved it all to dynamic |
Add a BoundsMap (<Map> alternative) component
This pull request adds a component which sets the map view via a dynamic
boundsprop instead of bycenterandzoom.An alternative implementation could add the
boundsprop to the existingMapcomponent, and let users to either setboundsorcenter+zoomto control the map view. I started writing it that way, but found it required too many if/else blocks and helper functions to do the right thing for my taste. If you would prefer it that way, I can change it back.At work we use
map.fitBoundsalmost exclusively for setting the view, so something like this component is essential for our use ofreact-leaflet.