Leaflet version 2.4 to 4.2.1 conversion zoom controls not working

[rajasuryakumar]

import React, { Component } from 'react'; import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; class CustomMap extends Component { <MapContainer ref={this.refMap} className="maps-poc" center={position} zoom={this.state.zoom} ondragstart={() => this.setState({ popupElementId: -1 })} ondragend={() => { this.setState({ center: { lat: this.refMap.current.getCenter[0], lng: this.refMap.current.getCenter[1] } }); }} onzoomstart={() => this.setState({ popupElementId: -1 })} onzoomend={(event) => { if (event.target._zoom >= 16) { this.setState({ zoom: event.target._zoom, showParents: false }); } else { this.setState({ zoom: event.target._zoom, showParents: true }); } }} zoomAnimationThreshold={20} > <TileLayer attribution='&copy OpenStreetMap contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> {assetsList.map((element) => { if ( (!filter || this.props.filteredIndices[element.id]) && ((showParents && typeof element.parentLongName === 'undefined') || (!showParents && typeof element.parentLongName !== 'undefined')) ) { const position = [ element.latitude, element.longitude ]; return ( <Marker key={element.id} position={position} icon={this.getIcon(element)} eventHandlers={{ click: (event) => { this.showPopup(element, event.originalEvent.pageX, event.originalEvent.pageY); }, }} > <Popup className="custom-popup" onClick={() => { this.setState({ popupElementId: -1 }); }} /> </Marker> ); } return null; })} {/* <divclassName="popup-container-all-screen" > <div className="popup-container"> <AssetDetailsPopup data={this.state.popupElement} closePopup={() => { this.setState({ popupElement: null }) }} callAPI={this.props.callAPI} /> /} {popupElement ? ( <div className="details-popup-main-container"> <div className="all-screen" onClick={() => { this.setState({ popupElementId: -1 }); }} /> <div className="details-popup-container font-family-title-2" style={{ left: this.state.screenX - 50, top: this.state.screenY - (this.props.isHeadPanelCollapse ? 96 : 140) }} > <div className="data-container"> <div className="data-elements"> {console.log("popup Element",popupElement)} <div className="short-name">{popupElement?.assetExtraInfo?.realName} <div className="long-name">{popupElement.longName} <div className="address">

{popupElement.address},  {popupElement.city},  {popupElement.state},  {popupElement.country}

<div className="asset-detail-info-icon"> <img alt="asset-info" src={MapsPopupZoomToChild1} onClick={() => { this.setparentInfoState(); }} /> <div className="asset-detail-chart-icon"> {!showParents ? <img alt="chart-info" src={ChartIcon} onClick={async (e) => { let headerChanges = {chartPopUpHeaderData:{}}; console.log(popupElement); headerChanges.chartPopUpHeaderData.title = popupElement.longName; headerChanges.chartPopUpHeaderData.subtitle =${popupElement.address} ${popupElement.city} ${popupElement.state} ${popupElement.country} ${popupElement.zipcode} headerChanges.chartPopUpHeaderData.image = popupElement.assetImageUrl; if(popupElement.longName === 'SF-WT-ESP-FC-01-M1' || popupElement.longName === 'SF-WT-ESP-FC-01-M2'){ let temp = { popupChartIsOpen : true } if(popupElement.longName === 'SF-WT-ESP-FC-01-M1'){ temp.motorSensorAssetName = 'mixer' }else { temp.motorSensorAssetName = 'beltpress' } this.setState({...temp, ...headerChanges},()=>{ this.setChartDataTypeClass({target: {innerHTML :"accelaration"}},temp.motorSensorAssetName); }); return } this.setState({ popupChart2IsOpen : true, formDataLongName: popupElement.longName, ...headerChanges }) this.getFormDataForSensors(popupElement.longName, this.state.formDataChartDuration); }} />:""} {parentInfo && ( // call for info details popup <div className="infodata-popup-main-outer"> <div className="infodata-popup-main-container"> <div className="image-container"> <div className="image"> <img alt="RefinaryBG" src={popupElement.assetImageUrl ? popupElement.assetImageUrl :'https://d25h5wlw8oam0q.cloudfront.net/icons/assets/ong/RefineryBackground.jpg'} /> <div className="filter"> <div className="name">{popupElement.properties['Real Name']} <div className="details-container"> {/ <div className="title"> <div className="key"> Specifications <div className="value"> Units */} <div className="data-elements-container"> {popupElement.assetExtraInfo && Object.keys(popupElement.assetExtraInfo).map((element, index) => { return element !== 'Real Name' ? ( <div key={index} className="data-row"> <div className="key">{element} <div className="value">{popupElement.assetExtraInfo[element]} ) : null; })} )} {showParents ? ( <div className="zoom-to-child">

{' '} <img alt="zoom" src={MapsPopupZoomToChild} onClick={() => { //console.log("ds", popupElement.latitude); this.setState({ center: { lat: popupElement.latitude, lng: popupElement.longitude }, zoom: 18, popupElementId: -1 });

                    }}
                  />
                </div>
              </div>
            ) : popupElement.rulesList && popupElement.rulesList.length !== 0 ? (
              <div>
                <div className="separator" />
                <div className="assets-type-container">
                  {
                    // popupElement.rulesList.map((element, index) => {
                    // const serviceType = this.props.serviceTypes.find(serviceType => serviceType.name === element.serviceType);
                    this.props.serviceTypes.map((serviceType, index) => {
                      const element = popupElement.rulesList.find((ruleElement) => ruleElement.serviceType === serviceType.name);
                      if (element) {
                        return (
                          <div
                            key={index}
                            className="asset-icon"
                            onClick={() => {
                              this.setState({ popupElementId: -1 });
                              this.props.setRulesPageElementData({
                                rulesPageElementId: popupElement.id,
                                selectedRuleId: element.ruleId
                              });
                            }}
                          >
                            {renderImage(
                              serviceType.imageIcon,
                              typeof element.workflowInsId !== 'undefined',
                              false,
                              this.props.callAPI,
                              serviceType.id
                            )}
                          </div>
                        );
                      } return null;
                    })
                  }
                </div>
              </div>
            ) : null}
          </div>
        </div>
      ) : null}
    </MapContainer>

}