Search field is reader multi time on map when reuseMaps=true

[matinfo]

I implemented like in your example. Search field working well. But if I switch to an other page or when local dev server is reloaded on files change, the search field is not destroyed and an other appears.

How to fix that?

[SamSamskies]

Hi @matinfo, what version are you using? Are there any errors in the dev console when this happens?

[matinfo]

@SamSamskies the version used are:
"mapbox-gl": "^1.3.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-map-gl": "^5.0.10",
"react-map-gl-geocoder": "^2.0.11",
"react-router-dom": "^5.0.1",
"viewport-mercator-project": "^6.2.0",

and not error in the console.

My render look like this:

render() {
    const { viewport, settings, mapMarkers } = this.state;

    return (
      <MapGL
        {...viewport}
        {...settings}
        width="100%"
        height="100%"
        mapStyle="mapbox://styles/XXXXXXXXX/cjy4nlft63s0w1bqlto3pfar0"
        mapboxApiAccessToken={MAPBOX_TOKEN}
        onViewportChange={(viewport, interaction) => this._onViewportChange(viewport, interaction)}
        reuseMaps={true}
        ref={this.mapRef}
      >
        {mapMarkers.map(this._renderMarker)}
        {this._renderPopup()}

        <div className="fullscreen" style={fullscreenControlStyle}>
          <FullscreenControl />
        </div>
        <div className="nav" style={navStyle}>
          <NavigationControl
            showCompass={false}
            onViewportChange={(viewport, interaction) => this._onViewportChange(viewport, interaction)}
          />
        </div>
        <Geocoder
          mapRef={this.mapRef}
          onViewportChange={this._handleGeocoderViewportChange}
          mapboxApiAccessToken={MAPBOX_TOKEN}
          position="top-left"
          trackProximity={true}
          clearAndBlurOnEsc={true}
          placeholder="Search location"
          countries="ch"
        />
      </MapGL>
    );

I found the cause of the issue, if I change to reuseMaps={false} the search field are not duplicated!

[SamSamskies]

Thanks for the info. I've never used the reuseMaps prop before. I'll need to look into that.

[mohridwanhdp]

I wrap my ReactMapGl with Deck.gl, I use the suggestion to use reuseMap but still rendered minima three times,

and after the viewport changed, it become so many search field

[SamSamskies]

Hi @mohridwanhdp, could you provide an example in Code Sandbox that demonstrates your issue?

[mohridwanhdp]

Hi @mohridwanhdp, could you provide an example in Code Sandbox that demonstrates your issue?

I'm sorry it's my mistake here cause not use the right ref

Before, I use this in my ReactMapGL
<ReactMapGL
mapStyle={mapStyle}
mapboxApiAccessToken={MAPBOX_TOKEN}
preserveDrawingBuffer={true}
ref={(reactMap) => (this.reactMap = reactMap)}
reuseMaps={false}
onLoad={(e) => {
this._onMapLoaded();
}}
>

Then i change the ref like this :
ref={this.reactMap}

And It's become normal