Merge branch 'develop' into changing-layers-icons

Canadian-Geospatial-Platform · Nov 15, 2023 · 97d7c3b · 97d7c3b
2 parents 16e9bf4 + ed222db
commit 97d7c3b
Show file tree

Hide file tree

Showing 13 changed files with 220 additions and 31 deletions.
diff --git a/packages/geoview-core/src/core/components/data-table/data-panel.tsx b/packages/geoview-core/src/core/components/data-table/data-panel.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Projection } from 'ol/proj';
 import { useTranslation } from 'react-i18next';
+import { IconStack } from '@/app';
 import {
   Box,
   Typography,
@@ -11,7 +12,6 @@ import {
   ListItemButton,
   IconButton,
   ListItemIcon,
-  SendIcon,
   ChevronRightIcon,
   CircularProgress,
   Button,
@@ -124,7 +124,7 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data
                 <ListItem disablePadding>
                   <ListItemButton selected={selectedLayerIndex === index} onClick={(event) => handleListItemClick(event, index)}>
                     <ListItemIcon>
-                      <SendIcon sx={{ width: '0.75em', height: '0.75em' }} />
+                      <IconStack layerPath={layerKey} />
                     </ListItemIcon>
                     <Box sx={sxClasses.listPrimaryText}>
                       <Typography component="p">{layerName![language]}</Typography>

diff --git a/packages/geoview-core/src/core/components/data-table/data-table-style.ts b/packages/geoview-core/src/core/components/data-table/data-table-style.ts
@@ -36,6 +36,7 @@ export const getSxClasses = (theme: Theme) => ({
   listPrimaryText: {
     minWidth: '0',
     marginTop: '0.5rem',
+    marginLeft: '10px',
     marginBottom: '0.5rem',
     flex: '1 1 auto',
     display: 'flex',

diff --git a/packages/geoview-core/src/core/components/details/details-style.ts b/packages/geoview-core/src/core/components/details/details-style.ts
@@ -18,6 +18,7 @@ export const getSxClasses = (theme: Theme) => ({
     textOverflow: 'ellipsis',
   },
   listPrimaryText: {
+    marginLeft: '0.62rem',
     minWidth: '0',
     marginTop: '0.5rem',
     marginBottom: '0.5rem',

diff --git a/packages/geoview-core/src/core/components/details/layers-list-footer.tsx b/packages/geoview-core/src/core/components/details/layers-list-footer.tsx
@@ -12,7 +12,6 @@ import {
   ListItemButton,
   List,
   ListItemIcon,
-  SendIcon,
   Tooltip,
   IconButton,
   Grid,
@@ -28,7 +27,7 @@ import {
   ArrowBackIcon,
 } from '@/ui';
 import { FeatureInfo } from './feature-info-new';
-import { PayloadBaseClass, api } from '@/app';
+import { PayloadBaseClass, api, IconStack } from '@/app';
 import { EVENT_NAMES } from '@/api/events/event-types';
 import {
   payloadIsAFeatureHighlight,
@@ -200,7 +199,7 @@ export function LayersListFooter(props: TypeLayersListProps): JSX.Element {
                       }}
                     >
                       <ListItemIcon>
-                        <SendIcon sx={{ width: '0.75em', height: '0.75em' }} />
+                        <IconStack layerPath={layerData.layerPath} />
                       </ListItemIcon>
                       <Box sx={sxClasses.listPrimaryText}>
                         <Typography component="p">{layerData.layerName ? layerData.layerName : t('details.clickOnMap')}</Typography>

diff --git a/packages/geoview-core/src/core/components/icon-stack/helper.ts b/packages/geoview-core/src/core/components/icon-stack/helper.ts
@@ -0,0 +1,69 @@
+export type TypeLayerInfo = {
+  layerPath: string;
+  iconData: string[];
+};
+
+export type TypeLayerInfoArray = TypeLayerInfo[];
+
+export const layerInfo: TypeLayerInfoArray = [
+  {
+    layerPath: 'esriFeatureLYR4/8',
+    iconData: [
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAR1JREFUKFNjZEAFzAw+6e7GHOwWV37++cT79++BN9tmnoEpYYQxAjLKzJj//Fv76edvma9//zNwszIzcLEwMjz5/HP32VdfwxgOLPgAVmyakCUhx8JxdcvL70JoNjG4iXAyPP/y69CZ1VPswYojMkuXrn/yJQpdIYzvIcbJsOPFLw+wYu+Eout73n7XwKXYToiD4dCbHxOgigvv73n7QwGXYmNeVoa3P/8uBisOTC46vO3VdxucJguwMRz6+L0ErDg5u6Jy/aOPbV9xqPYS4/y5/vVfeVjQMcVklW7Y9viLL7oGDzHOv69+/k06vmTiIng4MzAwMCVklza//vYn8N8/BiUGBoY/HKxMV699+lp0c9WMoyBLkRXjcjJcHACUTW/kHNx1hAAAAABJRU5ErkJggg==',
+    ],
+  },
+  {
+    layerPath: 'geojsonLYR1/polygons.json',
+    iconData: [
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAASZJREFUKFNjZEAC/1cxMH96zOD+jUnbgpPh6ieG/yIHBIrenIEpYYQxbva5m/34zbOWh+m9DBvTV4bf/7kZfvznZhBierybnelCmGAhwwew4vtdphJfGGSuyrOuF0K2CcR++sebQYjl6SHxwgv2YMXnuiKWKrOsiGKE24Oq5ckfXwZp1l0eYOnr3V7XpVm2aaCbCuO/+evEIMx8dAJY8c0e9/uSzDsVcCn++M+cgY3xw2Kw4svdvoflWTbb4FL8+o8TgxDzvhKw4j3tyZWm7EvaGBl/YlX/6Lf/TwW2jfIwLzEd64rZoM2y2hdZw///DAxP/vr+FWJ9kyRZcHwRsv+ZDrUlNIuwvgxkY/in9J+R4c8PBo6rYv9uFImX3TwKshJHYGF3PQBCJWK8tt5Q2wAAAABJRU5ErkJggg==',
+    ],
+  },
+  {
+    layerPath: 'geojsonLYR1/lines.json',
+    iconData: [
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+    ],
+  },
+  {
+    layerPath: 'uniqueValueId/1',
+    iconData: [
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAR1JREFUKFNjZEAFzAw+6e7GHOwWV37++cT79++BN9tmnoEpYYQxAjLKzJj//Fv76edvma9//zNwszIzcLEwMjz5/HP32VdfwxgOLPgAVmyakCUhx8JxdcvL70JoNjG4iXAyPP/y69CZ1VPswYojMkuXrn/yJQpdIYzvIcbJsOPFLw+wYu+Eout73n7XwKXYToiD4dCbHxOgigvv73n7QwGXYmNeVoa3P/8uBisOTC46vO3VdxucJguwMRz6+L0ErDg5u6Jy/aOPbV9xqPYS4/y5/vVfeVjQMcVklW7Y9viLL7oGDzHOv69+/k06vmTiIng4MzAwMCVklza//vYn8N8/BiUGBoY/HKxMV699+lp0c9WMoyBLkRXjcjJcHACUTW/kHNx1hAAAAABJRU5ErkJggg==',
+    ],
+  },
+  {
+    layerPath: 'esriFeatureLYR5/0',
+    iconData: [
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAR1JREFUKFNjZEAFzAw+6e7GHOwWV37++cT79++BN9tmnoEpYYQxAjLKzJj//Fv76edvma9//zNwszIzcLEwMjz5/HP32VdfwxgOLPgAVmyakCUhx8JxdcvL70JoNjG4iXAyPP/y69CZ1VPswYojMkuXrn/yJQpdIYzvIcbJsOPFLw+wYu+Eout73n7XwKXYToiD4dCbHxOgigvv73n7QwGXYmNeVoa3P/8uBisOTC46vO3VdxucJguwMRz6+L0ErDg5u6Jy/aOPbV9xqPYS4/y5/vVfeVjQMcVklW7Y9viLL7oGDzHOv69+/k06vmTiIng4MzAwMCVklza//vYn8N8/BiUGBoY/HKxMV699+lp0c9WMoyBLkRXjcjJcHACUTW/kHNx1hAAAAABJRU5ErkJggg==',
+    ],
+  },
+  {
+    layerPath: 'historical-flood/0',
+    iconData: [
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAR1JREFUKFNjZEAFzAw+6e7GHOwWV37++cT79++BN9tmnoEpYYQxAjLKzJj//Fv76edvma9//zNwszIzcLEwMjz5/HP32VdfwxgOLPgAVmyakCUhx8JxdcvL70JoNjG4iXAyPP/y69CZ1VPswYojMkuXrn/yJQpdIYzvIcbJsOPFLw+wYu+Eout73n7XwKXYToiD4dCbHxOgigvv73n7QwGXYmNeVoa3P/8uBisOTC46vO3VdxucJguwMRz6+L0ErDg5u6Jy/aOPbV9xqPYS4/y5/vVfeVjQMcVklW7Y9viLL7oGDzHOv69+/k06vmTiIng4MzAwMCVklza//vYn8N8/BiUGBoY/HKxMV699+lp0c9WMoyBLkRXjcjJcHACUTW/kHNx1hAAAAABJRU5ErkJggg==',
+    ],
+  },
+  {
+    layerPath: 'historical-flood/0',
+    iconData: [
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAR1JREFUKFNjZEAFzAw+6e7GHOwWV37++cT79++BN9tmnoEpYYQxAjLKzJj//Fv76edvma9//zNwszIzcLEwMjz5/HP32VdfwxgOLPgAVmyakCUhx8JxdcvL70JoNjG4iXAyPP/y69CZ1VPswYojMkuXrn/yJQpdIYzvIcbJsOPFLw+wYu+Eout73n7XwKXYToiD4dCbHxOgigvv73n7QwGXYmNeVoa3P/8uBisOTC46vO3VdxucJguwMRz6+L0ErDg5u6Jy/aOPbV9xqPYS4/y5/vVfeVjQMcVklW7Y9viLL7oGDzHOv69+/k06vmTiIng4MzAwMCVklza//vYn8N8/BiUGBoY/HKxMV699+lp0c9WMoyBLkRXjcjJcHACUTW/kHNx1hAAAAABJRU5ErkJggg==',
+    ],
+  },
+  {
+    layerPath: 'MSI/msi-94-or-more',
+    iconData: [
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAgpJREFUOE+FlM9rE0EUx9+bXbOa1phtio00xUIr0kPxJAj6LyjoyYNIT4LSYL0Itkn2ZW01B2O8eBFz8ODNk+DFmxevvUpVFKliTMmatPnRbHaebMraNNls5zjz5fNmPu8xCAHLNM15AM5LyQtE9GtYFIMg2YdZUyj2Tekob9jBFBG1/PJDIaZp3oDQzpo4/nOSa4kt2QmvsMOviKjTD/KFGIZxSVXxOY5tzONIGbmlO1yZXXdk6C6l6OOhECJKKArkMbJ5DSM/VBBuYQSuTTVlLfGusd25lcvlrF7QwE1cD8qx8iLqX3VQd/ezjsbSmqnKRqzY7+cAxPOgjH2eAq06UIDbEclbZ8uuHyNtFL0K/4OmaS4gynt7Hv4goPRpBAI3Y10/6eVH530g2fegti4q8fUwKO2AziPI0rlm+v7TsA+EroNqGyL6bRZHSioA+4K4PgHy7/SnzPLjuQFIMpnUxif0KxhqPBP6lziGaqKfwrsngCtnbG6P3slkMi8HIO4GEYWUI/IBHK0sidhGFLBnrhwNpDXjcH0832i0cr1tHujA6urKaYn4RIz+vozR7xrAnmCuTrPcnnwrbWWRiDYD54SIBKhwQQi76Pnh+smuB3TCt1Op1AdEPCDMd+yJSEVVXu36CZfivHPKcT1YlvW6UCg0Dx17L+D5YbSXoKO96PcQ+Jygr2HY2T9D5usSwVan3AAAAABJRU5ErkJggg==',
+    ],
+  },
+];
diff --git a/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts b/packages/geoview-core/src/core/components/icon-stack/icon-stack-style.ts
@@ -0,0 +1,61 @@
+export const getSxClasses = () => ({
+  legendIconTransparent: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 24,
+    height: 24,
+  },
+  iconPreviewHoverable: {
+    position: 'absolute',
+    left: -3,
+    top: -2,
+    padding: 0,
+    borderRadius: 0,
+    border: '1px solid',
+    borderColor: 'grey.600',
+    boxShadow: 'rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px',
+    transition: 'transform .3s ease-in-out',
+    '&:hover': {
+      transform: 'rotate(-18deg) translateX(-8px)',
+    },
+  },
+  iconPreviewStacked: {
+    padding: 0,
+    borderRadius: 0,
+    border: '1px solid',
+    borderColor: 'grey.600',
+    boxShadow: 'rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px',
+    background: '#fff',
+  },
+  maxIconImg: {
+    maxWidth: 24,
+    maxHeight: 24,
+  },
+  legendIcon: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 24,
+    height: 24,
+    background: '#fff',
+  },
+  stackIconsBox: {
+    position: 'relative',
+    marginLeft: 8,
+    '&:focus': {
+      outlineColor: 'grey',
+    },
+  },
+  iconPreview: {
+    marginLeft: 8,
+    padding: 0,
+    borderRadius: 0,
+    border: '1px solid',
+    borderColor: 'palette.grey.600',
+    boxShadow: 'rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px',
+    '&:focus': {
+      border: 'revert',
+    },
+  },
+});