react-map-gl/dist/mapbox-legacy/index.cjs.map

React components for MapLibre GL JS and Mapbox GL JS

{
  "version": 3,
  "sources": ["../../src/mapbox-legacy/index.ts", "../../src/mapbox-legacy/components/map.tsx", "../../src/mapbox-legacy/components/use-map.tsx", "../../src/mapbox-legacy/utils/deep-equal.ts", "../../src/mapbox-legacy/utils/transform.ts", "../../src/mapbox-legacy/utils/style-utils.ts", "../../src/mapbox-legacy/mapbox/mapbox.ts", "../../src/mapbox-legacy/mapbox/create-ref.ts", "../../src/mapbox-legacy/utils/use-isomorphic-layout-effect.ts", "../../src/mapbox-legacy/utils/set-globals.ts", "../../src/mapbox-legacy/components/marker.ts", "../../src/mapbox-legacy/utils/apply-react-style.ts", "../../src/mapbox-legacy/components/popup.ts", "../../src/mapbox-legacy/components/attribution-control.ts", "../../src/mapbox-legacy/components/use-control.ts", "../../src/mapbox-legacy/components/fullscreen-control.ts", "../../src/mapbox-legacy/components/geolocate-control.ts", "../../src/mapbox-legacy/components/navigation-control.ts", "../../src/mapbox-legacy/components/scale-control.ts", "../../src/mapbox-legacy/components/source.ts", "../../src/mapbox-legacy/utils/assert.ts", "../../src/mapbox-legacy/components/layer.ts"],
  "sourcesContent": ["import {Map} from './components/map';\nexport {Map};\nexport default Map;\n\nexport {Marker} from './components/marker';\nexport {Popup} from './components/popup';\nexport {AttributionControl} from './components/attribution-control';\nexport {FullscreenControl} from './components/fullscreen-control';\nexport {GeolocateControl} from './components/geolocate-control';\nexport {NavigationControl} from './components/navigation-control';\nexport {ScaleControl} from './components/scale-control';\nexport {Source} from './components/source';\nexport {Layer} from './components/layer';\nexport {useControl} from './components/use-control';\nexport {MapProvider, useMap} from './components/use-map';\n\nexport type {MapProps} from './components/map';\nexport type {MapRef} from './mapbox/create-ref';\nexport type {MarkerProps} from './components/marker';\nexport type {PopupProps} from './components/popup';\nexport type {AttributionControlProps} from './components/attribution-control';\nexport type {FullscreenControlProps} from './components/fullscreen-control';\nexport type {GeolocateControlProps} from './components/geolocate-control';\nexport type {NavigationControlProps} from './components/navigation-control';\nexport type {ScaleControlProps} from './components/scale-control';\nexport type {SourceProps} from './components/source';\nexport type {LayerProps} from './components/layer';\n\n// Types\nexport * from './types/common';\nexport * from './types/events';\nexport * from './types/lib';\nexport * from './types/style-spec';\n", "import * as React from 'react';\nimport {useState, useRef, useEffect, useContext, useMemo, useImperativeHandle} from 'react';\n\nimport {MountedMapsContext} from './use-map';\nimport Mapbox, {MapboxProps} from '../mapbox/mapbox';\nimport createRef, {MapRef} from '../mapbox/create-ref';\n\nimport type {CSSProperties} from 'react';\nimport useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';\nimport setGlobals, {GlobalSettings} from '../utils/set-globals';\nimport type {MapLib, MapOptions} from '../types/lib';\n\nexport type MapContextValue = {\n  mapLib: MapLib;\n  map: MapRef;\n};\n\nexport const MapContext = React.createContext<MapContextValue>(null);\n\ntype MapInitOptions = Omit<\n  MapOptions,\n  'style' | 'container' | 'bounds' | 'fitBoundsOptions' | 'center'\n>;\n\nexport type MapProps = MapInitOptions &\n  MapboxProps &\n  GlobalSettings & {\n    mapLib?: MapLib | Promise<MapLib>;\n    reuseMaps?: boolean;\n    /** Map container id */\n    id?: string;\n    /** Map container CSS style */\n    style?: CSSProperties;\n    children?: any;\n  };\n\nfunction _Map(props: MapProps, ref: React.Ref<MapRef>) {\n  const mountedMapsContext = useContext(MountedMapsContext);\n  const [mapInstance, setMapInstance] = useState<Mapbox>(null);\n  const containerRef = useRef();\n\n  const {current: contextValue} = useRef<MapContextValue>({mapLib: null, map: null});\n\n  useEffect(() => {\n    const mapLib = props.mapLib;\n    let isMounted = true;\n    let mapbox: Mapbox;\n\n    Promise.resolve(mapLib || import('mapbox-gl'))\n      .then((module: MapLib | {default: MapLib}) => {\n        if (!isMounted) {\n          return;\n        }\n        if (!module) {\n          throw new Error('Invalid mapLib');\n        }\n        const mapboxgl = 'Map' in module ? module : module.default;\n        if (!mapboxgl.Map) {\n          throw new Error('Invalid mapLib');\n        }\n\n        setGlobals(mapboxgl, props);\n        if (props.reuseMaps) {\n          mapbox = Mapbox.reuse(props, containerRef.current);\n        }\n        if (!mapbox) {\n          mapbox = new Mapbox(mapboxgl.Map, props, containerRef.current);\n        }\n        contextValue.map = createRef(mapbox);\n        contextValue.mapLib = mapboxgl;\n\n        setMapInstance(mapbox);\n        mountedMapsContext?.onMapMount(contextValue.map, props.id);\n      })\n      .catch(error => {\n        const {onError} = props;\n        if (onError) {\n          onError({\n            type: 'error',\n            target: null,\n            error,\n            originalEvent: error\n          });\n        } else {\n          console.error(error); // eslint-disable-line\n        }\n      });\n\n    return () => {\n      isMounted = false;\n      if (mapbox) {\n        mountedMapsContext?.onMapUnmount(props.id);\n        if (props.reuseMaps) {\n          mapbox.recycle();\n        } else {\n          mapbox.destroy();\n        }\n      }\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mapInstance) {\n      mapInstance.setProps(props);\n    }\n  });\n\n  useImperativeHandle(ref, () => contextValue.map, [mapInstance]);\n\n  const style: CSSProperties = useMemo(\n    () => ({\n      position: 'relative',\n      width: '100%',\n      height: '100%',\n      ...props.style\n    }),\n    [props.style]\n  );\n\n  const CHILD_CONTAINER_STYLE = {\n    height: '100%'\n  };\n\n  return (\n    <div id={props.id} ref={containerRef} style={style}>\n      {mapInstance && (\n        <MapContext.Provider value={contextValue}>\n          <div mapboxgl-children=\"\" style={CHILD_CONTAINER_STYLE}>\n            {props.children}\n          </div>\n        </MapContext.Provider>\n      )}\n    </div>\n  );\n}\n\nexport const Map = React.forwardRef(_Map);\n", "import * as React from 'react';\nimport {useState, useCallback, useMemo, useContext} from 'react';\n\nimport {MapRef} from '../mapbox/create-ref';\nimport {MapContext} from './map';\n\ntype MountedMapsContextValue = {\n  maps: {[id: string]: MapRef};\n  onMapMount: (map: MapRef, id: string) => void;\n  onMapUnmount: (id: string) => void;\n};\n\nexport const MountedMapsContext = React.createContext<MountedMapsContextValue>(null);\n\nexport const MapProvider: React.FC<{children?: React.ReactNode}> = props => {\n  const [maps, setMaps] = useState<{[id: string]: MapRef}>({});\n\n  const onMapMount = useCallback((map: MapRef, id: string = 'default') => {\n    setMaps(currMaps => {\n      if (id === 'current') {\n        throw new Error(\"'current' cannot be used as map id\");\n      }\n      if (currMaps[id]) {\n        throw new Error(`Multiple maps with the same id: ${id}`);\n      }\n      return {...currMaps, [id]: map};\n    });\n  }, []);\n\n  const onMapUnmount = useCallback((id: string = 'default') => {\n    setMaps(currMaps => {\n      if (currMaps[id]) {\n        const nextMaps = {...currMaps};\n        delete nextMaps[id];\n        return nextMaps;\n      }\n      return currMaps;\n    });\n  }, []);\n\n  return (\n    <MountedMapsContext.Provider\n      value={{\n        maps,\n        onMapMount,\n        onMapUnmount\n      }}\n    >\n      {props.children}\n    </MountedMapsContext.Provider>\n  );\n};\n\nexport type MapCollection = {\n  [id: string]: MapRef | undefined;\n  current?: MapRef;\n};\n\nexport function useMap(): MapCollection {\n  const maps = useContext(MountedMapsContext)?.maps;\n  const currentMap = useContext(MapContext);\n\n  const mapsWithCurrent = useMemo(() => {\n    return {...maps, current: currentMap?.map};\n  }, [maps, currentMap]);\n\n  return mapsWithCurrent as MapCollection;\n}\n", "import type {PointLike} from '../types/common';\n\n/**\n * Compare two points\n * @param a\n * @param b\n * @returns true if the points are equal\n */\nexport function arePointsEqual(a?: PointLike, b?: PointLike): boolean {\n  const ax = Array.isArray(a) ? a[0] : a ? a.x : 0;\n  const ay = Array.isArray(a) ? a[1] : a ? a.y : 0;\n  const bx = Array.isArray(b) ? b[0] : b ? b.x : 0;\n  const by = Array.isArray(b) ? b[1] : b ? b.y : 0;\n  return ax === bx && ay === by;\n}\n\n/* eslint-disable complexity */\n/**\n * Compare any two objects\n * @param a\n * @param b\n * @returns true if the objects are deep equal\n */\nexport function deepEqual(a: any, b: any): boolean {\n  if (a === b) {\n    return true;\n  }\n  if (!a || !b) {\n    return false;\n  }\n  if (Array.isArray(a)) {\n    if (!Array.isArray(b) || a.length !== b.length) {\n      return false;\n    }\n    for (let i = 0; i < a.length; i++) {\n      if (!deepEqual(a[i], b[i])) {\n        return false;\n      }\n    }\n    return true;\n  } else if (Array.isArray(b)) {\n    return false;\n  }\n  if (typeof a === 'object' && typeof b === 'object') {\n    const aKeys = Object.keys(a);\n    const bKeys = Object.keys(b);\n    if (aKeys.length !== bKeys.length) {\n      return false;\n    }\n    for (const key of aKeys) {\n      if (!b.hasOwnProperty(key)) {\n        return false;\n      }\n      if (!deepEqual(a[key], b[key])) {\n        return false;\n      }\n    }\n    return true;\n  }\n  return false;\n}\n", "import type {MapboxProps} from '../mapbox/mapbox';\nimport type {Transform} from '../types/internal';\nimport type {ViewState} from '../types/common';\nimport {deepEqual} from './deep-equal';\n\n/**\n * Make a copy of a transform\n * @param tr\n */\nexport function cloneTransform(tr: Transform): Transform {\n  const newTransform = tr.clone();\n  // Work around mapbox bug - this value is not assigned in clone(), only in resize()\n  newTransform.pixelsToGLUnits = tr.pixelsToGLUnits;\n  return newTransform;\n}\n\n/**\n * Copy projection from one transform to another. This only applies to mapbox-gl transforms\n * @param src the transform to copy projection settings from\n * @param dest to transform to copy projection settings to\n */\nexport function syncProjection(src: Transform, dest: Transform): void {\n  if (!src.getProjection) {\n    return;\n  }\n  const srcProjection = src.getProjection();\n  const destProjection = dest.getProjection();\n\n  if (!deepEqual(srcProjection, destProjection)) {\n    dest.setProjection(srcProjection);\n  }\n}\n\n/**\n * Capture a transform's current state\n * @param transform\n * @returns descriptor of the view state\n */\nexport function transformToViewState(tr: Transform): ViewState {\n  return {\n    longitude: tr.center.lng,\n    latitude: tr.center.lat,\n    zoom: tr.zoom,\n    pitch: tr.pitch,\n    bearing: tr.bearing,\n    padding: tr.padding\n  };\n}\n\n/* eslint-disable complexity */\n/**\n * Mutate a transform to match the given view state\n * @param transform\n * @param viewState\n * @returns true if the transform has changed\n */\nexport function applyViewStateToTransform(tr: Transform, props: MapboxProps): boolean {\n  const v: Partial<ViewState> = props.viewState || props;\n  let changed = false;\n\n  if ('zoom' in v) {\n    const zoom = tr.zoom;\n    tr.zoom = v.zoom;\n    changed = changed || zoom !== tr.zoom;\n  }\n  if ('bearing' in v) {\n    const bearing = tr.bearing;\n    tr.bearing = v.bearing;\n    changed = changed || bearing !== tr.bearing;\n  }\n  if ('pitch' in v) {\n    const pitch = tr.pitch;\n    tr.pitch = v.pitch;\n    changed = changed || pitch !== tr.pitch;\n  }\n  if (v.padding && !tr.isPaddingEqual(v.padding)) {\n    changed = true;\n    tr.padding = v.padding;\n  }\n  if ('longitude' in v && 'latitude' in v) {\n    const center = tr.center;\n    // @ts-ignore\n    tr.center = new center.constructor(v.longitude, v.latitude);\n    changed = changed || center !== tr.center;\n  }\n  return changed;\n}\n", "import {ImmutableLike} from '../types/common';\nimport {StyleSpecification} from '../types/style-spec';\n\nconst refProps = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'];\n\n// Prepare a map style object for diffing\n// If immutable - convert to plain object\n// Work around some issues in older styles that would fail Mapbox's diffing\nexport function normalizeStyle(\n  style: string | StyleSpecification | ImmutableLike<StyleSpecification>\n): string | StyleSpecification {\n  if (!style) {\n    return null;\n  }\n  if (typeof style === 'string') {\n    return style;\n  }\n  if ('toJS' in style) {\n    style = style.toJS();\n  }\n  if (!style.layers) {\n    return style;\n  }\n  const layerIndex = {};\n\n  for (const layer of style.layers) {\n    layerIndex[layer.id] = layer;\n  }\n\n  const layers = style.layers.map(layer => {\n    let normalizedLayer: typeof layer = null;\n\n    if ('interactive' in layer) {\n      normalizedLayer = Object.assign({}, layer);\n      // Breaks style diffing :(\n      // @ts-ignore legacy field not typed\n      delete normalizedLayer.interactive;\n    }\n\n    // Style diffing doesn't work with refs so expand them out manually before diffing.\n    // @ts-ignore legacy field not typed\n    const layerRef = layerIndex[layer.ref];\n    if (layerRef) {\n      normalizedLayer = normalizedLayer || Object.assign({}, layer);\n      // @ts-ignore\n      delete normalizedLayer.ref;\n      // https://github.com/mapbox/mapbox-gl-js/blob/master/src/style-spec/deref.js\n      for (const propName of refProps) {\n        if (propName in layerRef) {\n          normalizedLayer[propName] = layerRef[propName];\n        }\n      }\n    }\n\n    return normalizedLayer || layer;\n  });\n\n  // Do not mutate the style object provided by the user\n  return {...style, layers};\n}\n", "import {\n  transformToViewState,\n  applyViewStateToTransform,\n  cloneTransform,\n  syncProjection\n} from '../utils/transform';\nimport {normalizeStyle} from '../utils/style-utils';\nimport {deepEqual} from '../utils/deep-equal';\n\nimport type {\n  ViewState,\n  Point,\n  PointLike,\n  PaddingOptions,\n  ImmutableLike,\n  LngLatBoundsLike,\n  MapGeoJSONFeature\n} from '../types/common';\nimport type {\n  StyleSpecification,\n  LightSpecification,\n  TerrainSpecification,\n  FogSpecification,\n  ProjectionSpecification\n} from '../types/style-spec';\nimport type {MapInstance} from '../types/lib';\nimport type {Transform, MapInstanceInternal} from '../types/internal';\nimport type {\n  MapCallbacks,\n  ViewStateChangeEvent,\n  MapEvent,\n  ErrorEvent,\n  MapMouseEvent\n} from '../types/events';\n\nexport type MapboxProps = Partial<ViewState> &\n  MapCallbacks & {\n    // Init options\n    mapboxAccessToken?: string;\n\n    /** Camera options used when constructing the Map instance */\n    initialViewState?: Partial<ViewState> & {\n      /** The initial bounds of the map. If bounds is specified, it overrides longitude, latitude and zoom options. */\n      bounds?: LngLatBoundsLike;\n      /** A fitBounds options object to use only when setting the bounds option. */\n      fitBoundsOptions?: {\n        offset?: PointLike;\n        minZoom?: number;\n        maxZoom?: number;\n        padding?: number | PaddingOptions;\n      };\n    };\n\n    /** If provided, render into an external WebGL context */\n    gl?: WebGLRenderingContext;\n\n    /** For external controller to override the camera state */\n    viewState?: ViewState & {\n      width: number;\n      height: number;\n    };\n\n    // Styling\n\n    /** Mapbox style */\n    mapStyle?: string | StyleSpecification | ImmutableLike<StyleSpecification>;\n    /** Enable diffing when the map style changes\n     * @default true\n     */\n    styleDiffing?: boolean;\n    /** The projection property of the style. Must conform to the Projection Style Specification.\n     * @default 'mercator'\n     */\n    projection?: ProjectionSpecification | ProjectionSpecification['name'];\n    /** The fog property of the style. Must conform to the Fog Style Specification .\n     * If `undefined` is provided, removes the fog from the map. */\n    fog?: FogSpecification;\n    /** Light properties of the map. */\n    light?: LightSpecification;\n    /** Terrain property of the style. Must conform to the Terrain Style Specification .\n     * If `undefined` is provided, removes terrain from the map. */\n    terrain?: TerrainSpecification;\n\n    /** Default layers to query on pointer events */\n    interactiveLayerIds?: string[];\n    /** CSS cursor */\n    cursor?: string;\n  };\n\nconst DEFAULT_STYLE = {version: 8, sources: {}, layers: []} as StyleSpecification;\n\nconst pointerEvents = {\n  mousedown: 'onMouseDown',\n  mouseup: 'onMouseUp',\n  mouseover: 'onMouseOver',\n  mousemove: 'onMouseMove',\n  click: 'onClick',\n  dblclick: 'onDblClick',\n  mouseenter: 'onMouseEnter',\n  mouseleave: 'onMouseLeave',\n  mouseout: 'onMouseOut',\n  contextmenu: 'onContextMenu',\n  touchstart: 'onTouchStart',\n  touchend: 'onTouchEnd',\n  touchmove: 'onTouchMove',\n  touchcancel: 'onTouchCancel'\n};\nconst cameraEvents = {\n  movestart: 'onMoveStart',\n  move: 'onMove',\n  moveend: 'onMoveEnd',\n  dragstart: 'onDragStart',\n  drag: 'onDrag',\n  dragend: 'onDragEnd',\n  zoomstart: 'onZoomStart',\n  zoom: 'onZoom',\n  zoomend: 'onZoomEnd',\n  rotatestart: 'onRotateStart',\n  rotate: 'onRotate',\n  rotateend: 'onRotateEnd',\n  pitchstart: 'onPitchStart',\n  pitch: 'onPitch',\n  pitchend: 'onPitchEnd'\n};\nconst otherEvents = {\n  wheel: 'onWheel',\n  boxzoomstart: 'onBoxZoomStart',\n  boxzoomend: 'onBoxZoomEnd',\n  boxzoomcancel: 'onBoxZoomCancel',\n  resize: 'onResize',\n  load: 'onLoad',\n  render: 'onRender',\n  idle: 'onIdle',\n  remove: 'onRemove',\n  data: 'onData',\n  styledata: 'onStyleData',\n  sourcedata: 'onSourceData',\n  error: 'onError'\n};\nconst settingNames = [\n  'minZoom',\n  'maxZoom',\n  'minPitch',\n  'maxPitch',\n  'maxBounds',\n  'projection',\n  'renderWorldCopies'\n];\nconst handlerNames = [\n  'scrollZoom',\n  'boxZoom',\n  'dragRotate',\n  'dragPan',\n  'keyboard',\n  'doubleClickZoom',\n  'touchZoomRotate',\n  'touchPitch'\n];\n\n/**\n * A wrapper for mapbox-gl's Map class\n */\nexport default class Mapbox {\n  private _MapClass: {new (options: any): MapInstance};\n  // mapboxgl.Map instance\n  private _map: MapInstanceInternal = null;\n  // User-supplied props\n  props: MapboxProps;\n\n  // Mapbox map is stateful.\n  // During method calls/user interactions, map.transform is mutated and\n  // deviate from user-supplied props.\n  // In order to control the map reactively, we shadow the transform\n  // with the one below, which reflects the view state resolved from\n  // both user-supplied props and the underlying state\n  private _renderTransform: Transform;\n\n  // Internal states\n  private _internalUpdate: boolean = false;\n  private _inRender: boolean = false;\n  private _hoveredFeatures: MapGeoJSONFeature[] = null;\n  private _deferredEvents: {\n    move: boolean;\n    zoom: boolean;\n    pitch: boolean;\n    rotate: boolean;\n  } = {\n    move: false,\n    zoom: false,\n    pitch: false,\n    rotate: false\n  };\n\n  static savedMaps: Mapbox[] = [];\n\n  constructor(\n    MapClass: {new (options: any): MapInstance},\n    props: MapboxProps,\n    container: HTMLDivElement\n  ) {\n    this._MapClass = MapClass;\n    this.props = props;\n    this._initialize(container);\n  }\n\n  get map(): MapInstance {\n    return this._map;\n  }\n\n  get transform(): Transform {\n    return this._renderTransform;\n  }\n\n  setProps(props: MapboxProps) {\n    const oldProps = this.props;\n    this.props = props;\n\n    const settingsChanged = this._updateSettings(props, oldProps);\n    if (settingsChanged) {\n      this._createShadowTransform(this._map);\n    }\n    const sizeChanged = this._updateSize(props);\n    const viewStateChanged = this._updateViewState(props, true);\n    this._updateStyle(props, oldProps);\n    this._updateStyleComponents(props, oldProps);\n    this._updateHandlers(props, oldProps);\n\n    // If 1) view state has changed to match props and\n    //    2) the props change is not triggered by map events,\n    // it's driven by an external state change. Redraw immediately\n    if (settingsChanged || sizeChanged || (viewStateChanged && !this._map.isMoving())) {\n      this.redraw();\n    }\n  }\n\n  static reuse(props: MapboxProps, container: HTMLDivElement): Mapbox {\n    const that = Mapbox.savedMaps.pop();\n    if (!that) {\n      return null;\n    }\n\n    const map = that.map;\n    // When reusing the saved map, we need to reparent the map(canvas) and other child nodes\n    // intoto the new container from the props.\n    // Step 1: reparenting child nodes from old container to new container\n    const oldContainer = map.getContainer();\n    container.className = oldContainer.className;\n    while (oldContainer.childNodes.length > 0) {\n      container.appendChild(oldContainer.childNodes[0]);\n    }\n    // Step 2: replace the internal container with new container from the react component\n    // @ts-ignore\n    map._container = container;\n\n    // Step 4: apply new props\n    that.setProps({...props, styleDiffing: false});\n    map.resize();\n    const {initialViewState} = props;\n    if (initialViewState) {\n      if (initialViewState.bounds) {\n        map.fitBounds(initialViewState.bounds, {...initialViewState.fitBoundsOptions, duration: 0});\n      } else {\n        that._updateViewState(initialViewState, false);\n      }\n    }\n\n    // Simulate load event\n    if (map.isStyleLoaded()) {\n      map.fire('load');\n    } else {\n      map.once('styledata', () => map.fire('load'));\n    }\n\n    // Force reload\n    // @ts-ignore\n    map._update();\n    return that;\n  }\n\n  /* eslint-disable complexity,max-statements */\n  _initialize(container: HTMLDivElement) {\n    const {props} = this;\n    const {mapStyle = DEFAULT_STYLE} = props;\n    const mapOptions = {\n      ...props,\n      ...props.initialViewState,\n      accessToken: props.mapboxAccessToken || getAccessTokenFromEnv() || null,\n      container,\n      style: normalizeStyle(mapStyle)\n    };\n\n    const viewState = mapOptions.initialViewState || mapOptions.viewState || mapOptions;\n    Object.assign(mapOptions, {\n      center: [viewState.longitude || 0, viewState.latitude || 0],\n      zoom: viewState.zoom || 0,\n      pitch: viewState.pitch || 0,\n      bearing: viewState.bearing || 0\n    });\n\n    if (props.gl) {\n      // eslint-disable-next-line\n      const getContext = HTMLCanvasElement.prototype.getContext;\n      // Hijack canvas.getContext to return our own WebGLContext\n      // This will be called inside the mapboxgl.Map constructor\n      // @ts-expect-error\n      HTMLCanvasElement.prototype.getContext = () => {\n        // Unhijack immediately\n        HTMLCanvasElement.prototype.getContext = getContext;\n        return props.gl;\n      };\n    }\n\n    const map = new this._MapClass(mapOptions) as MapInstanceInternal;\n    // Props that are not part of constructor options\n    if (viewState.padding) {\n      map.setPadding(viewState.padding);\n    }\n    if (props.cursor) {\n      map.getCanvas().style.cursor = props.cursor;\n    }\n    this._createShadowTransform(map);\n\n    // Hack\n    // Insert code into map's render cycle\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const renderMap = map._render;\n    map._render = (arg: number) => {\n      this._inRender = true;\n      renderMap.call(map, arg);\n      this._inRender = false;\n    };\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const runRenderTaskQueue = map._renderTaskQueue.run;\n    map._renderTaskQueue.run = (arg: number) => {\n      runRenderTaskQueue.call(map._renderTaskQueue, arg);\n      this._onBeforeRepaint();\n    };\n    map.on('render', () => this._onAfterRepaint());\n    // Insert code into map's event pipeline\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const fireEvent = map.fire;\n    map.fire = this._fireEvent.bind(this, fireEvent);\n\n    // add listeners\n    map.on('resize', () => {\n      this._renderTransform.resize(map.transform.width, map.transform.height);\n    });\n    map.on('styledata', () => {\n      this._updateStyleComponents(this.props, {});\n      // Projection can be set in stylesheet\n      syncProjection(map.transform, this._renderTransform);\n    });\n    map.on('sourcedata', () => this._updateStyleComponents(this.props, {}));\n    for (const eventName in pointerEvents) {\n      map.on(eventName, this._onPointerEvent);\n    }\n    for (const eventName in cameraEvents) {\n      map.on(eventName, this._onCameraEvent);\n    }\n    for (const eventName in otherEvents) {\n      map.on(eventName, this._onEvent);\n    }\n    this._map = map;\n  }\n  /* eslint-enable complexity,max-statements */\n\n  recycle() {\n    // Clean up unnecessary elements before storing for reuse.\n    const container = this.map.getContainer();\n    const children = container.querySelector('[mapboxgl-children]');\n    children?.remove();\n\n    Mapbox.savedMaps.push(this);\n  }\n\n  destroy() {\n    this._map.remove();\n  }\n\n  // Force redraw the map now. Typically resize() and jumpTo() is reflected in the next\n  // render cycle, which is managed by Mapbox's animation loop.\n  // This removes the synchronization issue caused by requestAnimationFrame.\n  redraw() {\n    const map = this._map as any;\n    // map._render will throw error if style does not exist\n    // https://github.com/mapbox/mapbox-gl-js/blob/fb9fc316da14e99ff4368f3e4faa3888fb43c513\n    //   /src/ui/map.js#L1834\n    if (!this._inRender && map.style) {\n      // cancel the scheduled update\n      if (map._frame) {\n        map._frame.cancel();\n        map._frame = null;\n      }\n      // the order is important - render() may schedule another update\n      map._render();\n    }\n  }\n\n  _createShadowTransform(map: any) {\n    const renderTransform = cloneTransform(map.transform);\n    map.painter.transform = renderTransform;\n\n    this._renderTransform = renderTransform;\n  }\n\n  /* Trigger map resize if size is controlled\n     @param {object} nextProps\n     @returns {bool} true if size has changed\n   */\n  _updateSize(nextProps: MapboxProps): boolean {\n    // Check if size is controlled\n    const {viewState} = nextProps;\n    if (viewState) {\n      const map = this._map;\n      if (viewState.width !== map.transform.width || viewState.height !== map.transform.height) {\n        map.resize();\n        return true;\n      }\n    }\n    return false;\n  }\n\n  // Adapted from map.jumpTo\n  /* Update camera to match props\n     @param {object} nextProps\n     @param {bool} triggerEvents - should fire camera events\n     @returns {bool} true if anything is changed\n   */\n  _updateViewState(nextProps: MapboxProps, triggerEvents: boolean): boolean {\n    if (this._internalUpdate) {\n      return false;\n    }\n    const map = this._map;\n\n    const tr = this._renderTransform;\n    // Take a snapshot of the transform before mutation\n    const {zoom, pitch, bearing} = tr;\n    const isMoving = map.isMoving();\n\n    if (isMoving) {\n      // All movement of the camera is done relative to the sea level\n      tr.cameraElevationReference = 'sea';\n    }\n    const changed = applyViewStateToTransform(tr, {\n      ...transformToViewState(map.transform),\n      ...nextProps\n    });\n    if (isMoving) {\n      // Reset camera reference\n      tr.cameraElevationReference = 'ground';\n    }\n\n    if (changed && triggerEvents) {\n      const deferredEvents = this._deferredEvents;\n      // Delay DOM control updates to the next render cycle\n      deferredEvents.move = true;\n      deferredEvents.zoom ||= zoom !== tr.zoom;\n      deferredEvents.rotate ||= bearing !== tr.bearing;\n      deferredEvents.pitch ||= pitch !== tr.pitch;\n    }\n\n    // Avoid manipulating the real transform when interaction/animation is ongoing\n    // as it would interfere with Mapbox's handlers\n    if (!isMoving) {\n      applyViewStateToTransform(map.transform, nextProps);\n    }\n\n    return changed;\n  }\n\n  /* Update camera constraints and projection settings to match props\n     @param {object} nextProps\n     @param {object} currProps\n     @returns {bool} true if anything is changed\n   */\n  _updateSettings(nextProps: MapboxProps, currProps: MapboxProps): boolean {\n    const map = this._map;\n    let changed = false;\n    for (const propName of settingNames) {\n      if (propName in nextProps && !deepEqual(nextProps[propName], currProps[propName])) {\n        changed = true;\n        const setter = map[`set${propName[0].toUpperCase()}${propName.slice(1)}`];\n        setter?.call(map, nextProps[propName]);\n      }\n    }\n    return changed;\n  }\n\n  /* Update map style to match props\n     @param {object} nextProps\n     @param {object} currProps\n     @returns {bool} true if style is changed\n   */\n  _updateStyle(nextProps: MapboxProps, currProps: MapboxProps): boolean {\n    if (nextProps.cursor !== currProps.cursor) {\n      this._map.getCanvas().style.cursor = nextProps.cursor || '';\n    }\n    if (nextProps.mapStyle !== currProps.mapStyle) {\n      const {mapStyle = DEFAULT_STYLE, styleDiffing = true} = nextProps;\n      const options: any = {\n        diff: styleDiffing\n      };\n      if ('localIdeographFontFamily' in nextProps) {\n        // @ts-ignore Mapbox specific prop\n        options.localIdeographFontFamily = nextProps.localIdeographFontFamily;\n      }\n      this._map.setStyle(normalizeStyle(mapStyle), options);\n      return true;\n    }\n    return false;\n  }\n\n  /* Update fog, light and terrain to match props\n     @param {object} nextProps\n     @param {object} currProps\n     @returns {bool} true if anything is changed\n   */\n  _updateStyleComponents(nextProps: MapboxProps, currProps: MapboxProps): boolean {\n    const map = this._map;\n    let changed = false;\n    if (map.isStyleLoaded()) {\n      if ('light' in nextProps && map.setLight && !deepEqual(nextProps.light, currProps.light)) {\n        changed = true;\n        map.setLight(nextProps.light);\n      }\n      if ('fog' in nextProps && map.setFog && !deepEqual(nextProps.fog, currProps.fog)) {\n        changed = true;\n        map.setFog(nextProps.fog);\n      }\n      if (\n        'terrain' in nextProps &&\n        map.setTerrain &&\n        !deepEqual(nextProps.terrain, currProps.terrain)\n      ) {\n        if (!nextProps.terrain || map.getSource(nextProps.terrain.source)) {\n          changed = true;\n          map.setTerrain(nextProps.terrain);\n        }\n      }\n    }\n    return changed;\n  }\n\n  /* Update interaction handlers to match props\n     @param {object} nextProps\n     @param {object} currProps\n     @returns {bool} true if anything is changed\n   */\n  _updateHandlers(nextProps: MapboxProps, currProps: MapboxProps): boolean {\n    const map = this._map;\n    let changed = false;\n    for (const propName of handlerNames) {\n      const newValue = nextProps[propName] ?? true;\n      const oldValue = currProps[propName] ?? true;\n      if (!deepEqual(newValue, oldValue)) {\n        changed = true;\n        if (newValue) {\n          map[propName].enable(newValue);\n        } else {\n          map[propName].disable();\n        }\n      }\n    }\n    return changed;\n  }\n\n  _onEvent = (e: MapEvent) => {\n    // @ts-ignore\n    const cb = this.props[otherEvents[e.type]];\n    if (cb) {\n      cb(e);\n    } else if (e.type === 'error') {\n      console.error((e as ErrorEvent).error); // eslint-disable-line\n    }\n  };\n\n  private _queryRenderedFeatures(point: Point) {\n    const map = this._map;\n    const tr = map.transform;\n    const {interactiveLayerIds = []} = this.props;\n    try {\n      map.transform = this._renderTransform;\n      return map.queryRenderedFeatures(point, {\n        layers: interactiveLayerIds.filter(map.getLayer.bind(map))\n      });\n    } catch {\n      // May fail if style is not loaded\n      return [];\n    } finally {\n      map.transform = tr;\n    }\n  }\n\n  _updateHover(e: MapMouseEvent) {\n    const {props} = this;\n    const shouldTrackHoveredFeatures =\n      props.interactiveLayerIds && (props.onMouseMove || props.onMouseEnter || props.onMouseLeave);\n\n    if (shouldTrackHoveredFeatures) {\n      const eventType = e.type;\n      const wasHovering = this._hoveredFeatures?.length > 0;\n      const features = this._queryRenderedFeatures(e.point);\n      const isHovering = features.length > 0;\n\n      if (!isHovering && wasHovering) {\n        e.type = 'mouseleave';\n        this._onPointerEvent(e);\n      }\n      this._hoveredFeatures = features;\n      if (isHovering && !wasHovering) {\n        e.type = 'mouseenter';\n        this._onPointerEvent(e);\n      }\n      e.type = eventType;\n    } else {\n      this._hoveredFeatures = null;\n    }\n  }\n\n  _onPointerEvent = (e: MapMouseEvent) => {\n    if (e.type === 'mousemove' || e.type === 'mouseout') {\n      this._updateHover(e);\n    }\n\n    // @ts-ignore\n    const cb = this.props[pointerEvents[e.type]];\n    if (cb) {\n      if (this.props.interactiveLayerIds && e.type !== 'mouseover' && e.type !== 'mouseout') {\n        e.features = this._hoveredFeatures || this._queryRenderedFeatures(e.point);\n      }\n      cb(e);\n      delete e.features;\n    }\n  };\n\n  _onCameraEvent = (e: ViewStateChangeEvent) => {\n    if (!this._internalUpdate) {\n      // @ts-ignore\n      const cb = this.props[cameraEvents[e.type]];\n      if (cb) {\n        cb(e);\n      }\n    }\n    if (e.type in this._deferredEvents) {\n      this._deferredEvents[e.type] = false;\n    }\n  };\n\n  _fireEvent(baseFire: Function, event: string | MapEvent, properties?: object) {\n    const map = this._map;\n    const tr = map.transform;\n\n    const eventType = typeof event === 'string' ? event : event.type;\n    if (eventType === 'move') {\n      this._updateViewState(this.props, false);\n    }\n    if (eventType in cameraEvents) {\n      if (typeof event === 'object') {\n        (event as unknown as ViewStateChangeEvent).viewState = transformToViewState(tr);\n      }\n      if (this._map.isMoving()) {\n        // Replace map.transform with ours during the callbacks\n        map.transform = this._renderTransform;\n        baseFire.call(map, event, properties);\n        map.transform = tr;\n\n        return map;\n      }\n    }\n    baseFire.call(map, event, properties);\n\n    return map;\n  }\n\n  // All camera manipulations are complete, ready to repaint\n  _onBeforeRepaint() {\n    const map = this._map;\n\n    // If there are camera changes driven by props, invoke camera events so that DOM controls are synced\n    this._internalUpdate = true;\n    for (const eventType in this._deferredEvents) {\n      if (this._deferredEvents[eventType]) {\n        map.fire(eventType);\n      }\n    }\n    this._internalUpdate = false;\n\n    const tr = this._map.transform;\n    // Make sure camera matches the current props\n    map.transform = this._renderTransform;\n\n    this._onAfterRepaint = () => {\n      // Mapbox transitions between non-mercator projection and mercator during render time\n      // Copy it back to the other\n      syncProjection(this._renderTransform, tr);\n      // Restores camera state before render/load events are fired\n      map.transform = tr;\n    };\n  }\n\n  _onAfterRepaint: () => void;\n}\n\n/**\n * Access token can be provided via one of:\n *   mapboxAccessToken prop\n *   access_token query parameter\n *   MapboxAccessToken environment variable\n *   REACT_APP_MAPBOX_ACCESS_TOKEN environment variable\n * @returns access token\n */\nfunction getAccessTokenFromEnv(): string {\n  let accessToken = null;\n\n  /* global location, process */\n  if (typeof location !== 'undefined') {\n    const match = /access_token=([^&\\/]*)/.exec(location.search);\n    accessToken = match && match[1];\n  }\n\n  // Note: This depends on bundler plugins (e.g. webpack) importing environment correctly\n  try {\n    // eslint-disable-next-line no-process-env\n    accessToken = accessToken || process.env.MapboxAccessToken;\n  } catch {\n    // ignore\n  }\n\n  try {\n    // eslint-disable-next-line no-process-env\n    accessToken = accessToken || process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;\n  } catch {\n    // ignore\n  }\n\n  return accessToken;\n}\n", "import type {MapInstance} from '../types/lib';\nimport type {MapInstanceInternal} from '../types/internal';\nimport {LngLatLike, PointLike} from '../types/common';\n\nimport type Mapbox from './mapbox';\n\n/** These methods may break the react binding if called directly */\nconst skipMethods = [\n  'setMaxBounds',\n  'setMinZoom',\n  'setMaxZoom',\n  'setMinPitch',\n  'setMaxPitch',\n  'setRenderWorldCopies',\n  'setProjection',\n  'setStyle',\n  'addSource',\n  'removeSource',\n  'addLayer',\n  'removeLayer',\n  'setLayerZoomRange',\n  'setFilter',\n  'setPaintProperty',\n  'setLayoutProperty',\n  'setLight',\n  'setTerrain',\n  'setFog',\n  'remove'\n] as const;\n\nexport type MapRef = {\n  getMap(): MapInstance;\n} & Omit<MapInstance, (typeof skipMethods)[number]>;\n\nexport default function createRef(mapInstance: Mapbox): MapRef | null {\n  if (!mapInstance) {\n    return null;\n  }\n\n  const map = mapInstance.map as MapInstanceInternal;\n  const ref: any = {\n    getMap: () => mapInstance.map,\n\n    // Overwrite getters to use our shadow transform\n    getCenter: () => mapInstance.transform.center,\n    getZoom: () => mapInstance.transform.zoom,\n    getBearing: () => mapInstance.transform.bearing,\n    getPitch: () => mapInstance.transform.pitch,\n    getPadding: () => mapInstance.transform.padding,\n    getBounds: () => mapInstance.transform.getBounds(),\n    project: (lnglat: LngLatLike) => {\n      const tr = map.transform;\n      map.transform = mapInstance.transform;\n      const result = map.project(lnglat);\n      map.transform = tr;\n      return result;\n    },\n    unproject: (point: PointLike) => {\n      const tr = map.transform;\n      map.transform = mapInstance.transform;\n      const result = map.unproject(point);\n      map.transform = tr;\n      return result;\n    },\n    // options diverge between mapbox and maplibre\n    queryTerrainElevation: (lnglat: LngLatLike, options?: any) => {\n      const tr = map.transform;\n      map.transform = mapInstance.transform;\n      const result = map.queryTerrainElevation(lnglat, options);\n      map.transform = tr;\n      return result;\n    },\n    queryRenderedFeatures: (geometry?: any, options?: any) => {\n      const tr = map.transform;\n      map.transform = mapInstance.transform;\n      const result = map.queryRenderedFeatures(geometry, options);\n      map.transform = tr;\n      return result;\n    }\n  };\n\n  for (const key of getMethodNames(map)) {\n    // @ts-expect-error\n    if (!(key in ref) && !skipMethods.includes(key)) {\n      ref[key] = map[key].bind(map);\n    }\n  }\n\n  return ref;\n}\n\nfunction getMethodNames(obj: Object) {\n  const result = new Set<string>();\n\n  let proto = obj;\n  while (proto) {\n    for (const key of Object.getOwnPropertyNames(proto)) {\n      if (\n        key[0] !== '_' &&\n        typeof obj[key] === 'function' &&\n        key !== 'fire' &&\n        key !== 'setEventedParent'\n      ) {\n        result.add(key);\n      }\n    }\n    proto = Object.getPrototypeOf(proto);\n  }\n  return Array.from(result);\n}\n", "// From https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts\n// useLayoutEffect but does not trigger warning in server-side rendering\nimport {useEffect, useLayoutEffect} from 'react';\n\nconst useIsomorphicLayoutEffect = typeof document !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport default useIsomorphicLayoutEffect;\n", "export type GlobalSettings = {\n  /** The map's default API URL for requesting tiles, styles, sprites, and glyphs. */\n  baseApiUrl?: string;\n  /** The maximum number of images (raster tiles, sprites, icons) to load in parallel.\n   * @default 16\n   */\n  maxParallelImageRequests?: number;\n  /** The map's RTL text plugin. Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.  */\n  RTLTextPlugin?: string | false;\n  /** Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.\nTakes precedence over `workerUrl`. */\n  workerClass?: any;\n  /** The number of web workers instantiated on a page with mapbox-gl maps.\n   * @default 2\n   */\n  workerCount?: number;\n  /** Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL.\n   * This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment\n   * wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior. */\n  workerUrl?: string;\n};\n\nconst globalSettings = [\n  'baseApiUrl',\n  'maxParallelImageRequests',\n  'workerClass',\n  'workerCount',\n  'workerUrl'\n] as const;\n\nexport default function setGlobals(mapLib: any, props: GlobalSettings) {\n  for (const key of globalSettings) {\n    if (key in props) {\n      mapLib[key] = props[key];\n    }\n  }\n\n  const {\n    RTLTextPlugin = 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'\n  } = props;\n  if (\n    RTLTextPlugin &&\n    mapLib.getRTLTextPluginStatus &&\n    mapLib.getRTLTextPluginStatus() === 'unavailable'\n  ) {\n    mapLib.setRTLTextPlugin(\n      RTLTextPlugin,\n      (error?: Error) => {\n        if (error) {\n          // eslint-disable-next-line\n          console.error(error);\n        }\n      },\n      true\n    );\n  }\n}\n", "/* global document */\nimport * as React from 'react';\nimport {createPortal} from 'react-dom';\nimport {useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo} from 'react';\nimport {applyReactStyle} from '../utils/apply-react-style';\n\nimport type {PopupInstance, MarkerInstance, MarkerOptions} from '../types/lib';\nimport type {MarkerEvent, MarkerDragEvent} from '../types/events';\n\nimport {MapContext} from './map';\nimport {arePointsEqual} from '../utils/deep-equal';\n\nexport type MarkerProps = MarkerOptions & {\n  /** Longitude of the anchor location */\n  longitude: number;\n  /** Latitude of the anchor location */\n  latitude: number;\n\n  popup?: PopupInstance;\n\n  /** CSS style override, applied to the control's container */\n  style?: React.CSSProperties;\n  onClick?: (e: MarkerEvent<MouseEvent>) => void;\n  onDragStart?: (e: MarkerDragEvent) => void;\n  onDrag?: (e: MarkerDragEvent) => void;\n  onDragEnd?: (e: MarkerDragEvent) => void;\n  children?: React.ReactNode;\n};\n\n/* eslint-disable complexity,max-statements */\nexport const Marker = memo(\n  forwardRef((props: MarkerProps, ref: React.Ref<MarkerInstance>) => {\n    const {map, mapLib} = useContext(MapContext);\n    const thisRef = useRef({props});\n    thisRef.current.props = props;\n\n    const marker: MarkerInstance = useMemo(() => {\n      let hasChildren = false;\n      React.Children.forEach(props.children, el => {\n        if (el) {\n          hasChildren = true;\n        }\n      });\n      const options = {\n        ...props,\n        element: hasChildren ? document.createElement('div') : null\n      };\n\n      const mk = new mapLib.Marker(options);\n      mk.setLngLat([props.longitude, props.latitude]);\n\n      mk.getElement().addEventListener('click', (e: MouseEvent) => {\n        thisRef.current.props.onClick?.({\n          type: 'click',\n          target: mk,\n          originalEvent: e\n        });\n      });\n\n      mk.on('dragstart', e => {\n        const evt = e as MarkerDragEvent;\n        evt.lngLat = marker.getLngLat();\n        thisRef.current.props.onDragStart?.(evt);\n      });\n      mk.on('drag', e => {\n        const evt = e as MarkerDragEvent;\n        evt.lngLat = marker.getLngLat();\n        thisRef.current.props.onDrag?.(evt);\n      });\n      mk.on('dragend', e => {\n        const evt = e as MarkerDragEvent;\n        evt.lngLat = marker.getLngLat();\n        thisRef.current.props.onDragEnd?.(evt);\n      });\n\n      return mk;\n    }, []);\n\n    useEffect(() => {\n      marker.addTo(map.getMap());\n\n      return () => {\n        marker.remove();\n      };\n    }, []);\n\n    const {\n      longitude,\n      latitude,\n      offset,\n      style,\n      draggable = false,\n      popup = null,\n      rotation = 0,\n      rotationAlignment = 'auto',\n      pitchAlignment = 'auto'\n    } = props;\n\n    useEffect(() => {\n      applyReactStyle(marker.getElement(), style);\n    }, [style]);\n\n    useImperativeHandle(ref, () => marker, []);\n\n    if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {\n      marker.setLngLat([longitude, latitude]);\n    }\n    if (offset && !arePointsEqual(marker.getOffset(), offset)) {\n      marker.setOffset(offset);\n    }\n    if (marker.isDraggable() !== draggable) {\n      marker.setDraggable(draggable);\n    }\n    if (marker.getRotation() !== rotation) {\n      marker.setRotation(rotation);\n    }\n    if (marker.getRotationAlignment() !== rotationAlignment) {\n      marker.setRotationAlignment(rotationAlignment);\n    }\n    if (marker.getPitchAlignment() !== pitchAlignment) {\n      marker.setPitchAlignment(pitchAlignment);\n    }\n    if (marker.getPopup() !== popup) {\n      marker.setPopup(popup);\n    }\n\n    return createPortal(props.children, marker.getElement());\n  })\n);\n", "import * as React from 'react';\n// This is a simplified version of\n// https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSPropertyOperations.js#L62\nconst unitlessNumber = /box|flex|grid|column|lineHeight|fontWeight|opacity|order|tabSize|zIndex/;\n\nexport function applyReactStyle(element: HTMLElement, styles: React.CSSProperties) {\n  if (!element || !styles) {\n    return;\n  }\n  const style = element.style;\n\n  for (const key in styles) {\n    const value = styles[key];\n    if (Number.isFinite(value) && !unitlessNumber.test(key)) {\n      style[key] = `${value}px`;\n    } else {\n      style[key] = value;\n    }\n  }\n}\n", "/* global document */\nimport * as React from 'react';\nimport {createPortal} from 'react-dom';\nimport {useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo} from 'react';\nimport {applyReactStyle} from '../utils/apply-react-style';\n\nimport type {PopupInstance as _PopupInstance, PopupOptions} from '../types/lib';\nimport type {PopupEvent} from '../types/events';\n\nimport {MapContext} from './map';\nimport {deepEqual} from '../utils/deep-equal';\n\nexport type PopupProps = PopupOptions & {\n  /** Longitude of the anchor location */\n  longitude: number;\n  /** Latitude of the anchor location */\n  latitude: number;\n\n  /** CSS style override, applied to the control's container */\n  style?: React.CSSProperties;\n\n  onOpen?: (e: PopupEvent) => void;\n  onClose?: (e: PopupEvent) => void;\n  children?: React.ReactNode;\n};\n\n// Adapted from https://github.com/mapbox/mapbox-gl-js/blob/v1.13.0/src/ui/popup.js\nfunction getClassList(className: string) {\n  return new Set(className ? className.trim().split(/\\s+/) : []);\n}\n\ntype PopupInstance = _PopupInstance & {\n  options: PopupOptions;\n};\n\n/* eslint-disable complexity,max-statements */\nexport const Popup = memo(\n  forwardRef((props: PopupProps, ref: React.Ref<PopupInstance>) => {\n    const {map, mapLib} = useContext(MapContext);\n    const container = useMemo(() => {\n      return document.createElement('div');\n    }, []);\n    const thisRef = useRef({props});\n    thisRef.current.props = props;\n\n    const popup = useMemo(() => {\n      const options = {...props};\n      const pp = new mapLib.Popup(options);\n      pp.setLngLat([props.longitude, props.latitude]);\n      pp.once('open', e => {\n        thisRef.current.props.onOpen?.(e as PopupEvent);\n      });\n      return pp as PopupInstance;\n    }, []);\n\n    useEffect(() => {\n      const onClose = e => {\n        thisRef.current.props.onClose?.(e as PopupEvent);\n      };\n      popup.on('close', onClose);\n      popup.setDOMContent(container).addTo(map.getMap());\n\n      return () => {\n        // https://github.com/visgl/react-map-gl/issues/1825\n        // onClose should not be fired if the popup is removed by unmounting\n        // When using React strict mode, the component is mounted twice.\n        // Firing the onClose callback here would be a false signal to remove the component.\n        popup.off('close', onClose);\n        if (popup.isOpen()) {\n          popup.remove();\n        }\n      };\n    }, []);\n\n    useEffect(() => {\n      applyReactStyle(popup.getElement(), props.style);\n    }, [props.style]);\n\n    useImperativeHandle(ref, () => popup, []);\n\n    if (popup.isOpen()) {\n      if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {\n        popup.setLngLat([props.longitude, props.latitude]);\n      }\n      if (props.offset && !deepEqual(popup.options.offset, props.offset)) {\n        popup.setOffset(props.offset);\n      }\n      if (popup.options.anchor !== props.anchor || popup.options.maxWidth !== props.maxWidth) {\n        popup.options.anchor = props.anchor;\n        pop