react-map-gl - npm Package Compare versions

Comparing version 7.0.0-alpha.2 to 7.0.0-alpha.3

CHANGELOG.md

@@ -5,2 +5,7 @@ # CHANGELOG
 
+## 7.0.0-alpha.3 (Jan 3, 2022)
+
+- [v7] Clean up typings and expose more utility types (#1667)
+- Drop flow types support (#1666)
+
 ## 7.0.0-alpha.2 (Jan 2, 2022)
@@ -7,0 +12,0 @@

dist/es5/components/attribution-control.d.ts

 import * as React from 'react';
-import type { ControlPosition } from '../utils/types';
+import type { ControlPosition } from '../types';
 export declare type AttributionControlProps = {
@@ -4,0 +4,0 @@ /**

dist/es5/components/fullscreen-control.d.ts

 import * as React from 'react';
-import type { ControlPosition } from '../utils/types';
+import type { ControlPosition } from '../types';
 export declare type FullscreenControlProps = {
@@ -4,0 +4,0 @@ /** Id of the DOM element which should be made full screen. By default, the map container

dist/es5/components/geolocate-control.d.ts

 /// <reference types="mapbox-gl" />
 import * as React from 'react';
-import type { ControlPosition, PositionOptions, FitBoundsOptions, MapboxEvent, GeolocateEvent, GeolocateErrorEvent } from '../utils/types';
+import type { ControlPosition, PositionOptions, FitBoundsOptions, MapboxEvent, GeolocateEvent, GeolocateErrorEvent } from '../types';
 export declare type GeolocateControlRef = {
@@ -9,6 +9,9 @@ /** Triggers a geolocate event */
 export declare type GeolocateControlProps = {
-    /** A Geolocation API PositionOptions object. */
+    /**
+     * A Geolocation API PositionOptions object.
+     * @default {enableHighAccuracy:false,timeout:6000}
+     */
     positionOptions?: PositionOptions;
     /** A Map#fitBounds options object to use when the map is panned and zoomed to the user's location.
-     * The default is to use a maxZoom of 15 to limit how far the map will zoom in for very accurate locations.
+     * @default {maxZoom:15}
      */
@@ -18,2 +21,3 @@ fitBoundsOptions?: FitBoundsOptions;
      * updates to the user's location as it changes. Default false.
+     * @default false
      */
@@ -23,9 +27,14 @@ trackUserLocation?: boolean;
      * (95% confidence level) of the user's location. Set to false to disable.
-     * This only has effect if `showUserLocation` is true. Default true.
+     * This only has effect if `showUserLocation` is true.
+     * @default true
      */
     showAccuracyCircle?: boolean;
-    /** Show a dot on the map at the user's location. Set to false to disable. Default true. */
+    /**
+     * Show a dot on the map at the user's location. Set to false to disable.
+     * @default true
+     */
     showUserLocation?: boolean;
     /** If true an arrow will be drawn next to the user location dot indicating the device's heading.
      * This only has affect when `trackUserLocation` is true. Default false.
+     * @default false
      */
@@ -32,0 +41,0 @@ showUserHeading?: boolean;

dist/es5/components/geolocate-control.js

@@ -39,3 +39,4 @@ "use strict";
 });
+GeolocateControl.displayName = 'GeolocateControl';
 exports.default = React.memo(GeolocateControl);
 //# sourceMappingURL=geolocate-control.js.map

dist/es5/components/layer.d.ts

 /// <reference types="mapbox-gl" />
-import type { AnyLayer } from '../utils/types';
+import type { AnyLayer } from '../types';
 export declare type LayerProps = AnyLayer & {
     id?: string;
+    /** If set, the layer will be inserted before the specified layer */
     beforeId?: string;
@@ -6,0 +7,0 @@ };

dist/es5/components/map.d.ts

@@ -6,3 +6,3 @@ /// <reference types="mapbox-gl" />
 import type { CSSProperties } from 'react';
-import type { MapboxMap } from '../utils/types';
+import type { MapboxMap } from '../types';
 export declare const MapContext: React.Context<MapboxMap>;
@@ -15,5 +15,105 @@ export declare type MapProps = MapboxProps & {
     children?: any;
-    ref?: React.Ref<MapRef>;
 };
-declare const Map: React.ForwardRefExoticComponent<Pick<MapProps, "style" | "cursor" | "children" | "id" | "onLoad" | "onError" | "onClick" | "onContextMenu" | "onDrag" | "onDragEnd" | "onDragStart" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onWheel" | "maxZoom" | "minZoom" | "viewState" | "interactive" | "antialias" | "attributionControl" | "bearingSnap" | "boxZoom" | "clickTolerance" | "collectResourceTiming" | "crossSourceCollisions" | "cooperativeGestures" | "customAttribution" | "dragPan" | "dragRotate" | "doubleClickZoom" | "hash" | "fadeDuration" | "failIfMajorPerformanceCaveat" | "keyboard" | "locale" | "localFontFamily" | "localIdeographFontFamily" | "logoPosition" | "maxBounds" | "maxPitch" | "minPitch" | "optimizeForTerrain" | "preserveDrawingBuffer" | "pitchWithRotate" | "refreshExpiredTiles" | "renderWorldCopies" | "scrollZoom" | "trackResize" | "transformRequest" | "touchZoomRotate" | "touchPitch" | "maxTileCacheSize" | "testMode" | "onDblClick" | "onMoveStart" | "onMove" | "onMoveEnd" | "onZoomStart" | "onZoom" | "onZoomEnd" | "onRotateStart" | "onRotate" | "onRotateEnd" | "onPitchStart" | "onPitch" | "onPitchEnd" | "onBoxZoomStart" | "onBoxZoomEnd" | "onBoxZoomCancel" | "onResize" | "onRender" | "onIdle" | "onRemove" | "onData" | "onStyleData" | "onSourceData" | keyof import("../utils/types").ViewState | "mapboxAccessToken" | "initialViewState" | "gl" | "mapStyle" | "styleDiffing" | "interactiveLayerIds" | "projection"> & React.RefAttributes<MapRef>>;
+declare const Map: React.ForwardRefExoticComponent<import("../types").ViewState & {
+    mapboxAccessToken?: string;
+    initialViewState?: import("../types").ViewState & {
+        bounds?: import("mapbox-gl").LngLatBoundsLike;
+        fitBoundsOptions?: import("mapbox-gl").FitBoundsOptions;
+    };
+    gl?: WebGLRenderingContext;
+    antialias?: boolean;
+    attributionControl?: boolean;
+    bearingSnap?: number;
+    clickTolerance?: number;
+    collectResourceTiming?: boolean;
+    cooperativeGestures?: boolean;
+    crossSourceCollisions?: boolean;
+    customAttribution?: string | string[];
+    fadeDuration?: number;
+    failIfMajorPerformanceCaveat?: boolean;
+    hash?: string | boolean;
+    interactive?: boolean;
+    locale?: {
+        [key: string]: string;
+    };
+    localFontFamily?: string;
+    localIdeographFontFamily?: string;
+    logoPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    maxTileCacheSize?: number;
+    optimizeForTerrain?: boolean;
+    pitchWithRotate?: boolean;
+    preserveDrawingBuffer?: boolean;
+    refreshExpiredTiles?: boolean;
+    testMode?: boolean;
+    trackResize?: boolean;
+    transformRequest?: import("mapbox-gl").TransformRequestFunction;
+    boxZoom?: boolean;
+    doubleClickZoom?: boolean;
+    dragPan?: boolean | import("mapbox-gl").DragPanOptions;
+    dragRotate?: boolean;
+    keyboard?: boolean;
+    scrollZoom?: boolean | import("mapbox-gl").InteractiveOptions;
+    touchPitch?: boolean | import("mapbox-gl").InteractiveOptions;
+    touchZoomRotate?: boolean | import("mapbox-gl").InteractiveOptions;
+    maxBounds?: import("mapbox-gl").LngLatBoundsLike;
+    maxPitch?: number;
+    maxZoom?: number;
+    minPitch?: number;
+    minZoom?: number;
+    viewState?: import("../types").ViewState;
+    mapStyle?: string | import("mapbox-gl").Style | import("../types").ImmutableLike;
+    styleDiffing?: boolean;
+    interactiveLayerIds?: string[];
+    projection?: string | import("../types").ProjectionSpecification;
+    renderWorldCopies?: boolean;
+    cursor?: string;
+    onMouseDown?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseUp?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseOver?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseMove?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onClick?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onDblClick?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseEnter?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseLeave?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseOut?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onContextMenu?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onWheel?: (e: import("mapbox-gl").MapWheelEvent) => void;
+    onTouchStart?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
+    onTouchEnd?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
+    onTouchMove?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
+    onTouchCancel?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
+    onMoveStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onMove?: (e: import("../types").ViewStateChangeEvent) => void;
+    onMoveEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onDragStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onDrag?: (e: import("../types").ViewStateChangeEvent) => void;
+    onDragEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onZoomStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onZoom?: (e: import("../types").ViewStateChangeEvent) => void;
+    onZoomEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onRotateStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onRotate?: (e: import("../types").ViewStateChangeEvent) => void;
+    onRotateEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onPitchStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onPitch?: (e: import("../types").ViewStateChangeEvent) => void;
+    onPitchEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onBoxZoomStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onBoxZoomEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onBoxZoomCancel?: (e: import("../types").ViewStateChangeEvent) => void;
+    onResize?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
+    onLoad?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
+    onRender?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
+    onIdle?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
+    onError?: (e: import("mapbox-gl").ErrorEvent) => void;
+    onRemove?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
+    onData?: (e: import("mapbox-gl").MapDataEvent) => void;
+    onStyleData?: (e: import("mapbox-gl").MapDataEvent) => void;
+    onSourceData?: (e: import("mapbox-gl").MapDataEvent) => void;
+} & {
+    /** Map container id */
+    id?: string;
+    /** Map container CSS style */
+    style?: CSSProperties;
+    children?: any;
+} & React.RefAttributes<MapRef>>;
 export default Map;

dist/es5/components/map.js

@@ -18,2 +18,3 @@ "use strict";
 var use_map_1 = require("./use-map");
+var mapboxgl_1 = require("../utils/mapboxgl");
 var mapbox_1 = require("../mapbox/mapbox");
@@ -49,3 +50,3 @@ var create_ref_1 = require("../mapbox/create-ref");
     (0, react_1.useEffect)(function () {
-        var map = new mapbox_1.default(props);
+        var map = new mapbox_1.default(mapboxgl_1.default.Map, props);
         map.initialize(containerRef.current);
@@ -68,4 +69,5 @@ setMapInstance(map);
 });
+Map.displayName = 'Map';
 Map.defaultProps = defaultProps;
 exports.default = Map;
 //# sourceMappingURL=map.js.map

dist/es5/components/marker.d.ts

 /// <reference types="mapbox-gl" />
 import * as React from 'react';
-import type { MarkerDragEvent, MarkerOptions, MapboxPopup } from '../utils/types';
-export declare type MarkerProps = Omit<MarkerOptions, 'element'> & {
+import type { MarkerDragEvent, MapboxPopup, PointLike, Anchor, Alignment } from '../types';
+export declare type MarkerProps = {
+    /** Longitude of the anchor location */
     longitude: number;
+    /** Latitude of the anchor location */
     latitude: number;
+    /** A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker.setLngLat.
+     * Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
+     * @default "center"
+     */
+    anchor?: Anchor;
+    /**
+     * The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click
+     * (as opposed to a marker drag). The default (0) is to inherit map's clickTolerance.
+     */
+    clickTolerance?: number;
+    /** The color to use for the default marker if options.element is not provided.
+     * @default "#3FB1CE"
+     */
+    color?: string;
+    /** A boolean indicating whether or not a marker is able to be dragged to a new position on the map.
+     * @default false
+     */
+    draggable?: boolean;
+    /** The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. */
+    offset?: PointLike;
+    /** `map` aligns the `Marker` to the plane of the map.
+     * `viewport` aligns the `Marker` to the plane of the viewport.
+     * `auto` automatically matches the value of `rotationAlignment`.
+     * @default "auto"
+     */
+    pitchAlignment?: Alignment;
+    /** The rotation angle of the marker in degrees, relative to its `rotationAlignment` setting. A positive value will rotate the marker clockwise.
+     * @default 0
+     */
+    rotation?: number;
+    /** `map` aligns the `Marker`'s rotation relative to the map, maintaining a bearing as the map rotates.
+     * `viewport` aligns the `Marker`'s rotation relative to the viewport, agnostic to map rotations.
+     * `auto` is equivalent to `viewport`.
+     * @default "auto"
+     */
+    rotationAlignment?: Alignment;
+    /** The scale to use for the default marker if options.element is not provided.
+     * The default scale (1) corresponds to a height of `41px` and a width of `27px`.
+     * @default 1
+     */
+    scale?: number;
+    /** A Popup instance that is bound to the marker */
     popup?: MapboxPopup;
@@ -8,0 +52,0 @@ onDragStart?: (e: MarkerDragEvent) => void;

dist/es5/components/navigation-control.d.ts

 import * as React from 'react';
-import type { ControlPosition } from '../utils/types';
+import type { ControlPosition } from '../types';
 export declare type NavigationControlProps = {
-    /** If true the compass button is included. */
+    /** If true the compass button is included.
+     * @default true
+     */
     showCompass?: boolean;
-    /** If true the zoom-in and zoom-out buttons are included. */
+    /** If true the zoom-in and zoom-out buttons are included.
+     * @default true
+     */
     showZoom?: boolean;
-    /** If true the pitch is visualized by rotating X-axis of compass. */
+    /** If true the pitch is visualized by rotating X-axis of compass.
+     * @default false
+     */
     visualizePitch?: boolean;
@@ -10,0 +16,0 @@ /** Placement of the control relative to the map. */

dist/es5/components/popup.d.ts

 /// <reference types="mapbox-gl" />
 import * as React from 'react';
-import type { PopupOptions, MapboxEvent } from '../utils/types';
-export declare type PopupProps = PopupOptions & {
+import type { MapboxEvent, Anchor, PointLike } from '../types';
+export declare type PopupProps = {
+    /** Longitude of the anchor location */
     longitude: number;
+    /** Latitude of the anchor location */
     latitude: number;
+    /**
+     * A string indicating the part of the popup that should be positioned closest to the coordinate.
+     * Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`,
+     * and `'bottom-right'`. If unset, the anchor will be dynamically set to ensure the popup falls within the map
+     * container with a preference for `'bottom'`.
+     */
+    anchor?: Anchor;
+    /**
+     * If `true`, a close button will appear in the top right corner of the popup.
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * If `true`, the popup will close when the map is clicked.
+     * @default true
+     */
+    closeOnClick?: boolean;
+    /**
+     * If `true`, the popup will closed when the map moves.
+     * @default false
+     */
+    closeOnMove?: boolean;
+    /**
+     * If `true`, the popup will try to focus the first focusable element inside the popup.
+     * @default true
+     */
+    focusAfterOpen?: boolean;
+    /**
+     * A pixel offset applied to the popup's location specified as:
+     * - a single number specifying a distance from the popup's location
+     * - a PointLike specifying a constant offset
+     * - an object of Points specifing an offset for each anchor position.
+     */
+    offset?: number | PointLike | Partial<{
+        [anchor in Anchor]: PointLike;
+    }>;
+    /** Space-separated CSS class names to add to popup container. */
+    className?: string;
+    /**
+     * A string that sets the CSS property of the popup's maximum width (for example, `'300px'`).
+     * To ensure the popup resizes to fit its content, set this property to `'none'`
+     * @default "240px"
+     */
+    maxWidth?: string;
     onOpen?: (e: MapboxEvent) => void;
@@ -8,0 +54,0 @@ onClose?: (e: MapboxEvent) => void;

dist/es5/components/scale-control.d.ts

 import * as React from 'react';
-import type { ControlPosition } from '../utils/types';
+import type { ControlPosition } from '../types';
 export declare type ScaleControlProps = {
-    /** Unit of the distance. Default 'metric'. */
+    /** Unit of the distance.
+     * @default "metric"
+     */
     unit?: 'imperial' | 'metric' | 'nautical';
-    /** The maximum length of the scale control in pixels. Default 100. */
+    /** The maximum length of the scale control in pixels.
+     * @default 100
+     */
     maxWidth?: number;
@@ -8,0 +12,0 @@ /** Placement of the control relative to the map. */

dist/es5/components/source.d.ts

 /// <reference types="mapbox-gl" />
-import type { AnySourceData } from '../utils/types';
+import type { AnySourceData } from '../types';
 export declare type SourceProps = AnySourceData & {
@@ -4,0 +4,0 @@ id?: string;

dist/es5/components/use-control.d.ts

 /// <reference types="mapbox-gl" />
-import type { IControl, ControlPosition, MapboxMap } from '../utils/types';
+import type { IControl, ControlPosition, MapboxMap } from '../types';
 export default function useControl(onCreate: () => IControl, opts?: {
@@ -4,0 +4,0 @@ position?: ControlPosition;

dist/es5/index.d.ts

@@ -15,2 +15,2 @@ export { default } from './components/map';
 export { MapProvider, useMap } from './components/use-map';
-export * from './utils/types';
+export * from './types/external';

dist/es5/index.js

@@ -42,3 +42,3 @@ "use strict";
 // Types
-__exportStar(require("./utils/types"), exports);
+__exportStar(require("./types/external"), exports);
 //# sourceMappingURL=index.js.map

dist/es5/mapbox/create-ref.d.ts

 /// <reference types="mapbox-gl" />
-import type { MapboxMap, ViewState } from '../utils/types';
+import type { MapboxMap, ViewState } from '../types';
 import type Mapbox from './mapbox';
@@ -4,0 +4,0 @@ /** mapboxgl.Map methods to forward to the ref object

dist/es5/mapbox/mapbox.d.ts

 /// <reference types="mapbox-gl" />
-import type { ProjectionSpecification, ViewState, ViewStateChangeEvent, MapboxOptions, MapboxStyle, ImmutableLike, LngLatBoundsLike, FitBoundsOptions, MapMouseEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapDataEvent, MapboxEvent, ErrorEvent, MapboxMap } from '../utils/types';
-export declare type MapboxProps = Omit<MapboxOptions, 'center' | 'accessToken' | 'container' | 'style' | 'bounds' | 'fitBoundsOptions'> & ViewState & {
+import type { ProjectionSpecification, ViewState, ViewStateChangeEvent, DragPanOptions, InteractiveOptions, TransformRequestFunction, MapboxStyle, ImmutableLike, LngLatBoundsLike, FitBoundsOptions, MapMouseEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapDataEvent, MapboxEvent, ErrorEvent, MapboxMap } from '../types';
+export declare type MapboxProps = ViewState & {
     mapboxAccessToken?: string;
     /** Camera options used when constructing the Map instance */
     initialViewState?: ViewState & {
+        /** The initial bounds of the map. If bounds is specified, it overrides longitude, latitude and zoom options. */
         bounds?: LngLatBoundsLike;
+        /** A fitBounds options object to use only when setting the bounds option. */
         fitBoundsOptions?: FitBoundsOptions;
@@ -12,2 +14,194 @@ };
     gl?: WebGLRenderingContext;
+    /**
+     * If true, the gl context will be created with MSA antialiasing, which can be useful for antialiasing custom layers.
+     * This is false by default as a performance optimization.
+     * @default false
+     */
+    antialias?: boolean;
+    /**
+     * If true, an attribution control will be added to the map.
+     * @default true
+     */
+    attributionControl?: boolean;
+    /**
+     * Snap to north threshold in degrees.
+     * @default 7
+     */
+    bearingSnap?: number;
+    /**
+     * The max number of pixels a user can shift the mouse pointer during a click for it to be
+     * considered a valid click (as opposed to a mouse drag).
+     * @default 3
+     */
+    clickTolerance?: number;
+    /**
+     * 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.
+     * @default false
+     */
+    collectResourceTiming?: boolean;
+    /**
+     * If `true` , scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map,
+     * and touch pan will require using two fingers while panning to move the map.
+     * Touch pitch will require three fingers to activate if enabled.
+     */
+    cooperativeGestures?: boolean;
+    /**
+     * 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.
+     * @default true
+     */
+    crossSourceCollisions?: boolean;
+    /** String or strings to show in an AttributionControl.
+     * Only applicable if options.attributionControl is `true`. */
+    customAttribution?: string | string[];
+    /**
+     * 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.
+     * @default 300
+     */
+    fadeDuration?: number;
+    /** If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected.
+     * @default false
+     */
+    failIfMajorPerformanceCaveat?: boolean;
+    /** 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`.
+     * An additional string may optionally be provided to indicate a parameter-styled hash,
+     * e.g. http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar, where foo
+     * is a custom parameter and bar is an arbitrary hash distinct from the map hash.
+     */
+    hash?: boolean | string;
+    /** If false, no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input
+     * @default true
+     */
+    interactive?: 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?: {
+        [key: string]: string;
+    };
+    /**
+     * Overrides the generation of all glyphs and font settings except font-weight keywords
+     * Also overrides localIdeographFontFamily
+     * @default null
+     */
+    localFontFamily?: string;
+    /**
+     * 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.
+     * @default "sans-serif"
+     */
+    localIdeographFontFamily?: string;
+    /**
+     * A string representing the position of the Mapbox wordmark on the map.
+     * @default "bottom-left"
+     */
+    logoPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * 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.
+     * @default null
+     */
+    maxTileCacheSize?: number;
+    /**
+     * If true, map will prioritize rendering for performance by reordering layers
+     * If false, layers will always be drawn in the specified order
+     * @default true
+     */
+    optimizeForTerrain?: boolean;
+    /**
+     * If `false`, the map's pitch (tilt) control with "drag to rotate" interaction will be disabled.
+     * @default true
+     */
+    pitchWithRotate?: boolean;
+    /** If true, The maps canvas can be exported to a PNG using map.getCanvas().toDataURL();. This is false by default as a performance optimization.
+     * @default false
+     */
+    preserveDrawingBuffer?: boolean;
+    /**
+     * If `false`, the map won't attempt to re-request tiles once they expire per their HTTP
+     * `cacheControl`/`expires` headers.
+     * @default true
+     */
+    refreshExpiredTiles?: boolean;
+    /**
+     * Allows for the usage of the map in automated tests without an accessToken with custom self-hosted test fixtures.
+     * @default null
+     */
+    testMode?: boolean;
+    /**
+     * If  true, the map will automatically resize when the browser window resizes
+     * @default true
+     */
+    trackResize?: 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.
+     * @default null
+     */
+    transformRequest?: TransformRequestFunction;
+    /**
+     * If true, enable the "box zoom" interaction (see BoxZoomHandler)
+     * @default true
+     */
+    boxZoom?: boolean;
+    /**
+     * If true, enable the "double click to zoom" interaction (see DoubleClickZoomHandler).
+     * @default true
+     */
+    doubleClickZoom?: boolean;
+    /**
+     * If `true`, the "drag to pan" interaction is enabled.
+     * An `Object` value is passed as options to {@link DragPanHandler#enable}.
+     * @default true
+     */
+    dragPan?: boolean | DragPanOptions;
+    /**
+     * If true, enable the "drag to rotate" interaction (see DragRotateHandler).
+     * @default true
+     */
+    dragRotate?: boolean;
+    /**
+     * If true, enable keyboard shortcuts (see KeyboardHandler).
+     * @default true
+     */
+    keyboard?: boolean;
+    /**
+     * If `true`, the "scroll to zoom" interaction is enabled.
+     * An `Object` value is passed as options to {@link ScrollZoomHandler#enable}.
+     * @default true
+     */
+    scrollZoom?: boolean | InteractiveOptions;
+    /**
+     * If `true`, the "drag to pitch" interaction is enabled.
+     * An `Object` value is passed as options to {@link TouchPitchHandler#enable}.
+     * @default true
+     */
+    touchPitch?: boolean | InteractiveOptions;
+    /**
+     * If `true`, the "pinch to rotate and zoom" interaction is enabled.
+     * An `Object` value is passed as options to {@link TouchZoomRotateHandler#enable}.
+     * @default true
+     */
+    touchZoomRotate?: boolean | InteractiveOptions;
+    /** If set, the map is constrained to the given bounds. */
+    maxBounds?: LngLatBoundsLike;
+    /** Maximum pitch of the map. */
+    maxPitch?: number;
+    /** Maximum zoom of the map. */
+    maxZoom?: number;
+    /** Minimum pitch of the map. */
+    minPitch?: number;
+    /** Minimum zoom of the map. */
+    minZoom?: number;
     /** Aternative way to specify camera state */
@@ -17,8 +211,17 @@ viewState?: ViewState;
     mapStyle?: string | MapboxStyle | ImmutableLike;
-    /** Enable diffing when the map style changes */
+    /** Enable diffing when the map style changes
+     * @default true
+     */
     styleDiffing?: boolean;
     /** Default layers to query on pointer events */
     interactiveLayerIds?: string[];
-    /** The projection the map should be rendered in */
+    /** The projection the map should be rendered in
+     * @default "mercator"
+     */
     projection?: ProjectionSpecification | string;
+    /**
+     * If `true`, multiple copies of the world will be rendered, when zoomed out.
+     * @default true
+     */
+    renderWorldCopies?: boolean;
     /** CSS cursor */
@@ -73,2 +276,3 @@ cursor?: string;
 export default class Mapbox {
+    private _MapClass;
     private _map;
@@ -85,3 +289,3 @@ props: MapboxProps;
     private _nextProps;
-    constructor(props: MapboxProps);
+    constructor(MapClass: typeof MapboxMap, props: MapboxProps);
     get map(): MapboxMap;
@@ -88,0 +292,0 @@ get viewState(): ViewState;

dist/es5/mapbox/mapbox.js

@@ -14,3 +14,2 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var mapboxgl_1 = require("../utils/mapboxgl");
 var transform_1 = require("../utils/transform");
@@ -89,3 +88,3 @@ var style_utils_1 = require("../utils/style-utils");
 var Mapbox = /** @class */ (function () {
-    function Mapbox(props) {
+    function Mapbox(MapClass, props) {
         var _this = this;
@@ -115,2 +114,3 @@ // mapboxgl.Map instance. Not using type here because we are accessing
             else {
+                // eslint-disable-next-line
                 console.error(e.error);
@@ -147,2 +147,3 @@ }
         };
+        this._MapClass = MapClass;
         this.props = props;
@@ -208,3 +209,3 @@ }
         }
-        var map = new mapboxgl_1.default.Map(mapOptions);
+        var map = new this._MapClass(mapOptions);
         if (viewState.padding) {
@@ -404,2 +405,3 @@ map.setPadding(viewState.padding);
                 break;
+            default:
         }
@@ -406,0 +408,0 @@ if (eventType in cameraEvents) {

dist/es5/utils/deep-equal.d.ts

 /// <reference types="mapbox-gl" />
-import type { PointLike } from './types';
+import type { PointLike } from '../types';
 /**
@@ -4,0 +4,0 @@ * Compare two points

dist/es5/utils/style-utils.d.ts

 /// <reference types="mapbox-gl" />
-import { ImmutableLike, MapboxStyle } from './types';
+import { ImmutableLike, MapboxStyle } from '../types';
 export declare function normalizeStyle(style: string | MapboxStyle | ImmutableLike): string | MapboxStyle;

dist/es5/utils/transform.d.ts

 /// <reference types="mapbox-gl" />
-import type { PaddingOptions, ViewState } from './types';
+import type { PaddingOptions, ViewState } from '../types';
 /**
@@ -4,0 +4,0 @@ * Stub for mapbox's Transform class

dist/esm/components/attribution-control.d.ts

 import * as React from 'react';
-import type { ControlPosition } from '../utils/types';
+import type { ControlPosition } from '../types';
 export declare type AttributionControlProps = {
@@ -4,0 +4,0 @@ /**

dist/esm/components/fullscreen-control.d.ts

 import * as React from 'react';
-import type { ControlPosition } from '../utils/types';
+import type { ControlPosition } from '../types';
 export declare type FullscreenControlProps = {
@@ -4,0 +4,0 @@ /** Id of the DOM element which should be made full screen. By default, the map container

dist/esm/components/geolocate-control.d.ts

 /// <reference types="mapbox-gl" />
 import * as React from 'react';
-import type { ControlPosition, PositionOptions, FitBoundsOptions, MapboxEvent, GeolocateEvent, GeolocateErrorEvent } from '../utils/types';
+import type { ControlPosition, PositionOptions, FitBoundsOptions, MapboxEvent, GeolocateEvent, GeolocateErrorEvent } from '../types';
 export declare type GeolocateControlRef = {
@@ -9,6 +9,9 @@ /** Triggers a geolocate event */
 export declare type GeolocateControlProps = {
-    /** A Geolocation API PositionOptions object. */
+    /**
+     * A Geolocation API PositionOptions object.
+     * @default {enableHighAccuracy:false,timeout:6000}
+     */
     positionOptions?: PositionOptions;
     /** A Map#fitBounds options object to use when the map is panned and zoomed to the user's location.
-     * The default is to use a maxZoom of 15 to limit how far the map will zoom in for very accurate locations.
+     * @default {maxZoom:15}
      */
@@ -18,2 +21,3 @@ fitBoundsOptions?: FitBoundsOptions;
      * updates to the user's location as it changes. Default false.
+     * @default false
      */
@@ -23,9 +27,14 @@ trackUserLocation?: boolean;
      * (95% confidence level) of the user's location. Set to false to disable.
-     * This only has effect if `showUserLocation` is true. Default true.
+     * This only has effect if `showUserLocation` is true.
+     * @default true
      */
     showAccuracyCircle?: boolean;
-    /** Show a dot on the map at the user's location. Set to false to disable. Default true. */
+    /**
+     * Show a dot on the map at the user's location. Set to false to disable.
+     * @default true
+     */
     showUserLocation?: boolean;
     /** If true an arrow will be drawn next to the user location dot indicating the device's heading.
      * This only has affect when `trackUserLocation` is true. Default false.
+     * @default false
      */
@@ -32,0 +41,0 @@ showUserHeading?: boolean;

dist/esm/components/geolocate-control.js

@@ -32,3 +32,4 @@ import * as React from 'react';
 });
+GeolocateControl.displayName = 'GeolocateControl';
 export default React.memo(GeolocateControl);
 //# sourceMappingURL=geolocate-control.js.map

dist/esm/components/layer.d.ts

 /// <reference types="mapbox-gl" />
-import type { AnyLayer } from '../utils/types';
+import type { AnyLayer } from '../types';
 export declare type LayerProps = AnyLayer & {
     id?: string;
+    /** If set, the layer will be inserted before the specified layer */
     beforeId?: string;
@@ -6,0 +7,0 @@ };

dist/esm/components/map.d.ts

@@ -6,3 +6,3 @@ /// <reference types="mapbox-gl" />
 import type { CSSProperties } from 'react';
-import type { MapboxMap } from '../utils/types';
+import type { MapboxMap } from '../types';
 export declare const MapContext: React.Context<MapboxMap>;
@@ -15,5 +15,105 @@ export declare type MapProps = MapboxProps & {
     children?: any;
-    ref?: React.Ref<MapRef>;
 };
-declare const Map: React.ForwardRefExoticComponent<Pick<MapProps, "style" | "cursor" | "children" | "id" | "onLoad" | "onError" | "onClick" | "onContextMenu" | "onDrag" | "onDragEnd" | "onDragStart" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onWheel" | "maxZoom" | "minZoom" | "viewState" | "interactive" | "antialias" | "attributionControl" | "bearingSnap" | "boxZoom" | "clickTolerance" | "collectResourceTiming" | "crossSourceCollisions" | "cooperativeGestures" | "customAttribution" | "dragPan" | "dragRotate" | "doubleClickZoom" | "hash" | "fadeDuration" | "failIfMajorPerformanceCaveat" | "keyboard" | "locale" | "localFontFamily" | "localIdeographFontFamily" | "logoPosition" | "maxBounds" | "maxPitch" | "minPitch" | "optimizeForTerrain" | "preserveDrawingBuffer" | "pitchWithRotate" | "refreshExpiredTiles" | "renderWorldCopies" | "scrollZoom" | "trackResize" | "transformRequest" | "touchZoomRotate" | "touchPitch" | "maxTileCacheSize" | "testMode" | "onDblClick" | "onMoveStart" | "onMove" | "onMoveEnd" | "onZoomStart" | "onZoom" | "onZoomEnd" | "onRotateStart" | "onRotate" | "onRotateEnd" | "onPitchStart" | "onPitch" | "onPitchEnd" | "onBoxZoomStart" | "onBoxZoomEnd" | "onBoxZoomCancel" | "onResize" | "onRender" | "onIdle" | "onRemove" | "onData" | "onStyleData" | "onSourceData" | keyof import("../utils/types").ViewState | "mapboxAccessToken" | "initialViewState" | "gl" | "mapStyle" | "styleDiffing" | "interactiveLayerIds" | "projection"> & React.RefAttributes<MapRef>>;
+declare const Map: React.ForwardRefExoticComponent<import("../types").ViewState & {
+    mapboxAccessToken?: string;
+    initialViewState?: import("../types").ViewState & {
+        bounds?: import("mapbox-gl").LngLatBoundsLike;
+        fitBoundsOptions?: import("mapbox-gl").FitBoundsOptions;
+    };
+    gl?: WebGLRenderingContext;
+    antialias?: boolean;
+    attributionControl?: boolean;
+    bearingSnap?: number;
+    clickTolerance?: number;
+    collectResourceTiming?: boolean;
+    cooperativeGestures?: boolean;
+    crossSourceCollisions?: boolean;
+    customAttribution?: string | string[];
+    fadeDuration?: number;
+    failIfMajorPerformanceCaveat?: boolean;
+    hash?: string | boolean;
+    interactive?: boolean;
+    locale?: {
+        [key: string]: string;
+    };
+    localFontFamily?: string;
+    localIdeographFontFamily?: string;
+    logoPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    maxTileCacheSize?: number;
+    optimizeForTerrain?: boolean;
+    pitchWithRotate?: boolean;
+    preserveDrawingBuffer?: boolean;
+    refreshExpiredTiles?: boolean;
+    testMode?: boolean;
+    trackResize?: boolean;
+    transformRequest?: import("mapbox-gl").TransformRequestFunction;
+    boxZoom?: boolean;
+    doubleClickZoom?: boolean;
+    dragPan?: boolean | import("mapbox-gl").DragPanOptions;
+    dragRotate?: boolean;
+    keyboard?: boolean;
+    scrollZoom?: boolean | import("mapbox-gl").InteractiveOptions;
+    touchPitch?: boolean | import("mapbox-gl").InteractiveOptions;
+    touchZoomRotate?: boolean | import("mapbox-gl").InteractiveOptions;
+    maxBounds?: import("mapbox-gl").LngLatBoundsLike;
+    maxPitch?: number;
+    maxZoom?: number;
+    minPitch?: number;
+    minZoom?: number;
+    viewState?: import("../types").ViewState;
+    mapStyle?: string | import("mapbox-gl").Style | import("../types").ImmutableLike;
+    styleDiffing?: boolean;
+    interactiveLayerIds?: string[];
+    projection?: string | import("../types").ProjectionSpecification;
+    renderWorldCopies?: boolean;
+    cursor?: string;
+    onMouseDown?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseUp?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseOver?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseMove?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onClick?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onDblClick?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseEnter?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseLeave?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onMouseOut?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onContextMenu?: (e: import("mapbox-gl").MapLayerMouseEvent) => void;
+    onWheel?: (e: import("mapbox-gl").MapWheelEvent) => void;
+    onTouchStart?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
+    onTouchEnd?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
+    onTouchMove?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
+    onTouchCancel?: (e: import("mapbox-gl").MapLayerTouchEvent) => void;
+    onMoveStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onMove?: (e: import("../types").ViewStateChangeEvent) => void;
+    onMoveEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onDragStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onDrag?: (e: import("../types").ViewStateChangeEvent) => void;
+    onDragEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onZoomStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onZoom?: (e: import("../types").ViewStateChangeEvent) => void;
+    onZoomEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onRotateStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onRotate?: (e: import("../types").ViewStateChangeEvent) => void;
+    onRotateEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onPitchStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onPitch?: (e: import("../types").ViewStateChangeEvent) => void;
+    onPitchEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onBoxZoomStart?: (e: import("../types").ViewStateChangeEvent) => void;
+    onBoxZoomEnd?: (e: import("../types").ViewStateChangeEvent) => void;
+    onBoxZoomCancel?: (e: import("../types").ViewStateChangeEvent) => void;
+    onResize?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
+    onLoad?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
+    onRender?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
+    onIdle?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
+    onError?: (e: import("mapbox-gl").ErrorEvent) => void;
+    onRemove?: (e: import("mapbox-gl").MapboxEvent<undefined>) => void;
+    onData?: (e: import("mapbox-gl").MapDataEvent) => void;
+    onStyleData?: (e: import("mapbox-gl").MapDataEvent) => void;
+    onSourceData?: (e: import("mapbox-gl").MapDataEvent) => void;
+} & {
+    /** Map container id */
+    id?: string;
+    /** Map container CSS style */
+    style?: CSSProperties;
+    children?: any;
+} & React.RefAttributes<MapRef>>;
 export default Map;

dist/esm/components/map.js

 import * as React from 'react';
 import { useState, useRef, useEffect, useContext, forwardRef, useImperativeHandle } from 'react';
 import { MountedMapsContext } from './use-map';
+import mapboxgl from '../utils/mapboxgl';
 import Mapbox from '../mapbox/mapbox';
@@ -34,3 +35,3 @@ import createRef from '../mapbox/create-ref';
     useEffect(() => {
-        const map = new Mapbox(props);
+        const map = new Mapbox(mapboxgl.Map, props);
         map.initialize(containerRef.current);
@@ -58,4 +59,5 @@ setMapInstance(map);
 });
+Map.displayName = 'Map';
 Map.defaultProps = defaultProps;
 export default Map;
 //# sourceMappingURL=map.js.map

dist/esm/components/marker.d.ts

 /// <reference types="mapbox-gl" />
 import * as React from 'react';
-import type { MarkerDragEvent, MarkerOptions, MapboxPopup } from '../utils/types';
-export declare type MarkerProps = Omit<MarkerOptions, 'element'> & {
+import type { MarkerDragEvent, MapboxPopup, PointLike, Anchor, Alignment } from '../types';
+export declare type MarkerProps = {
+    /** Longitude of the anchor location */
     longitude: number;
+    /** Latitude of the anchor location */
     latitude: number;
+    /** A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker.setLngLat.
+     * Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
+     * @default "center"
+     */
+    anchor?: Anchor;
+    /**
+     * The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click
+     * (as opposed to a marker drag). The default (0) is to inherit map's clickTolerance.
+     */
+    clickTolerance?: number;
+    /** The color to use for the default marker if options.element is not provided.
+     * @default "#3FB1CE"
+     */
+    color?: string;
+    /** A boolean indicating whether or not a marker is able to be dragged to a new position on the map.
+     * @default false
+     */
+    draggable?: boolean;
+    /** The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. */
+    offset?: PointLike;
+    /** `map` aligns the `Marker` to the plane of the map.
+     * `viewport` aligns the `Marker` to the plane of the viewport.
+     * `auto` automatically matches the value of `rotationAlignment`.
+     * @default "auto"
+     */
+    pitchAlignment?: Alignment;
+    /** The rotation angle of the marker in degrees, relative to its `rotationAlignment` setting. A positive value will rotate the marker clockwise.
+     * @default 0
+     */
+    rotation?: number;
+    /** `map` aligns the `Marker`'s rotation relative to the map, maintaining a bearing as the map rotates.
+     * `viewport` aligns the `Marker`'s rotation relative to the viewport, agnostic to map rotations.
+     * `auto` is equivalent to `viewport`.
+     * @default "auto"
+     */
+    rotationAlignment?: Alignment;
+    /** The scale to use for the default marker if options.element is not provided.
+     * The default scale (1) corresponds to a height of `41px` and a width of `27px`.
+     * @default 1
+     */
+    scale?: number;
+    /** A Popup instance that is bound to the marker */
     popup?: MapboxPopup;
@@ -8,0 +52,0 @@ onDragStart?: (e: MarkerDragEvent) => void;

dist/esm/components/navigation-control.d.ts

 import * as React from 'react';
-import type { ControlPosition } from '../utils/types';
+import type { ControlPosition } from '../types';
 export declare type NavigationControlProps = {
-    /** If true the compass button is included. */
+    /** If true the compass button is included.
+     * @default true
+     */
     showCompass?: boolean;
-    /** If true the zoom-in and zoom-out buttons are included. */
+    /** If true the zoom-in and zoom-out buttons are included.
+     * @default true
+     */
     showZoom?: boolean;
-    /** If true the pitch is visualized by rotating X-axis of compass. */
+    /** If true the pitch is visualized by rotating X-axis of compass.
+     * @default false
+     */
     visualizePitch?: boolean;
@@ -10,0 +16,0 @@ /** Placement of the control relative to the map. */

dist/esm/components/popup.d.ts

 /// <reference types="mapbox-gl" />
 import * as React from 'react';
-import type { PopupOptions, MapboxEvent } from '../utils/types';
-export declare type PopupProps = PopupOptions & {
+import type { MapboxEvent, Anchor, PointLike } from '../types';
+export declare type PopupProps = {
+    /** Longitude of the anchor location */
     longitude: number;
+    /** Latitude of the anchor location */
     latitude: number;
+    /**
+     * A string indicating the part of the popup that should be positioned closest to the coordinate.
+     * Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`,
+     * and `'bottom-right'`. If unset, the anchor will be dynamically set to ensure the popup falls within the map
+     * container with a preference for `'bottom'`.
+     */
+    anchor?: Anchor;
+    /**
+     * If `true`, a close button will appear in the top right corner of the popup.
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * If `true`, the popup will close when the map is clicked.
+     * @default true
+     */
+    closeOnClick?: boolean;
+    /**
+     * If `true`, the popup will closed when the map moves.
+     * @default false
+     */
+    closeOnMove?: boolean;
+    /**
+     * If `true`, the popup will try to focus the first focusable element inside the popup.
+     * @default true
+     */
+    focusAfterOpen?: boolean;
+    /**
+     * A pixel offset applied to the popup's location specified as:
+     * - a single number specifying a distance from the popup's location
+     * - a PointLike specifying a constant offset
+     * - an object of Points specifing an offset for each anchor position.
+     */
+    offset?: number | PointLike | Partial<{
+        [anchor in Anchor]: PointLike;
+    }>;
+    /** Space-separated CSS class names to add to popup container. */
+    className?: string;
+    /**
+     * A string that sets the CSS property of the popup's maximum width (for example, `'300px'`).
+     * To ensure the popup resizes to fit its content, set this property to `'none'`
+     * @default "240px"
+     */
+    maxWidth?: string;
     onOpen?: (e: MapboxEvent) => void;
@@ -8,0 +54,0 @@ onClose?: (e: MapboxEvent) => void;

dist/esm/components/scale-control.d.ts

 import * as React from 'react';
-import type { ControlPosition } from '../utils/types';
+import type { ControlPosition } from '../types';
 export declare type ScaleControlProps = {
-    /** Unit of the distance. Default 'metric'. */
+    /** Unit of the distance.
+     * @default "metric"
+     */
     unit?: 'imperial' | 'metric' | 'nautical';
-    /** The maximum length of the scale control in pixels. Default 100. */
+    /** The maximum length of the scale control in pixels.
+     * @default 100
+     */
     maxWidth?: number;
@@ -8,0 +12,0 @@ /** Placement of the control relative to the map. */

dist/esm/components/source.d.ts

 /// <reference types="mapbox-gl" />
-import type { AnySourceData } from '../utils/types';
+import type { AnySourceData } from '../types';
 export declare type SourceProps = AnySourceData & {
@@ -4,0 +4,0 @@ id?: string;

dist/esm/components/use-control.d.ts

 /// <reference types="mapbox-gl" />
-import type { IControl, ControlPosition, MapboxMap } from '../utils/types';
+import type { IControl, ControlPosition, MapboxMap } from '../types';
 export default function useControl(onCreate: () => IControl, opts?: {
@@ -4,0 +4,0 @@ position?: ControlPosition;

dist/esm/index.d.ts

@@ -15,2 +15,2 @@ export { default } from './components/map';
 export { MapProvider, useMap } from './components/use-map';
-export * from './utils/types';
+export * from './types/external';

dist/esm/index.js

@@ -15,3 +15,3 @@ export { default } from './components/map';
 // Types
-export * from './utils/types';
+export * from './types/external';
 //# sourceMappingURL=index.js.map

dist/esm/mapbox/create-ref.d.ts

 /// <reference types="mapbox-gl" />
-import type { MapboxMap, ViewState } from '../utils/types';
+import type { MapboxMap, ViewState } from '../types';
 import type Mapbox from './mapbox';
@@ -4,0 +4,0 @@ /** mapboxgl.Map methods to forward to the ref object

dist/esm/mapbox/mapbox.d.ts

 /// <reference types="mapbox-gl" />
-import type { ProjectionSpecification, ViewState, ViewStateChangeEvent, MapboxOptions, MapboxStyle, ImmutableLike, LngLatBoundsLike, FitBoundsOptions, MapMouseEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapDataEvent, MapboxEvent, ErrorEvent, MapboxMap } from '../utils/types';
-export declare type MapboxProps = Omit<MapboxOptions, 'center' | 'accessToken' | 'container' | 'style' | 'bounds' | 'fitBoundsOptions'> & ViewState & {
+import type { ProjectionSpecification, ViewState, ViewStateChangeEvent, DragPanOptions, InteractiveOptions, TransformRequestFunction, MapboxStyle, ImmutableLike, LngLatBoundsLike, FitBoundsOptions, MapMouseEvent, MapLayerMouseEvent, MapLayerTouchEvent, MapWheelEvent, MapDataEvent, MapboxEvent, ErrorEvent, MapboxMap } from '../types';
+export declare type MapboxProps = ViewState & {
     mapboxAccessToken?: string;
     /** Camera options used when constructing the Map instance */
     initialViewState?: ViewState & {
+        /** The initial bounds of the map. If bounds is specified, it overrides longitude, latitude and zoom options. */
         bounds?: LngLatBoundsLike;
+        /** A fitBounds options object to use only when setting the bounds option. */
         fitBoundsOptions?: FitBoundsOptions;
@@ -12,2 +14,194 @@ };
     gl?: WebGLRenderingContext;
+    /**
+     * If true, the gl context will be created with MSA antialiasing, which can be useful for antialiasing custom layers.
+     * This is false by default as a performance optimization.
+     * @default false
+     */
+    antialias?: boolean;
+    /**
+     * If true, an attribution control will be added to the map.
+     * @default true
+     */
+    attributionControl?: boolean;
+    /**
+     * Snap to north threshold in degrees.
+     * @default 7
+     */
+    bearingSnap?: number;
+    /**
+     * The max number of pixels a user can shift the mouse pointer during a click for it to be
+     * considered a valid click (as opposed to a mouse drag).
+     * @default 3
+     */
+    clickTolerance?: number;
+    /**
+     * 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.
+     * @default false
+     */
+    collectResourceTiming?: boolean;
+    /**
+     * If `true` , scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map,
+     * and touch pan will require using two fingers while panning to move the map.
+     * Touch pitch will require three fingers to activate if enabled.
+     */
+    cooperativeGestures?: boolean;
+    /**
+     * 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.
+     * @default true
+     */
+    crossSourceCollisions?: boolean;
+    /** String or strings to show in an AttributionControl.
+     * Only applicable if options.attributionControl is `true`. */
+    customAttribution?: string | string[];
+    /**
+     * 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.
+     * @default 300
+     */
+    fadeDuration?: number;
+    /** If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected.
+     * @default false
+     */
+    failIfMajorPerformanceCaveat?: boolean;
+    /** 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`.
+     * An additional string may optionally be provided to indicate a parameter-styled hash,
+     * e.g. http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar, where foo
+     * is a custom parameter and bar is an arbitrary hash distinct from the map hash.
+     */
+    hash?: boolean | string;
+    /** If false, no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input
+     * @default true
+     */
+    interactive?: 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?: {
+        [key: string]: string;
+    };
+    /**
+     * Overrides the generation of all glyphs and font settings except font-weight keywords
+     * Also overrides localIdeographFontFamily
+     * @default null
+     */
+    localFontFamily?: string;
+    /**
+     * 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.
+     * @default "sans-serif"
+     */
+    localIdeographFontFamily?: string;
+    /**
+     * A string representing the position of the Mapbox wordmark on the map.
+     * @default "bottom-left"
+     */
+    logoPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * 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.
+     * @default null
+     */
+    maxTileCacheSize?: number;
+    /**
+     * If true, map will prioritize rendering for performance by reordering layers
+     * If false, layers will always be drawn in the specified order
+     * @default true
+     */
+    optimizeForTerrain?: boolean;
+    /**
+     * If `false`, the map's pitch (tilt) control with "drag to rotate" interaction will be disabled.
+     * @default true
+     */
+    pitchWithRotate?: boolean;
+    /** If true, The maps canvas can be exported to a PNG using map.getCanvas().toDataURL();. This is false by default as a performance optimization.
+     * @default false
+     */
+    preserveDrawingBuffer?: boolean;
+    /**
+     * If `false`, the map won't attempt to re-request tiles once they expire per their HTTP
+     * `cacheControl`/`expires` headers.
+     * @default true
+     */
+    refreshExpiredTiles?: boolean;
+    /**
+     * Allows for the usage of the map in automated tests without an accessToken with custom self-hosted test fixtures.
+     * @default null
+     */
+    testMode?: boolean;
+    /**
+     * If  true, the map will automatically resize when the browser window resizes
+     * @default true
+     */
+    trackResize?: 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.
+     * @default null
+     */
+    transformRequest?: TransformRequestFunction;
+    /**
+     * If true, enable the "box zoom" interaction (see BoxZoomHandler)
+     * @default true
+     */
+    boxZoom?: boolean;
+    /**
+     * If true, enable the "double click to zoom" interaction (see DoubleClickZoomHandler).
+     * @default true
+     */
+    doubleClickZoom?: boolean;
+    /**
+     * If `true`, the "drag to pan" interaction is enabled.
+     * An `Object` value is passed as options to {@link DragPanHandler#enable}.
+     * @default true
+     */
+    dragPan?: boolean | DragPanOptions;
+    /**
+     * If true, enable the "drag to rotate" interaction (see DragRotateHandler).
+     * @default true
+     */
+    dragRotate?: boolean;
+    /**
+     * If true, enable keyboard shortcuts (see KeyboardHandler).
+     * @default true
+     */
+    keyboard?: boolean;
+    /**
+     * If `true`, the "scroll to zoom" interaction is enabled.
+     * An `Object` value is passed as options to {@link ScrollZoomHandler#enable}.
+     * @default true
+     */
+    scrollZoom?: boolean | InteractiveOptions;
+    /**
+     * If `true`, the "drag to pitch" interaction is enabled.
+     * An `Object` value is passed as options to {@link TouchPitchHandler#enable}.
+     * @default true
+     */
+    touchPitch?: boolean | InteractiveOptions;
+    /**
+     * If `true`, the "pinch to rotate and zoom" interaction is enabled.
+     * An `Object` value is passed as options to {@link TouchZoomRotateHandler#enable}.
+     * @default true
+     */
+    touchZoomRotate?: boolean | InteractiveOptions;
+    /** If set, the map is constrained to the given bounds. */
+    maxBounds?: LngLatBoundsLike;
+    /** Maximum pitch of the map. */
+    maxPitch?: number;
+    /** Maximum zoom of the map. */
+    maxZoom?: number;
+    /** Minimum pitch of the map. */
+    minPitch?: number;
+    /** Minimum zoom of the map. */
+    minZoom?: number;
     /** Aternative way to specify camera state */
@@ -17,8 +211,17 @@ viewState?: ViewState;
     mapStyle?: string | MapboxStyle | ImmutableLike;
-    /** Enable diffing when the map style changes */
+    /** Enable diffing when the map style changes
+     * @default true
+     */
     styleDiffing?: boolean;
     /** Default layers to query on pointer events */
     interactiveLayerIds?: string[];
-    /** The projection the map should be rendered in */
+    /** The projection the map should be rendered in
+     * @default "mercator"
+     */
     projection?: ProjectionSpecification | string;
+    /**
+     * If `true`, multiple copies of the world will be rendered, when zoomed out.
+     * @default true
+     */
+    renderWorldCopies?: boolean;
     /** CSS cursor */
@@ -73,2 +276,3 @@ cursor?: string;
 export default class Mapbox {
+    private _MapClass;
     private _map;
@@ -85,3 +289,3 @@ props: MapboxProps;
     private _nextProps;
-    constructor(props: MapboxProps);
+    constructor(MapClass: typeof MapboxMap, props: MapboxProps);
     get map(): MapboxMap;
@@ -88,0 +292,0 @@ get viewState(): ViewState;

dist/esm/mapbox/mapbox.js

@@ -1,2 +0,1 @@
-import mapboxgl from '../utils/mapboxgl';
 import { transformToViewState, applyViewStateToTransform } from '../utils/transform';
@@ -75,3 +74,3 @@ import { normalizeStyle } from '../utils/style-utils';
 export default class Mapbox {
-    constructor(props) {
+    constructor(MapClass, props) {
         // mapboxgl.Map instance. Not using type here because we are accessing
@@ -100,2 +99,3 @@ // private members and methods
             else {
+                // eslint-disable-next-line
                 console.error(e.error);
@@ -132,2 +132,3 @@ }
         };
+        this._MapClass = MapClass;
         this.props = props;
@@ -190,3 +191,3 @@ }
         }
-        const map = new mapboxgl.Map(mapOptions);
+        const map = new this._MapClass(mapOptions);
         if (viewState.padding) {
@@ -385,2 +386,3 @@ map.setPadding(viewState.padding);
                 break;
+            default:
         }
@@ -387,0 +389,0 @@ if (eventType in cameraEvents) {

dist/esm/utils/deep-equal.d.ts

 /// <reference types="mapbox-gl" />
-import type { PointLike } from './types';
+import type { PointLike } from '../types';
 /**
@@ -4,0 +4,0 @@ * Compare two points

dist/esm/utils/style-utils.d.ts

 /// <reference types="mapbox-gl" />
-import { ImmutableLike, MapboxStyle } from './types';
+import { ImmutableLike, MapboxStyle } from '../types';
 export declare function normalizeStyle(style: string | MapboxStyle | ImmutableLike): string | MapboxStyle;

dist/esm/utils/transform.d.ts

 /// <reference types="mapbox-gl" />
-import type { PaddingOptions, ViewState } from './types';
+import type { PaddingOptions, ViewState } from '../types';
 /**
@@ -4,0 +4,0 @@ * Stub for mapbox's Transform class

package.json

 {
   "name": "react-map-gl",
   "description": "React components for Mapbox GL JS-compatible libraries",
-  "version": "7.0.0-alpha.2",
+  "version": "7.0.0-alpha.3",
   "keywords": [
@@ -28,4 +28,3 @@ "mapbox",
     "bootstrap": "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true yarn && ocular-bootstrap",
-    "build": "ocular-clean && tsc -b tsconfig.esm.json && tsc -b tsconfig.es5.json && npm run flowgen",
-    "flowgen": "for i in $(find dist -type f -name \"*.d.ts\"); do sh -c \"flowgen $i -o ${i%.*.*}.js.flow\"; done;",
+    "build": "ocular-clean && tsc -b tsconfig.esm.json && tsc -b tsconfig.es5.json",
     "lint": "ocular-lint",
@@ -57,3 +56,2 @@ "cover": "ocular-test cover",
     "coveralls": "^3.0.0",
-    "flowgen": "^1.12.1",
     "jsdom": "^15.0.0",
@@ -60,0 +58,0 @@ "mapbox-gl": "^2.1.0",

src/components/attribution-control.ts

@@ -5,3 +5,3 @@ import * as React from 'react';
 
-import type {ControlPosition} from '../utils/types';
+import type {ControlPosition} from '../types';
 
@@ -8,0 +8,0 @@ export type AttributionControlProps = {

src/components/fullscreen-control.ts

@@ -6,3 +6,3 @@ /* global document */
 
-import type {ControlPosition} from '../utils/types';
+import type {ControlPosition} from '../types';
 
@@ -9,0 +9,0 @@ export type FullscreenControlProps = {

src/components/geolocate-control.ts

@@ -13,3 +13,3 @@ import * as React from 'react';
   GeolocateErrorEvent
-} from '../utils/types';
+} from '../types';
 
@@ -22,6 +22,9 @@ export type GeolocateControlRef = {
 export type GeolocateControlProps = {
-  /** A Geolocation API PositionOptions object. */
+  /**
+   * A Geolocation API PositionOptions object.
+   * @default {enableHighAccuracy:false,timeout:6000}
+   */
   positionOptions?: PositionOptions;
   /** A Map#fitBounds options object to use when the map is panned and zoomed to the user's location.
-   * The default is to use a maxZoom of 15 to limit how far the map will zoom in for very accurate locations.
+   * @default {maxZoom:15}
    */
@@ -31,2 +34,3 @@ fitBoundsOptions?: FitBoundsOptions;
    * updates to the user's location as it changes. Default false.
+   * @default false
    */
@@ -36,9 +40,14 @@ trackUserLocation?: boolean;
    * (95% confidence level) of the user's location. Set to false to disable.
-   * This only has effect if `showUserLocation` is true. Default true.
+   * This only has effect if `showUserLocation` is true.
+   * @default true
    */
   showAccuracyCircle?: boolean;
-  /** Show a dot on the map at the user's location. Set to false to disable. Default true. */
+  /**
+   * Show a dot on the map at the user's location. Set to false to disable.
+   * @default true
+   */
   showUserLocation?: boolean;
   /** If true an arrow will be drawn next to the user location dot indicating the device's heading.
    * This only has affect when `trackUserLocation` is true. Default false.
+   * @default false
    */
@@ -103,2 +112,4 @@ showUserHeading?: boolean;
 
+GeolocateControl.displayName = 'GeolocateControl';
+
 export default React.memo(GeolocateControl);

src/components/layer.ts

@@ -6,6 +6,7 @@ import {useContext, useEffect, useMemo, useState, useRef} from 'react';
 
-import type {MapboxMap, AnyLayer} from '../utils/types';
+import type {MapboxMap, AnyLayer} from '../types';
 
 export type LayerProps = AnyLayer & {
   id?: string;
+  /** If set, the layer will be inserted before the specified layer */
   beforeId?: string;
@@ -12,0 +13,0 @@ };

src/components/marker.ts

@@ -7,3 +7,3 @@ /* global document */
 import mapboxgl from '../utils/mapboxgl';
-import type {MarkerDragEvent, MarkerOptions, MapboxPopup} from '../utils/types';
+import type {MarkerDragEvent, MapboxPopup, PointLike, Anchor, Alignment} from '../types';
 
@@ -13,5 +13,49 @@ import {MapContext} from './map';
 
-export type MarkerProps = Omit<MarkerOptions, 'element'> & {
+export type MarkerProps = {
+  /** Longitude of the anchor location */
   longitude: number;
+  /** Latitude of the anchor location */
   latitude: number;
+  /** A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker.setLngLat.
+   * Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
+   * @default "center"
+   */
+  anchor?: Anchor;
+  /**
+   * The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click
+   * (as opposed to a marker drag). The default (0) is to inherit map's clickTolerance.
+   */
+  clickTolerance?: number;
+  /** The color to use for the default marker if options.element is not provided.
+   * @default "#3FB1CE"
+   */
+  color?: string;
+  /** A boolean indicating whether or not a marker is able to be dragged to a new position on the map.
+   * @default false
+   */
+  draggable?: boolean;
+  /** The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. */
+  offset?: PointLike;
+  /** `map` aligns the `Marker` to the plane of the map.
+   * `viewport` aligns the `Marker` to the plane of the viewport.
+   * `auto` automatically matches the value of `rotationAlignment`.
+   * @default "auto"
+   */
+  pitchAlignment?: Alignment;
+  /** The rotation angle of the marker in degrees, relative to its `rotationAlignment` setting. A positive value will rotate the marker clockwise.
+   * @default 0
+   */
+  rotation?: number;
+  /** `map` aligns the `Marker`'s rotation relative to the map, maintaining a bearing as the map rotates.
+   * `viewport` aligns the `Marker`'s rotation relative to the viewport, agnostic to map rotations.
+   * `auto` is equivalent to `viewport`.
+   * @default "auto"
+   */
+  rotationAlignment?: Alignment;
+  /** The scale to use for the default marker if options.element is not provided.
+   * The default scale (1) corresponds to a height of `41px` and a width of `27px`.
+   * @default 1
+   */
+  scale?: number;
+  /** A Popup instance that is bound to the marker */
   popup?: MapboxPopup;
@@ -18,0 +62,0 @@ onDragStart?: (e: MarkerDragEvent) => void;

src/components/navigation-control.ts

@@ -5,10 +5,16 @@ import * as React from 'react';
 
-import type {ControlPosition} from '../utils/types';
+import type {ControlPosition} from '../types';
 
 export type NavigationControlProps = {
-  /** If true the compass button is included. */
+  /** If true the compass button is included.
+   * @default true
+   */
   showCompass?: boolean;
-  /** If true the zoom-in and zoom-out buttons are included. */
+  /** If true the zoom-in and zoom-out buttons are included.
+   * @default true
+   */
   showZoom?: boolean;
-  /** If true the pitch is visualized by rotating X-axis of compass. */
+  /** If true the pitch is visualized by rotating X-axis of compass.
+   * @default false
+   */
   visualizePitch?: boolean;
@@ -15,0 +21,0 @@ /** Placement of the control relative to the map. */

src/components/popup.ts

@@ -7,3 +7,3 @@ /* global document */
 import mapboxgl from '../utils/mapboxgl';
-import type {PopupOptions, MapboxEvent} from '../utils/types';
+import type {MapboxEvent, Anchor, PointLike} from '../types';
 
@@ -13,5 +13,50 @@ import {MapContext} from './map';
 
-export type PopupProps = PopupOptions & {
+export type PopupProps = {
+  /** Longitude of the anchor location */
   longitude: number;
+  /** Latitude of the anchor location */
   latitude: number;
+  /**
+   * A string indicating the part of the popup that should be positioned closest to the coordinate.
+   * Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`,
+   * and `'bottom-right'`. If unset, the anchor will be dynamically set to ensure the popup falls within the map
+   * container with a preference for `'bottom'`.
+   */
+  anchor?: Anchor;
+  /**
+   * If `true`, a close button will appear in the top right corner of the popup.
+   * @default true
+   */
+  closeButton?: boolean;
+  /**
+   * If `true`, the popup will close when the map is clicked.
+   * @default true
+   */
+  closeOnClick?: boolean;
+  /**
+   * If `true`, the popup will closed when the map moves.
+   * @default false
+   */
+  closeOnMove?: boolean;
+  /**
+   * If `true`, the popup will try to focus the first focusable element inside the popup.
+   * @default true
+   */
+  focusAfterOpen?: boolean;
+  /**
+   * A pixel offset applied to the popup's location specified as:
+   * - a single number specifying a distance from the popup's location
+   * - a PointLike specifying a constant offset
+   * - an object of Points specifing an offset for each anchor position.
+   */
+  offset?: number | PointLike | Partial<{[anchor in Anchor]: PointLike}>;
+  /** Space-separated CSS class names to add to popup container. */
+  className?: string;
+  /**
+   * A string that sets the CSS property of the popup's maximum width (for example, `'300px'`).
+   * To ensure the popup resizes to fit its content, set this property to `'none'`
+   * @default "240px"
+   */
+  maxWidth?: string;
+
   onOpen?: (e: MapboxEvent) => void;
@@ -18,0 +63,0 @@ onClose?: (e: MapboxEvent) => void;

src/components/scale-control.ts

@@ -5,8 +5,12 @@ import * as React from 'react';
 
-import type {ControlPosition} from '../utils/types';
+import type {ControlPosition} from '../types';
 
 export type ScaleControlProps = {
-  /** Unit of the distance. Default 'metric'. */
+  /** Unit of the distance.
+   * @default "metric"
+   */
   unit?: 'imperial' | 'metric' | 'nautical';
-  /** The maximum length of the scale control in pixels. Default 100. */
+  /** The maximum length of the scale control in pixels.
+   * @default 100
+   */
   maxWidth?: number;
@@ -13,0 +17,0 @@ /** Placement of the control relative to the map. */

src/components/source.ts

@@ -15,3 +15,3 @@ import * as React from 'react';
   AnySourceImpl
-} from '../utils/types';
+} from '../types';
 
@@ -18,0 +18,0 @@ export type SourceProps = AnySourceData & {

src/components/use-control.ts

 import {useContext, useState, useEffect} from 'react';
-import type {IControl, ControlPosition, MapboxMap} from '../utils/types';
+import type {IControl, ControlPosition, MapboxMap} from '../types';
 import {MapContext} from './map';
@@ -4,0 +4,0 @@

src/index.ts

@@ -30,2 +30,2 @@ export {default} from './components/map';
 // Types
-export * from './utils/types';
+export * from './types/external';

src/mapbox/create-ref.ts

@@ -1,2 +0,2 @@
-import type {MapboxMap, ViewState} from '../utils/types';
+import type {MapboxMap, ViewState} from '../types';
 import type Mapbox from './mapbox';
@@ -3,0 +3,0 @@

src/mapbox/mapbox.ts

@@ -1,2 +0,1 @@
-import mapboxgl from '../utils/mapboxgl';
 import {Transform, transformToViewState, applyViewStateToTransform} from '../utils/transform';
@@ -10,3 +9,5 @@ import {normalizeStyle} from '../utils/style-utils';
   ViewStateChangeEvent,
-  MapboxOptions,
+  DragPanOptions,
+  InteractiveOptions,
+  TransformRequestFunction,
   MapboxStyle,
@@ -25,81 +26,288 @@ ImmutableLike,
   MapboxMap
-} from '../utils/types';
+} from '../types';
 
-export type MapboxProps = Omit<
-  MapboxOptions,
-  'center' | 'accessToken' | 'container' | 'style' | 'bounds' | 'fitBoundsOptions'
-> &
-  ViewState & {
-    mapboxAccessToken?: string;
+export type MapboxProps = ViewState & {
+  // Init options
+  mapboxAccessToken?: string;
 
-    /** Camera options used when constructing the Map instance */
-    initialViewState?: ViewState & {
-      bounds?: LngLatBoundsLike;
-      fitBoundsOptions?: FitBoundsOptions;
-    };
+  /** Camera options used when constructing the Map instance */
+  initialViewState?: ViewState & {
+    /** The initial bounds of the map. If bounds is specified, it overrides longitude, latitude and zoom options. */
+    bounds?: LngLatBoundsLike;
+    /** A fitBounds options object to use only when setting the bounds option. */
+    fitBoundsOptions?: FitBoundsOptions;
+  };
 
-    /** If provided, render into an external WebGL context */
-    gl?: WebGLRenderingContext;
+  /** If provided, render into an external WebGL context */
+  gl?: WebGLRenderingContext;
 
-    /** Aternative way to specify camera state */
-    viewState?: ViewState;
+  /**
+   * If true, the gl context will be created with MSA antialiasing, which can be useful for antialiasing custom layers.
+   * This is false by default as a performance optimization.
+   * @default false
+   */
+  antialias?: boolean;
+  /**
+   * If true, an attribution control will be added to the map.
+   * @default true
+   */
+  attributionControl?: boolean;
+  /**
+   * Snap to north threshold in degrees.
+   * @default 7
+   */
+  bearingSnap?: number;
+  /**
+   * The max number of pixels a user can shift the mouse pointer during a click for it to be
+   * considered a valid click (as opposed to a mouse drag).
+   * @default 3
+   */
+  clickTolerance?: number;
+  /**
+   * 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.
+   * @default false
+   */
+  collectResourceTiming?: boolean;
+  /**
+   * If `true` , scroll zoom will require pressing the ctrl or ⌘ key while scrolling to zoom map,
+   * and touch pan will require using two fingers while panning to move the map.
+   * Touch pitch will require three fingers to activate if enabled.
+   */
+  cooperativeGestures?: boolean;
+  /**
+   * 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.
+   * @default true
+   */
+  crossSourceCollisions?: boolean;
+  /** String or strings to show in an AttributionControl.
+   * Only applicable if options.attributionControl is `true`. */
+  customAttribution?: string | string[];
+  /**
+   * 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.
+   * @default 300
+   */
+  fadeDuration?: number;
+  /** If true, map creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than expected.
+   * @default false
+   */
+  failIfMajorPerformanceCaveat?: boolean;
+  /** 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`.
+   * An additional string may optionally be provided to indicate a parameter-styled hash,
+   * e.g. http://path/to/my/page.html#map=2.59/39.26/53.07/-24.1/60&foo=bar, where foo
+   * is a custom parameter and bar is an arbitrary hash distinct from the map hash.
+   */
+  hash?: boolean | string;
+  /** If false, no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input
+   * @default true
+   */
+  interactive?: 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?: {[key: string]: string};
+  /**
+   * Overrides the generation of all glyphs and font settings except font-weight keywords
+   * Also overrides localIdeographFontFamily
+   * @default null
+   */
+  localFontFamily?: string;
+  /**
+   * 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.
+   * @default "sans-serif"
+   */
+  localIdeographFontFamily?: string;
+  /**
+   * A string representing the position of the Mapbox wordmark on the map.
+   * @default "bottom-left"
+   */
+  logoPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  /**
+   * 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.
+   * @default null
+   */
+  maxTileCacheSize?: number;
+  /**
+   * If true, map will prioritize rendering for performance by reordering layers
+   * If false, layers will always be drawn in the specified order
+   * @default true
+   */
+  optimizeForTerrain?: boolean;
+  /**
+   * If `false`, the map's pitch (tilt) control with "drag to rotate" interaction will be disabled.
+   * @default true
+   */
+  pitchWithRotate?: boolean;
+  /** If true, The maps canvas can be exported to a PNG using map.getCanvas().toDataURL();. This is false by default as a performance optimization.
+   * @default false
+   */
+  preserveDrawingBuffer?: boolean;
+  /**
+   * If `false`, the map won't attempt to re-request tiles once they expire per their HTTP
+   * `cacheControl`/`expires` headers.
+   * @default true
+   */
+  refreshExpiredTiles?: boolean;
+  /**
+   * Allows for the usage of the map in automated tests without an accessToken with custom self-hosted test fixtures.
+   * @default null
+   */
+  testMode?: boolean;
+  /**
+   * If  true, the map will automatically resize when the browser window resizes
+   * @default true
+   */
+  trackResize?: 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.
+   * @default null
+   */
+  transformRequest?: TransformRequestFunction;
 
-    /** Mapbox style */
-    mapStyle?: string | MapboxStyle | ImmutableLike;
-    /** Enable diffing when the map style changes */
-    styleDiffing?: boolean;
-    /** Default layers to query on pointer events */
-    interactiveLayerIds?: string[];
-    /** The projection the map should be rendered in */
-    projection?: ProjectionSpecification | string;
-    /** CSS cursor */
-    cursor?: string;
+  // Handlers
 
-    // Callbacks
-    onMouseDown?: (e: MapLayerMouseEvent) => void;
-    onMouseUp?: (e: MapLayerMouseEvent) => void;
-    onMouseOver?: (e: MapLayerMouseEvent) => void;
-    onMouseMove?: (e: MapLayerMouseEvent) => void;
-    onClick?: (e: MapLayerMouseEvent) => void;
-    onDblClick?: (e: MapLayerMouseEvent) => void;
-    onMouseEnter?: (e: MapLayerMouseEvent) => void;
-    onMouseLeave?: (e: MapLayerMouseEvent) => void;
-    onMouseOut?: (e: MapLayerMouseEvent) => void;
-    onContextMenu?: (e: MapLayerMouseEvent) => void;
-    onWheel?: (e: MapWheelEvent) => void;
-    onTouchStart?: (e: MapLayerTouchEvent) => void;
-    onTouchEnd?: (e: MapLayerTouchEvent) => void;
-    onTouchMove?: (e: MapLayerTouchEvent) => void;
-    onTouchCancel?: (e: MapLayerTouchEvent) => void;
+  /**
+   * If true, enable the "box zoom" interaction (see BoxZoomHandler)
+   * @default true
+   */
+  boxZoom?: boolean;
+  /**
+   * If true, enable the "double click to zoom" interaction (see DoubleClickZoomHandler).
+   * @default true
+   */
+  doubleClickZoom?: boolean;
+  /**
+   * If `true`, the "drag to pan" interaction is enabled.
+   * An `Object` value is passed as options to {@link DragPanHandler#enable}.
+   * @default true
+   */
+  dragPan?: boolean | DragPanOptions;
+  /**
+   * If true, enable the "drag to rotate" interaction (see DragRotateHandler).
+   * @default true
+   */
+  dragRotate?: boolean;
+  /**
+   * If true, enable keyboard shortcuts (see KeyboardHandler).
+   * @default true
+   */
+  keyboard?: boolean;
+  /**
+   * If `true`, the "scroll to zoom" interaction is enabled.
+   * An `Object` value is passed as options to {@link ScrollZoomHandler#enable}.
+   * @default true
+   */
+  scrollZoom?: boolean | InteractiveOptions;
+  /**
+   * If `true`, the "drag to pitch" interaction is enabled.
+   * An `Object` value is passed as options to {@link TouchPitchHandler#enable}.
+   * @default true
+   */
+  touchPitch?: boolean | InteractiveOptions;
+  /**
+   * If `true`, the "pinch to rotate and zoom" interaction is enabled.
+   * An `Object` value is passed as options to {@link TouchZoomRotateHandler#enable}.
+   * @default true
+   */
+  touchZoomRotate?: boolean | InteractiveOptions;
 
-    onMoveStart?: (e: ViewStateChangeEvent) => void;
-    onMove?: (e: ViewStateChangeEvent) => void;
-    onMoveEnd?: (e: ViewStateChangeEvent) => void;
-    onDragStart?: (e: ViewStateChangeEvent) => void;
-    onDrag?: (e: ViewStateChangeEvent) => void;
-    onDragEnd?: (e: ViewStateChangeEvent) => void;
-    onZoomStart?: (e: ViewStateChangeEvent) => void;
-    onZoom?: (e: ViewStateChangeEvent) => void;
-    onZoomEnd?: (e: ViewStateChangeEvent) => void;
-    onRotateStart?: (e: ViewStateChangeEvent) => void;
-    onRotate?: (e: ViewStateChangeEvent) => void;
-    onRotateEnd?: (e: ViewStateChangeEvent) => void;
-    onPitchStart?: (e: ViewStateChangeEvent) => void;
-    onPitch?: (e: ViewStateChangeEvent) => void;
-    onPitchEnd?: (e: ViewStateChangeEvent) => void;
-    onBoxZoomStart?: (e: ViewStateChangeEvent) => void;
-    onBoxZoomEnd?: (e: ViewStateChangeEvent) => void;
-    onBoxZoomCancel?: (e: ViewStateChangeEvent) => void;
+  // Constraints
 
-    onResize?: (e: MapboxEvent) => void;
-    onLoad?: (e: MapboxEvent) => void;
-    onRender?: (e: MapboxEvent) => void;
-    onIdle?: (e: MapboxEvent) => void;
-    onError?: (e: ErrorEvent) => void;
-    onRemove?: (e: MapboxEvent) => void;
-    onData?: (e: MapDataEvent) => void;
-    onStyleData?: (e: MapDataEvent) => void;
-    onSourceData?: (e: MapDataEvent) => void;
-  };
+  /** If set, the map is constrained to the given bounds. */
+  maxBounds?: LngLatBoundsLike;
+  /** Maximum pitch of the map. */
+  maxPitch?: number;
+  /** Maximum zoom of the map. */
+  maxZoom?: number;
+  /** Minimum pitch of the map. */
+  minPitch?: number;
+  /** Minimum zoom of the map. */
+  minZoom?: number;
 
+  /** Aternative way to specify camera state */
+  viewState?: ViewState;
+
+  // Styling
+
+  /** Mapbox style */
+  mapStyle?: string | MapboxStyle | ImmutableLike;
+  /** Enable diffing when the map style changes
+   * @default true
+   */
+  styleDiffing?: boolean;
+  /** Default layers to query on pointer events */
+  interactiveLayerIds?: string[];
+  /** The projection the map should be rendered in
+   * @default "mercator"
+   */
+  projection?: ProjectionSpecification | string;
+  /**
+   * If `true`, multiple copies of the world will be rendered, when zoomed out.
+   * @default true
+   */
+  renderWorldCopies?: boolean;
+  /** CSS cursor */
+  cursor?: string;
+
+  // Callbacks
+  onMouseDown?: (e: MapLayerMouseEvent) => void;
+  onMouseUp?: (e: MapLayerMouseEvent) => void;
+  onMouseOver?: (e: MapLayerMouseEvent) => void;
+  onMouseMove?: (e: MapLayerMouseEvent) => void;
+  onClick?: (e: MapLayerMouseEvent) => void;
+  onDblClick?: (e: MapLayerMouseEvent) => void;
+  onMouseEnter?: (e: MapLayerMouseEvent) => void;
+  onMouseLeave?: (e: MapLayerMouseEvent) => void;
+  onMouseOut?: (e: MapLayerMouseEvent) => void;
+  onContextMenu?: (e: MapLayerMouseEvent) => void;
+  onWheel?: (e: MapWheelEvent) => void;
+  onTouchStart?: (e: MapLayerTouchEvent) => void;
+  onTouchEnd?: (e: MapLayerTouchEvent) => void;
+  onTouchMove?: (e: MapLayerTouchEvent) => void;
+  onTouchCancel?: (e: MapLayerTouchEvent) => void;
+
+  onMoveStart?: (e: ViewStateChangeEvent) => void;
+  onMove?: (e: ViewStateChangeEvent) => void;
+  onMoveEnd?: (e: ViewStateChangeEvent) => void;
+  onDragStart?: (e: ViewStateChangeEvent) => void;
+  onDrag?: (e: ViewStateChangeEvent) => void;
+  onDragEnd?: (e: ViewStateChangeEvent) => void;
+  onZoomStart?: (e: ViewStateChangeEvent) => void;
+  onZoom?: (e: ViewStateChangeEvent) => void;
+  onZoomEnd?: (e: ViewStateChangeEvent) => void;
+  onRotateStart?: (e: ViewStateChangeEvent) => void;
+  onRotate?: (e: ViewStateChangeEvent) => void;
+  onRotateEnd?: (e: ViewStateChangeEvent) => void;
+  onPitchStart?: (e: ViewStateChangeEvent) => void;
+  onPitch?: (e: ViewStateChangeEvent) => void;
+  onPitchEnd?: (e: ViewStateChangeEvent) => void;
+  onBoxZoomStart?: (e: ViewStateChangeEvent) => void;
+  onBoxZoomEnd?: (e: ViewStateChangeEvent) => void;
+  onBoxZoomCancel?: (e: ViewStateChangeEvent) => void;
+
+  onResize?: (e: MapboxEvent) => void;
+  onLoad?: (e: MapboxEvent) => void;
+  onRender?: (e: MapboxEvent) => void;
+  onIdle?: (e: MapboxEvent) => void;
+  onError?: (e: ErrorEvent) => void;
+  onRemove?: (e: MapboxEvent) => void;
+  onData?: (e: MapDataEvent) => void;
+  onStyleData?: (e: MapDataEvent) => void;
+  onSourceData?: (e: MapDataEvent) => void;
+};
+
 const pointerEvents = {
@@ -176,2 +384,3 @@ mousedown: 'onMouseDown',
 export default class Mapbox {
+  private _MapClass: typeof MapboxMap;
   // mapboxgl.Map instance. Not using type here because we are accessing
@@ -201,3 +410,4 @@ // private members and methods
 
-  constructor(props: MapboxProps) {
+  constructor(MapClass: typeof MapboxMap, props: MapboxProps) {
+    this._MapClass = MapClass;
     this.props = props;
@@ -270,3 +480,3 @@ }
 
-    const map: any = new mapboxgl.Map(mapOptions);
+    const map: any = new this._MapClass(mapOptions);
     if (viewState.padding) {
@@ -437,2 +647,3 @@ map.setPadding(viewState.padding);
     } else {
+      // eslint-disable-next-line
       console.error(e.error);
@@ -529,2 +740,4 @@ }
         break;
+
+      default:
     }
@@ -531,0 +744,0 @@ if (eventType in cameraEvents) {

src/utils/deep-equal.ts

@@ -1,2 +0,2 @@
-import type {PointLike} from './types';
+import type {PointLike} from '../types';
 
@@ -3,0 +3,0 @@ /**

src/utils/style-utils.ts

@@ -1,2 +0,2 @@
-import {ImmutableLike, MapboxStyle} from './types';
+import {ImmutableLike, MapboxStyle} from '../types';
 
@@ -3,0 +3,0 @@ const refProps = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'];

src/utils/transform.ts

 import mapboxgl from './mapboxgl';
 
-import type {PaddingOptions, ViewState} from './types';
+import type {PaddingOptions, ViewState} from '../types';
 
@@ -5,0 +5,0 @@ /**

No alert changes

Improved metrics

Dev dependency count

18

decreased by-5.26%

Lines of code

6473

increased by21.9%

Worsened metrics

Total package byte prevSize

361099

decreased by-1.02%

Number of package files

166

decreased by-18.23%

No dependency changes