How to click unclustered-point

[kunchit]

I did follow clusters example but I found error when click unclustered-point

refer example
https://github.com/uber/react-map-gl/tree/5.2-release/examples/clusters

refer docs.mapbox
https://docs.mapbox.com/mapbox-gl-js/example/cluster/?utm_medium=blog&utm_source=mapbox-blog&utm_campaign=blog|mapbox-blog|maps|clustering-properties-with-mapbox-and-html-markers-bb353c8662ba-19-04&utm_term=maps&utm_content=clustering-properties-with-mapbox-and-html-markers-bb353c8662ba

[stiliyana]

I'm having the same problem right now. When clicking an unclustered point, the PointerEvent object contains an empty features array, thus it's not possible to get information about the feature being clicked.

[robluton]

Same issue here

[ypat125]

After struggling with this a bit, I think the solution is to add the layer id in the interactiveLayerIds prop of your map.

ex. interactiveLayerIds={[clusterLayer.id, unclusteredPointLayer.id]}

[kunchit]

@ypat125 I just implement that you suggest .
it work I can get detail in unclustered-point when click and I use Popup to render the detail.
Thanks a lot

[lizzethgd]

@ypat125 I just implement that you suggest .
it work I can get detail in unclustered-point when click and I use Popup to render the detail.

Can you tell me please how to add the Popup to the unclustered-poin?

[darokviana]

Someone solved it?

[ashnewport]

Had the same issue but got clusters and map points showing a popup when clicking on the marker added via Source and Layer. Here is the general code I used for it to work while using clusters demo code as a starting point - note I am using TypeScript.

@lizzethgd @darokviana hope this helps you both and others 😃

export const clusterLayer: LayerProps = {
  id: 'clusters',
  type: 'circle',
  source: 'cluster-geo',
  filter: ['has', 'point_count'],
  paint: {
    'circle-color': [
      'step',
      ['get', 'point_count'],
      '#51bbd6',
      100,
      '#f1f075',
      750,
      '#f28cb1',
    ],
    'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],
  },
};

export const clusterCountLayer: LayerProps = {
  id: 'cluster-count',
  type: 'symbol',
  source: 'cluster-geo',
  filter: ['has', 'point_count'],
  layout: {
    'text-field': '{point_count_abbreviated}',
    'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
    'text-size': 12,
  },
  paint: {},
};

export const unclusteredPointLayer: LayerProps = {
  id: 'unclustered-point',
  type: 'circle',
  source: 'cluster-geo',
  filter: ['!', ['has', 'point_count']],
  paint: {
    'circle-color': '#11b4da',
    'circle-radius': 10,
    'circle-stroke-width': 1,
    'circle-stroke-color': '#fff',
  },
};

interface PopupInfo {
  lngLat: [number, number];
  text: string;
}

interface MapboxMapProps {
  data: GeoJSON;
}

const MapboxMap = ({ data }: MapboxMapProps) => {
  const [popupInfo, setPopupInfo] = useState<PopupInfo | null>(null);

  const handleMapClick = (e: MapEvent) => {
    const features = e.features || [];

    if (features.length > 0) {
      setPopupInfo({
        lngLat: features[0].geometry.coordinates,
        text: features[0].properties.title,
      });
    }
  };

  return (
    <ReactMapGL
      interactiveLayerIds={[unclusteredPointLayer.id!]}
      onClick={handleMapClick}
    >
      <Source
        id="cluster-geo"
        type="geojson"
        data={data}
        cluster={true}
        clusterMaxZoom={14}
        clusterRadius={50}
      >
        <Layer {...clusterLayer} />
        <Layer {...clusterCountLayer} />
        <Layer {...unclusteredPointLayer} />
      </Source>

      {popupInfo && (
        <Popup
          tipSize={5}
          longitude={popupInfo.lngLat[0]}
          latitude={popupInfo.lngLat[1]}
          onClose={setPopupInfo}
        >
          {popupInfo.text}
        </Popup>
      )}
    </ReactMapGL>
  );
};

export default MapboxMap;