popup

[manjunathrp]

popup appear at the first when clicked on a point, when popup is closed it wont re-appear after clicking on another point. if the popup is not closed then it appears on all points.

[WesWedding]

I do not encounter this problem, so it might be an issue specific with your implementation approach. Could provide a code example that reproduces this problem?

[manjunathrp]

<MapGL
style={{
width: '100%', height: '600px'
}}
mapStyle="mapbox://styles/mapbox/satellite-v9"
accessToken="pk.eyJ1IjoibWFuanVuYXRoMzU5MiIsImEiOiJjazhwbXdkYXUxOGtyM2ZvMnNvd3dleXN2In0.RFd1hM2448nSkg0AWLyqSg"
latitude={12.94367859889981}
longitude={77.57690906524658}
zoom={12}
onViewportChange={setViewport}
>

{ setLatLng(e); setShow(true); setOpen(true); }} id="point" type="circle" source="point" paint={{ 'circle-radius': 10, 'circle-color': { type: 'identity', property: 'marker-color' }, }} /> { latLng && (

{ tableList(latLng.features[0].properties) }

Key	Value

[bergkvist]

When the popup is closed, the respective html tags are removed from the DOM. The React element remains.

The way this component is implemented makes a lot of sense in an imperative style JavaScript - but in React, it is ideal if your React components reflect the application state.

When the popup is closed, the React virtual DOM is no longer in sync with the actual DOM. Something like this would be preferrable:

<Popup
  open={open}
  onClose={() => setOpen(false)}
  closeButton={true}
  closeOnClick={true}
  {...popupLongLat}
/>

In contrast to just:

<Popup
  closeButton={true}
  closeOnClick={true}
  {...popupLongLat}
/>

An example of how something similar is accomplished in Material UI:
https://material-ui.com/components/snackbars/

The way it is done in uber/react-map-gl:
https://visgl.github.io/react-map-gl/docs/api-reference/popup

Notice the short-ciruiting behaviour that essentially recreates the popup when showPopup switches to false and then back to true.