index.d.ts

import { StyleSpecification } from "mapbox-gl/src/style-spec/types";
import type {
  Map,
  MapMouseEvent,
  MapTouchEvent,
  LngLatBoundsLike,
  AnimationOptions,
} from "mapbox-gl";
import type { PureComponent, ReactNode } from "react";
import { EventProps } from "./eventProps";

export type Viewport = {
  latitude: number;
  longitude: number;
  zoom: number;
  pitch?: number;
  bearing?: number;
};

export const jumpTo = "jumpTo";
export const easeTo = "easeTo";
export const flyTo = "flyTo";

export type ViewportChangeMethod = "jumpTo" | "easeTo" | "flyTo";
export type ViewportChangeEvent = MapMouseEvent | MapTouchEvent;

type Props = EventProps & {
  /** container className */
  className?: string;

  /** container style */
  style?: {
    [CSSProperty: string]: any;
  };

  /**
   * The Mapbox style. A string url or a Mapbox GL style object.
   */
  mapStyle: string | StyleSpecification;

  /** MapGL children as Sources, Layers, Controls, and custom Components */
  children?: ReactNode;

  /**
   * Mapbox API access token for mapbox-gl-js.
   * Required when using Mapbox vector tiles/styles.
   */
  accessToken?: string;

  /** The longitude of the center of the map. */
  longitude: number;

  /** The latitude of the center of the map. */
  latitude: number;

  /** The tile zoom level of the map. */
  zoom: number;

  /** Specify the bearing of the viewport */
  bearing?: number;

  /** Specify the pitch of the viewport */
  pitch?: number;

  /** The minimum zoom level of the map (0-22). */
  minZoom?: number;

  /** The maximum zoom level of the map (0-22). */
  maxZoom?: number;

  /**
   * If `true`, the map's position (zoom, center latitude,
   * center longitude, bearing, and pitch) will be synced
   * with the hash fragment of the page's URL. For example,
   * http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60.
   */
  hash?: boolean;

  /**
   * The threshold, measured in degrees, that determines when
   * the map's bearing (rotation) will snap to north. For
   * example, with a  bearingSnap of 7, if the user rotates the
   * map within 7 degrees of north, the map will automatically
   * snap to exact north.
   */
  bearingSnap?: number;

  /**
   * If `false`, the map's pitch (tilt) control with "drag to
   * rotate" interaction will be disabled.
   */
  pitchWithRotate?: boolean;

  /** If `true`, an AttributionControl will be added to the map. */
  attributionControl?: boolean;

  /* A string representing the position of the Mapbox wordmark on the map. */
  logoPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";

  /**
   * If `true`, map creation will fail if the performance of Mapbox
   * GL JS would be dramatically worse than expected (i.e. a software
   * renderer would be used).
   */
  failIfMajorPerformanceCaveat?: boolean;

  /**
   * Mapbox WebGL context creation option.
   * Useful when you want to export the canvas as a PNG.
   */
  preserveDrawingBuffer?: boolean;

  /**
   * If `true`, the gl context will be created with MSAA antialiasing,
   * which can be useful for antialiasing custom layers. this is `false`
   * by default as a performance optimization.
   */
  antialias?: boolean;

  /**
   * If `false`, the map won't attempt to re-request tiles once they
   * expire per their HTTP `cacheControl`/`expires` headers.
   */
  refreshExpiredTiles?: boolean;

  /** If set, the map will be constrained to the given bounds. */
  maxBounds?: LngLatBoundsLike;

  /**
   * The initial bounds of the map. If bounds is specified,
   * it overrides center and zoom constructor options.
   * */
  bounds?: LngLatBoundsLike;

  /** If `true`, the "scroll to zoom" interaction is enabled. */
  scrollZoom?: boolean | Object;

  /** If `true`, the "box zoom" interaction is enabled */
  boxZoom?: boolean;

  /** If `true`, the "drag to rotate" interaction is enabled */
  dragRotate?: boolean;

  /** If `true`, the "drag to pan" interaction is enabled */
  dragPan?: boolean;

  /** If `true`, keyboard shortcuts are enabled */
  keyboard?: boolean;

  /** If `true`, the "double click to zoom" interaction is enabled */
  doubleClickZoom?: boolean;

  /**
   * If `true`, the map will automatically resize
   * when the browser window resizes.
   */
  trackResize?: boolean;

  /**
   * The maximum number of tiles stored in the tile cache for a given
   * source. If omitted, the cache will be dynamically sized based on
   * the current viewport.
   */
  maxTileCacheSize?: number;

  /**
   * If `true`, multiple copies of the world
   * will be rendered, when zoomed out
   */
  renderWorldCopies?: boolean;

  /**
   * If specified, defines a CSS font-family for locally overriding
   * generation of glyphs in the 'CJK Unified Ideographs' and
   * 'Hangul Syllables' ranges. In these ranges, font settings from the
   * map's style will be ignored, except for font-weight keywords
   * (light/regular/medium/bold). The purpose of this option is to avoid
   * bandwidth-intensive glyph server requests.
   * (see https://www.mapbox.com/mapbox-gl-js/example/local-ideographs )
   */
  localIdeographFontFamily?: boolean;

  /**
   * A callback run before the Map makes a request for an external URL.
   * The callback can be used to modify the url, set headers, or set the
   * credentials property for cross-origin requests. Expected to return
   * an object with a  url property and optionally  headers and
   * credentials properties.
   */
  transformRequest?: (
    url: string,
    resourceType: string
  ) => { url: string; headers?: Object; credentials?: string };

  /**
   * If true, Resource Timing API information will be collected for
   * requests made by GeoJSON and Vector Tile web workers (this information
   * is normally inaccessible from the main Javascript thread). Information
   * will be returned in a resourceTiming property of relevant data events.
   */
  collectResourceTiming?: boolean;

  /**
   * Controls the duration of the fade-in/fade-out animation for label
   * collisions, in milliseconds. This setting affects all symbol layers.
   * This setting does not affect the duration of runtime styling transitions
   * or raster tile cross-fading.
   */
  fadeDuration?: number;

  /**
   * If `true`, symbols from multiple sources can collide with each
   * other during collision detection. If `false`, collision detection
   * is run separately for the symbols in each source.
   */
  crossSourceCollisions?: boolean;

  /**
   * A patch to apply to the default localization table for UI strings,
   * e.g. control tooltips. The `locale` object maps namespaced UI string IDs
   * to translated strings in the target language;
   * see `src/ui/default_locale.js` for an example with all supported
   * string IDs. The object may specify all UI strings (thereby adding support
   * for a new translation) or only a subset of strings (thereby patching
   * the default translation table).
   */
  locale?: string;

  /**
   * `onViewportChange` callback is fired when the user interacted with the
   * map. The object passed to the callback contains viewport properties
   * such as `longitude`, `latitude`, `zoom` etc.
   */
  onViewportChange?: (viewport: Viewport) => void;

  /**
   * Map method that will be called after new viewport props are received.
   */
  viewportChangeMethod?: ViewportChangeMethod;

  /**
   * Options common to map movement methods that involve animation,
   * controlling the duration and easing function of the animation.
   * This options will be passed to the `viewportChangeMethod` call.
   * (see https://docs.mapbox.com/mapbox-gl-js/api/#animationoptions)
   */
  viewportChangeOptions?: AnimationOptions;

  /** The onLoad callback for the map */
  onLoad?: Function;

  /** Map cursor style as CSS value */
  cursorStyle?: string;

  /**
   * Sets a Boolean indicating whether the map will render an outline around
   * each tile and the tile ID. These tile boundaries are useful for debugging.
   * */
  showTileBoundaries?: boolean;
};

type State = {
  loaded: boolean;
};

export default class MapGL extends PureComponent<Props, State> {
  constructor(props: Props);

  state: State;

  getMap(): Map;
}