OnClick for mapbox Layer

Question

I am using react-map-gl to add a map to my React app. I want to add an onClick event to my Layer component, but it looks like react-map-gl does not support it. (docs here: https://visgl.github.io/react-map-gl/docs/api-reference/layer )

I've recently discovered that react-mapbox-gl does support onClick events for Layer components, but I am having trouble installing it through npm (tree dependency issues).

I was wondering if anyone here has managed to add the onClick event using react-map-gl? Any advice?

Example code below:

import React from "react";
import { Layer, LayerProps } from "react-map-gl";

export const MapLayer: React.FunctionComponent<LayerProps> = ({
  id,
  type,
  paint,
  source,
  layout,
}) => {
  return (
    <Layer id={id} type={type} paint={paint} source={source} layout={layout} />
  );
};

Thanks, Robert

Not sure what you need to do with the onClick, but there are interactive examples here http://visgl.github.io/react-map-gl/examples. — tabdon, Mar 26 '22 at 10:51

score 1 · Answer 1 · answered Jun 13 '22 at 03:00

In fact, react-map-gl would definitely support onClick event.

However, the event is not designed to respond to each individual layer, instead it comes under the default Map component. You will need to specify the interactiveLayerIds property to make it work on specific layers.

Please refer to the section of onClick event from react-map-gl documentation.

OnClick for mapbox Layer

1 Answers1