Show popup on layer click

[itzhouze]

Hey guys, i want to show a custom popup with the "properties.title" when i click on one of my layer points. How can i do that?

Here's my code:

`

...

const layerStyle = {
    id: 'event-layer',
    type: 'symbol',
    layout: {
        'icon-image': 'marker-15',
        'icon-padding': 0,
        'icon-allow-overlap': true,
    }
};

...

    useEffect(() => {

        setBusy(true);
        async function fetchData() {
            EventDataService.getAllLocations()
                .then(response => {
                    var data = Array.from(response.data);
                    var result = {
                        type: 'FeatureCollection',
                        features: data.map(feature => {
                            return {
                                "type": "Feature",
                                "properties": {
                                    "id": feature.id,
                                    "title": `Event: ${feature.title}`
                                },
                                "geometry": {
                                    "type": "Point",
                                    "coordinates": [feature.locationLng, feature.locationLat]
                                }
                            }
                        })
                    }

                    setGeojsonEventList(result);
                    setBusy(false);
                })
                .catch(e => {
                    console.log(e);
                });
        }

        fetchData();
    }, []);

    return (
        isBusy ? <CircularProgress /> : (
            <div style={{ height: "100vh" }}>
                <MapGL
                    ref={mapRef}
                    {...viewport}
                    width="100%"
                    height="100%"
                    onViewportChange={handleViewportChange}
                    mapboxApiAccessToken={MAPBOX_TOKEN}
                    //mapStyle="mapbox://styles/mapbox/streets-v11"
                    onClick={handleMarkerClick}
                >
                    <Source id="event-layer" type="geojson" data={geojsonEventList}  >
                        <Layer {...layerStyle }  />
                    </Source>
                </MapGL>
            </div>
        )
    );`

[sheethalpatila]

you got any answers me allso searching for it , it will be helpfull if you give suggestions .

[Cmoen11]

In short, you need to add the id of the layer as an interactive layer, you do so by referencing the id in the interactiveLayerIds prop like this. And then add an onClick callback on your map component, when clicking on an interactive layer, it will be caught with the feature.

<MapGL
  ...yourOtherProps
  interactiveLayerIds={["event-layer"]}
  onClick={e => console.log(e.features)}
/>

Good luck :)