javascript - OnClick for mapbox Layer - Stack Overflow

admin管理员组

文章数量:1400007

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

Share Improve this question Follow asked Mar 25, 2022 at 16:45 Robert SalcaRobert Salca 7322 silver badges55 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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");

本文标签： javascriptOnClick for mapbox LayerStack Overflow