React-leaflet: Force bounds update

[ayozebarrera]

Please make sure to check the following boxes before submitting an issue. Thanks!

• [x] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [x] Using a supported version of React and ReactDOM (v15.0.0+).
• [x] Using the supported version of Leaflet (v1.0.0) and its corresponding CSS file is loaded.
• [x] Using the latest version of React-Leaflet.
• [x] The issue has not already been reported.
• [x] Make sure you have followed the quick start guide for Leaflet.
• [x] Make sure you have fully read the documentation and that you understand the technical considerations.

Expected behavior

Force bounds update even if they are the same or reset bounds when you indirectly changes the bounds of the map (move, zoom, whatever).

I was wondering if there is anyway to do this WITHOUT registering all events that changes bounds.

Actual behavior

If you set the bounds and then you move the map, the bounds will not update and if you try to update bounds again with the same as first, the map won't fit bounds because they are not changing.

[PaulLeCam]

Sorry I'm not sure I understand what you're asking.
This library doesn't "force" or basically "do" anything, it simply abstracts Leaflet APIs. If you want to use options provided by Leaflet, you can likely do so by providing the relevant props, otherwise it's logic you'll have to implement in your app.

[ayozebarrera]

Sorry about my english. I know it doesn't force or do anything by itself.

I'll register all events that updates the bounds of the map then :rofl:

Thankyou

[alexrussell]

@PaulLeCam I think this is actually an issue with react-leaflet rather than leaflet. That said, it's kind of a limitation caused by React/JS itself. The issue here is that 're-setting' the centre or the bounds, etc. to the same value that they already have won't 'force' the map to re-centre (say, if it's been moved by the user in the intervening time). This is because passing these scalars into react-leaflet (even as part of an array) doesn't register as changed values, and so the map doesn't re-render, as it is not the prop itself that is checked against the previous value, but the lat/lng after transformation are checked separately. (See here.)

The way I have seen it done before (maybe in a Mapbox React lib (yes - see disclaimer paragraph here and its corresponding issue) is to only check the lat/lng having changed by object reference, rather than checking for lat and lng having changed separately. For values that are just scalar, like zoom, if the value is sent in as an array containing one value (icky, I know) then the array can be checked for having changed by reference.

Obviously, because react-leaflet is tied into Leaflet, we can't just use an array for lat/lng, as it can also accept a LatLng object, but the principle is the same - just check object reference equality against the previous prop.

Also obviously, this will come at a perf/usability cost for people who don't know that that's how this works - if they "generate" a LatLng object or an array for the center prop in their render method, it'll be different each time and so the map will update and force re-centre. Obviously the idea would be to store the lat/lng object or array in the composing component's state so that you pas the same reference each time. But maybe that's too complex for the more novice users, I dunno.

[ayozebarrera]

Thanks @alexrussell. I tried to explain it but... was hard :p

Anyway, like I said when I close the issue, I'm registering events on mount and it's working nice for me:

  componentDidMount() {
    this.addMapListeners();
  }

  addMapListeners = () => {
    if (this.refs.map) {
      this.refs.map.leafletElement.on('zoomstart', this.onEvent);
      this.refs.map.leafletElement.on('movestart', this.onEvent);
    }
  }

  onEvent = () => {
    if (this.state.bounds) {
      this.setState({
        bounds: null
      });
    }
  }

[alexrussell]

@ayozebarrera remember to remove them on componentWillUnmount - I dunno how required it is with Leaflet, but it's just good practice to always remove any event listeners you set on componentDidMount in componentWillUnmount.

[ayozebarrera]

Thanks @alexrussell. I'm removing them anyway, thanks :)

[PaulLeCam]

Please check the viewport and onViewportChanged properties added in v1.3.0 as they can provide a simplified way to handle this. viewport changes are compared by reference so it can be an easy way to reset the map's position.

[alexrussell]

@PaulLeCam ahh this looks cool. I'll check it out, thanks.

[ayozebarrera]

Thanks @PaulLeCam