react-mapbox-gl
react-mapbox-gl copied to clipboard
Prevent layer re-rendering when showing popup
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.