Themes(climbing): make map bigger, fix histogram

assets/layers/climbing_area/climbing_area.json

@@ -130,6 +130,7 @@
       }
     ]
   },
+  "popupInFloatover": "title",
   "pointRendering": [
     {
       "iconSize": "40,40",
@@ -189,7 +190,14 @@
     "images",
     {
       "id": "minimap",
-      "render": "{minimap(18, id, _contained_climbing_route_ids): height: 9rem; overflow: hidden; border-radius:3rem; }"
+      "render": {
+        "special": {
+          "type": "minimap",
+          "zoomlevel": "18",
+          "idKey": "id;_contained_climbing_route_ids",
+          "class": "h-96 border border-gray-500"
+        }
+      }
     },
     {
       "render": {

src/UI/Popup/HistogramViz.ts

@@ -74,14 +74,17 @@ export class HistogramViz extends SpecialVisualization {
         }
 
         const listSource: Store<string[]> = tagSource.map((tags) => {
+            const value = tags[args[0]]
             try {
-                const value = tags[args[0]]
                 if (value === "" || value === undefined) {
                     return undefined
                 }
+                if(Array.isArray(value)){
+                    return value
+                }
                 return JSON.parse(value)
             } catch (e) {
-                console.error("Could not load histogram: parsing  of the list failed: ", e)
+                console.error("Could not load histogram: parsing  of the list failed: ", e,"\nthe data to parse is",value)
                 return undefined
             }
         })

src/UI/Popup/MinimapViz.svelte

@@ -11,11 +11,11 @@
 
   export let state: SpecialVisualizationState
   export let tagSource: UIEventSource<Record<string, string>>
-  export let args: string[]
+  export let defaultzoom: number
+  export let idkeys: string[]
   export let feature: Feature
-
-  const keys = [...args]
-  keys.splice(0, 1)
+  export let clss : string = "h-40 rounded"
+  const keys =idkeys
   let featuresToShow: Store<Feature[]> = state.indexedFeatures.featuresById.map(
     (featuresById) => {
       if (featuresById === undefined) {
@@ -62,13 +62,8 @@
   mla.allowMoving.setData(false)
   mla.allowZooming.setData(false)
   mla.location.setData({ lon, lat })
+  mla.zoom.setData(defaultzoom)
 
-  if (args[0]) {
-    const parsed = Number(args[0])
-    if (!isNaN(parsed) && parsed > 0 && parsed < 25) {
-      mla.zoom.setData(parsed)
-    }
-  }
 
   ShowDataLayer.showMultipleLayers(
     mlmap,
@@ -78,7 +73,7 @@
   )
 </script>
 
-<div class="h-40 rounded" style="overflow: hidden; pointer-events: none;">
+<div class={clss} style="overflow: hidden; pointer-events: none;">
   <DelayedComponent>
     <MaplibreMap interactive={false} map={mlmap} mapProperties={mla} />
   </DelayedComponent>

src/UI/SpecialVisualisations/UISpecialVisualisations.ts

@@ -96,10 +96,15 @@ class Minimap extends SpecialVisualizationSvelte {
             defaultValue: "18",
         },
         {
-            doc: "(Matches all resting arguments) This argument should be the key of a property of the feature. The corresponding value is interpreted as either the id or the a list of ID's. The features with these ID's will be shown on this minimap. (Note: if the key is 'id', list interpration is disabled)",
+            doc: "The key of one or more properties of the feature, semi-colon separated. The corresponding value is interpreted as either the id or the a list of ID's. The features with these ID's will be shown on this minimap. ",
             name: "idKey",
             defaultValue: "id",
         },
+        {
+            name: "class",
+            doc: "CSS-classes (space-separated) that should be applied onto the container",
+            defaultValue: "h-40 rounded",
+        },
     ]
     example =
         "`{minimap()}`, `{minimap(17, id, _list_of_embedded_feature_ids_calculated_by_calculated_tag):height:10rem; border: 2px solid black}`"
@@ -110,7 +115,10 @@ class Minimap extends SpecialVisualizationSvelte {
         args: string[],
         feature: Feature
     ): SvelteUIElement {
-        return new SvelteUIElement(MinimapViz, { state, args, feature, tagSource })
+        const minzoom = Number(args[0] ?? 18)
+        const ids = (args[1]?.split(";")?.map(s => s.trim())) ?? ["id"]
+        const clss = args[2]
+        return new SvelteUIElement(MinimapViz, { state, minzoom, idkeys: ids, clss, feature, tagSource })
     }
 }