Disable or enable map dragging

Question

I am using react-leaflet map, I change a lot of map attributes with the state, but when using the state for change dragging attribute it does not work.

<Map
                    ref={(map) => { this.map = map}}
                    center={this.state.center ? this.state.center : this.getCalculatedCenterFromState()}
                    zoom={this.state.zoom ? this.state.zoom : this.getCalculatedZoomFromState()}
                    minZoom={this.state.minZoom ? this.state.minZoom : null}
                    maxZoom={this.state.maxZoom}
                    attributionControl={false}
                    doubleClickZoom={false}
                    zoomControl={false}
                    onZoomEnd={this.handleZoomEnd}
                    onMoveEnd={this.handleMoveEnd}
                    dragging={!this.state.smallScreen}
                    tap={!this.state.smallScreen}
                    renderer={this.mapService.getRendererType()}
                />

I am changing state by this method

/**
     * Shows or hides seats depending on Zoom level.
     */
    handleZoomEnd = () =>
    {
        if (this.map && this.map.leafletElement) {
            let zoomLevel = this.map.leafletElement.getZoom();

            this.setState({
                zoom: zoomLevel,
            });

            if (zoomLevel >= 0) {
                this.setState({draggable: true});
            } else {
                this.setState({draggable: false});
            }

            console.log(this.state.draggable);
        }
    };

Problem is that state is changing but dragging are not affected. other options are affected by state changing except dragging. can anybody see what I miss here?

Answer 1

Not sure if that's the error but you're changing the state twice in the same function on separate lines and the state change is an async process so maybe you're having problems coming from that. You should set both states at the same time.

if (this.map && this.map.leafletElement) {
   let zoomLevel = this.map.leafletElement.getZoom();
   if (zoomLevel >= 0) {
      this.setState({draggable: true, zoom: zoomLevel});
   } else {
      this.setState({draggable: false, zoom: zoomLevel});
   }
}

What is your objective exactly? You want to make the map draggable or not depending on the zoom of the map?

Edit: You can try to control the map being draggable in componentDidUpdate. This way you separate the zoom operations from the draggable operation (setZoom should update the zoom state only ideally).

componentDidUpdate(prevProps, prevState) {
    if (prevState.zoomLevel !== this.state.zoomLevel) {
      if (this.state.zoomLevel >= 0) {
        this.setState({ draggable: true });
      } else {
        this.setState({ draggable: false });
      }
    }
  }

  handleZoomEnd = () => {
    if (this.map && this.map.leafletElement) {
      let zoomLevel = this.map.leafletElement.getZoom();

      this.setState({ zoom: zoomLevel });
    }
  };

Answer 2

You can apply like this way:

 var map = L.map('map', {
        center: [51.505, -0.09],
        zoom: 13,
        dragging:false,
    });