I am using react-map-gl to add a map to my React app. I want to add an onClick event to my Layer ponent, but it looks like react-map-gl does not support it. (docs here: )

I've recently discovered that react-mapbox-gl does support onClick events for Layer ponents, 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

I am using react-map-gl to add a map to my React app. I want to add an onClick event to my Layer ponent, 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 ponents, 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

• javascript
• reactjs
• mapbox
• react-map-gl

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

2 Answers 2

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

However, the event is not designed to respond to each individual layer, instead it es under the default Map ponent. 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.

Add this to your handleClick function, with the layer id you want to react to

const feature = event.features.find((f) => f.layer.id === "routeId");