Feature: List layers in Quick access presets infobox

apps/backend/App_Data/map_1.json

@@ -549,7 +549,34 @@
             "infobox": ""
           }
         ],
-        "quickLayersPresets": [],
+        "enableQuickAccessPresets": true,
+        "quickAccessPresets": [
+          {
+            "id": "sensate-data",
+            "title": "Senaste data",
+            "author": "Hajks kodgrupp",
+            "Description": "Det här är en grupp av den senaste datan där vi har flera olika år.",
+            "keywords": ["naturvårdsverket", "2019", "scb", "2023" ],
+            "layers": [
+              {
+                "id": "1",
+                "drawOrder": 3,
+                "visible": true,
+                "opacity": 1
+              },
+              {
+                "id": "toimzo",
+                "drawOrder": 3,
+                "visible": true,
+                "opacity": 1
+              },
+              {
+                "id": "vzjhpz",
+                "visible": true
+              }
+            ]
+          }
+        ],
         "active": true,
         "visibleAtStart": false,
         "visibleAtStartMobile": false,

apps/client/src/plugins/LayerSwitcher/components/Favorites/FavoritesList.js

@@ -134,6 +134,19 @@ function FavoritesList({
     return backgroundLayerName;
   };
 
+  const getLayerNames = (layers) => {
+    const layerNames = [];
+    layers?.forEach((layer) => {
+      const mapLayer = map
+        .getAllLayers()
+        .find((l) => l.get("name") === layer.id);
+      if (mapLayer && mapLayer.get("layerType") !== "base") {
+        layerNames.push(mapLayer.get("caption"));
+      }
+    });
+    return layerNames;
+  };
+
   // Render dialog with layerpackage information
   const renderInfoDialog = () => {
     return createPortal(
@@ -165,6 +178,13 @@ function FavoritesList({
               {selectedItem && getBaseLayerName(selectedItem.layers)}
             </Typography>
           </Stack>
+          <DialogContentText sx={{ mt: 2, mb: 1 }}>Lager</DialogContentText>
+          <Stack direction="row" useFlexGap spacing={2}>
+            {selectedItem &&
+              getLayerNames(selectedItem?.layers).map((n) => (
+                <Typography>{n}</Typography>
+              ))}
+          </Stack>
           <Divider sx={{ mt: 2 }} />
           <Typography sx={{ mt: 2, mb: 1 }}>
             Vid laddning ersätts lagren i snabbåtkomst. Alla tända lager i
@@ -297,6 +317,7 @@ function FavoritesList({
                   dense
                   key={`lp${favorite.metadata.title}-${index}`}
                   divider
+                  primary={favorite.metadata.title}
                   onClick={(e) => {
                     e.stopPropagation();
                     loadFavoriteCallback(favorite, true, true);

apps/client/src/plugins/LayerSwitcher/components/Favorites/FavoritesOptions.js

@@ -102,10 +102,10 @@ export default function FavoritesOptions({
           <ListItemText>Redigera favoriter</ListItemText>
         </MenuItem>
         {favorites.length > 0 && <Divider />}
-        {favorites.map((favorite) => {
+        {favorites.map((favorite, i) => {
           return (
             <MenuItem
-              key={favorite.metadata.title}
+              key={`${favorite.metadata.title}-${i}`}
               onClick={(e) => handleLoad(e, favorite)}
             >
               <ListItemIcon>

apps/client/src/plugins/LayerSwitcher/components/QuickAccessPresets.js

@@ -139,14 +139,18 @@ function QuickAccessPresets({
     layers.forEach((l) => {
       const layer = allMapLayers.find((la) => la.get("name") === l.id);
       if (layer) {
+        const opacity = l?.opacity ?? 1;
+        const drawOrder = l?.drawOrder ?? 1;
+        const visible = l?.visible ?? true;
+
         // Set quickaccess property
         if (layer.get("layerType") !== "base") {
           layer.set("quickAccess", true);
         }
         // Set drawOrder (zIndex)
-        layer.setZIndex(l.drawOrder);
+        layer.setZIndex(drawOrder);
         // Set opacity
-        layer.setOpacity(l.opacity);
+        layer.setOpacity(opacity);
         // Special handling for layerGroups and baselayers
         if (layer.get("layerType") === "group") {
           if (l.visible === true) {
@@ -165,9 +169,9 @@ function QuickAccessPresets({
             layer.get("name")
           );
           // Set visibility
-          layer.set("visible", l.visible);
+          layer.set("visible", visible);
         } else {
-          layer.set("visible", l.visible);
+          layer.set("visible", visible);
         }
       } else if (l.id < 0) {
         // A fake maplayer is in the package
@@ -281,6 +285,19 @@ function QuickAccessPresets({
     return backgroundLayerName;
   };
 
+  const getLayerNames = (layers) => {
+    const layerNames = [];
+    layers?.forEach((layer) => {
+      const mapLayer = map
+        .getAllLayers()
+        .find((l) => l.get("name") === layer.id);
+      if (mapLayer && mapLayer.get("layerType") !== "base") {
+        layerNames.push(mapLayer.get("caption"));
+      }
+    });
+    return layerNames;
+  };
+
   // Render layerpackage keywords
   const renderKeywords = (keywords) => {
     // Check if keywords is an array and if it contains any items
@@ -338,9 +355,16 @@ function QuickAccessPresets({
             <PublicOutlinedIcon fontSize="small"></PublicOutlinedIcon>
             <Typography>
               {loadLpInfoConfirmation &&
-                getBaseLayerName(loadLpInfoConfirmation.layers)}
+                getBaseLayerName(loadLpInfoConfirmation?.layers)}
             </Typography>
           </Stack>
+          <DialogContentText sx={{ mt: 2, mb: 1 }}>Lager</DialogContentText>
+          <Stack direction="row" useFlexGap spacing={2}>
+            {loadLpInfoConfirmation &&
+              getLayerNames(loadLpInfoConfirmation?.layers).map((n) => (
+                <Typography>{n}</Typography>
+              ))}
+          </Stack>
           <Divider sx={{ mt: 2 }} />
           <Typography sx={{ mt: 2, mb: 1 }}>
             Vid laddning kommer aktuella lager i snabbåtkomst att ersättas med