CODEWITHSUNDEEP
javascriptreactjsmapboxreact-map-gl
Robert Salca
Robert Salca

Reputation: 73

OnClick for mapbox Layer

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

Upvotes: 3

Views: 7882

Answers (2)

Ethan
Ethan

Reputation: 398

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.

Upvotes: 4

Dob&#225;ny R&#233;ka
Dob&#225;ny R&#233;ka

Reputation: 1

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

Upvotes: 0

Related Questions