@urbica/react-map-gl/src/components/Layer/index.d.ts

React Component for Mapbox GL JS

import { MapMouseEvent } from "mapbox-gl";
import type GeoJSONFeature from "mapbox-gl/src/util/vectortile_to_geojson";
import { LayerSpecification } from "mapbox-gl/src/style-spec/types";
import { PureComponent } from "react";

type InteractionEvent = MapMouseEvent & { features?: GeoJSONFeature[] };

type Props = LayerSpecification & {
  /** Mapbox GL Layer id */
  id: string;

  /** The id of an existing layer to insert the new layer before. */
  before?: string;

  /**
   * Called when the layer is clicked.
   * @callback
   * @param {Object} event - The mouse event.
   * @param {[Number, Number]} event.lngLat - The coordinates of the pointer
   * @param {Array} event.features - The features under the pointer,
   * using Mapbox's queryRenderedFeatures API:
   * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
   */
  onClick?: (event: InteractionEvent) => void;

  /**
   * Called when the layer is hovered over.
   * @callback
   * @param {Object} event - The mouse event.
   * @param {[Number, Number]} event.lngLat - The coordinates of the pointer
   * @param {Array} event.features - The features under the pointer,
   * using Mapbox's queryRenderedFeatures API:
   * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
   */
  onHover?: (event: InteractionEvent) => void;

  /**
   * Called when the layer feature is entered.
   * @callback
   * @param {Object} event - The mouse event.
   * @param {[Number, Number]} event.lngLat - The coordinates of the pointer
   * @param {Array} event.features - The features under the pointer,
   * using Mapbox's queryRenderedFeatures API:
   * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
   */
  onEnter?: (event: InteractionEvent) => void;

  /**
   * Called when the layer feature is leaved.
   * @callback
   * @param {Object} event - The mouse event.
   * @param {[Number, Number]} event.lngLat - The coordinates of the pointer
   * @param {Array} event.features - The features under the pointer,
   * using Mapbox's queryRenderedFeatures API:
   * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
   */
  onLeave?: (event: InteractionEvent) => void;

  /**
   * Called when the layer is right-clicked.
   * @callback
   * @param {Object} event - The mouse event.
   * @param {[Number, Number]} event.lngLat - The coordinates of the pointer
   * @param {Array} event.features - The features under the pointer,
   * using Mapbox's queryRenderedFeatures API:
   * https://www.mapbox.com/mapbox-gl-js/api/#Map#queryRenderedFeatures
   */
  onContextMenu?: (event: InteractionEvent) => void;

  /**
   * Radius to detect features around a clicked/hovered point
   */
  radius?: number;
};

export default class Layer extends PureComponent<Props> {}