@itwin/map-layers 4.0.0-dev.7 → 4.0.0

package/lib/cjs/ui/widget/MapLayerManager.js

@@ -1,404 +1,404 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-// cSpell:ignore droppable Sublayer Basemap
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MapLayerManager = exports.useSourceMapContext = exports.SourceMapContext = void 0;
-// the following quiet warning caused by react-beautiful-dnd package
-/* eslint-disable @typescript-eslint/unbound-method */
-const core_bentley_1 = require("@itwin/core-bentley");
-const core_common_1 = require("@itwin/core-common");
-const core_frontend_1 = require("@itwin/core-frontend");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const React = require("react");
-const react_beautiful_dnd_1 = require("react-beautiful-dnd");
-const MapLayerPreferences_1 = require("../../MapLayerPreferences");
-const AttachLayerPopupButton_1 = require("./AttachLayerPopupButton");
-const BasemapPanel_1 = require("./BasemapPanel");
-const MapLayerDroppable_1 = require("./MapLayerDroppable");
-require("./MapLayerManager.scss");
-const MapLayerSettingsPopupButton_1 = require("./MapLayerSettingsPopupButton");
-const mapLayers_1 = require("../../mapLayers");
-/** @internal */
-exports.SourceMapContext = React.createContext({
-    sources: [],
-    loadingSources: false,
-    bases: [],
-    refreshFromStyle: () => { },
-});
-/** @internal */
-function useSourceMapContext() {
-    return React.useContext(exports.SourceMapContext);
-}
-exports.useSourceMapContext = useSourceMapContext;
-function getSubLayerProps(subLayerSettings) {
-    return subLayerSettings.map((subLayer) => subLayer.toJSON());
-}
-function getMapLayerSettingsFromViewport(viewport, getBackgroundMap, populateSubLayers = true) {
-    const displayStyle = viewport.displayStyle;
-    if (!displayStyle)
-        return undefined;
-    const layers = new Array();
-    const displayStyleLayers = (getBackgroundMap ? displayStyle.backgroundMapLayers : displayStyle.overlayMapLayers);
-    for (let layerIndex = 0; layerIndex < displayStyleLayers.length; layerIndex++) {
-        const layerSettings = displayStyleLayers[layerIndex];
-        const isOverlay = !getBackgroundMap;
-        const layerProvider = viewport.getMapLayerImageryProvider(layerIndex, isOverlay);
-        const treeVisibility = viewport.getMapLayerScaleRangeVisibility(layerIndex, isOverlay);
-        const popSubLayers = populateSubLayers && (layerSettings instanceof core_common_1.ImageMapLayerSettings);
-        layers.push({
-            visible: layerSettings.visible,
-            treeVisibility,
-            name: layerSettings.name,
-            source: layerSettings.source,
-            transparency: layerSettings.transparency,
-            transparentBackground: layerSettings.transparentBackground,
-            subLayers: popSubLayers ? getSubLayerProps(layerSettings.subLayers) : undefined,
-            showSubLayers: false,
-            isOverlay,
-            layerIndex,
-            provider: layerProvider,
-        });
-    }
-    // since we want to display higher level maps above lower maps in UI reverse their order here.
-    return layers.reverse();
-}
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function MapLayerManager(props) {
-    var _a, _b;
-    const [mapSources, setMapSources] = React.useState();
-    const [loadingSources, setLoadingSources] = React.useState(false);
-    const [baseSources, setBaseSources] = React.useState();
-    const [overlaysLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Widget.OverlayLayers"));
-    const [underlaysLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Widget.BackgroundLayers"));
-    const { activeViewport, mapLayerOptions } = props;
-    const hideExternalMapLayersSection = (mapLayerOptions === null || mapLayerOptions === void 0 ? void 0 : mapLayerOptions.hideExternalMapLayers) ? mapLayerOptions.hideExternalMapLayers : false;
-    const fetchPublicMapLayerSources = (mapLayerOptions === null || mapLayerOptions === void 0 ? void 0 : mapLayerOptions.fetchPublicMapLayerSources) ? mapLayerOptions.fetchPublicMapLayerSources : false;
-    // map layer settings from display style
-    const [backgroundMapLayers, setBackgroundMapLayers] = React.useState(getMapLayerSettingsFromViewport(activeViewport, true));
-    const [overlayMapLayers, setOverlayMapLayers] = React.useState(getMapLayerSettingsFromViewport(activeViewport, false));
-    const loadMapLayerSettingsFromViewport = React.useCallback((viewport) => {
-        setBackgroundMapLayers(getMapLayerSettingsFromViewport(viewport, true));
-        setOverlayMapLayers(getMapLayerSettingsFromViewport(viewport, false));
-    }, [setBackgroundMapLayers, setOverlayMapLayers]);
-    const [backgroundMapVisible, setBackgroundMapVisible] = React.useState(() => {
-        if (activeViewport) {
-            return activeViewport.viewFlags.backgroundMap;
-        }
-        return false;
-    });
-    React.useEffect(() => {
-        const updateBackgroundMapVisible = () => setBackgroundMapVisible(activeViewport.viewFlags.backgroundMap);
-        return activeViewport.onDisplayStyleChanged.addListener(updateBackgroundMapVisible);
-    }, [activeViewport]);
-    // 'isMounted' is used to prevent any async operation once the hook has been
-    // unloaded.  Otherwise we get a 'Can't perform a React state update on an unmounted component.' warning in the console.
-    const isMounted = React.useRef(false);
-    React.useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    });
-    // Setup onTileTreeLoad events listening.
-    // This is needed because we need to know when the imagery provider
-    // is created, and be able to monitor to status change.
-    React.useEffect(() => {
-        const handleTileTreeLoad = (args) => {
-            // Ignore non-map tile trees
-            if (args.tileTree instanceof core_frontend_1.ImageryMapTileTree) {
-                loadMapLayerSettingsFromViewport(activeViewport);
-            }
-        };
-        core_frontend_1.IModelApp.tileAdmin.onTileTreeLoad.addListener(handleTileTreeLoad);
-        return () => {
-            core_frontend_1.IModelApp.tileAdmin.onTileTreeLoad.removeListener(handleTileTreeLoad);
-        };
-    }, [activeViewport, loadMapLayerSettingsFromViewport]);
-    React.useEffect(() => {
-        const handleScaleRangeVisibilityChanged = (layerIndexes) => {
-            const updateLayers = (array) => {
-                if (array === undefined)
-                    return undefined;
-                return array.map((curStyledLayer) => {
-                    const foundScaleRangeVisibility = layerIndexes.find((layerIdx) => layerIdx.index === curStyledLayer.layerIndex && layerIdx.isOverlay === curStyledLayer.isOverlay);
-                    if (undefined === foundScaleRangeVisibility)
-                        return curStyledLayer;
-                    else
-                        return { ...curStyledLayer, treeVisibility: foundScaleRangeVisibility.visibility };
-                });
-            };
-            setBackgroundMapLayers(updateLayers(backgroundMapLayers));
-            setOverlayMapLayers(updateLayers(overlayMapLayers));
-        };
-        activeViewport.onMapLayerScaleRangeVisibilityChanged.addListener(handleScaleRangeVisibilityChanged);
-        return () => {
-            activeViewport.onMapLayerScaleRangeVisibilityChanged.removeListener(handleScaleRangeVisibilityChanged);
-        };
-    }, [activeViewport, backgroundMapLayers, loadMapLayerSettingsFromViewport, overlayMapLayers]);
-    // Setup onMapImageryChanged events listening.
-    React.useEffect(() => {
-        const handleMapImageryChanged = (args) => {
-            if (args.backgroundLayers.length !== (backgroundMapLayers ? backgroundMapLayers.length : 0)
-                || args.overlayLayers.length !== (overlayMapLayers ? overlayMapLayers.length : 0)) {
-                loadMapLayerSettingsFromViewport(activeViewport);
-            }
-        };
-        activeViewport === null || activeViewport === void 0 ? void 0 : activeViewport.displayStyle.settings.onMapImageryChanged.addListener(handleMapImageryChanged);
-        return () => {
-            activeViewport === null || activeViewport === void 0 ? void 0 : activeViewport.displayStyle.settings.onMapImageryChanged.removeListener(handleMapImageryChanged);
-        };
-    }, [activeViewport, backgroundMapLayers, loadMapLayerSettingsFromViewport, overlayMapLayers]);
-    const handleProviderStatusChanged = React.useCallback((_args) => {
-        loadMapLayerSettingsFromViewport(activeViewport);
-    }, [loadMapLayerSettingsFromViewport, activeViewport]);
-    // Triggered whenever a provider status change
-    React.useEffect(() => {
-        backgroundMapLayers === null || backgroundMapLayers === void 0 ? void 0 : backgroundMapLayers.forEach((layer) => { var _a; (_a = layer.provider) === null || _a === void 0 ? void 0 : _a.onStatusChanged.addListener(handleProviderStatusChanged); });
-        overlayMapLayers === null || overlayMapLayers === void 0 ? void 0 : overlayMapLayers.forEach((layer) => { var _a; (_a = layer.provider) === null || _a === void 0 ? void 0 : _a.onStatusChanged.addListener(handleProviderStatusChanged); });
-        return () => {
-            backgroundMapLayers === null || backgroundMapLayers === void 0 ? void 0 : backgroundMapLayers.forEach((layer) => { var _a; (_a = layer.provider) === null || _a === void 0 ? void 0 : _a.onStatusChanged.removeListener(handleProviderStatusChanged); });
-            overlayMapLayers === null || overlayMapLayers === void 0 ? void 0 : overlayMapLayers.forEach((layer) => { var _a; (_a = layer.provider) === null || _a === void 0 ? void 0 : _a.onStatusChanged.removeListener(handleProviderStatusChanged); });
-        };
-    }, [backgroundMapLayers, overlayMapLayers, activeViewport, loadMapLayerSettingsFromViewport, handleProviderStatusChanged]);
-    // Monitor viewport updates, and refresh the widget accordingly.
-    // Note: This is needed for multiple viewport applications.
-    React.useEffect(() => {
-        // Update background map status
-        setBackgroundMapVisible(activeViewport.viewFlags.backgroundMap);
-        // Refresh list of layers
-        loadMapLayerSettingsFromViewport(activeViewport);
-    }, [activeViewport, loadMapLayerSettingsFromViewport]);
-    React.useEffect(() => {
-        async function fetchWmsMapData() {
-            const sources = [];
-            const bases = [];
-            const sourceLayers = await core_frontend_1.MapLayerSources.create(undefined, (fetchPublicMapLayerSources && !hideExternalMapLayersSection));
-            const iModel = core_frontend_1.IModelApp.viewManager.selectedView ? core_frontend_1.IModelApp.viewManager.selectedView.iModel : undefined;
-            try {
-                const preferenceSources = ((iModel === null || iModel === void 0 ? void 0 : iModel.iTwinId) === undefined
-                    ? []
-                    : await MapLayerPreferences_1.MapLayerPreferences.getSources(iModel === null || iModel === void 0 ? void 0 : iModel.iTwinId, iModel === null || iModel === void 0 ? void 0 : iModel.iModelId));
-                for (const source of preferenceSources)
-                    await core_frontend_1.MapLayerSources.addSourceToMapLayerSources(source);
-            }
-            catch (err) {
-                core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, core_frontend_1.IModelApp.localization.getLocalizedString("mapLayers:CustomAttach.ErrorLoadingLayers"), core_bentley_1.BentleyError.getErrorMessage(err)));
-            }
-            if (!isMounted.current) {
-                return;
-            }
-            // This is where the list of layers first gets populated... I need to update it
-            // MapUrlDialog gets around knowing MapLayerManager exists and vice versa by affecting the viewports displayStyle which MapLayerManager is listening for
-            // We know when displayStyle changes we've added a layer, this layer may not be a custom layer
-            sourceLayers === null || sourceLayers === void 0 ? void 0 : sourceLayers.layers.forEach((source) => { sources.push(source); });
-            setMapSources(sources);
-            sourceLayers === null || sourceLayers === void 0 ? void 0 : sourceLayers.bases.forEach((source) => { bases.push(source); });
-            setBaseSources(bases);
-        }
-        setLoadingSources(true);
-        fetchWmsMapData().then(() => {
-            if (isMounted.current) {
-                setLoadingSources(false);
-            }
-        }).catch(() => {
-            if (isMounted.current) {
-                setLoadingSources(false);
-            }
-        });
-    }, [setMapSources, fetchPublicMapLayerSources, hideExternalMapLayersSection]);
-    const updateMapSources = React.useCallback(() => {
-        var _a, _b;
-        const newSources = [];
-        (_b = (_a = core_frontend_1.MapLayerSources.getInstance()) === null || _a === void 0 ? void 0 : _a.layers) === null || _b === void 0 ? void 0 : _b.forEach((sourceLayer) => { newSources.push(sourceLayer); });
-        setMapSources(newSources);
-    }, [setMapSources]);
-    /**
-    * Handle change events in the MapLayerPreferences
-    */
-    React.useEffect(() => {
-        const handleLayerSourceChange = async (changeType, oldSource, newSource) => {
-            const removeSourceOnly = (changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Removed);
-            const removeSource = (changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Replaced || changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Removed);
-            const addSource = (changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Replaced || changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Added);
-            if (removeSource) {
-                if (oldSource) {
-                    const succeeded = core_frontend_1.MapLayerSources.removeLayerByName(oldSource.name);
-                    (0, core_bentley_1.assert)(succeeded);
-                    if (!succeeded) {
-                        return;
-                    }
-                    if (removeSourceOnly) {
-                        updateMapSources();
-                        return;
-                    }
-                }
-            }
-            if (addSource) {
-                const sources = await core_frontend_1.MapLayerSources.addSourceToMapLayerSources(newSource);
-                (0, core_bentley_1.assert)(sources !== undefined);
-                if (sources) {
-                    updateMapSources();
-                }
-            }
-        };
-        MapLayerPreferences_1.MapLayerPreferences.onLayerSourceChanged.addListener(handleLayerSourceChange);
-        return (() => {
-            MapLayerPreferences_1.MapLayerPreferences.onLayerSourceChanged.removeListener(handleLayerSourceChange);
-        });
-    }, [updateMapSources]);
-    // update when a different display style is loaded.
-    React.useEffect(() => {
-        const handleDisplayStyleChange = (vp) => {
-            loadMapLayerSettingsFromViewport(vp);
-        };
-        activeViewport === null || activeViewport === void 0 ? void 0 : activeViewport.onDisplayStyleChanged.addListener(handleDisplayStyleChange);
-        return () => {
-            activeViewport === null || activeViewport === void 0 ? void 0 : activeViewport.onDisplayStyleChanged.removeListener(handleDisplayStyleChange);
-        };
-    }, [activeViewport, loadMapLayerSettingsFromViewport]);
-    const handleOnMenuItemSelection = React.useCallback((action, mapLayerSettings) => {
-        if (!activeViewport || !activeViewport.displayStyle)
-            return;
-        const indexInDisplayStyle = activeViewport.displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);
-        if (indexInDisplayStyle < 0)
-            return;
-        switch (action) {
-            case "delete":
-                activeViewport.displayStyle.detachMapLayerByIndex(indexInDisplayStyle, mapLayerSettings.isOverlay);
-                break;
-            case "zoom-to-layer":
-                activeViewport.displayStyle.viewMapLayerRange(indexInDisplayStyle, mapLayerSettings.isOverlay, activeViewport).then((status) => {
-                    if (!status) {
-                        const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.NoRangeDefined");
-                        core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, `${msg} [${mapLayerSettings.name}]`));
-                    }
-                }).catch((_error) => { });
-                break;
-        }
-        activeViewport.invalidateRenderPlan();
-        // force UI to update
-        loadMapLayerSettingsFromViewport(activeViewport);
-    }, [activeViewport, loadMapLayerSettingsFromViewport]);
-    const handleLayerVisibilityChange = React.useCallback((mapLayerSettings) => {
-        if (activeViewport) {
-            const isVisible = !mapLayerSettings.visible;
-            const displayStyle = activeViewport.displayStyle;
-            const indexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);
-            if (-1 !== indexInDisplayStyle) {
-                // update the display style
-                displayStyle.changeMapLayerProps({ visible: isVisible }, indexInDisplayStyle, mapLayerSettings.isOverlay);
-                activeViewport.invalidateRenderPlan();
-                // force UI to update
-                loadMapLayerSettingsFromViewport(activeViewport);
-            }
-        }
-    }, [activeViewport, loadMapLayerSettingsFromViewport]);
-    const handleMapLayersToggle = React.useCallback(() => {
-        if (activeViewport) {
-            const newState = !backgroundMapVisible;
-            activeViewport.viewFlags = activeViewport.viewFlags.with("backgroundMap", newState);
-            setBackgroundMapVisible(newState);
-        }
-    }, [backgroundMapVisible, setBackgroundMapVisible, activeViewport]);
-    const handleOnMapLayerDragEnd = React.useCallback((result /* ,  _provided: ResponderProvided*/) => {
-        const { destination, source } = result;
-        if (!destination) // dropped outside of list
-            return;
-        // item was not moved
-        if (destination.droppableId === source.droppableId && destination.index === source.index)
-            return;
-        let fromMapLayer;
-        if (source.droppableId === "overlayMapLayers" && overlayMapLayers)
-            fromMapLayer = overlayMapLayers[source.index];
-        else if (source.droppableId === "backgroundMapLayers" && backgroundMapLayers)
-            fromMapLayer = backgroundMapLayers[source.index];
-        if (!fromMapLayer || !activeViewport)
-            return;
-        const displayStyle = activeViewport.displayStyle;
-        let toMapLayer;
-        let toIndexInDisplayStyle = -1;
-        // If destination.index is undefined then the user dropped the map at the end of list of maps. To get the "actual" index in the style, look up index in style by name.
-        // We need to do this because the order of layers in UI are reversed so higher layers appear above lower layers.
-        if (undefined !== destination.index) {
-            if (destination.droppableId === "overlayMapLayers" && overlayMapLayers)
-                toMapLayer = overlayMapLayers[destination.index];
-            else if (destination.droppableId === "backgroundMapLayers" && backgroundMapLayers)
-                toMapLayer = backgroundMapLayers[destination.index];
-            if (toMapLayer)
-                toIndexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(toMapLayer.name, toMapLayer.source, toMapLayer.isOverlay);
-        }
-        const fromIndexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(fromMapLayer.name, fromMapLayer.source, fromMapLayer.isOverlay);
-        if (fromIndexInDisplayStyle < 0)
-            return;
-        if (destination.droppableId !== source.droppableId) {
-            // see if we moved from "overlayMapLayers" to "backgroundMapLayers" or vice-versa
-            const settings = activeViewport.displayStyle.mapLayerAtIndex(fromIndexInDisplayStyle, fromMapLayer.isOverlay);
-            if (settings) {
-                activeViewport.displayStyle.detachMapLayerByIndex(fromIndexInDisplayStyle, fromMapLayer.isOverlay);
-                // Manually reverse index when moved from one section to the other
-                if (fromMapLayer.isOverlay && backgroundMapLayers) {
-                    toIndexInDisplayStyle = displayStyle.backgroundMapLayers.length - destination.index;
-                }
-                else if (!fromMapLayer.isOverlay && overlayMapLayers) {
-                    toIndexInDisplayStyle = overlayMapLayers.length - destination.index;
-                }
-                activeViewport.displayStyle.attachMapLayer({ settings, isOverlay: !fromMapLayer.isOverlay, insertIndex: toIndexInDisplayStyle });
-            }
-        }
-        else {
-            if (undefined === destination.index) {
-                displayStyle.moveMapLayerToBottom(fromIndexInDisplayStyle, destination.droppableId === "overlayMapLayers");
-            }
-            else {
-                if (toMapLayer) {
-                    if (toIndexInDisplayStyle !== -1)
-                        displayStyle.moveMapLayerToIndex(fromIndexInDisplayStyle, toIndexInDisplayStyle, toMapLayer.isOverlay);
-                }
-            }
-        }
-        // apply display style change to view
-        activeViewport.invalidateRenderPlan();
-        // force UI to update
-        loadMapLayerSettingsFromViewport(activeViewport);
-    }, [loadMapLayerSettingsFromViewport, activeViewport, overlayMapLayers, backgroundMapLayers]);
-    const handleRefreshFromStyle = React.useCallback(() => {
-        if (activeViewport)
-            loadMapLayerSettingsFromViewport(activeViewport);
-    }, [activeViewport, loadMapLayerSettingsFromViewport]);
-    const [baseMapPanelLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Basemap.BaseMapPanelTitle"));
-    return (React.createElement(exports.SourceMapContext.Provider, { value: {
-            activeViewport,
-            loadingSources,
-            sources: mapSources ? mapSources : [],
-            bases: baseSources ? baseSources : [],
-            refreshFromStyle: handleRefreshFromStyle,
-            backgroundLayers: backgroundMapLayers,
-            overlayLayers: overlayMapLayers,
-            mapLayerOptions,
-        } },
-        React.createElement("div", { className: "map-manager-top-header" },
-            React.createElement("span", { className: "map-manager-header-label" }, baseMapPanelLabel),
-            React.createElement("div", { className: "map-manager-header-buttons-group" },
-                React.createElement(itwinui_react_1.ToggleSwitch, { className: "map-manager-toggle", checked: backgroundMapVisible, onChange: handleMapLayersToggle }),
-                React.createElement(MapLayerSettingsPopupButton_1.MapLayerSettingsPopupButton, { disabled: !backgroundMapVisible }))),
-        React.createElement("div", { className: "map-manager-container" },
-            React.createElement("div", { className: "map-manager-basemap" },
-                React.createElement(BasemapPanel_1.BasemapPanel, { disabled: !backgroundMapVisible })),
-            !hideExternalMapLayersSection &&
-                React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: handleOnMapLayerDragEnd },
-                    React.createElement("div", { className: "map-manager-layer-wrapper" },
-                        React.createElement("div", { className: "map-manager-underlays" },
-                            React.createElement("span", { className: "map-manager-underlays-label" }, underlaysLabel),
-                            React.createElement(AttachLayerPopupButton_1.AttachLayerPopupButton, { disabled: !backgroundMapVisible, isOverlay: false })),
-                        React.createElement(MapLayerDroppable_1.MapLayerDroppable, { disabled: !backgroundMapVisible, isOverlay: false, layersList: backgroundMapLayers, mapTypesOptions: (_a = props.mapLayerOptions) === null || _a === void 0 ? void 0 : _a.mapTypeOptions, getContainerForClone: props.getContainerForClone, activeViewport: props.activeViewport, onMenuItemSelected: handleOnMenuItemSelection, onItemVisibilityToggleClicked: handleLayerVisibilityChange, onItemEdited: handleRefreshFromStyle })),
-                    React.createElement("div", { className: "map-manager-layer-wrapper" },
-                        React.createElement("div", { className: "map-manager-overlays" },
-                            React.createElement("span", { className: "map-manager-overlays-label" }, overlaysLabel),
-                            React.createElement(AttachLayerPopupButton_1.AttachLayerPopupButton, { disabled: !backgroundMapVisible, isOverlay: true })),
-                        React.createElement(MapLayerDroppable_1.MapLayerDroppable, { disabled: !backgroundMapVisible, isOverlay: true, layersList: overlayMapLayers, mapTypesOptions: (_b = props.mapLayerOptions) === null || _b === void 0 ? void 0 : _b.mapTypeOptions, getContainerForClone: props.getContainerForClone, activeViewport: props.activeViewport, onMenuItemSelected: handleOnMenuItemSelection, onItemVisibilityToggleClicked: handleLayerVisibilityChange, onItemEdited: handleRefreshFromStyle }))))));
-}
-exports.MapLayerManager = MapLayerManager;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+// cSpell:ignore droppable Sublayer Basemap
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapLayerManager = exports.useSourceMapContext = exports.SourceMapContext = void 0;
+// the following quiet warning caused by react-beautiful-dnd package
+/* eslint-disable @typescript-eslint/unbound-method */
+const core_bentley_1 = require("@itwin/core-bentley");
+const core_common_1 = require("@itwin/core-common");
+const core_frontend_1 = require("@itwin/core-frontend");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const React = require("react");
+const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const MapLayerPreferences_1 = require("../../MapLayerPreferences");
+const AttachLayerPopupButton_1 = require("./AttachLayerPopupButton");
+const BasemapPanel_1 = require("./BasemapPanel");
+const MapLayerDroppable_1 = require("./MapLayerDroppable");
+require("./MapLayerManager.scss");
+const MapLayerSettingsPopupButton_1 = require("./MapLayerSettingsPopupButton");
+const mapLayers_1 = require("../../mapLayers");
+/** @internal */
+exports.SourceMapContext = React.createContext({
+    sources: [],
+    loadingSources: false,
+    bases: [],
+    refreshFromStyle: () => { },
+});
+/** @internal */
+function useSourceMapContext() {
+    return React.useContext(exports.SourceMapContext);
+}
+exports.useSourceMapContext = useSourceMapContext;
+function getSubLayerProps(subLayerSettings) {
+    return subLayerSettings.map((subLayer) => subLayer.toJSON());
+}
+function getMapLayerSettingsFromViewport(viewport, getBackgroundMap, populateSubLayers = true) {
+    const displayStyle = viewport.displayStyle;
+    if (!displayStyle)
+        return undefined;
+    const layers = new Array();
+    const displayStyleLayers = (getBackgroundMap ? displayStyle.backgroundMapLayers : displayStyle.overlayMapLayers);
+    for (let layerIndex = 0; layerIndex < displayStyleLayers.length; layerIndex++) {
+        const layerSettings = displayStyleLayers[layerIndex];
+        const isOverlay = !getBackgroundMap;
+        const layerProvider = viewport.getMapLayerImageryProvider(layerIndex, isOverlay);
+        const treeVisibility = viewport.getMapLayerScaleRangeVisibility(layerIndex, isOverlay);
+        const popSubLayers = populateSubLayers && (layerSettings instanceof core_common_1.ImageMapLayerSettings);
+        layers.push({
+            visible: layerSettings.visible,
+            treeVisibility,
+            name: layerSettings.name,
+            source: layerSettings.source,
+            transparency: layerSettings.transparency,
+            transparentBackground: layerSettings.transparentBackground,
+            subLayers: popSubLayers ? getSubLayerProps(layerSettings.subLayers) : undefined,
+            showSubLayers: false,
+            isOverlay,
+            layerIndex,
+            provider: layerProvider,
+        });
+    }
+    // since we want to display higher level maps above lower maps in UI reverse their order here.
+    return layers.reverse();
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function MapLayerManager(props) {
+    var _a, _b;
+    const [mapSources, setMapSources] = React.useState();
+    const [loadingSources, setLoadingSources] = React.useState(false);
+    const [baseSources, setBaseSources] = React.useState();
+    const [overlaysLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Widget.OverlayLayers"));
+    const [underlaysLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Widget.BackgroundLayers"));
+    const { activeViewport, mapLayerOptions } = props;
+    const hideExternalMapLayersSection = (mapLayerOptions === null || mapLayerOptions === void 0 ? void 0 : mapLayerOptions.hideExternalMapLayers) ? mapLayerOptions.hideExternalMapLayers : false;
+    const fetchPublicMapLayerSources = (mapLayerOptions === null || mapLayerOptions === void 0 ? void 0 : mapLayerOptions.fetchPublicMapLayerSources) ? mapLayerOptions.fetchPublicMapLayerSources : false;
+    // map layer settings from display style
+    const [backgroundMapLayers, setBackgroundMapLayers] = React.useState(getMapLayerSettingsFromViewport(activeViewport, true));
+    const [overlayMapLayers, setOverlayMapLayers] = React.useState(getMapLayerSettingsFromViewport(activeViewport, false));
+    const loadMapLayerSettingsFromViewport = React.useCallback((viewport) => {
+        setBackgroundMapLayers(getMapLayerSettingsFromViewport(viewport, true));
+        setOverlayMapLayers(getMapLayerSettingsFromViewport(viewport, false));
+    }, [setBackgroundMapLayers, setOverlayMapLayers]);
+    const [backgroundMapVisible, setBackgroundMapVisible] = React.useState(() => {
+        if (activeViewport) {
+            return activeViewport.viewFlags.backgroundMap;
+        }
+        return false;
+    });
+    React.useEffect(() => {
+        const updateBackgroundMapVisible = () => setBackgroundMapVisible(activeViewport.viewFlags.backgroundMap);
+        return activeViewport.onDisplayStyleChanged.addListener(updateBackgroundMapVisible);
+    }, [activeViewport]);
+    // 'isMounted' is used to prevent any async operation once the hook has been
+    // unloaded.  Otherwise we get a 'Can't perform a React state update on an unmounted component.' warning in the console.
+    const isMounted = React.useRef(false);
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    });
+    // Setup onTileTreeLoad events listening.
+    // This is needed because we need to know when the imagery provider
+    // is created, and be able to monitor to status change.
+    React.useEffect(() => {
+        const handleTileTreeLoad = (args) => {
+            // Ignore non-map tile trees
+            if (args.tileTree instanceof core_frontend_1.ImageryMapTileTree) {
+                loadMapLayerSettingsFromViewport(activeViewport);
+            }
+        };
+        core_frontend_1.IModelApp.tileAdmin.onTileTreeLoad.addListener(handleTileTreeLoad);
+        return () => {
+            core_frontend_1.IModelApp.tileAdmin.onTileTreeLoad.removeListener(handleTileTreeLoad);
+        };
+    }, [activeViewport, loadMapLayerSettingsFromViewport]);
+    React.useEffect(() => {
+        const handleScaleRangeVisibilityChanged = (layerIndexes) => {
+            const updateLayers = (array) => {
+                if (array === undefined)
+                    return undefined;
+                return array.map((curStyledLayer) => {
+                    const foundScaleRangeVisibility = layerIndexes.find((layerIdx) => layerIdx.index === curStyledLayer.layerIndex && layerIdx.isOverlay === curStyledLayer.isOverlay);
+                    if (undefined === foundScaleRangeVisibility)
+                        return curStyledLayer;
+                    else
+                        return { ...curStyledLayer, treeVisibility: foundScaleRangeVisibility.visibility };
+                });
+            };
+            setBackgroundMapLayers(updateLayers(backgroundMapLayers));
+            setOverlayMapLayers(updateLayers(overlayMapLayers));
+        };
+        activeViewport.onMapLayerScaleRangeVisibilityChanged.addListener(handleScaleRangeVisibilityChanged);
+        return () => {
+            activeViewport.onMapLayerScaleRangeVisibilityChanged.removeListener(handleScaleRangeVisibilityChanged);
+        };
+    }, [activeViewport, backgroundMapLayers, loadMapLayerSettingsFromViewport, overlayMapLayers]);
+    // Setup onMapImageryChanged events listening.
+    React.useEffect(() => {
+        const handleMapImageryChanged = (args) => {
+            if (args.backgroundLayers.length !== (backgroundMapLayers ? backgroundMapLayers.length : 0)
+                || args.overlayLayers.length !== (overlayMapLayers ? overlayMapLayers.length : 0)) {
+                loadMapLayerSettingsFromViewport(activeViewport);
+            }
+        };
+        activeViewport === null || activeViewport === void 0 ? void 0 : activeViewport.displayStyle.settings.onMapImageryChanged.addListener(handleMapImageryChanged);
+        return () => {
+            activeViewport === null || activeViewport === void 0 ? void 0 : activeViewport.displayStyle.settings.onMapImageryChanged.removeListener(handleMapImageryChanged);
+        };
+    }, [activeViewport, backgroundMapLayers, loadMapLayerSettingsFromViewport, overlayMapLayers]);
+    const handleProviderStatusChanged = React.useCallback((_args) => {
+        loadMapLayerSettingsFromViewport(activeViewport);
+    }, [loadMapLayerSettingsFromViewport, activeViewport]);
+    // Triggered whenever a provider status change
+    React.useEffect(() => {
+        backgroundMapLayers === null || backgroundMapLayers === void 0 ? void 0 : backgroundMapLayers.forEach((layer) => { var _a; (_a = layer.provider) === null || _a === void 0 ? void 0 : _a.onStatusChanged.addListener(handleProviderStatusChanged); });
+        overlayMapLayers === null || overlayMapLayers === void 0 ? void 0 : overlayMapLayers.forEach((layer) => { var _a; (_a = layer.provider) === null || _a === void 0 ? void 0 : _a.onStatusChanged.addListener(handleProviderStatusChanged); });
+        return () => {
+            backgroundMapLayers === null || backgroundMapLayers === void 0 ? void 0 : backgroundMapLayers.forEach((layer) => { var _a; (_a = layer.provider) === null || _a === void 0 ? void 0 : _a.onStatusChanged.removeListener(handleProviderStatusChanged); });
+            overlayMapLayers === null || overlayMapLayers === void 0 ? void 0 : overlayMapLayers.forEach((layer) => { var _a; (_a = layer.provider) === null || _a === void 0 ? void 0 : _a.onStatusChanged.removeListener(handleProviderStatusChanged); });
+        };
+    }, [backgroundMapLayers, overlayMapLayers, activeViewport, loadMapLayerSettingsFromViewport, handleProviderStatusChanged]);
+    // Monitor viewport updates, and refresh the widget accordingly.
+    // Note: This is needed for multiple viewport applications.
+    React.useEffect(() => {
+        // Update background map status
+        setBackgroundMapVisible(activeViewport.viewFlags.backgroundMap);
+        // Refresh list of layers
+        loadMapLayerSettingsFromViewport(activeViewport);
+    }, [activeViewport, loadMapLayerSettingsFromViewport]);
+    React.useEffect(() => {
+        async function fetchWmsMapData() {
+            const sources = [];
+            const bases = [];
+            const sourceLayers = await core_frontend_1.MapLayerSources.create(undefined, (fetchPublicMapLayerSources && !hideExternalMapLayersSection));
+            const iModel = core_frontend_1.IModelApp.viewManager.selectedView ? core_frontend_1.IModelApp.viewManager.selectedView.iModel : undefined;
+            try {
+                const preferenceSources = ((iModel === null || iModel === void 0 ? void 0 : iModel.iTwinId) === undefined
+                    ? []
+                    : await MapLayerPreferences_1.MapLayerPreferences.getSources(iModel === null || iModel === void 0 ? void 0 : iModel.iTwinId, iModel === null || iModel === void 0 ? void 0 : iModel.iModelId));
+                for (const source of preferenceSources)
+                    await core_frontend_1.MapLayerSources.addSourceToMapLayerSources(source);
+            }
+            catch (err) {
+                core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, core_frontend_1.IModelApp.localization.getLocalizedString("mapLayers:CustomAttach.ErrorLoadingLayers"), core_bentley_1.BentleyError.getErrorMessage(err)));
+            }
+            if (!isMounted.current) {
+                return;
+            }
+            // This is where the list of layers first gets populated... I need to update it
+            // MapUrlDialog gets around knowing MapLayerManager exists and vice versa by affecting the viewports displayStyle which MapLayerManager is listening for
+            // We know when displayStyle changes we've added a layer, this layer may not be a custom layer
+            sourceLayers === null || sourceLayers === void 0 ? void 0 : sourceLayers.layers.forEach((source) => { sources.push(source); });
+            setMapSources(sources);
+            sourceLayers === null || sourceLayers === void 0 ? void 0 : sourceLayers.bases.forEach((source) => { bases.push(source); });
+            setBaseSources(bases);
+        }
+        setLoadingSources(true);
+        fetchWmsMapData().then(() => {
+            if (isMounted.current) {
+                setLoadingSources(false);
+            }
+        }).catch(() => {
+            if (isMounted.current) {
+                setLoadingSources(false);
+            }
+        });
+    }, [setMapSources, fetchPublicMapLayerSources, hideExternalMapLayersSection]);
+    const updateMapSources = React.useCallback(() => {
+        var _a, _b;
+        const newSources = [];
+        (_b = (_a = core_frontend_1.MapLayerSources.getInstance()) === null || _a === void 0 ? void 0 : _a.layers) === null || _b === void 0 ? void 0 : _b.forEach((sourceLayer) => { newSources.push(sourceLayer); });
+        setMapSources(newSources);
+    }, [setMapSources]);
+    /**
+    * Handle change events in the MapLayerPreferences
+    */
+    React.useEffect(() => {
+        const handleLayerSourceChange = async (changeType, oldSource, newSource) => {
+            const removeSourceOnly = (changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Removed);
+            const removeSource = (changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Replaced || changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Removed);
+            const addSource = (changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Replaced || changeType === MapLayerPreferences_1.MapLayerSourceChangeType.Added);
+            if (removeSource) {
+                if (oldSource) {
+                    const succeeded = core_frontend_1.MapLayerSources.removeLayerByName(oldSource.name);
+                    (0, core_bentley_1.assert)(succeeded);
+                    if (!succeeded) {
+                        return;
+                    }
+                    if (removeSourceOnly) {
+                        updateMapSources();
+                        return;
+                    }
+                }
+            }
+            if (addSource) {
+                const sources = await core_frontend_1.MapLayerSources.addSourceToMapLayerSources(newSource);
+                (0, core_bentley_1.assert)(sources !== undefined);
+                if (sources) {
+                    updateMapSources();
+                }
+            }
+        };
+        MapLayerPreferences_1.MapLayerPreferences.onLayerSourceChanged.addListener(handleLayerSourceChange);
+        return (() => {
+            MapLayerPreferences_1.MapLayerPreferences.onLayerSourceChanged.removeListener(handleLayerSourceChange);
+        });
+    }, [updateMapSources]);
+    // update when a different display style is loaded.
+    React.useEffect(() => {
+        const handleDisplayStyleChange = (vp) => {
+            loadMapLayerSettingsFromViewport(vp);
+        };
+        activeViewport === null || activeViewport === void 0 ? void 0 : activeViewport.onDisplayStyleChanged.addListener(handleDisplayStyleChange);
+        return () => {
+            activeViewport === null || activeViewport === void 0 ? void 0 : activeViewport.onDisplayStyleChanged.removeListener(handleDisplayStyleChange);
+        };
+    }, [activeViewport, loadMapLayerSettingsFromViewport]);
+    const handleOnMenuItemSelection = React.useCallback((action, mapLayerSettings) => {
+        if (!activeViewport || !activeViewport.displayStyle)
+            return;
+        const indexInDisplayStyle = activeViewport.displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);
+        if (indexInDisplayStyle < 0)
+            return;
+        switch (action) {
+            case "delete":
+                activeViewport.displayStyle.detachMapLayerByIndex(indexInDisplayStyle, mapLayerSettings.isOverlay);
+                break;
+            case "zoom-to-layer":
+                activeViewport.displayStyle.viewMapLayerRange(indexInDisplayStyle, mapLayerSettings.isOverlay, activeViewport).then((status) => {
+                    if (!status) {
+                        const msg = mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Messages.NoRangeDefined");
+                        core_frontend_1.IModelApp.notifications.outputMessage(new core_frontend_1.NotifyMessageDetails(core_frontend_1.OutputMessagePriority.Error, `${msg} [${mapLayerSettings.name}]`));
+                    }
+                }).catch((_error) => { });
+                break;
+        }
+        activeViewport.invalidateRenderPlan();
+        // force UI to update
+        loadMapLayerSettingsFromViewport(activeViewport);
+    }, [activeViewport, loadMapLayerSettingsFromViewport]);
+    const handleLayerVisibilityChange = React.useCallback((mapLayerSettings) => {
+        if (activeViewport) {
+            const isVisible = !mapLayerSettings.visible;
+            const displayStyle = activeViewport.displayStyle;
+            const indexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(mapLayerSettings.name, mapLayerSettings.source, mapLayerSettings.isOverlay);
+            if (-1 !== indexInDisplayStyle) {
+                // update the display style
+                displayStyle.changeMapLayerProps({ visible: isVisible }, indexInDisplayStyle, mapLayerSettings.isOverlay);
+                activeViewport.invalidateRenderPlan();
+                // force UI to update
+                loadMapLayerSettingsFromViewport(activeViewport);
+            }
+        }
+    }, [activeViewport, loadMapLayerSettingsFromViewport]);
+    const handleMapLayersToggle = React.useCallback(() => {
+        if (activeViewport) {
+            const newState = !backgroundMapVisible;
+            activeViewport.viewFlags = activeViewport.viewFlags.with("backgroundMap", newState);
+            setBackgroundMapVisible(newState);
+        }
+    }, [backgroundMapVisible, setBackgroundMapVisible, activeViewport]);
+    const handleOnMapLayerDragEnd = React.useCallback((result /* ,  _provided: ResponderProvided*/) => {
+        const { destination, source } = result;
+        if (!destination) // dropped outside of list
+            return;
+        // item was not moved
+        if (destination.droppableId === source.droppableId && destination.index === source.index)
+            return;
+        let fromMapLayer;
+        if (source.droppableId === "overlayMapLayers" && overlayMapLayers)
+            fromMapLayer = overlayMapLayers[source.index];
+        else if (source.droppableId === "backgroundMapLayers" && backgroundMapLayers)
+            fromMapLayer = backgroundMapLayers[source.index];
+        if (!fromMapLayer || !activeViewport)
+            return;
+        const displayStyle = activeViewport.displayStyle;
+        let toMapLayer;
+        let toIndexInDisplayStyle = -1;
+        // If destination.index is undefined then the user dropped the map at the end of list of maps. To get the "actual" index in the style, look up index in style by name.
+        // We need to do this because the order of layers in UI are reversed so higher layers appear above lower layers.
+        if (undefined !== destination.index) {
+            if (destination.droppableId === "overlayMapLayers" && overlayMapLayers)
+                toMapLayer = overlayMapLayers[destination.index];
+            else if (destination.droppableId === "backgroundMapLayers" && backgroundMapLayers)
+                toMapLayer = backgroundMapLayers[destination.index];
+            if (toMapLayer)
+                toIndexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(toMapLayer.name, toMapLayer.source, toMapLayer.isOverlay);
+        }
+        const fromIndexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndSource(fromMapLayer.name, fromMapLayer.source, fromMapLayer.isOverlay);
+        if (fromIndexInDisplayStyle < 0)
+            return;
+        if (destination.droppableId !== source.droppableId) {
+            // see if we moved from "overlayMapLayers" to "backgroundMapLayers" or vice-versa
+            const settings = activeViewport.displayStyle.mapLayerAtIndex(fromIndexInDisplayStyle, fromMapLayer.isOverlay);
+            if (settings) {
+                activeViewport.displayStyle.detachMapLayerByIndex(fromIndexInDisplayStyle, fromMapLayer.isOverlay);
+                // Manually reverse index when moved from one section to the other
+                if (fromMapLayer.isOverlay && backgroundMapLayers) {
+                    toIndexInDisplayStyle = displayStyle.backgroundMapLayers.length - destination.index;
+                }
+                else if (!fromMapLayer.isOverlay && overlayMapLayers) {
+                    toIndexInDisplayStyle = overlayMapLayers.length - destination.index;
+                }
+                activeViewport.displayStyle.attachMapLayer({ settings, isOverlay: !fromMapLayer.isOverlay, insertIndex: toIndexInDisplayStyle });
+            }
+        }
+        else {
+            if (undefined === destination.index) {
+                displayStyle.moveMapLayerToBottom(fromIndexInDisplayStyle, destination.droppableId === "overlayMapLayers");
+            }
+            else {
+                if (toMapLayer) {
+                    if (toIndexInDisplayStyle !== -1)
+                        displayStyle.moveMapLayerToIndex(fromIndexInDisplayStyle, toIndexInDisplayStyle, toMapLayer.isOverlay);
+                }
+            }
+        }
+        // apply display style change to view
+        activeViewport.invalidateRenderPlan();
+        // force UI to update
+        loadMapLayerSettingsFromViewport(activeViewport);
+    }, [loadMapLayerSettingsFromViewport, activeViewport, overlayMapLayers, backgroundMapLayers]);
+    const handleRefreshFromStyle = React.useCallback(() => {
+        if (activeViewport)
+            loadMapLayerSettingsFromViewport(activeViewport);
+    }, [activeViewport, loadMapLayerSettingsFromViewport]);
+    const [baseMapPanelLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Basemap.BaseMapPanelTitle"));
+    return (React.createElement(exports.SourceMapContext.Provider, { value: {
+            activeViewport,
+            loadingSources,
+            sources: mapSources ? mapSources : [],
+            bases: baseSources ? baseSources : [],
+            refreshFromStyle: handleRefreshFromStyle,
+            backgroundLayers: backgroundMapLayers,
+            overlayLayers: overlayMapLayers,
+            mapLayerOptions,
+        } },
+        React.createElement("div", { className: "map-manager-top-header" },
+            React.createElement("span", { className: "map-manager-header-label" }, baseMapPanelLabel),
+            React.createElement("div", { className: "map-manager-header-buttons-group" },
+                React.createElement(itwinui_react_1.ToggleSwitch, { className: "map-manager-toggle", checked: backgroundMapVisible, onChange: handleMapLayersToggle }),
+                React.createElement(MapLayerSettingsPopupButton_1.MapLayerSettingsPopupButton, { disabled: !backgroundMapVisible }))),
+        React.createElement("div", { className: "map-manager-container" },
+            React.createElement("div", { className: "map-manager-basemap" },
+                React.createElement(BasemapPanel_1.BasemapPanel, { disabled: !backgroundMapVisible })),
+            !hideExternalMapLayersSection &&
+                React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: handleOnMapLayerDragEnd },
+                    React.createElement("div", { className: "map-manager-layer-wrapper" },
+                        React.createElement("div", { className: "map-manager-underlays" },
+                            React.createElement("span", { className: "map-manager-underlays-label" }, underlaysLabel),
+                            React.createElement(AttachLayerPopupButton_1.AttachLayerPopupButton, { disabled: !backgroundMapVisible, isOverlay: false })),
+                        React.createElement(MapLayerDroppable_1.MapLayerDroppable, { disabled: !backgroundMapVisible, isOverlay: false, layersList: backgroundMapLayers, mapTypesOptions: (_a = props.mapLayerOptions) === null || _a === void 0 ? void 0 : _a.mapTypeOptions, getContainerForClone: props.getContainerForClone, activeViewport: props.activeViewport, onMenuItemSelected: handleOnMenuItemSelection, onItemVisibilityToggleClicked: handleLayerVisibilityChange, onItemEdited: handleRefreshFromStyle })),
+                    React.createElement("div", { className: "map-manager-layer-wrapper" },
+                        React.createElement("div", { className: "map-manager-overlays" },
+                            React.createElement("span", { className: "map-manager-overlays-label" }, overlaysLabel),
+                            React.createElement(AttachLayerPopupButton_1.AttachLayerPopupButton, { disabled: !backgroundMapVisible, isOverlay: true })),
+                        React.createElement(MapLayerDroppable_1.MapLayerDroppable, { disabled: !backgroundMapVisible, isOverlay: true, layersList: overlayMapLayers, mapTypesOptions: (_b = props.mapLayerOptions) === null || _b === void 0 ? void 0 : _b.mapTypeOptions, getContainerForClone: props.getContainerForClone, activeViewport: props.activeViewport, onMenuItemSelected: handleOnMenuItemSelection, onItemVisibilityToggleClicked: handleLayerVisibilityChange, onItemEdited: handleRefreshFromStyle }))))));
+}
+exports.MapLayerManager = MapLayerManager;
 //# sourceMappingURL=MapLayerManager.js.map