visgl / react-map-gl / 6152126117

import {

  transformToViewState,

  applyViewStateToTransform,

  cloneTransform,

  syncProjection

} from '../utils/transform';

import {normalizeStyle} from '../utils/style-utils';

import {deepEqual} from '../utils/deep-equal';

import type {

  Transform,

  ViewState,

  ViewStateChangeEvent,

  Point,

  PointLike,

  PaddingOptions,

  MapStyle,

  ImmutableLike,

  LngLatBoundsLike,

  Callbacks,

  MapEvent,

  ErrorEvent,

  MapMouseEvent,

  MapGeoJSONFeature,

  MapInstance,

  MapInstanceInternal

} from '../types';

export type MapboxProps<

  StyleT extends MapStyle = MapStyle,

  CallbacksT extends Callbacks = {}

> = Partial<ViewState> &

  CallbacksT & {

    // Init options

    mapboxAccessToken?: string;

    /** Camera options used when constructing the Map instance */

    initialViewState?: Partial<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?: {

        offset?: PointLike;

        minZoom?: number;

        maxZoom?: number;

        padding?: number | PaddingOptions;

      };

    };

    /** If provided, render into an external WebGL context */

    gl?: WebGLRenderingContext;

    /** For external controller to override the camera state */

    viewState?: ViewState & {

      width: number;

      height: number;

    };

    // Styling

    /** Mapbox style */

    mapStyle?: string | StyleT | ImmutableLike<StyleT>;

    /** Enable diffing when the map style changes

     * @default true

     */

    styleDiffing?: boolean;

    /** The fog property of the style. Must conform to the Fog Style Specification .

     * If `undefined` is provided, removes the fog from the map. */

    fog?: StyleT['fog'];

    /** Light properties of the map. */

    light?: StyleT['light'];

    /** Terrain property of the style. Must conform to the Terrain Style Specification .

     * If `undefined` is provided, removes terrain from the map. */

    terrain?: StyleT['terrain'];

    /** Default layers to query on pointer events */

    interactiveLayerIds?: string[];

    /** CSS cursor */

    cursor?: string;

  };

const DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as MapStyle;

const pointerEvents = {

  mousedown: 'onMouseDown',

  mouseup: 'onMouseUp',

  mouseover: 'onMouseOver',

  mousemove: 'onMouseMove',

  click: 'onClick',

  dblclick: 'onDblClick',

  mouseenter: 'onMouseEnter',

  mouseleave: 'onMouseLeave',

  mouseout: 'onMouseOut',

  contextmenu: 'onContextMenu',

  touchstart: 'onTouchStart',

  touchend: 'onTouchEnd',

  touchmove: 'onTouchMove',

  touchcancel: 'onTouchCancel'

};

const cameraEvents = {

  movestart: 'onMoveStart',

  move: 'onMove',

  moveend: 'onMoveEnd',

  dragstart: 'onDragStart',

  drag: 'onDrag',

  dragend: 'onDragEnd',

  zoomstart: 'onZoomStart',

  zoom: 'onZoom',

  zoomend: 'onZoomEnd',

  rotatestart: 'onRotateStart',

  rotate: 'onRotate',

  rotateend: 'onRotateEnd',

  pitchstart: 'onPitchStart',

  pitch: 'onPitch',

  pitchend: 'onPitchEnd'

};

const otherEvents = {

  wheel: 'onWheel',

  boxzoomstart: 'onBoxZoomStart',

  boxzoomend: 'onBoxZoomEnd',

  boxzoomcancel: 'onBoxZoomCancel',

  resize: 'onResize',

  load: 'onLoad',

  render: 'onRender',

  idle: 'onIdle',

  remove: 'onRemove',

  data: 'onData',

  styledata: 'onStyleData',

  sourcedata: 'onSourceData',

  error: 'onError'

};

const settingNames = [

  'minZoom',

  'maxZoom',

  'minPitch',

  'maxPitch',

  'maxBounds',

  'projection',

  'renderWorldCopies'

];

const handlerNames = [

  'scrollZoom',

  'boxZoom',

  'dragRotate',

  'dragPan',

  'keyboard',

  'doubleClickZoom',

  'touchZoomRotate',

  'touchPitch'

];

/**

 * A wrapper for mapbox-gl's Map class

 */

export default class Mapbox<

  StyleT extends MapStyle = MapStyle,

  CallbacksT extends Callbacks = {},

  MapT extends MapInstance = MapInstance

> {

  private _MapClass: {new (options: any): MapInstance};

  // mapboxgl.Map instance

  private _map: MapInstanceInternal<MapT> = null;

  // User-supplied props

  props: MapboxProps<StyleT, CallbacksT>;

  // Mapbox map is stateful.

  // During method calls/user interactions, map.transform is mutated and

  // deviate from user-supplied props.

  // In order to control the map reactively, we shadow the transform

  // with the one below, which reflects the view state resolved from

  // both user-supplied props and the underlying state

  private _renderTransform: Transform;

  // Internal states

  private _internalUpdate: boolean = false;

  private _inRender: boolean = false;

  private _hoveredFeatures: MapGeoJSONFeature[] = null;

  private _deferredEvents: {

    move: boolean;

    zoom: boolean;

    pitch: boolean;

    rotate: boolean;

  } = {

    move: false,

    zoom: false,

    pitch: false,

    rotate: false

  };

  static savedMaps: Mapbox[] = [];

  constructor(

    MapClass: {new (options: any): MapInstance},

    props: MapboxProps<StyleT, CallbacksT>,

    container: HTMLDivElement

  ) {

    this._MapClass = MapClass;

    this.props = props;

    this._initialize(container);

  }

  get map(): MapT {

    return this._map;

  }

  get transform(): Transform {

    return this._renderTransform;

  }

  setProps(props: MapboxProps<StyleT, CallbacksT>) {

    const oldProps = this.props;

    this.props = props;

    const settingsChanged = this._updateSettings(props, oldProps);

    const sizeChanged = this._updateSize(props);

    const viewStateChanged = this._updateViewState(props, true);

    this._updateStyle(props, oldProps);

    this._updateStyleComponents(props, oldProps);

    this._updateHandlers(props, oldProps);

    // If 1) view state has changed to match props and

    //    2) the props change is not triggered by map events,

    // it's driven by an external state change. Redraw immediately

    if (settingsChanged || sizeChanged || (viewStateChanged && !this._map.isMoving())) {

      this.redraw();

    }

  }

  static reuse<StyleT extends MapStyle, CallbacksT extends Callbacks, MapT extends MapInstance>(

  /* eslint-disable complexity,max-statements */

  _initialize(container: HTMLDivElement) {

    const {props} = this;

    const {mapStyle = DEFAULT_STYLE} = props;

    const mapOptions = {

      ...props,

      ...props.initialViewState,

      accessToken: props.mapboxAccessToken || getAccessTokenFromEnv() || null,

      container,

      style: normalizeStyle(mapStyle)

    };

    const viewState = mapOptions.initialViewState || mapOptions.viewState || mapOptions;

    Object.assign(mapOptions, {

      center: [viewState.longitude || 0, viewState.latitude || 0],

      zoom: viewState.zoom || 0,

      pitch: viewState.pitch || 0,

      bearing: viewState.bearing || 0

    });

    const map = new this._MapClass(mapOptions) as MapInstanceInternal<MapT>;

    // Props that are not part of constructor options

    this._createShadowTransform(map);

    // Hack

    // Insert code into map's render cycle

    const renderMap = map._render;

    map._render = (arg: number) => {

      this._inRender = true;

      renderMap.call(map, arg);

      this._inRender = false;

    };

    const runRenderTaskQueue = map._renderTaskQueue.run;

    map._renderTaskQueue.run = (arg: number) => {

      runRenderTaskQueue.call(map._renderTaskQueue, arg);

      this._onBeforeRepaint();

    };

    map.on('render', () => this._onAfterRepaint());

    // Insert code into map's event pipeline

    // eslint-disable-next-line @typescript-eslint/unbound-method

    const fireEvent = map.fire;

    map.fire = this._fireEvent.bind(this, fireEvent);

    // add listeners

    map.on('resize', () => {

    });

    map.on('styledata', () => {

      this._updateStyleComponents(this.props, {});

      // Projection can be set in stylesheet

      syncProjection(map.transform, this._renderTransform);

    });

    map.on('sourcedata', () => this._updateStyleComponents(this.props, {}));

    for (const eventName in pointerEvents) {

      map.on(eventName, this._onPointerEvent);

    }

    for (const eventName in cameraEvents) {

      map.on(eventName, this._onCameraEvent);

    }

    for (const eventName in otherEvents) {

      map.on(eventName, this._onEvent);

    }

    this._map = map;

  }

  /* eslint-enable complexity,max-statements */

  recycle() {

  destroy() {

    this._map.remove();

  }

  // Force redraw the map now. Typically resize() and jumpTo() is reflected in the next

  // render cycle, which is managed by Mapbox's animation loop.

  // This removes the synchronization issue caused by requestAnimationFrame.

  redraw() {

    const map = this._map as any;

    // map._render will throw error if style does not exist

    // https://github.com/mapbox/mapbox-gl-js/blob/fb9fc316da14e99ff4368f3e4faa3888fb43c513

    //   /src/ui/map.js#L1834

    if (!this._inRender && map.style) {

      // cancel the scheduled update

      // the order is important - render() may schedule another update

      map._render();

    }

  }

  _createShadowTransform(map: any) {

    const renderTransform = cloneTransform(map.transform);

    map.painter.transform = renderTransform;

    this._renderTransform = renderTransform;

  }

  /* Trigger map resize if size is controlled

     @param {object} nextProps

     @returns {bool} true if size has changed

   */

  _updateSize(nextProps: MapboxProps<StyleT>): boolean {

    // Check if size is controlled

    const {viewState} = nextProps;

    return false;

  }

  // Adapted from map.jumpTo

  /* Update camera to match props

     @param {object} nextProps

     @param {bool} triggerEvents - should fire camera events

     @returns {bool} true if anything is changed

   */

  _updateViewState(nextProps: MapboxProps<StyleT>, triggerEvents: boolean): boolean {

    if (this._internalUpdate) {

      return false;

    }

    const map = this._map;

    const tr = this._renderTransform;

    // Take a snapshot of the transform before mutation

    const {zoom, pitch, bearing} = tr;

    const isMoving = map.isMoving();

    if (isMoving) {

      // All movement of the camera is done relative to the sea level

      tr.cameraElevationReference = 'sea';

    }

    const changed = applyViewStateToTransform(tr, {

      ...transformToViewState(map.transform),

      ...nextProps

    });

    if (isMoving) {

      // Reset camera reference

      tr.cameraElevationReference = 'ground';

    }

    if (changed && triggerEvents) {

      const deferredEvents = this._deferredEvents;

      // Delay DOM control updates to the next render cycle

      deferredEvents.move = true;

      deferredEvents.zoom ||= zoom !== tr.zoom;

      deferredEvents.rotate ||= bearing !== tr.bearing;

      deferredEvents.pitch ||= pitch !== tr.pitch;

    }

    // Avoid manipulating the real transform when interaction/animation is ongoing

    // as it would interfere with Mapbox's handlers

    if (!isMoving) {

      applyViewStateToTransform(map.transform, nextProps);

    }

    return changed;

  }

  /* Update camera constraints and projection settings to match props

     @param {object} nextProps

     @param {object} currProps

     @returns {bool} true if anything is changed

   */

  _updateSettings(nextProps: MapboxProps<StyleT>, currProps: MapboxProps<StyleT>): boolean {

    const map = this._map;

    let changed = false;

    for (const propName of settingNames) {

    }

    return changed;

  }

  /* Update map style to match props

     @param {object} nextProps

     @param {object} currProps

     @returns {bool} true if style is changed

   */

  _updateStyle(nextProps: MapboxProps<StyleT>, currProps: MapboxProps<StyleT>): boolean {

    if (nextProps.mapStyle !== currProps.mapStyle) {

      const {mapStyle = DEFAULT_STYLE, styleDiffing = true} = nextProps;

      const options: any = {

        diff: styleDiffing

      };

      this._map.setStyle(normalizeStyle(mapStyle), options);

      return true;

    }

    return false;

  }

  /* Update fog, light and terrain to match props

     @param {object} nextProps

     @param {object} currProps

     @returns {bool} true if anything is changed

   */

  _updateStyleComponents(nextProps: MapboxProps<StyleT>, currProps: MapboxProps<StyleT>): boolean {

    const map = this._map;

    let changed = false;

    if (map.isStyleLoaded()) {

      if (

    }

    return changed;

  }

  /* Update interaction handlers to match props

     @param {object} nextProps

     @param {object} currProps

     @returns {bool} true if anything is changed

   */

  _updateHandlers(nextProps: MapboxProps<StyleT>, currProps: MapboxProps<StyleT>): boolean {

    const map = this._map;

    let changed = false;

    for (const propName of handlerNames) {

    }

    return changed;

  }

  _onEvent = (e: MapEvent<MapT>) => {

    // @ts-ignore

    const cb = this.props[otherEvents[e.type]];

    if (cb) {

      cb(e);

  };

  private _queryRenderedFeatures(point: Point) {

  _updateHover(e: MapMouseEvent<MapT>) {

  _onPointerEvent = (e: MapMouseEvent<MapT> | MapMouseEvent<MapT>) => {

  };

  _onCameraEvent = (e: ViewStateChangeEvent<MapT>) => {

    if (!this._internalUpdate) {

      // @ts-ignore

      const cb = this.props[cameraEvents[e.type]];

      if (cb) {

        cb(e);

      }

    }

    if (e.type in this._deferredEvents) {

      this._deferredEvents[e.type] = false;

    }

  };

  _fireEvent(baseFire: Function, event: string | MapEvent<MapT>, properties?: object) {

    const map = this._map;

    const tr = map.transform;

    const eventType = typeof event === 'string' ? event : event.type;

    if (eventType === 'move') {

      this._updateViewState(this.props, false);

    }

    if (eventType in cameraEvents) {

      if (typeof event === 'object') {

        (event as unknown as ViewStateChangeEvent<MapT>).viewState = transformToViewState(tr);

      }

      if (this._map.isMoving()) {

        // Replace map.transform with ours during the callbacks

        map.transform = this._renderTransform;

        baseFire.call(map, event, properties);

        map.transform = tr;

        return map;

      }

    }

    baseFire.call(map, event, properties);

    return map;

  }

  // All camera manipulations are complete, ready to repaint

  _onBeforeRepaint() {

    const map = this._map;

    // If there are camera changes driven by props, invoke camera events so that DOM controls are synced

    this._internalUpdate = true;

    for (const eventType in this._deferredEvents) {

      if (this._deferredEvents[eventType]) {

        map.fire(eventType);

      }

    }

    this._internalUpdate = false;

    const tr = this._map.transform;

    // Make sure camera matches the current props

    map.transform = this._renderTransform;

    this._onAfterRepaint = () => {

      // Mapbox transitions between non-mercator projection and mercator during render time

      // Copy it back to the other

      syncProjection(this._renderTransform, tr);

      // Restores camera state before render/load events are fired

      map.transform = tr;

    };

  }

  _onAfterRepaint: () => void;

}

/**

 * Access token can be provided via one of:

 *   mapboxAccessToken prop

 *   access_token query parameter

 *   MapboxAccessToken environment variable

 *   REACT_APP_MAPBOX_ACCESS_TOKEN environment variable

 * @returns access token

 */

function getAccessTokenFromEnv(): string {

  let accessToken = null;

  /* global location, process */

  // Note: This depends on bundler plugins (e.g. webpack) importing environment correctly

  try {

    accessToken = accessToken || process.env.MapboxAccessToken;

  try {

    accessToken = accessToken || process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;

  return accessToken;

}