UX: fix #2089, improve background selection hotkeys and add emoji to indicate categories of background layers

src/UI/Map/Icon.svelte

@@ -50,7 +50,7 @@
   export let color: string | undefined = undefined
   export let clss: string | undefined = ""
   clss ??= ""
-  export let emojiHeight = 40
+  export let emojiHeight = "40px"
 </script>
 
 {#if icon}
@@ -147,7 +147,7 @@
   {:else if icon === "user_circle"}
     <UserCircleIcon class={clss} {color} />
   {:else if Utils.isEmoji(icon)}
-    <span style={`font-size: ${emojiHeight}px; line-height: ${emojiHeight}px`}>
+    <span style=  {`font-size: ${emojiHeight}; line-height: ${emojiHeight}`}>
       {icon}
     </span>
   {:else}

src/UI/Map/Marker.svelte

@@ -30,6 +30,7 @@
    * Class which is applied onto the individual icons
    */
   export let clss = ""
+  export let emojiHeight : string = "40px"
 
   /**
    * Class applied onto the entire element
@@ -41,7 +42,7 @@
   <div class={twMerge("relative", size)}>
     {#each iconsParsed as icon}
       <div class="absolute top-0 left-0 flex h-full w-full items-center">
-        <Icon icon={icon.icon} color={icon.color} {clss} />
+        <Icon icon={icon.icon} color={icon.color} {clss} {emojiHeight} />
       </div>
     {/each}
   </div>

src/UI/Map/RasterLayerPicker.svelte

@@ -23,7 +23,7 @@
   let rasterLayerId = rasterLayer.sync(
     (l) => l?.properties?.id,
     [],
-    (id) => availableLayers.find((l) => l.properties.id === id)
+    (id) => availableLayers.find((l) => l.properties.id === id),
   )
   rasterLayer.setData(availableLayers[0])
   $: rasterLayer.setData(availableLayers[0])
@@ -36,13 +36,13 @@
           return
         }
         rasterLayer.setData(fav)
-      })
+      }),
     )
 
     onDestroy(
       rasterLayer.addCallbackAndRunD((selected) => {
         favourite?.setData(selected.properties.id)
-      })
+      }),
     )
   }
 
@@ -56,7 +56,7 @@
         } else {
           rasterLayerOnMap.setData(undefined)
         }
-      })
+      }),
     )
   }
 
@@ -93,6 +93,15 @@
       {#each availableLayers as availableLayer}
         <option value={availableLayer.properties.id}>
           {availableLayer.properties.name}
+          {#if availableLayer.properties.category.startsWith("historic")}
+            ⏱️
+          {/if}
+          {#if availableLayer.properties.category.endsWith("elevation")}
+            ⛰
+          {/if}
+          {#if availableLayer.properties.best}
+            ⭐
+          {/if}
         </option>
       {/each}
     </select>

src/UI/Popup/TagRendering/TagRenderingMapping.svelte

@@ -30,6 +30,12 @@
       | "large-height"
       | string
   }
+
+  const emojiHeights = {
+    "small":"2rem",
+    "medium":"3rem",
+    "large":"5rem"
+  }
 </script>
 
 {#if mapping.icon !== undefined}
@@ -42,6 +48,9 @@
         }-width`,
         "shrink-0"
       )}
+
+      emojiHeight={ emojiHeights[mapping.iconClass] ?? "2rem"}
+
       clss={`mapping-icon-${mapping.iconClass ?? "small"}`}
     />
     <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} {clss} />