React-leaflet: maxZoom and minZoom update not work on Map

[willkan]

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.x).
• [x] Using the supported version of Leaflet (v1.1.x) and its corresponding CSS file is loaded.
• [x] Using the latest stable 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

map component should update max zoom properly when max zoom update .

Actual behavior

map component did not update max zoom properly when max zoom update .

Steps to reproduce

example code refer to https://www.webpackbin.com/bins/-KpPQllgV40qn3E7hrxq

[PaulLeCam]

Please only check the boxes if you have actually done what they say... this is the expected behavior, as documented.

[willkan]

@PaulLeCam I have actually done all the boxes, but the problem still exist. Could you try the the example I mentioned above?

[willkan]

@PaulLeCam Did you mean if I want to properly update the maxZoom , I should directly write some code such as this.refs.map.leafletElement.setMaxZoom(max)?

[PaulLeCam]

Yes, it's not supported as a "dynamic property" as documented in the link above, so there is no logic to update the value from the Map's props to the Leaflet element.

[willkan]

uhh...okay, thanks.

[valstu]

If I would like to make some property dynamic lets say minNativeZoom on TileLayer dynamic what would be the best approach to that?

[jahed]

@valstu extend the component and implement it yourself by overriding updateLeafletElement or fork the project and apply the fix directly. I've taken the former approach, it's relatively straight forward. The difficult part is remembering which props are already dynamic and which aren't.

[ErnestBrandi]

If it can save you some time (v2.x)

import L from 'leaflet';
import { Map, withLeaflet } from 'react-leaflet';

class CustZoomMap extends Map {
  constructor(props) {
    super(props)
  }

  componentDidUpdate(prevProps) {
    super.componentDidUpdate(prevProps)
    this.leafletElement.setMinZoom(this.props.minZoom)
  }
}

export default withLeaflet(CustZoomMap);