react-mapbox-gl icon indicating copy to clipboard operation
react-mapbox-gl copied to clipboard

Prevent layer re-rendering when showing popup

Open cuttlas opened this issue 6 years ago • 4 comments

I have a Layer of Markers that come from a tiles server:

        <Layer
          type="symbol"
          id="marker"
          sourceId="mn_staging_places"
          sourceLayer={"polygons"}
          images={["marker", image]}
          onMouseEnter={e => {
            const info = e.features[0].properties;
            const place = places.find(place => info.id === place.id);
            setInfoPopup(place);
          }}
          layout={{
            "icon-image": "marker",
            "icon-allow-overlap": true,
            "icon-ignore-placement": true
          }}
        >

When hovering one of the markers, I want to show a popup:

        {infoPopup  && (
          <Popup coordinates={[infoPopup.longitude, infoPopup.latitude]}>
            {renderInfoPopup()}
          </Popup>
        )}

It works, but the layer markers hide for one second just after hovering. My guess is that showing/hidding the popup causes the Map to rerender, so the layer is rendered again, causing the flickering effect. Is there a way to prevent this behaviour??

Thanks.

cuttlas avatar Mar 26 '19 15:03 cuttlas