Add TypeScript type definitions

package.json

@@ -22,6 +22,7 @@
     "react",
     "urbica"
   ],
+  "types": "src/index.d.ts",
   "main": "dist/react-map-gl.cjs.js",
   "module": "dist/react-map-gl.esm.js",
   "files": [

src/components/AttributionControl/index.d.ts

@@ -0,0 +1,22 @@
+import { PureComponent, ReactNode } from "react";
+import type { AttributionControl as MapboxAttributionControl } from "mapbox-gl";
+
+type Props = {
+  /**
+   * If `true` force a compact attribution that shows the full
+   * attribution on mouse hover, or if  false force the full attribution
+   * control. The default is a responsive attribution that collapses when
+   * the map is less than 640 pixels wide.
+   */
+  compact: boolean;
+
+  /* String or strings to show in addition to any other attributions. */
+  customAttribution: string | Array<string>;
+
+  /* A string representing the position of the control on the map. */
+  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+};
+
+export default class AttributionControl extends PureComponent<Props> {
+  getControl(): MapboxAttributionControl;
+}

src/components/CustomLayer/index.d.ts

@@ -0,0 +1,19 @@
+import { PureComponent, createElement, ReactNode } from "react";
+import type MapboxMap from "mapbox-gl/src/ui/map";
+import type { CustomLayerInterface } from "mapbox-gl/src/style/style_layer/custom_style_layer";
+import MapContext from "../MapContext";
+
+type Props = {
+  /** The id of an existing layer to insert the new layer before. */
+  before?: string;
+
+  /** Mapbox GL Custom Layer instance */
+  layer: CustomLayerInterface;
+};
+/**
+ * Custom layers allow a user to render directly into the map's GL context
+ * using the map's camera.
+ */
+
+export default class CustomLayer extends PureComponent<Props> {
+}

src/components/FeatureState/index.d.ts

@@ -0,0 +1,17 @@
+import { PureComponent } from "react";
+
+type Props = {
+  /** Unique id of the feature. */
+  id: string | number;
+
+  /** The Id of the vector source or GeoJSON source for the feature. */
+  source: string;
+
+  /** For vector tile sources, the sourceLayer is required. */
+  sourceLayer: string;
+
+  /** A set of key-value pairs. The values should be valid JSON types. */
+  state: Object;
+};
+
+export default class FeatureState extends PureComponent<Props> {}

src/components/Filter/index.d.ts

@@ -0,0 +1,24 @@
+import type { FilterSpecification } from "mapbox-gl/src/style-spec/types";
+import { PureComponent } from "react";
+
+type Props = {
+  /** Mapbox GL Layer id */
+  layerId: string;
+  /**
+   * The filter, conforming to the Mapbox Style Specification's
+   * filter definition. (see https://docs.mapbox.com/mapbox-gl-js/style-spec/#other-filter)
+   * If null or undefined is provided, the function removes any existing filter
+   * from the layer.
+   * */
+  filter: FilterSpecification;
+
+  /**
+   * Whether to check if the filter conforms to the Mapbox GL
+   * Style Specification. Disabling validation is a performance optimization
+   * that should only be used if you have previously validated the values you
+   * will be passing to this function.
+   * */
+  validate?: boolean;
+};
+
+export default class Filter extends PureComponent<Props> {}

src/components/FullscreenControl/index.d.ts

@@ -0,0 +1,18 @@
+import { PureComponent } from "react";
+import type { FullscreenControl as MapboxFullscreenControl } from "mapbox-gl";
+
+type Props = {
+  /**
+   * container is the compatible DOM element which should be
+   * made full screen. By default, the map container element
+   * will be made full screen.
+   */
+  container: string;
+
+  /* A string representing the position of the control on the map. */
+  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+};
+
+export default class FullscreenControl extends PureComponent<Props> {
+  getControl(): MapboxFullscreenControl;
+}

src/components/GeolocateControl/index.d.ts

@@ -0,0 +1,52 @@
+import { PureComponent } from "react";
+import type { GeolocateControl as MapboxGeolocateControl } from "mapbox-gl";
+
+type Props = {
+  /* A Geolocation API PositionOptions object. */
+  positionOptions: PositionOptions;
+
+  /**
+   * A `fitBounds` options object to use when the map is
+   * panned and zoomed to the user's location.
+   */
+  fitBoundsOptions: Object;
+
+  /**
+   * If `true` the Geolocate Control becomes a toggle button and when active
+   * the map will receive updates to the user's location as it changes.
+   */
+  trackUserLocation: boolean;
+
+  /**
+   * By default a dot will be shown on the map at the user's location.
+   * Set to `false` to disable.
+   */
+  showUserLocation: boolean;
+
+  /* A string representing the position of the control on the map. */
+  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+
+  /**
+   * Fired when the Geolocate Control changes to the background state.
+   */
+  onTrackUserLocationEnd?: Function;
+
+  /**
+   * Fired when the Geolocate Control changes to the active lock state,
+   */
+  onTrackUserLocationStart?: Function;
+
+  /**
+   * Fired on each Geolocation API position update which returned as an error.
+   */
+  onError?: Function;
+
+  /**
+   * Fired on each Geolocation API position update which returned as success.
+   */
+  onGeolocate?: Function;
+};
+
+export default class GeolocateControl extends PureComponent<Props> {
+  getControl(): MapboxGeolocateControl;
+}

src/components/Image/index.d.ts

@@ -0,0 +1,30 @@
+import type { StyleImageInterface } from "mapbox-gl/src/style/style_image";
+import { PureComponent } from "react";
+
+type MapboxImage =
+  | HTMLImageElement
+  | ImageData
+  | { width: number; height: number; data: Uint8Array | Uint8ClampedArray }
+  | StyleImageInterface;
+
+type Props = {
+  /** The ID of the image. */
+  id: string;
+
+  /**
+   * The image as an `HTMLImageElement`, `ImageData`, object with `width`,
+   * `height`, and `data` properties with the same format as `ImageData`
+   * or image url string
+   * */
+  image: MapboxImage | string;
+
+  /** The ratio of pixels in the image to physical pixels on the screen */
+  pixelRatio?: number;
+
+  /** Whether the image should be interpreted as an SDF image */
+  sdf?: boolean;
+};
+
+export default class Image extends PureComponent<Props> {
+  constructor(props: Props);
+}

src/components/LanguageControl/index.d.ts

@@ -0,0 +1,32 @@
+import { PureComponent } from "react";
+import type MapboxLanguageControl from "@mapbox/mapbox-gl-language/index";
+
+type Props = {
+  /** List of supported languages */
+  supportedLanguages?: string[];
+
+  /** Custom style transformation to apply */
+  languageTransform?: Function;
+
+  /**
+   * RegExp to match if a text-field is a language field
+   * (optional, default /^\{name/)
+   */
+  languageField?: RegExp;
+
+  /** Given a language choose the field in the vector tiles */
+  getLanguageField?: Function;
+
+  /** Name of the source that contains the different languages. */
+  languageSource?: string;
+
+  /** Name of the default language to initialize style after loading. */
+  defaultLanguage?: string;
+
+  /** Name of the language to set */
+  language?: string;
+};
+
+export default class LanguageControl extends PureComponent<Props> {
+  getControl(): MapboxLanguageControl;
+}

src/components/Layer/index.d.ts

@@ -0,0 +1,65 @@
+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) => any;
+
+  /**
+   * 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) => any;
+
+  /**
+   * 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) => any;
+
+  /**
+   * 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) => any;
+
+  /**
+   * Radius to detect features around a clicked/hovered point
+   */
+  radius: number;
+};
+
+export default class Layer extends PureComponent<Props> {}

src/components/MapContext/index.d.ts

@@ -0,0 +1,6 @@
+import { Context } from "react";
+import { Map } from "mapbox-gl";
+
+declare const MapContext: Context<Map | null>;
+
+export default MapContext;