@itwin/map-layers 5.3.0 → 5.4.0

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

@@ -0,0 +1,116 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomParamsSettingsPanel = void 0;
+require("./CustomParamsSettings.scss");
+const React = require("react");
+const appui_react_1 = require("@itwin/appui-react");
+const core_react_1 = require("@itwin/core-react");
+const itwinui_icons_color_react_1 = require("@itwin/itwinui-icons-color-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const CustomParamsMappingStorage_1 = require("../../CustomParamsMappingStorage");
+const CustomParamsStorage_1 = require("../../CustomParamsStorage");
+const mapLayers_1 = require("../../mapLayers");
+const CustomParamEditDialog_1 = require("./CustomParamEditDialog");
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function CustomParamsSettingsPanel() {
+    const [storage] = React.useState(() => new CustomParamsStorage_1.CustomParamsStorage());
+    const [mappingStorage] = React.useState(() => new CustomParamsMappingStorage_1.CustomParamsMappingStorage());
+    const [params, setParams] = React.useState(() => {
+        const paramsMap = {};
+        const paramsList = storage.get(undefined);
+        if (paramsList) {
+            for (const param of paramsList)
+                paramsMap[param.name] = param;
+        }
+        return paramsMap;
+    });
+    const [listItemUnderCursor, setListItemUnderCursor] = React.useState();
+    const [selectedValue, setSelectedValue] = React.useState();
+    const deleteMapping = React.useCallback((name) => {
+        const tmpParams = { ...params };
+        delete tmpParams[name];
+        setParams(tmpParams);
+        storage.delete(name);
+        // Cascade delete to api key mapping
+        const mappingContent = mappingStorage.getContent();
+        if (mappingContent) {
+            for (const itemKey of Object.keys(mappingContent)) {
+                if (mappingContent[itemKey].customParamNames.includes(name)) {
+                    const newParamNames = mappingContent[itemKey].customParamNames.filter((value) => value !== name);
+                    newParamNames.length > 0 ? mappingStorage.save(itemKey, { customParamNames: newParamNames }) : mappingStorage.delete(itemKey);
+                }
+            }
+        }
+    }, [mappingStorage, params, storage]);
+    /*
+     Handle Remove layer button clicked
+     */
+    const onItemRemoveButtonClicked = React.useCallback((name, event) => {
+        event.stopPropagation(); // We don't want the owning ListBox to react on mouse click.
+        deleteMapping(name);
+    }, [deleteMapping]);
+    const onCancelEdit = React.useCallback(() => {
+        appui_react_1.UiFramework.dialogs.modal.close();
+        setSelectedValue(undefined); // clear listbox focus
+    }, []);
+    const onOkEdit = React.useCallback((newItem, oldItem) => {
+        appui_react_1.UiFramework.dialogs.modal.close();
+        // If the edited item has a new name, delete the entry first.
+        const tmpParams = { ...params };
+        if (oldItem && oldItem.name !== newItem.name) {
+            delete tmpParams[oldItem.name];
+            setParams(tmpParams);
+            storage.delete(oldItem.name);
+            const mappingContent = mappingStorage.getContent();
+            if (mappingContent) {
+                for (const itemKey of Object.keys(mappingContent)) {
+                    if (mappingContent[itemKey].customParamNames.includes(oldItem.name)) {
+                        const newParamNames = mappingContent[itemKey].customParamNames.filter((value) => value !== oldItem.name);
+                        newParamNames.push(newItem.name);
+                        mappingStorage.save(itemKey, { customParamNames: newParamNames });
+                    }
+                }
+            }
+        }
+        storage.save(newItem.name, newItem);
+        tmpParams[newItem.name] = newItem;
+        setParams(tmpParams);
+        setSelectedValue(undefined); // clear listbox focus
+    }, [mappingStorage, params, storage]);
+    const handleAddClick = React.useCallback(() => {
+        appui_react_1.UiFramework.dialogs.modal.open(React.createElement(CustomParamEditDialog_1.CustomParamEditDialog, { onOkResult: onOkEdit, onCancelResult: onCancelEdit }));
+        return;
+    }, [onCancelEdit, onOkEdit]);
+    const onListboxValueChange = React.useCallback((newValue, _isControlOrCommandPressed) => {
+        const item = params[newValue];
+        if (item)
+            appui_react_1.UiFramework.dialogs.modal.open(React.createElement(CustomParamEditDialog_1.CustomParamEditDialog, { item: item, onOkResult: onOkEdit, onCancelResult: onCancelEdit }));
+        setSelectedValue(newValue);
+        return;
+    }, [params, onCancelEdit, onOkEdit]);
+    return (React.createElement("div", { className: "customParamsSettings-container" },
+        React.createElement("div", { className: "customParamsSettings-header" },
+            React.createElement("span", { className: "customParamsSettings-header-label" },
+                mapLayers_1.MapLayersUI.translate("CustomParamSettings.SectionLabel"),
+                React.createElement("div", { title: mapLayers_1.MapLayersUI.translate("Labels.TechPreviewBadgeTooltip"), className: "customParamsSettings-previewBadge" },
+                    React.createElement(itwinui_react_1.Icon, { size: "small" },
+                        React.createElement(itwinui_icons_color_react_1.SvgTechnicalPreviewMini, null)))),
+            React.createElement(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", className: "customParamsSettings-header-add-button", onClick: handleAddClick },
+                React.createElement(itwinui_icons_react_1.SvgAdd, null))),
+        React.createElement("div", { className: "customParamsSettings-content" },
+            React.createElement(core_react_1.Listbox, { selectedValue: selectedValue, onListboxValueChange: onListboxValueChange, className: "customParamsSettings-content-listbox" }, Object.keys(params).map((keyName) => React.createElement(core_react_1.ListboxItem, { key: keyName, className: "customParamsSettings-content-entry", value: keyName, onMouseEnter: () => setListItemUnderCursor(keyName), onMouseLeave: () => setListItemUnderCursor(undefined) },
+                React.createElement("span", { className: "customParamsSettings-content-entry-name", title: keyName }, keyName),
+                (listItemUnderCursor && listItemUnderCursor === keyName) &&
+                    React.createElement(React.Fragment, null,
+                        React.createElement(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", className: "map-source-list-entry-button", title: mapLayers_1.MapLayersUI.translate("CustomParamSettings.EditButtonTitle") },
+                            React.createElement(itwinui_icons_react_1.SvgEdit, null)),
+                        React.createElement(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", className: "customParamsSettings-content-entry-button", title: mapLayers_1.MapLayersUI.translate("CustomParamSettings.DeleteButtonTitle"), onClick: (event) => { onItemRemoveButtonClicked(keyName, event); } },
+                            React.createElement(itwinui_icons_react_1.SvgDelete, null)))))))));
+}
+exports.CustomParamsSettingsPanel = CustomParamsSettingsPanel;
+//# sourceMappingURL=CustomParamsSettings.js.map

package/lib/cjs/ui/widget/CustomParamsSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomParamsSettings.js","sourceRoot":"","sources":["../../../../src/ui/widget/CustomParamsSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport \"./CustomParamsSettings.scss\";\nimport * as React from \"react\";\nimport { UiFramework } from \"@itwin/appui-react\";\nimport { Listbox, ListboxItem, ListboxValue } from \"@itwin/core-react\";\nimport { SvgTechnicalPreviewMini } from \"@itwin/itwinui-icons-color-react\";\nimport { SvgAdd, SvgDelete, SvgEdit } from \"@itwin/itwinui-icons-react\";\nimport { Icon, IconButton } from \"@itwin/itwinui-react\";\nimport { CustomParamsMappingStorage } from \"../../CustomParamsMappingStorage\";\nimport { CustomParamsStorage } from \"../../CustomParamsStorage\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { CustomParamItem } from \"../Interfaces\";\nimport { CustomParamEditDialog } from \"./CustomParamEditDialog\";\n\ninterface CustomParamsMap {\n  [paramName: string]: CustomParamItem;\n}\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function CustomParamsSettingsPanel() {\n\n  const [storage] = React.useState(() => new CustomParamsStorage());\n  const [mappingStorage] = React.useState(() => new CustomParamsMappingStorage());\n\n  const [params, setParams] = React.useState<CustomParamsMap>(() => {\n    const paramsMap: CustomParamsMap ={};\n    const paramsList = storage.get(undefined);\n    if (paramsList) {\n      for (const param of paramsList)\n        paramsMap[param.name] = param;\n    }\n    return paramsMap;\n  });\n\n  const [listItemUnderCursor, setListItemUnderCursor] = React.useState<string | undefined>();\n  const [selectedValue, setSelectedValue] = React.useState<string | undefined>();\n\n  const deleteMapping = React.useCallback((name: string) => {\n    const tmpParams = {...params};\n    delete tmpParams[name];\n    setParams(tmpParams);\n    storage.delete(name);\n\n    // Cascade delete to api key mapping\n    const mappingContent = mappingStorage.getContent();\n    if (mappingContent) {\n      for (const itemKey of Object.keys(mappingContent)) {\n        if (mappingContent[itemKey].customParamNames.includes(name)) {\n          const newParamNames = mappingContent[itemKey].customParamNames.filter((value) => value !== name);\n          newParamNames.length > 0 ?  mappingStorage.save(itemKey, {customParamNames: newParamNames}) : mappingStorage.delete(itemKey);\n        }\n      }\n    }\n  }, [mappingStorage, params, storage]);\n\n  /*\n   Handle Remove layer button clicked\n   */\n  const onItemRemoveButtonClicked = React.useCallback((name: string, event) => {\n    event.stopPropagation();  // We don't want the owning ListBox to react on mouse click.\n    deleteMapping(name);\n  }, [deleteMapping]);\n\n  const onCancelEdit = React.useCallback(() => {\n    UiFramework.dialogs.modal.close();\n    setSelectedValue(undefined); // clear listbox focus\n  }, []);\n\n  const onOkEdit = React.useCallback((newItem: CustomParamItem, oldItem?: CustomParamItem) => {\n\n    UiFramework.dialogs.modal.close();\n\n    // If the edited item has a new name, delete the entry first.\n    const tmpParams = {...params};\n    if (oldItem && oldItem.name !== newItem.name) {\n      delete tmpParams[oldItem.name];\n      setParams(tmpParams);\n      storage.delete(oldItem.name);\n\n      const mappingContent = mappingStorage.getContent();\n      if (mappingContent) {\n        for (const itemKey of Object.keys(mappingContent)) {\n          if (mappingContent[itemKey].customParamNames.includes(oldItem.name )) {\n            const newParamNames = mappingContent[itemKey].customParamNames.filter((value) => value !== oldItem.name);\n            newParamNames.push(newItem.name);\n            mappingStorage.save(itemKey, {customParamNames: newParamNames});\n          }\n        }\n      }\n    }\n    storage.save(newItem.name, newItem);\n\n    tmpParams[newItem.name] = newItem;\n    setParams(tmpParams);\n    setSelectedValue(undefined); // clear listbox focus\n  }, [mappingStorage, params, storage]);\n\n  const handleAddClick = React.useCallback(() => {\n    UiFramework.dialogs.modal.open(\n      <CustomParamEditDialog\n        onOkResult={onOkEdit}\n        onCancelResult={onCancelEdit}\n      />);\n    return;\n  }, [onCancelEdit, onOkEdit]);\n\n  const onListboxValueChange = React.useCallback((newValue: ListboxValue, _isControlOrCommandPressed?: boolean)=> {\n    const item = params[newValue];\n    if (item)\n      UiFramework.dialogs.modal.open(<CustomParamEditDialog item={item} onOkResult={onOkEdit} onCancelResult={onCancelEdit}/>);\n\n    setSelectedValue(newValue);\n    return;\n  }, [params, onCancelEdit, onOkEdit]);\n\n  return (\n    <div className=\"customParamsSettings-container\">\n      <div className=\"customParamsSettings-header\">\n        <span className=\"customParamsSettings-header-label\">\n          {MapLayersUI.translate(\"CustomParamSettings.SectionLabel\")}\n          <div title={MapLayersUI.translate(\"Labels.TechPreviewBadgeTooltip\")} className=\"customParamsSettings-previewBadge\">\n            <Icon size=\"small\"><SvgTechnicalPreviewMini /></Icon>\n          </div>\n        </span>\n\n        <IconButton size=\"small\" styleType=\"borderless\" className=\"customParamsSettings-header-add-button\" onClick={handleAddClick}>\n          <SvgAdd/>\n        </IconButton>\n      </div>\n      <div className=\"customParamsSettings-content\">\n        <Listbox\n          selectedValue={selectedValue}\n          onListboxValueChange={onListboxValueChange}\n          className=\"customParamsSettings-content-listbox\" >\n          {\n            Object.keys(params).map((keyName) =>\n              <ListboxItem\n                key={keyName}\n                className=\"customParamsSettings-content-entry\"\n                value={keyName}\n                onMouseEnter={() => setListItemUnderCursor(keyName)}\n                onMouseLeave={() => setListItemUnderCursor(undefined)}\n              >\n                <span className=\"customParamsSettings-content-entry-name\" title={keyName}>{keyName}</span>\n                { // Display the delete icon only when the mouse over a specific item otherwise list feels cluttered.\n                  (listItemUnderCursor && listItemUnderCursor === keyName) &&\n                  <>\n                    <IconButton\n                      size=\"small\"\n                      styleType=\"borderless\"\n                      className=\"map-source-list-entry-button\"\n                      title={MapLayersUI.translate(\"CustomParamSettings.EditButtonTitle\")}>\n                      <SvgEdit/>\n                    </IconButton>\n                    <IconButton\n                      size=\"small\"\n                      styleType=\"borderless\"\n                      className=\"customParamsSettings-content-entry-button\"\n                      title={MapLayersUI.translate(\"CustomParamSettings.DeleteButtonTitle\")}\n                      onClick={(event) => {onItemRemoveButtonClicked(keyName, event);}}>\n                      <SvgDelete/>\n                    </IconButton>\n                  </>}\n              </ListboxItem>\n            )\n          }\n        </Listbox>\n      </div>\n    </div>\n  );\n}\n"]}

package/lib/cjs/ui/widget/CustomParamsSettings.scss

@@ -0,0 +1,67 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+
+.customParamsSettings-previewBadge {
+  margin-left: 4px;
+  display:inline;
+  vertical-align: middle;
+}
+
+
+button.customParamsSettings-button {
+  font-size: 12px;
+  }
+
+.customParamsSettings-header {
+  display: flex;
+  align-content: center;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.customParamsSettings-container {
+  margin-top: 1rem;
+  border: 1px solid #ccc;
+  margin-bottom: 15px;
+
+  .customParamsSettings-header-label {
+    width: auto;
+    white-space: nowrap;
+    flex: 1 1 auto;
+    padding-left: 10px;
+  }
+
+  button.customParamsSettings-header-add-button {
+    margin-right: 2px;
+  }
+
+.customParamsSettings-content {
+  height: 100px;
+  min-height: 60px;
+  border-top: 1px solid #ccc;
+
+    .customParamsSettings-content-listbox {
+      margin-top: 0;
+      border: none;
+    }
+
+    .customParamsSettings-content-entry {
+       margin-left: 4px;
+
+      button.customParamsSettings-content-entry-button {
+        height: auto;
+        padding: 0 4px 0 4px;
+      }
+      .customParamsSettings-content-entry-name {
+        flex: 1 1 auto;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        margin-right: 4px;
+      }
+    }
+  }
+}

package/lib/cjs/ui/widget/MapLayerDroppable.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { ScreenViewport } from "@itwin/core-frontend";
-import { MapTypesOptions, StyleMapLayerSettings } from "../Interfaces";
 import "./MapLayerManager.scss";
+import { ScreenViewport } from "@itwin/core-frontend";
+import { MapLayerOptions, StyleMapLayerSettings } from "../Interfaces";
 /** @internal */
 interface MapLayerDroppableProps {
     isOverlay: boolean;
     layersList?: StyleMapLayerSettings[];
-    mapTypesOptions?: MapTypesOptions;
+    mapLayerOptions?: MapLayerOptions;
     getContainerForClone: () => HTMLElement;
     activeViewport: ScreenViewport;
     onMenuItemSelected: (action: string, mapLayerSettings: StyleMapLayerSettings) => void;

package/lib/cjs/ui/widget/MapLayerDroppable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapLayerDroppable.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerDroppable.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAyI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAO7L,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGvE,OAAO,wBAAwB,CAAC;AAIhC,gBAAgB;AAChB,UAAU,sBAAsB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACrC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,oBAAoB,EAAE,MAAM,WAAW,CAAC;IACxC,cAAc,EAAE,cAAc,CAAC;IAC/B,kBAAkB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtF,6BAA6B,EAAE,CAAC,gBAAgB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjF,cAAc,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,MAAO,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAOD,gBAAgB;AAEhB,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAmL9D"}
+{"version":3,"file":"MapLayerDroppable.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerDroppable.tsx"],"names":[],"mappings":";AASA,OAAO,wBAAwB,CAAC;AAMhC,OAAO,EAEL,cAAc,EACf,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAMvE,gBAAgB;AAChB,UAAU,sBAAsB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACrC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,oBAAoB,EAAE,MAAM,WAAW,CAAC;IACxC,cAAc,EAAE,cAAc,CAAC;IAC/B,kBAAkB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtF,6BAA6B,EAAE,CAAC,gBAAgB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjF,cAAc,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,MAAO,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAOD,gBAAgB;AAEhB,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAkN9D"}

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

@@ -8,20 +8,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MapLayerDroppable = void 0;
 // the following quiet warning caused by react-beautiful-dnd package
 /* eslint-disable @typescript-eslint/unbound-method */
+require("./MapLayerManager.scss");
 const React = require("react");
 const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const appui_react_1 = require("@itwin/appui-react");
+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 core_react_1 = require("@itwin/core-react");
-const core_bentley_1 = require("@itwin/core-bentley");
-const appui_react_1 = require("@itwin/appui-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
-const SubLayersPopupButton_1 = require("./SubLayersPopupButton");
+const mapLayers_1 = require("../../mapLayers");
 const AttachLayerPopupButton_1 = require("./AttachLayerPopupButton");
 const MapLayerSettingsMenu_1 = require("./MapLayerSettingsMenu");
 const MapUrlDialog_1 = require("./MapUrlDialog");
-require("./MapLayerManager.scss");
-const mapLayers_1 = require("../../mapLayers");
-const core_common_1 = require("@itwin/core-common");
+const SubLayersPopupButton_1 = require("./SubLayersPopupButton");
 const changeVisibilityByElementId = (element, visible) => {
     if (element)
         element.setAttribute("style", `visibility: ${visible ? "visible" : "hidden"}`);
@@ -79,7 +79,20 @@ function MapLayerDroppable(props) {
                 } }),
             React.createElement(itwinui_react_1.Button, { disabled: props.disabled, size: "small", styleType: "borderless", className: "map-manager-item-visibility map-manager-visibility-icon", title: toggleVisibility, onClick: () => { props.onItemVisibilityToggleClicked(activeLayer); } },
                 React.createElement(core_react_1.Icon, { iconSpec: activeLayer.visible ? "icon-visibility" : "icon-visibility-hide-2" })),
-            React.createElement("span", { className: props.disabled || outOfRange ? "map-manager-item-label-disabled" : "map-manager-item-label", title: outOfRange ? outOfRangeTitle : undefined, ...dragProvided.dragHandleProps }, activeLayer.name),
+            React.createElement("span", { className: props.disabled || outOfRange ? "map-manager-item-label-disabled" : "map-manager-item-label", title: outOfRange ? outOfRangeTitle : undefined, ...dragProvided.dragHandleProps },
+                activeLayer.name,
+                activeLayer.provider?.status === core_frontend_1.MapLayerImageryProviderStatus.RequireAuth &&
+                    React.createElement(itwinui_react_1.Button, { disabled: props.disabled, size: "small", styleType: "borderless", onClick: () => {
+                            const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);
+                            if (indexInDisplayStyle !== undefined && indexInDisplayStyle >= 0) {
+                                const index = { index: indexInDisplayStyle, isOverlay: activeLayer.isOverlay };
+                                const layer = props.activeViewport.displayStyle.mapLayerAtIndex(index);
+                                if (layer instanceof core_common_1.ImageMapLayerSettings) {
+                                    appui_react_1.UiFramework.dialogs.modal.open(React.createElement(MapUrlDialog_1.MapUrlDialog, { activeViewport: props.activeViewport, isOverlay: props.isOverlay, signInModeArgs: { layer }, onOkResult: (sourceState) => handleOk(index, sourceState), onCancelResult: () => { appui_react_1.UiFramework.dialogs.modal.close(); }, mapLayerOptions: props.mapLayerOptions }));
+                                }
+                            }
+                        }, title: requireAuthTooltip },
+                        React.createElement(core_react_1.Icon, { className: "map-layer-source-item-warnMessage-icon", iconSpec: "icon-status-warning" }))),
             React.createElement("div", { id: "MapLayerSettingsSubLayersMenu", style: { visibility: "hidden" }, className: "map-manager-item-sub-layer-container" }, activeLayer.subLayers && activeLayer.subLayers.length > 1 &&
                 React.createElement(SubLayersPopupButton_1.SubLayersPopupButton, { checkboxStyle: "eye", expandMode: "rootGroupOnly", subLayers: props.activeViewport ? activeLayer.subLayers : undefined, singleVisibleSubLayer: activeLayer.provider?.mutualExclusiveSubLayer, onSubLayerStateChange: (subLayerId, isSelected) => { onSubLayerStateChange(activeLayer, subLayerId, isSelected); } })),
             activeLayer.provider?.status === core_frontend_1.MapLayerImageryProviderStatus.RequireAuth &&
@@ -87,9 +100,9 @@ function MapLayerDroppable(props) {
                         const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);
                         if (indexInDisplayStyle !== undefined && indexInDisplayStyle >= 0) {
                             const index = { index: indexInDisplayStyle, isOverlay: activeLayer.isOverlay };
-                            const layerSettings = props.activeViewport.displayStyle.mapLayerAtIndex(index);
-                            if (layerSettings instanceof core_common_1.ImageMapLayerSettings) {
-                                appui_react_1.UiFramework.dialogs.modal.open(React.createElement(MapUrlDialog_1.MapUrlDialog, { activeViewport: props.activeViewport, isOverlay: props.isOverlay, layerRequiringCredentials: layerSettings?.toJSON(), onOkResult: (sourceState) => handleOk(index, sourceState), onCancelResult: () => { appui_react_1.UiFramework.dialogs.modal.close(); }, mapTypesOptions: props.mapTypesOptions }));
+                            const layer = props.activeViewport.displayStyle.mapLayerAtIndex(index);
+                            if (layer instanceof core_common_1.ImageMapLayerSettings) {
+                                appui_react_1.UiFramework.dialogs.modal.open(React.createElement(MapUrlDialog_1.MapUrlDialog, { activeViewport: props.activeViewport, isOverlay: props.isOverlay, signInModeArgs: { layer }, onOkResult: (sourceState) => handleOk(index, sourceState), onCancelResult: () => { appui_react_1.UiFramework.dialogs.modal.close(); }, mapLayerOptions: props.mapLayerOptions }));
                             }
                         }
                     }, title: requireAuthTooltip },

package/lib/cjs/ui/widget/MapLayerDroppable.js.map

@@ -1 +1 @@
-{"version":3,"file":"MapLayerDroppable.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerDroppable.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n// cSpell:ignore droppable Sublayer Basemap\n\n// the following quiet warning caused by react-beautiful-dnd package\n/* eslint-disable @typescript-eslint/unbound-method */\n\nimport * as React from \"react\";\nimport { Draggable, DraggableChildrenFn, Droppable, DroppableProvided, DroppableStateSnapshot } from \"react-beautiful-dnd\";\nimport { IModelApp, MapLayerImageryProviderStatus, MapLayerIndex, MapTileTreeScaleRangeVisibility, NotifyMessageDetails, OutputMessagePriority, ScreenViewport } from \"@itwin/core-frontend\";\nimport { Icon } from \"@itwin/core-react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { UiFramework } from \"@itwin/appui-react\";\nimport { Button, Checkbox } from \"@itwin/itwinui-react\";\nimport { SubLayersPopupButton } from \"./SubLayersPopupButton\";\nimport { AttachLayerButtonType, AttachLayerPopupButton } from \"./AttachLayerPopupButton\";\nimport { MapTypesOptions, StyleMapLayerSettings } from \"../Interfaces\";\nimport { MapLayerSettingsMenu } from \"./MapLayerSettingsMenu\";\nimport { MapUrlDialog, SourceState } from \"./MapUrlDialog\";\nimport \"./MapLayerManager.scss\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { ImageMapLayerSettings, SubLayerId } from \"@itwin/core-common\";\n\n/** @internal */\ninterface MapLayerDroppableProps {\n  isOverlay: boolean;\n  layersList?: StyleMapLayerSettings[];\n  mapTypesOptions?: MapTypesOptions;\n  getContainerForClone: () => HTMLElement;\n  activeViewport: ScreenViewport;\n  onMenuItemSelected: (action: string, mapLayerSettings: StyleMapLayerSettings) => void;\n  onItemVisibilityToggleClicked: (mapLayerSettings: StyleMapLayerSettings) => void;\n  onItemSelected: (isOverlay: boolean, index: number) => void;\n  onItemEdited: ( ) => void;\n  disabled?: boolean;\n}\n\nconst changeVisibilityByElementId = (element: Element|null, visible: boolean) => {\n  if (element)\n    element.setAttribute(\"style\", `visibility: ${visible ? \"visible\" : \"hidden\"}`);\n};\n\n/** @internal */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function MapLayerDroppable(props: MapLayerDroppableProps) {\n  const containsLayer = props.layersList && props.layersList.length > 0;\n  const droppableId = props.isOverlay ? \"overlayMapLayers\" : \"backgroundMapLayers\";\n  const [toggleVisibility] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.ToggleVisibility\"));\n  const [requireAuthTooltip] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.RequireAuthTooltip\"));\n  const [noBackgroundMapsSpecifiedLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.NoBackgroundLayers\"));\n  const [noUnderlaysSpecifiedLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.NoOverlayLayers\"));\n  const [dropLayerLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.DropLayerLabel\"));\n  const [outOfRangeTitle] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.layerOutOfRange\"));\n\n  const onSubLayerStateChange = (activeLayer: StyleMapLayerSettings, subLayerId: SubLayerId, isSelected: boolean) => {\n    const mapLayerStyleIdx =  props.activeViewport.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);\n    if (mapLayerStyleIdx !== -1 && activeLayer.subLayers)\n      props.activeViewport.displayStyle.changeMapSubLayerProps({ visible: isSelected }, subLayerId, { index: mapLayerStyleIdx, isOverlay: activeLayer.isOverlay });\n  };\n\n  const handleOk = React.useCallback((index: MapLayerIndex, sourceState?: SourceState) => {\n    UiFramework.dialogs.modal.close();\n\n    const source = sourceState?.source;\n    const vp = props?.activeViewport;\n    if (vp === undefined || sourceState === undefined || source === undefined) {\n      const error = MapLayersUI.localization.getLocalizedString(\"mapLayers:Messages.MapLayerAttachMissingViewOrSource\");\n      const msg = MapLayersUI.localization.getLocalizedString(\"mapLayers:Messages.MapLayerAttachError\", { error, sourceName: source?.name ?? \"\" });\n      IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msg));\n      return;\n    }\n\n    const validation = sourceState.validation;\n\n    // Layer is already attached,\n    // This calls invalidateRenderPlan()\n    vp.displayStyle.changeMapLayerProps({subLayers: validation.subLayers}, index);\n    vp.displayStyle.changeMapLayerCredentials(index, source.userName, source.password);\n\n    // Either initial attach/initialize failed or the layer failed to load at least one tile\n    // because of an invalid token; in both cases tile tree needs to be fully reset\n    const provider = vp.getMapLayerImageryProvider(index);\n    provider?.resetStatus();\n    vp.resetMapLayer(index);\n\n    props.onItemEdited();\n  }, [props]);\n\n  const changeSettingsMenuVisibility = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, visible: boolean)=>{\n    changeVisibilityByElementId(event.currentTarget.querySelector(\"#MapLayerSettingsMenuWrapper\"), visible);\n    changeVisibilityByElementId(event.currentTarget.querySelector(\"#MapLayerSettingsSubLayersMenu\"), visible);\n  };\n\n  const renderItem: DraggableChildrenFn = (dragProvided, _, rubric) => {\n    assert(props.layersList !== undefined);\n    const activeLayer = props.layersList[rubric.source.index];\n    const outOfRange = activeLayer.treeVisibility === MapTileTreeScaleRangeVisibility.Hidden;\n\n    return (\n      <div className=\"map-manager-source-item\" data-id={rubric.source.index} key={activeLayer.name}\n        {...dragProvided.draggableProps}\n        ref={dragProvided.innerRef}\n        onMouseEnter={(event)=>changeSettingsMenuVisibility(event, true)}\n        onMouseLeave={(event)=>changeSettingsMenuVisibility(event, false)} >\n\n        {/* Checkbox */}\n        <Checkbox data-testid={\"select-item-checkbox\"} checked={activeLayer.selected} onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n          activeLayer.selected = event.target.checked;\n          props.onItemSelected(props.isOverlay, rubric.source.index);\n        }\n\n        }></Checkbox>\n        {/* Visibility icon */}\n        <Button disabled={props.disabled} size=\"small\" styleType=\"borderless\" className=\"map-manager-item-visibility map-manager-visibility-icon\" title={toggleVisibility} onClick={() => { props.onItemVisibilityToggleClicked(activeLayer); }}>\n          <Icon iconSpec={activeLayer.visible ? \"icon-visibility\" : \"icon-visibility-hide-2\"} />\n        </Button>\n\n        {/* Label */}\n        <span className={props.disabled || outOfRange ? \"map-manager-item-label-disabled\" : \"map-manager-item-label\"}\n          title={outOfRange ? outOfRangeTitle : undefined}\n          {...dragProvided.dragHandleProps}\n\n        >\n          {activeLayer.name}\n        </span>\n\n        {/* SubLayersPopupButton */}\n        <div id=\"MapLayerSettingsSubLayersMenu\" style={{visibility: \"hidden\"}}  className=\"map-manager-item-sub-layer-container\" >\n          {activeLayer.subLayers && activeLayer.subLayers.length > 1 &&\n            <SubLayersPopupButton\n              checkboxStyle=\"eye\"\n              expandMode=\"rootGroupOnly\"\n              subLayers={props.activeViewport ? activeLayer.subLayers : undefined}\n              singleVisibleSubLayer={activeLayer.provider?.mutualExclusiveSubLayer}\n              onSubLayerStateChange={(subLayerId: SubLayerId, isSelected: boolean) => { onSubLayerStateChange(activeLayer, subLayerId, isSelected); }\n\n              } />\n          }\n        </div>\n        {activeLayer.provider?.status === MapLayerImageryProviderStatus.RequireAuth &&\n          <Button\n            disabled={props.disabled}\n            size=\"small\"\n            styleType=\"borderless\"\n            onClick={() => {\n              const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);\n              if (indexInDisplayStyle !== undefined && indexInDisplayStyle >= 0) {\n                const index = { index: indexInDisplayStyle, isOverlay: activeLayer.isOverlay };\n                const layerSettings = props.activeViewport.displayStyle.mapLayerAtIndex(index);\n                if (layerSettings instanceof ImageMapLayerSettings) {\n                  UiFramework.dialogs.modal.open(<MapUrlDialog activeViewport={props.activeViewport}\n                    isOverlay={props.isOverlay}\n                    layerRequiringCredentials={layerSettings?.toJSON()}\n                    onOkResult={(sourceState?: SourceState) => handleOk(index, sourceState)}\n                    onCancelResult={() => {UiFramework.dialogs.modal.close();}}\n                    mapTypesOptions={props.mapTypesOptions}></MapUrlDialog>);\n                }\n              }\n\n            }}\n            title={requireAuthTooltip}\n          >\n            <Icon className=\"map-layer-source-item-warnMessage-icon\" iconSpec=\"icon-status-warning\" />\n          </Button>\n        }\n        <div id=\"MapLayerSettingsMenuWrapper\" style={{visibility: \"hidden\"}} >\n          <MapLayerSettingsMenu activeViewport={props.activeViewport} mapLayerSettings={activeLayer} onMenuItemSelection={props.onMenuItemSelected} disabled={props.disabled} />\n        </div>\n\n      </div>\n    );\n  };\n\n  function renderDraggableContent(snapshot: DroppableStateSnapshot): React.ReactNode {\n    let node: React.ReactNode;\n    if (containsLayer) {\n      // Render a <Draggable>\n      node = (props.layersList?.map((mapLayerSettings, i) =>\n        <Draggable isDragDisabled={props.disabled} key={mapLayerSettings.name} draggableId={mapLayerSettings.name} index={i}>\n          {renderItem}\n        </Draggable>));\n    } else {\n      // Render a label that provide a 'Drop here' hint\n      const label = props.isOverlay ? noUnderlaysSpecifiedLabel : noBackgroundMapsSpecifiedLabel;\n      node =\n        <div title={label} className=\"map-manager-no-layers-container\">\n          {snapshot.isDraggingOver ?\n            <span className=\"map-manager-no-layers-label\">{dropLayerLabel}</span>\n            :\n            <>\n              <span className=\"map-manager-no-layers-label\">{label}</span>\n              <AttachLayerPopupButton disabled={props.disabled} buttonType={AttachLayerButtonType.Blue} isOverlay={props.isOverlay} />\n            </>\n          }\n        </div>;\n    }\n    return node;\n  }\n\n  function renderDraggable(dropProvided: DroppableProvided, dropSnapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement> {\n    return (\n      <div className={`map-manager-attachments${dropSnapshot.isDraggingOver && containsLayer ? \" is-dragging-map-over\" : \"\"}`} ref={dropProvided.innerRef} {...dropProvided.droppableProps} >\n\n        {renderDraggableContent(dropSnapshot)}\n\n        {\n          /* We don't want a placeholder when displaying the 'Drop here' message\n              Unfortunately, if don't add it, 'react-beautiful-dnd' show an error message in the console.\n              So I simply make it hidden. See https://github.com/atlassian/react-beautiful-dnd/issues/518 */\n        }\n        <div style={containsLayer ? undefined : { display: \"none\" }}>{dropProvided.placeholder}</div>\n      </div>);\n  }\n\n  return (\n    <Droppable\n      droppableId={droppableId}\n      renderClone={renderItem}\n      getContainerForClone={props.getContainerForClone as any}\n    >\n      {renderDraggable}\n    </Droppable>\n  );\n}\n"]}
+{"version":3,"file":"MapLayerDroppable.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerDroppable.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n// cSpell:ignore droppable Sublayer Basemap\n\n// the following quiet warning caused by react-beautiful-dnd package\n/* eslint-disable @typescript-eslint/unbound-method */\n\nimport \"./MapLayerManager.scss\";\nimport * as React from \"react\";\nimport { Draggable, DraggableChildrenFn, Droppable, DroppableProvided, DroppableStateSnapshot } from \"react-beautiful-dnd\";\nimport { UiFramework } from \"@itwin/appui-react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { ImageMapLayerSettings, SubLayerId } from \"@itwin/core-common\";\nimport {\n  IModelApp, MapLayerImageryProviderStatus, MapLayerIndex, MapTileTreeScaleRangeVisibility, NotifyMessageDetails, OutputMessagePriority,\n  ScreenViewport,\n} from \"@itwin/core-frontend\";\nimport { Icon } from \"@itwin/core-react\";\nimport { Button, Checkbox } from \"@itwin/itwinui-react\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { MapLayerOptions, StyleMapLayerSettings } from \"../Interfaces\";\nimport { AttachLayerButtonType, AttachLayerPopupButton } from \"./AttachLayerPopupButton\";\nimport { MapLayerSettingsMenu } from \"./MapLayerSettingsMenu\";\nimport { MapUrlDialog, SourceState } from \"./MapUrlDialog\";\nimport { SubLayersPopupButton } from \"./SubLayersPopupButton\";\n\n/** @internal */\ninterface MapLayerDroppableProps {\n  isOverlay: boolean;\n  layersList?: StyleMapLayerSettings[];\n  mapLayerOptions?: MapLayerOptions;\n  getContainerForClone: () => HTMLElement;\n  activeViewport: ScreenViewport;\n  onMenuItemSelected: (action: string, mapLayerSettings: StyleMapLayerSettings) => void;\n  onItemVisibilityToggleClicked: (mapLayerSettings: StyleMapLayerSettings) => void;\n  onItemSelected: (isOverlay: boolean, index: number) => void;\n  onItemEdited: ( ) => void;\n  disabled?: boolean;\n}\n\nconst changeVisibilityByElementId = (element: Element|null, visible: boolean) => {\n  if (element)\n    element.setAttribute(\"style\", `visibility: ${visible ? \"visible\" : \"hidden\"}`);\n};\n\n/** @internal */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function MapLayerDroppable(props: MapLayerDroppableProps) {\n  const containsLayer = props.layersList && props.layersList.length > 0;\n  const droppableId = props.isOverlay ? \"overlayMapLayers\" : \"backgroundMapLayers\";\n  const [toggleVisibility] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.ToggleVisibility\"));\n  const [requireAuthTooltip] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.RequireAuthTooltip\"));\n  const [noBackgroundMapsSpecifiedLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.NoBackgroundLayers\"));\n  const [noUnderlaysSpecifiedLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.NoOverlayLayers\"));\n  const [dropLayerLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.DropLayerLabel\"));\n  const [outOfRangeTitle] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.layerOutOfRange\"));\n\n  const onSubLayerStateChange = (activeLayer: StyleMapLayerSettings, subLayerId: SubLayerId, isSelected: boolean) => {\n    const mapLayerStyleIdx =  props.activeViewport.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);\n    if (mapLayerStyleIdx !== -1 && activeLayer.subLayers)\n      props.activeViewport.displayStyle.changeMapSubLayerProps({ visible: isSelected }, subLayerId, { index: mapLayerStyleIdx, isOverlay: activeLayer.isOverlay });\n  };\n\n  const handleOk = React.useCallback((index: MapLayerIndex, sourceState?: SourceState) => {\n    UiFramework.dialogs.modal.close();\n\n    const source = sourceState?.source;\n    const vp = props?.activeViewport;\n    if (vp === undefined || sourceState === undefined || source === undefined) {\n      const error = MapLayersUI.localization.getLocalizedString(\"mapLayers:Messages.MapLayerAttachMissingViewOrSource\");\n      const msg = MapLayersUI.localization.getLocalizedString(\"mapLayers:Messages.MapLayerAttachError\", { error, sourceName: source?.name ?? \"\" });\n      IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Error, msg));\n      return;\n    }\n\n    const validation = sourceState.validation;\n\n    // Layer is already attached,\n    // This calls invalidateRenderPlan()\n    vp.displayStyle.changeMapLayerProps({subLayers: validation.subLayers}, index);\n    vp.displayStyle.changeMapLayerCredentials(index, source.userName, source.password);\n\n    // Either initial attach/initialize failed or the layer failed to load at least one tile\n    // because of an invalid token; in both cases tile tree needs to be fully reset\n    const provider = vp.getMapLayerImageryProvider(index);\n    provider?.resetStatus();\n    vp.resetMapLayer(index);\n\n    props.onItemEdited();\n  }, [props]);\n\n  const changeSettingsMenuVisibility = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, visible: boolean)=>{\n    changeVisibilityByElementId(event.currentTarget.querySelector(\"#MapLayerSettingsMenuWrapper\"), visible);\n    changeVisibilityByElementId(event.currentTarget.querySelector(\"#MapLayerSettingsSubLayersMenu\"), visible);\n  };\n\n  const renderItem: DraggableChildrenFn = (dragProvided, _, rubric) => {\n    assert(props.layersList !== undefined);\n    const activeLayer = props.layersList[rubric.source.index];\n    const outOfRange = activeLayer.treeVisibility === MapTileTreeScaleRangeVisibility.Hidden;\n\n    return (\n      <div className=\"map-manager-source-item\" data-id={rubric.source.index} key={activeLayer.name}\n        {...dragProvided.draggableProps}\n        ref={dragProvided.innerRef}\n        onMouseEnter={(event)=>changeSettingsMenuVisibility(event, true)}\n        onMouseLeave={(event)=>changeSettingsMenuVisibility(event, false)} >\n\n        {/* Checkbox */}\n        <Checkbox data-testid={\"select-item-checkbox\"} checked={activeLayer.selected} onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n          activeLayer.selected = event.target.checked;\n          props.onItemSelected(props.isOverlay, rubric.source.index);\n        }\n\n        }></Checkbox>\n        {/* Visibility icon */}\n        <Button disabled={props.disabled} size=\"small\" styleType=\"borderless\" className=\"map-manager-item-visibility map-manager-visibility-icon\" title={toggleVisibility} onClick={() => { props.onItemVisibilityToggleClicked(activeLayer); }}>\n          <Icon iconSpec={activeLayer.visible ? \"icon-visibility\" : \"icon-visibility-hide-2\"} />\n        </Button>\n\n        {/* Label */}\n        <span className={props.disabled || outOfRange ? \"map-manager-item-label-disabled\" : \"map-manager-item-label\"}\n          title={outOfRange ? outOfRangeTitle : undefined}\n          {...dragProvided.dragHandleProps}\n\n        >\n          {activeLayer.name}\n          {activeLayer.provider?.status === MapLayerImageryProviderStatus.RequireAuth &&\n          <Button\n            disabled={props.disabled}\n            size=\"small\"\n            styleType=\"borderless\"\n            onClick={() => {\n              const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);\n              if (indexInDisplayStyle !== undefined && indexInDisplayStyle >= 0) {\n                const index = { index: indexInDisplayStyle, isOverlay: activeLayer.isOverlay };\n                const layer = props.activeViewport.displayStyle.mapLayerAtIndex(index);\n                if (layer instanceof ImageMapLayerSettings) {\n                  UiFramework.dialogs.modal.open(\n                    <MapUrlDialog\n                      activeViewport={props.activeViewport}\n                      isOverlay={props.isOverlay}\n                      signInModeArgs={{layer}}\n                      onOkResult={(sourceState?: SourceState) => handleOk(index, sourceState)}\n                      onCancelResult={() => {UiFramework.dialogs.modal.close();}}\n                      mapLayerOptions={props.mapLayerOptions} />\n                  );\n                }\n              }\n\n            }}\n            title={requireAuthTooltip}\n          >\n            <Icon className=\"map-layer-source-item-warnMessage-icon\" iconSpec=\"icon-status-warning\" />\n          </Button>\n          }\n        </span>\n\n        {/* SubLayersPopupButton */}\n        <div id=\"MapLayerSettingsSubLayersMenu\" style={{visibility: \"hidden\"}}  className=\"map-manager-item-sub-layer-container\" >\n          {activeLayer.subLayers && activeLayer.subLayers.length > 1 &&\n            <SubLayersPopupButton\n              checkboxStyle=\"eye\"\n              expandMode=\"rootGroupOnly\"\n              subLayers={props.activeViewport ? activeLayer.subLayers : undefined}\n              singleVisibleSubLayer={activeLayer.provider?.mutualExclusiveSubLayer}\n              onSubLayerStateChange={(subLayerId: SubLayerId, isSelected: boolean) => { onSubLayerStateChange(activeLayer, subLayerId, isSelected); }}\n            />\n          }\n        </div>\n        {activeLayer.provider?.status === MapLayerImageryProviderStatus.RequireAuth &&\n          <Button\n            disabled={props.disabled}\n            size=\"small\"\n            styleType=\"borderless\"\n            onClick={() => {\n              const indexInDisplayStyle = props.activeViewport?.displayStyle.findMapLayerIndexByNameAndSource(activeLayer.name, activeLayer.source, activeLayer.isOverlay);\n              if (indexInDisplayStyle !== undefined && indexInDisplayStyle >= 0) {\n                const index = { index: indexInDisplayStyle, isOverlay: activeLayer.isOverlay };\n                const layer = props.activeViewport.displayStyle.mapLayerAtIndex(index);\n                if (layer instanceof ImageMapLayerSettings) {\n                  UiFramework.dialogs.modal.open(\n                    <MapUrlDialog\n                      activeViewport={props.activeViewport}\n                      isOverlay={props.isOverlay}\n                      signInModeArgs={{layer}}\n                      onOkResult={(sourceState?: SourceState) => handleOk(index, sourceState)}\n                      onCancelResult={() => {UiFramework.dialogs.modal.close();}}\n                      mapLayerOptions={props.mapLayerOptions} />\n                  );\n                }\n              }\n\n            }}\n            title={requireAuthTooltip}\n          >\n            <Icon className=\"map-layer-source-item-warnMessage-icon\" iconSpec=\"icon-status-warning\" />\n          </Button>\n        }\n        <div id=\"MapLayerSettingsMenuWrapper\" style={{visibility: \"hidden\"}} >\n          <MapLayerSettingsMenu activeViewport={props.activeViewport} mapLayerSettings={activeLayer} onMenuItemSelection={props.onMenuItemSelected} disabled={props.disabled} />\n        </div>\n\n      </div>\n    );\n  };\n\n  function renderDraggableContent(snapshot: DroppableStateSnapshot): React.ReactNode {\n    let node: React.ReactNode;\n    if (containsLayer) {\n      // Render a <Draggable>\n      node = (props.layersList?.map((mapLayerSettings, i) =>\n        <Draggable isDragDisabled={props.disabled} key={mapLayerSettings.name} draggableId={mapLayerSettings.name} index={i}>\n          {renderItem}\n        </Draggable>));\n    } else {\n      // Render a label that provide a 'Drop here' hint\n      const label = props.isOverlay ? noUnderlaysSpecifiedLabel : noBackgroundMapsSpecifiedLabel;\n      node =\n        <div title={label} className=\"map-manager-no-layers-container\">\n          {snapshot.isDraggingOver ?\n            <span className=\"map-manager-no-layers-label\">{dropLayerLabel}</span>\n            :\n            <>\n              <span className=\"map-manager-no-layers-label\">{label}</span>\n              <AttachLayerPopupButton disabled={props.disabled} buttonType={AttachLayerButtonType.Blue} isOverlay={props.isOverlay} />\n            </>\n          }\n        </div>;\n    }\n    return node;\n  }\n\n  function renderDraggable(dropProvided: DroppableProvided, dropSnapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement> {\n    return (\n      <div className={`map-manager-attachments${dropSnapshot.isDraggingOver && containsLayer ? \" is-dragging-map-over\" : \"\"}`} ref={dropProvided.innerRef} {...dropProvided.droppableProps} >\n\n        {renderDraggableContent(dropSnapshot)}\n\n        {\n          /* We don't want a placeholder when displaying the 'Drop here' message\n              Unfortunately, if don't add it, 'react-beautiful-dnd' show an error message in the console.\n              So I simply make it hidden. See https://github.com/atlassian/react-beautiful-dnd/issues/518 */\n        }\n        <div style={containsLayer ? undefined : { display: \"none\" }}>{dropProvided.placeholder}</div>\n      </div>);\n  }\n\n  return (\n    <Droppable\n      droppableId={droppableId}\n      renderClone={renderItem}\n      getContainerForClone={props.getContainerForClone as any}\n    >\n      {renderDraggable}\n    </Droppable>\n  );\n}\n"]}

package/lib/cjs/ui/widget/MapLayerManager.d.ts

@@ -1,8 +1,8 @@
+import "./MapLayerManager.scss";
+import * as React from "react";
 import { BaseMapLayerSettings } from "@itwin/core-common";
 import { MapLayerSource, ScreenViewport } from "@itwin/core-frontend";
-import * as React from "react";
 import { MapLayerOptions, StyleMapLayerSettings } from "../Interfaces";
-import "./MapLayerManager.scss";
 /** @internal */
 export interface SourceMapContextProps {
     readonly sources: MapLayerSource[];

package/lib/cjs/ui/widget/MapLayerManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MapLayerManager.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerManager.tsx"],"names":[],"mappings":"AAUA,OAAO,EAA4C,oBAAoB,EAAoF,MAAM,oBAAoB,CAAC;AACtL,OAAO,EACiF,cAAc,EACpG,cAAc,EACf,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGvE,OAAO,wBAAwB,CAAC;AAMhC,gBAAgB;AAChB,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC;IACnC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IACvC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IACtC,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IACzC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACpD,QAAQ,CAAC,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACjD,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC;CAC5C;AAED,gBAAgB;AAChB,eAAO,MAAM,oBAAoB,wBAIhC,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,gBAAgB,sCAK3B,CAAC;AAEH,gBAAgB;AAChB,wBAAgB,mBAAmB,IAAI,qBAAqB,CAE3D;AAwCD,UAAU,oBAAoB;IAC5B,oBAAoB,EAAE,MAAM,WAAW,CAAC;IACxC,cAAc,EAAE,cAAc,CAAC;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAoe1D"}
+{"version":3,"file":"MapLayerManager.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerManager.tsx"],"names":[],"mappings":"AASA,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACqC,oBAAoB,EAC/D,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACiF,cAAc,EAC7E,cAAc,EACtC,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAOvE,gBAAgB;AAChB,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC;IACnC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IACvC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IACtC,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IACzC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACpD,QAAQ,CAAC,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACjD,QAAQ,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC;CAC5C;AAED,gBAAgB;AAChB,eAAO,MAAM,oBAAoB,wBAIhC,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,gBAAgB,sCAK3B,CAAC;AAEH,gBAAgB;AAChB,wBAAgB,mBAAmB,IAAI,qBAAqB,CAE3D;AAwCD,UAAU,oBAAoB;IAC5B,oBAAoB,EAAE,MAAM,WAAW,CAAC;IACxC,cAAc,EAAE,cAAc,CAAC;IAC/B,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA2e1D"}

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

@@ -8,20 +8,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MapLayerManager = exports.useSourceMapContext = exports.SourceMapContext = exports.defaultBaseMapLayers = void 0;
 // the following quiet warning caused by react-beautiful-dnd package
 /* eslint-disable @typescript-eslint/unbound-method */
+require("./MapLayerManager.scss");
+const React = require("react");
+const react_beautiful_dnd_1 = require("react-beautiful-dnd");
 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 CustomParamsMappingStorage_1 = require("../../CustomParamsMappingStorage");
+const CustomParamUtils_1 = require("../../CustomParamUtils");
 const MapLayerPreferences_1 = require("../../MapLayerPreferences");
-const BasemapPanel_1 = require("./BasemapPanel");
-const MapLayerDroppable_1 = require("./MapLayerDroppable");
-require("./MapLayerManager.scss");
 const mapLayers_1 = require("../../mapLayers");
+const BasemapPanel_1 = require("./BasemapPanel");
 const MapLayerActionButtons_1 = require("./MapLayerActionButtons");
-const MapManagerMapLayersHeader_1 = require("./MapManagerMapLayersHeader");
+const MapLayerDroppable_1 = require("./MapLayerDroppable");
 const MapLayerSettingsPopupButton_1 = require("./MapLayerSettingsPopupButton");
+const MapManagerMapLayersHeader_1 = require("./MapManagerMapLayersHeader");
 /** @internal */
 exports.defaultBaseMapLayers = [
     core_common_1.BaseMapLayerSettings.fromProvider(core_common_1.BackgroundMapProvider.fromJSON({ name: "BingProvider", type: core_common_1.BackgroundMapType.Aerial })),
@@ -185,14 +187,20 @@ function MapLayerManager(props) {
             if (!isMounted.current) {
                 return;
             }
-            // This is where the list of layers first gets populated...
+            // This is where the list of sources first gets populated...
             const sources = [];
             const addSource = (source) => !source.baseMap && sources.push(source); // No longer let MapLayerSources drive bg maps.
             sourceLayers?.allSource.forEach(addSource);
+            const cpMappingStorage = new CustomParamsMappingStorage_1.CustomParamsMappingStorage();
             preferenceSources.forEach((source) => {
-                // Do not add duplicate
-                if (!sources.find((curSource) => source.name === curSource.name))
+                // Find existing entries to avoid adding duplicated sources
+                if (!sources.find((curSource) => source.name === curSource.name)) {
+                    const cpMapping = cpMappingStorage.get(source.url.toLowerCase());
+                    if (cpMapping && cpMapping.length > 0) {
+                        CustomParamUtils_1.CustomParamUtils.setSourceCustomParams(source, cpMapping[0].customParamNames);
+                    }
                     addSource(source);
+                }
             });
             sources.sort((a, b) => (0, core_bentley_1.compareStrings)(a.name.toLowerCase(), b.name.toLowerCase()));
             setMapSources(sources);
@@ -412,8 +420,8 @@ function MapLayerManager(props) {
             (layerList && layerList.length > 0) &&
                 React.createElement(React.Fragment, null,
                     React.createElement(MapLayerActionButtons_1.MapLayerActionButtons, { disabled: !backgroundMapVisible, disabledUnlink: !hasItemSelected(isOverlay), hideAll: async () => changeAllLayerVisibility(false, isOverlay), showAll: async () => changeAllLayerVisibility(true, isOverlay), invert: async () => invertAllLayerVisibility(isOverlay), selectAll: async () => selectAllLayers(isOverlay), unlink: async () => detachSelectedLayers(isOverlay), checked: hasItemSelected(isOverlay) })),
-            React.createElement(MapLayerDroppable_1.MapLayerDroppable, { disabled: !backgroundMapVisible, isOverlay: isOverlay, layersList: layerList, mapTypesOptions: props.mapLayerOptions?.mapTypeOptions, getContainerForClone: props.getContainerForClone, activeViewport: props.activeViewport, onMenuItemSelected: handleOnMenuItemSelection, onItemVisibilityToggleClicked: handleLayerVisibilityChange, onItemSelected: handleItemSelected, onItemEdited: handleRefreshFromStyle })));
-    }, [backgroundMapLayers, backgroundMapVisible, changeAllLayerVisibility, detachSelectedLayers, handleItemSelected, handleLayerVisibilityChange, handleOnMenuItemSelection, handleRefreshFromStyle, hasItemSelected, invertAllLayerVisibility, overlayMapLayers, overlaysLabel, props.activeViewport, props.getContainerForClone, props.mapLayerOptions?.mapTypeOptions, selectAllLayers, underlaysLabel]);
+            React.createElement(MapLayerDroppable_1.MapLayerDroppable, { disabled: !backgroundMapVisible, isOverlay: isOverlay, layersList: layerList, mapLayerOptions: props.mapLayerOptions, getContainerForClone: props.getContainerForClone, activeViewport: props.activeViewport, onMenuItemSelected: handleOnMenuItemSelection, onItemVisibilityToggleClicked: handleLayerVisibilityChange, onItemSelected: handleItemSelected, onItemEdited: handleRefreshFromStyle })));
+    }, [backgroundMapLayers, backgroundMapVisible, changeAllLayerVisibility, detachSelectedLayers, handleItemSelected, handleLayerVisibilityChange, handleOnMenuItemSelection, handleRefreshFromStyle, hasItemSelected, invertAllLayerVisibility, overlayMapLayers, overlaysLabel, props.activeViewport, props.getContainerForClone, props.mapLayerOptions, selectAllLayers, underlaysLabel]);
     const [baseMapPanelLabel] = React.useState(mapLayers_1.MapLayersUI.localization.getLocalizedString("mapLayers:Basemap.BaseMapPanelTitle"));
     return (React.createElement(exports.SourceMapContext.Provider, { value: {
             activeViewport,