React-leaflet: Support for zoomend on Map component?

[thenickcox]

Thanks a lot for this library. It's making my life easier.

I need to attach some logic to the zoom property of the <Map /> component. You can pass it in, but I don't see a way to attach an event to zooming. I tried to add a scroll event listener to window on componentDidMount, but scroll wheel zooming doesn't fire window scroll. I can't quite figure out how to access leaflet's getZoom. It appears in the tests, but it's not clear to me how to access that, or attach a handler to zooming.

It looks like Leaflet has a zoomend event, but I can't figure out how to attach that to the <Map /> component. It seems like it's in the props of the Map. But can I access that?

[thenickcox]

I tried something along these lines

import { Map } from 'react-leaflet';
import { map } from 'leaflet';

export default class MapWithZoom extends Map {
  componentWillMount() {
    super.componentWillMount();
    this.leafletElement = map(this.props);
  }

  componentDidUpdate(newProps) {
    console.log(newProps.zoom);
  }
}

That wasn't working. I'm sure I did something wrong.

[thenickcox]

Sorry, I promise I read the docs and tried things before filing this issue! If anyone else looks here, this is referenced in the Events API docs.

[arusahni]

For those of you who tried clicking the now-broken link in the previous comment, the solution is to add the onZoomend property to your Map component declaration.

e.g.:

<Map onZoomend={this.onZoomEvent}>
</Map>

[thenickcox]

Thanks, @arusahni. I think the take-away is that the <Map /> component supports all the events in the official leaflet event docs, simply prefixed with on, e.g., zoomEnd -> onZoomEnd.