` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `
` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","export default function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n return self;\n}","'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction Ripple(props) {\n const {\n className,\n classes,\n pulsate = false,\n rippleX,\n rippleY,\n rippleSize,\n in: inProp,\n onExited,\n timeout\n } = props;\n const [leaving, setLeaving] = React.useState(false);\n const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);\n const rippleStyles = {\n width: rippleSize,\n height: rippleSize,\n top: -(rippleSize / 2) + rippleY,\n left: -(rippleSize / 2) + rippleX\n };\n const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);\n if (!inProp && !leaving) {\n setLeaving(true);\n }\n React.useEffect(() => {\n if (!inProp && onExited != null) {\n // react-transition-group#onExited\n const timeoutId = setTimeout(onExited, timeout);\n return () => {\n clearTimeout(timeoutId);\n };\n }\n return undefined;\n }, [onExited, inProp, timeout]);\n return /*#__PURE__*/_jsx(\"span\", {\n className: rippleClassName,\n style: rippleStyles,\n children: /*#__PURE__*/_jsx(\"span\", {\n className: childClassName\n })\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? Ripple.propTypes = {\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n /**\n * @ignore - injected from TransitionGroup\n */\n in: PropTypes.bool,\n /**\n * @ignore - injected from TransitionGroup\n */\n onExited: PropTypes.func,\n /**\n * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.\n */\n pulsate: PropTypes.bool,\n /**\n * Diameter of the ripple.\n */\n rippleSize: PropTypes.number,\n /**\n * Horizontal position of the ripple center.\n */\n rippleX: PropTypes.number,\n /**\n * Vertical position of the ripple center.\n */\n rippleY: PropTypes.number,\n /**\n * exit delay\n */\n timeout: PropTypes.number.isRequired\n} : void 0;\nexport default Ripple;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getTouchRippleUtilityClass(slot) {\n return generateUtilityClass('MuiTouchRipple', slot);\n}\nconst touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);\nexport default touchRippleClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"center\", \"classes\", \"className\"];\nlet _ = t => t,\n _t,\n _t2,\n _t3,\n _t4;\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\nimport { keyframes } from '@mui/system';\nimport useTimeout from '@mui/utils/useTimeout';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport Ripple from './Ripple';\nimport touchRippleClasses from './touchRippleClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DURATION = 550;\nexport const DELAY_RIPPLE = 80;\nconst enterKeyframe = keyframes(_t || (_t = _`\n 0% {\n transform: scale(0);\n opacity: 0.1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0.3;\n }\n`));\nconst exitKeyframe = keyframes(_t2 || (_t2 = _`\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n`));\nconst pulsateKeyframe = keyframes(_t3 || (_t3 = _`\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.92);\n }\n\n 100% {\n transform: scale(1);\n }\n`));\nexport const TouchRippleRoot = styled('span', {\n name: 'MuiTouchRipple',\n slot: 'Root'\n})({\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit'\n});\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const TouchRippleRipple = styled(Ripple, {\n name: 'MuiTouchRipple',\n slot: 'Ripple'\n})(_t4 || (_t4 = _`\n opacity: 0;\n position: absolute;\n\n &.${0} {\n opacity: 0.3;\n transform: scale(1);\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n &.${0} {\n animation-duration: ${0}ms;\n }\n\n & .${0} {\n opacity: 1;\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: currentColor;\n }\n\n & .${0} {\n opacity: 0;\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n & .${0} {\n position: absolute;\n /* @noflip */\n left: 0px;\n top: 0;\n animation-name: ${0};\n animation-duration: 2500ms;\n animation-timing-function: ${0};\n animation-iteration-count: infinite;\n animation-delay: 200ms;\n }\n`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({\n theme\n}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({\n theme\n}) => theme.transitions.easing.easeInOut);\n\n/**\n * @ignore - internal component.\n *\n * TODO v5: Make private\n */\nconst TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTouchRipple'\n });\n const {\n center: centerProp = false,\n classes = {},\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const [ripples, setRipples] = React.useState([]);\n const nextKey = React.useRef(0);\n const rippleCallback = React.useRef(null);\n React.useEffect(() => {\n if (rippleCallback.current) {\n rippleCallback.current();\n rippleCallback.current = null;\n }\n }, [ripples]);\n\n // Used to filter out mouse emulated events on mobile.\n const ignoringMouseDown = React.useRef(false);\n // We use a timer in order to only show the ripples for touch \"click\" like events.\n // We don't want to display the ripple for touch scroll events.\n const startTimer = useTimeout();\n\n // This is the hook called once the previous timeout is ready.\n const startTimerCommit = React.useRef(null);\n const container = React.useRef(null);\n const startCommit = React.useCallback(params => {\n const {\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n } = params;\n setRipples(oldRipples => [...oldRipples, /*#__PURE__*/_jsx(TouchRippleRipple, {\n classes: {\n ripple: clsx(classes.ripple, touchRippleClasses.ripple),\n rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),\n ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),\n child: clsx(classes.child, touchRippleClasses.child),\n childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),\n childPulsate: clsx(classes.childPulsate, touchRippleClasses.childPulsate)\n },\n timeout: DURATION,\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize\n }, nextKey.current)]);\n nextKey.current += 1;\n rippleCallback.current = cb;\n }, [classes]);\n const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {\n const {\n pulsate = false,\n center = centerProp || options.pulsate,\n fakeElement = false // For test purposes\n } = options;\n if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {\n ignoringMouseDown.current = false;\n return;\n }\n if ((event == null ? void 0 : event.type) === 'touchstart') {\n ignoringMouseDown.current = true;\n }\n const element = fakeElement ? null : container.current;\n const rect = element ? element.getBoundingClientRect() : {\n width: 0,\n height: 0,\n left: 0,\n top: 0\n };\n\n // Get the size of the ripple\n let rippleX;\n let rippleY;\n let rippleSize;\n if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {\n rippleX = Math.round(rect.width / 2);\n rippleY = Math.round(rect.height / 2);\n } else {\n const {\n clientX,\n clientY\n } = event.touches && event.touches.length > 0 ? event.touches[0] : event;\n rippleX = Math.round(clientX - rect.left);\n rippleY = Math.round(clientY - rect.top);\n }\n if (center) {\n rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);\n\n // For some reason the animation is broken on Mobile Chrome if the size is even.\n if (rippleSize % 2 === 0) {\n rippleSize += 1;\n }\n } else {\n const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);\n }\n\n // Touche devices\n if (event != null && event.touches) {\n // check that this isn't another touchstart due to multitouch\n // otherwise we will only clear a single timer when unmounting while two\n // are running\n if (startTimerCommit.current === null) {\n // Prepare the ripple effect.\n startTimerCommit.current = () => {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n };\n // Delay the execution of the ripple effect.\n // We have to make a tradeoff with this delay value.\n startTimer.start(DELAY_RIPPLE, () => {\n if (startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n }\n });\n }\n } else {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n }\n }, [centerProp, startCommit, startTimer]);\n const pulsate = React.useCallback(() => {\n start({}, {\n pulsate: true\n });\n }, [start]);\n const stop = React.useCallback((event, cb) => {\n startTimer.clear();\n\n // The touch interaction occurs too quickly.\n // We still want to show ripple effect.\n if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n startTimer.start(0, () => {\n stop(event, cb);\n });\n return;\n }\n startTimerCommit.current = null;\n setRipples(oldRipples => {\n if (oldRipples.length > 0) {\n return oldRipples.slice(1);\n }\n return oldRipples;\n });\n rippleCallback.current = cb;\n }, [startTimer]);\n React.useImperativeHandle(ref, () => ({\n pulsate,\n start,\n stop\n }), [pulsate, start, stop]);\n return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({\n className: clsx(touchRippleClasses.root, classes.root, className),\n ref: container\n }, other, {\n children: /*#__PURE__*/_jsx(TransitionGroup, {\n component: null,\n exit: true,\n children: ripples\n })\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? TouchRipple.propTypes = {\n /**\n * If `true`, the ripple starts at the center of the component\n * rather than at the point of interaction.\n */\n center: PropTypes.bool,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string\n} : void 0;\nexport default TouchRipple;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getButtonBaseUtilityClass(slot) {\n return generateUtilityClass('MuiButtonBase', slot);\n}\nconst buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);\nexport default buttonBaseClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"action\", \"centerRipple\", \"children\", \"className\", \"component\", \"disabled\", \"disableRipple\", \"disableTouchRipple\", \"focusRipple\", \"focusVisibleClassName\", \"LinkComponent\", \"onBlur\", \"onClick\", \"onContextMenu\", \"onDragLeave\", \"onFocus\", \"onFocusVisible\", \"onKeyDown\", \"onKeyUp\", \"onMouseDown\", \"onMouseLeave\", \"onMouseUp\", \"onTouchEnd\", \"onTouchMove\", \"onTouchStart\", \"tabIndex\", \"TouchRippleProps\", \"touchRippleRef\", \"type\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport refType from '@mui/utils/refType';\nimport elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';\nimport composeClasses from '@mui/utils/composeClasses';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport useForkRef from '../utils/useForkRef';\nimport useEventCallback from '../utils/useEventCallback';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport TouchRipple from './TouchRipple';\nimport buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n disabled,\n focusVisible,\n focusVisibleClassName,\n classes\n } = ownerState;\n const slots = {\n root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']\n };\n const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);\n if (focusVisible && focusVisibleClassName) {\n composedClasses.root += ` ${focusVisibleClassName}`;\n }\n return composedClasses;\n};\nexport const ButtonBaseRoot = styled('button', {\n name: 'MuiButtonBase',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n MozAppearance: 'none',\n // Reset\n WebkitAppearance: 'none',\n // Reset\n textDecoration: 'none',\n // So we take precedent over the style of a native element.\n color: 'inherit',\n '&::-moz-focus-inner': {\n borderStyle: 'none' // Remove Firefox dotted outline.\n },\n [`&.${buttonBaseClasses.disabled}`]: {\n pointerEvents: 'none',\n // Disable link interactions\n cursor: 'default'\n },\n '@media print': {\n colorAdjust: 'exact'\n }\n});\n\n/**\n * `ButtonBase` contains as few styles as possible.\n * It aims to be a simple building block for creating a button.\n * It contains a load of style reset and some focus/ripple logic.\n */\nconst ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiButtonBase'\n });\n const {\n action,\n centerRipple = false,\n children,\n className,\n component = 'button',\n disabled = false,\n disableRipple = false,\n disableTouchRipple = false,\n focusRipple = false,\n LinkComponent = 'a',\n onBlur,\n onClick,\n onContextMenu,\n onDragLeave,\n onFocus,\n onFocusVisible,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseLeave,\n onMouseUp,\n onTouchEnd,\n onTouchMove,\n onTouchStart,\n tabIndex = 0,\n TouchRippleProps,\n touchRippleRef,\n type\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const buttonRef = React.useRef(null);\n const rippleRef = React.useRef(null);\n const handleRippleRef = useForkRef(rippleRef, touchRippleRef);\n const {\n isFocusVisibleRef,\n onFocus: handleFocusVisible,\n onBlur: handleBlurVisible,\n ref: focusVisibleRef\n } = useIsFocusVisible();\n const [focusVisible, setFocusVisible] = React.useState(false);\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n React.useImperativeHandle(action, () => ({\n focusVisible: () => {\n setFocusVisible(true);\n buttonRef.current.focus();\n }\n }), []);\n const [mountedState, setMountedState] = React.useState(false);\n React.useEffect(() => {\n setMountedState(true);\n }, []);\n const enableTouchRipple = mountedState && !disableRipple && !disabled;\n React.useEffect(() => {\n if (focusVisible && focusRipple && !disableRipple && mountedState) {\n rippleRef.current.pulsate();\n }\n }, [disableRipple, focusRipple, focusVisible, mountedState]);\n function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {\n return useEventCallback(event => {\n if (eventCallback) {\n eventCallback(event);\n }\n const ignore = skipRippleAction;\n if (!ignore && rippleRef.current) {\n rippleRef.current[rippleAction](event);\n }\n return true;\n });\n }\n const handleMouseDown = useRippleHandler('start', onMouseDown);\n const handleContextMenu = useRippleHandler('stop', onContextMenu);\n const handleDragLeave = useRippleHandler('stop', onDragLeave);\n const handleMouseUp = useRippleHandler('stop', onMouseUp);\n const handleMouseLeave = useRippleHandler('stop', event => {\n if (focusVisible) {\n event.preventDefault();\n }\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n });\n const handleTouchStart = useRippleHandler('start', onTouchStart);\n const handleTouchEnd = useRippleHandler('stop', onTouchEnd);\n const handleTouchMove = useRippleHandler('stop', onTouchMove);\n const handleBlur = useRippleHandler('stop', event => {\n handleBlurVisible(event);\n if (isFocusVisibleRef.current === false) {\n setFocusVisible(false);\n }\n if (onBlur) {\n onBlur(event);\n }\n }, false);\n const handleFocus = useEventCallback(event => {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!buttonRef.current) {\n buttonRef.current = event.currentTarget;\n }\n handleFocusVisible(event);\n if (isFocusVisibleRef.current === true) {\n setFocusVisible(true);\n if (onFocusVisible) {\n onFocusVisible(event);\n }\n }\n if (onFocus) {\n onFocus(event);\n }\n });\n const isNonNativeButton = () => {\n const button = buttonRef.current;\n return component && component !== 'button' && !(button.tagName === 'A' && button.href);\n };\n\n /**\n * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat\n */\n const keydownRef = React.useRef(false);\n const handleKeyDown = useEventCallback(event => {\n // Check if key is already down to avoid repeats being counted as multiple activations\n if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {\n keydownRef.current = true;\n rippleRef.current.stop(event, () => {\n rippleRef.current.start(event);\n });\n }\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {\n event.preventDefault();\n }\n if (onKeyDown) {\n onKeyDown(event);\n }\n\n // Keyboard accessibility for non interactive elements\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {\n event.preventDefault();\n if (onClick) {\n onClick(event);\n }\n }\n });\n const handleKeyUp = useEventCallback(event => {\n // calling preventDefault in keyUp on a \r\n \r\n \r\n \r\n \r\n );\r\n};\r\nexport default Form;\r\n","import * as React from 'react';\nimport {useState, useCallback, useMemo, useContext} from 'react';\n\nimport {MapRef} from '../mapbox/create-ref';\nimport {MapContext} from './map';\nimport {MapInstance} from '../types';\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(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 \n {props.children}\n \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';\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, ViewState} from '../types';\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 = props.viewState || props;\n let changed = false;\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 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 return changed;\n}\n","import {ImmutableLike, MapStyle} from '../types';\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 | MapStyle | ImmutableLike\n): string | MapStyle {\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 Transform,\n ViewState,\n ViewStateChangeEvent,\n Point,\n PointLike,\n PaddingOptions,\n MapStyle,\n ImmutableLike,\n LngLatBoundsLike,\n Callbacks,\n MapEvent,\n ErrorEvent,\n MapMouseEvent,\n MapGeoJSONFeature,\n MapInstance,\n MapInstanceInternal\n} from '../types';\n\nexport type MapboxProps<\n StyleT extends MapStyle = MapStyle,\n CallbacksT extends Callbacks = {}\n> = Partial &\n CallbacksT & {\n // Init options\n mapboxAccessToken?: string;\n\n /** Camera options used when constructing the Map instance */\n initialViewState?: Partial & {\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 | StyleT | ImmutableLike;\n /** Enable diffing when the map style changes\n * @default true\n */\n styleDiffing?: boolean;\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?: StyleT['fog'];\n /** Light properties of the map. */\n light?: StyleT['light'];\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?: StyleT['terrain'];\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 MapStyle;\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 StyleT extends MapStyle = MapStyle,\n CallbacksT extends Callbacks = {},\n MapT extends MapInstance = MapInstance\n> {\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(): MapT {\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(\n props: MapboxProps,\n container: HTMLDivElement\n ): Mapbox {\n const that = Mapbox.savedMaps.pop() as Mapbox;\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 // With maplibre-gl as mapLib, map uses ResizeObserver to observe when its container resizes.\n // When reusing the saved map, we need to disconnect the observer and observe the new container.\n // Step 3: telling the ResizeObserver to disconnect and observe the new container\n // @ts-ignore\n const resizeObserver = map._resizeObserver;\n if (resizeObserver) {\n resizeObserver.disconnect();\n resizeObserver.observe(container);\n }\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 const renderMap = map._render;\n map._render = (arg: number) => {\n this._inRender = true;\n renderMap.call(map, arg);\n this._inRender = false;\n };\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 | 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 accessToken = accessToken || process.env.MapboxAccessToken;\n } catch {\n // ignore\n }\n\n try {\n accessToken = accessToken || process.env.REACT_APP_MAPBOX_ACCESS_TOKEN;\n } catch {\n // ignore\n }\n\n return accessToken;\n}\n","import type {\n MapInstance,\n MapInstanceInternal,\n MapStyle,\n Callbacks,\n LngLatLike,\n PointLike\n} from '../types';\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(): MapT;\n} & Omit;\n\nexport default function createRef<\n StyleT extends MapStyle,\n CallbacksT extends Callbacks,\n MapT extends MapInstance\n>(mapInstance: Mapbox): MapRef | null {\n if (!mapInstance) {\n return null;\n }\n\n const map = mapInstance.map as MapInstanceInternal;\n const result: any = {\n getMap: () => 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 result) && !skipMethods.includes(key)) {\n result[key] = map[key].bind(map);\n }\n }\n\n return result;\n}\n\nfunction getMethodNames(obj: Object) {\n const result = new Set();\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","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, MapInstance, MapStyle, Callbacks} from '../types';\n\nexport type MapContextValue = {\n mapLib: MapLib;\n map: MapRef;\n};\n\nexport const MapContext = React.createContext(null);\n\ntype MapInitOptions = Omit<\n MapOptions,\n 'style' | 'container' | 'bounds' | 'fitBoundsOptions' | 'center'\n>;\n\nexport type MapProps<\n MapOptions,\n StyleT extends MapStyle,\n CallbacksT extends Callbacks,\n MapT extends MapInstance\n> = MapInitOptions &\n MapboxProps &\n GlobalSettings & {\n mapLib?: MapLib | Promise>;\n reuseMaps?: boolean;\n /** Map container id */\n id?: string;\n /** Map container CSS style */\n style?: CSSProperties;\n children?: any;\n };\n\nexport default function Map<\n MapOptions,\n StyleT extends MapStyle,\n CallbacksT extends Callbacks,\n MapT extends MapInstance\n>(\n props: MapProps,\n ref: React.Ref>,\n defaultLib: MapLib | Promise>\n) {\n const mountedMapsContext = useContext(MountedMapsContext);\n const [mapInstance, setMapInstance] = useState>(null);\n const containerRef = useRef();\n\n const {current: contextValue} = useRef>({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 || defaultLib)\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 // workerUrl & workerClass may change the result of supported()\n // https://github.com/visgl/react-map-gl/discussions/2027\n setGlobals(mapboxgl, props);\n if (!mapboxgl.supported || mapboxgl.supported(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 } else {\n throw new Error('Map is not supported by this browser');\n }\n })\n .catch(error => {\n const {onError} = props;\n if (onError) {\n onError({\n type: 'error',\n target: null,\n originalEvent: null,\n 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 \n {mapInstance && (\n
\n \n {props.children}\n
\n \n )}\n
\n \n \n\n \n \n
\n \n );\n}\n\nexport default App; // Export the App component\n","export default function _checkPrivateRedeclaration(obj, privateCollection) {\n if (privateCollection.has(obj)) {\n throw new TypeError(\"Cannot initialize the same private elements twice on an object\");\n }\n}","import checkPrivateRedeclaration from \"./checkPrivateRedeclaration.js\";\nexport default function _classPrivateFieldInitSpec(obj, privateMap, value) {\n checkPrivateRedeclaration(obj, privateMap);\n privateMap.set(obj, value);\n}","export default function _assertClassBrand(e, t, n) {\n if (\"function\" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;\n throw new TypeError(\"Private element is not present on this object\");\n}","import assertClassBrand from \"./assertClassBrand.js\";\nexport default function _classPrivateFieldGet2(s, a) {\n return s.get(assertClassBrand(s, a));\n}","import assertClassBrand from \"./assertClassBrand.js\";\nexport default function _classPrivateFieldSet2(s, a, r) {\n return s.set(assertClassBrand(s, a), r), r;\n}","import type { Mutation } from './mutation'\nimport type { Query } from './query'\nimport type {\n FetchStatus,\n MutationKey,\n MutationStatus,\n QueryKey,\n QueryOptions,\n} from './types'\n\n// TYPES\n\nexport interface QueryFilters {\n /**\n * Filter to active queries, inactive queries or all queries\n */\n type?: QueryTypeFilter\n /**\n * Match query key exactly\n */\n exact?: boolean\n /**\n * Include queries matching this predicate function\n */\n predicate?: (query: Query) => boolean\n /**\n * Include queries matching this query key\n */\n queryKey?: QueryKey\n /**\n * Include or exclude stale queries\n */\n stale?: boolean\n /**\n * Include queries matching their fetchStatus\n */\n fetchStatus?: FetchStatus\n}\n\nexport interface MutationFilters {\n /**\n * Match mutation key exactly\n */\n exact?: boolean\n /**\n * Include mutations matching this predicate function\n */\n predicate?: (mutation: Mutation) => boolean\n /**\n * Include mutations matching this mutation key\n */\n mutationKey?: MutationKey\n /**\n * Filter by mutation status\n */\n status?: MutationStatus\n}\n\nexport type Updater = TOutput | ((input: TInput) => TOutput)\n\nexport type QueryTypeFilter = 'all' | 'active' | 'inactive'\n\n// UTILS\n\nexport const isServer = typeof window === 'undefined' || 'Deno' in globalThis\n\nexport function noop(): undefined {\n return undefined\n}\n\nexport function functionalUpdate(\n updater: Updater,\n input: TInput,\n): TOutput {\n return typeof updater === 'function'\n ? (updater as (_: TInput) => TOutput)(input)\n : updater\n}\n\nexport function isValidTimeout(value: unknown): value is number {\n return typeof value === 'number' && value >= 0 && value !== Infinity\n}\n\nexport function timeUntilStale(updatedAt: number, staleTime?: number): number {\n return Math.max(updatedAt + (staleTime || 0) - Date.now(), 0)\n}\n\nexport function matchQuery(\n filters: QueryFilters,\n query: Query,\n): boolean {\n const {\n type = 'all',\n exact,\n fetchStatus,\n predicate,\n queryKey,\n stale,\n } = filters\n\n if (queryKey) {\n if (exact) {\n if (query.queryHash !== hashQueryKeyByOptions(queryKey, query.options)) {\n return false\n }\n } else if (!partialMatchKey(query.queryKey, queryKey)) {\n return false\n }\n }\n\n if (type !== 'all') {\n const isActive = query.isActive()\n if (type === 'active' && !isActive) {\n return false\n }\n if (type === 'inactive' && isActive) {\n return false\n }\n }\n\n if (typeof stale === 'boolean' && query.isStale() !== stale) {\n return false\n }\n\n if (fetchStatus && fetchStatus !== query.state.fetchStatus) {\n return false\n }\n\n if (predicate && !predicate(query)) {\n return false\n }\n\n return true\n}\n\nexport function matchMutation(\n filters: MutationFilters,\n mutation: Mutation,\n): boolean {\n const { exact, status, predicate, mutationKey } = filters\n if (mutationKey) {\n if (!mutation.options.mutationKey) {\n return false\n }\n if (exact) {\n if (hashKey(mutation.options.mutationKey) !== hashKey(mutationKey)) {\n return false\n }\n } else if (!partialMatchKey(mutation.options.mutationKey, mutationKey)) {\n return false\n }\n }\n\n if (status && mutation.state.status !== status) {\n return false\n }\n\n if (predicate && !predicate(mutation)) {\n return false\n }\n\n return true\n}\n\nexport function hashQueryKeyByOptions(\n queryKey: TQueryKey,\n options?: Pick, 'queryKeyHashFn'>,\n): string {\n const hashFn = options?.queryKeyHashFn || hashKey\n return hashFn(queryKey)\n}\n\n/**\n * Default query & mutation keys hash function.\n * Hashes the value into a stable hash.\n */\nexport function hashKey(queryKey: QueryKey | MutationKey): string {\n return JSON.stringify(queryKey, (_, val) =>\n isPlainObject(val)\n ? Object.keys(val)\n .sort()\n .reduce((result, key) => {\n result[key] = val[key]\n return result\n }, {} as any)\n : val,\n )\n}\n\n/**\n * Checks if key `b` partially matches with key `a`.\n */\nexport function partialMatchKey(a: QueryKey, b: QueryKey): boolean\nexport function partialMatchKey(a: any, b: any): boolean {\n if (a === b) {\n return true\n }\n\n if (typeof a !== typeof b) {\n return false\n }\n\n if (a && b && typeof a === 'object' && typeof b === 'object') {\n return !Object.keys(b).some((key) => !partialMatchKey(a[key], b[key]))\n }\n\n return false\n}\n\n/**\n * This function returns `a` if `b` is deeply equal.\n * If not, it will replace any deeply equal children of `b` with those of `a`.\n * This can be used for structural sharing between JSON values for example.\n */\nexport function replaceEqualDeep(a: unknown, b: T): T\nexport function replaceEqualDeep(a: any, b: any): any {\n if (a === b) {\n return a\n }\n\n const array = isPlainArray(a) && isPlainArray(b)\n\n if (array || (isPlainObject(a) && isPlainObject(b))) {\n const aItems = array ? a : Object.keys(a)\n const aSize = aItems.length\n const bItems = array ? b : Object.keys(b)\n const bSize = bItems.length\n const copy: any = array ? [] : {}\n\n let equalItems = 0\n\n for (let i = 0; i < bSize; i++) {\n const key = array ? i : bItems[i]\n if (\n !array &&\n a[key] === undefined &&\n b[key] === undefined &&\n aItems.includes(key)\n ) {\n copy[key] = undefined\n equalItems++\n } else {\n copy[key] = replaceEqualDeep(a[key], b[key])\n if (copy[key] === a[key] && a[key] !== undefined) {\n equalItems++\n }\n }\n }\n\n return aSize === bSize && equalItems === aSize ? a : copy\n }\n\n return b\n}\n\n/**\n * Shallow compare objects.\n */\nexport function shallowEqualObjects>(\n a: T,\n b: T | undefined,\n): boolean {\n if (!b || Object.keys(a).length !== Object.keys(b).length) {\n return false\n }\n\n for (const key in a) {\n if (a[key] !== b[key]) {\n return false\n }\n }\n\n return true\n}\n\nexport function isPlainArray(value: unknown) {\n return Array.isArray(value) && value.length === Object.keys(value).length\n}\n\n// Copied from: https://github.com/jonschlinkert/is-plain-object\nexport function isPlainObject(o: any): o is Object {\n if (!hasObjectPrototype(o)) {\n return false\n }\n\n // If has no constructor\n const ctor = o.constructor\n if (ctor === undefined) {\n return true\n }\n\n // If has modified prototype\n const prot = ctor.prototype\n if (!hasObjectPrototype(prot)) {\n return false\n }\n\n // If constructor does not have an Object-specific method\n if (!prot.hasOwnProperty('isPrototypeOf')) {\n return false\n }\n\n // Most likely a plain Object\n return true\n}\n\nfunction hasObjectPrototype(o: any): boolean {\n return Object.prototype.toString.call(o) === '[object Object]'\n}\n\nexport function sleep(ms: number): Promise {\n return new Promise((resolve) => {\n setTimeout(resolve, ms)\n })\n}\n\nexport function replaceData<\n TData,\n TOptions extends QueryOptions,\n>(prevData: TData | undefined, data: TData, options: TOptions): TData {\n if (typeof options.structuralSharing === 'function') {\n return options.structuralSharing(prevData, data) as TData\n } else if (options.structuralSharing !== false) {\n // Structurally share data between prev and new data if needed\n return replaceEqualDeep(prevData, data)\n }\n return data\n}\n\nexport function keepPreviousData(\n previousData: T | undefined,\n): T | undefined {\n return previousData\n}\n\nexport function addToEnd(items: Array, item: T, max = 0): Array {\n const newItems = [...items, item]\n return max && newItems.length > max ? newItems.slice(1) : newItems\n}\n\nexport function addToStart(items: Array, item: T, max = 0): Array {\n const newItems = [item, ...items]\n return max && newItems.length > max ? newItems.slice(0, -1) : newItems\n}\n\nexport const skipToken = Symbol()\nexport type SkipToken = typeof skipToken\n","import checkPrivateRedeclaration from \"./checkPrivateRedeclaration.js\";\nexport default function _classPrivateMethodInitSpec(obj, privateSet) {\n checkPrivateRedeclaration(obj, privateSet);\n privateSet.add(obj);\n}","// TYPES\n\ntype NotifyCallback = () => void\n\ntype NotifyFunction = (callback: () => void) => void\n\ntype BatchNotifyFunction = (callback: () => void) => void\n\ntype BatchCallsCallback