Fixes to sidewalks theme

Models/ThemeConfig/LineRenderingConfig.ts

@@ -29,7 +29,7 @@ public GenerateLeafletStyle(        tags: {}    ):
         {
             color: string,
             weight: number,
-            dashArray: number[],
+            dashArray: string,
             offset: number
         } {
         function rendernum(tr: TagRenderingConfig, deflt: number) {
@@ -49,7 +49,7 @@ public GenerateLeafletStyle(        tags: {}    ):
             return Utils.SubstituteKeys(str, tags)?.replace(/{.*}/g, "");
         }
 
-        const dashArray = render(this.dashArray)?.split(" ")?.map(Number);
+        const dashArray = render(this.dashArray);
         let color = render(this.color, "#00f");
         if (color.startsWith("--")) {
             color = getComputedStyle(document.body).getPropertyValue(

UI/Popup/FeatureInfoBox.ts

@@ -78,15 +78,19 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
                     renderingsForGroup.push(questionBox)
                 } else {
                     let classes = innerClasses
-                    if(renderingsForGroup.length === 0 && i > 0){
+                    let isHeader  = renderingsForGroup.length === 0 && i > 0
+                    if(isHeader){
                         // This is the first element of a group!
                         // It should act as header and be sticky
-                        classes= "sticky top-0"
+                        classes= ""
                     }
                     
                     const etr = new EditableTagRendering(tags, tr, layerConfig.units,{
                         innerElementClasses: innerClasses
                     })
+                    if(isHeader){
+                        etr.SetClass("sticky top-0")
+                    }
                     renderingsForGroup.push(etr)
                 }
             }

assets/layers/left_right_style/left_right_style.json

@@ -11,10 +11,21 @@
     },
     "mapRendering": [
         {
-            "location": [
+            "width": 15,
-                "point"
+            "color": {
-            ]
+                "render": "#ff000088",
+                "mappings": [{
+                    "if": "id=left",
+                    "then": "#0000ff88"
+                }]
             },
-        {}
+            "offset": {
+                "render": "-15",
+                "mappings": [{
+                    "if": "id=right",
+                    "then": "15"
+                }]
+            }
+        }
     ]
 }

assets/themes/grb_import/grb.json

@@ -29,6 +29,8 @@
         "maxCacheAge": 0
       },
       "minzoom": 18,
+      "mapRendering": [
+        {
           "width": {
             "render": "2"
           },
@@ -57,7 +59,9 @@
                 "then": "#0774f2"
               }
             ]
-      },
+          }
+        }
+      ],
       "title": "OSM-gebouw",
       "tagRenderings": [
         "all_tags"
@@ -93,12 +97,16 @@
         "maxCacheAge": 0
       },
       "minzoom": 18,
+      "mapRendering": [
+        {
           "color": {
             "render": "#00c"
           },
           "width": {
             "render": "1"
-      },
+          }
+        }
+      ],
       "title": {
         "render": {
           "*": "OSM-Object"
@@ -265,6 +273,12 @@
           }
         }
       ],
+      "mapRendering": [
+        {
+          "location": [
+            "point",
+            "center"
+          ],
           "label": {
             "mappings": [
               {
@@ -273,18 +287,20 @@
               }
             ]
           },
-      "width": {
-        "render": "2"
-      },
           "iconSize": {
             "render": "40,40,center"
+          }
         },
+        {
           "dashes": "2 2",
           "color": {
             "render": "#00f"
           },
-      "wayHandling": 2,
+          "width": {
-      "presets": []
+            "render": "2"
+          }
+        }
+      ]
     },
     {
       "id": "crab-addresses 2021-10-26",
@@ -298,8 +314,13 @@
       "minzoom": 19,
       "name": "CRAB-addressen",
       "title": "CRAB-adres",
+      "mapRendering": [
+        {
+          "location": "point",
           "icon": "circle:#bb3322",
-      "iconSize": "15,15,center",
+          "iconSize": "15,15,center"
+        }
+      ],
       "tagRenderings": [
         "all_tags",
         {
@@ -465,6 +486,15 @@
           }
         }
       ],
+      "mapRendering": [
+        {
+          "location": [
+            "point",
+            "center"
+          ],
+          "iconSize": {
+            "render": "40,40,center"
+          },
           "label": {
             "mappings": [
               {
@@ -472,18 +502,17 @@
                 "then": "<div style='background-color: white; font: large; width: 1.5em; height: 1.5em; border-radius: 100%'>{addr:housenumber}</div>"
               }
             ]
+          }
         },
+        {
           "width": {
             "render": "2"
           },
-      "iconSize": {
-        "render": "40,40,center"
-      },
-      "dashes": "2 2",
           "color": {
             "render": "#00f"
-      },
+          }
-      "wayHandling": 2,
+        }
+      ],
       "presets": []
     }
   ],

assets/themes/sidewalks/sidewalks.json

@@ -20,6 +20,7 @@
   "startZoom": 1,
   "widenFactor": 0.05,
   "socialImage": "",
+  "hideFromOverview": true,
   "layers": [
     {
       "id": "sidewalks",
@@ -68,11 +69,11 @@
           "renderings": [
             {
               "id": "sidewalk_minimap",
-              "render": "{sided_minimap(left|right):height:3rem;border-radius:0.5rem;overflow:hidden}"
+              "render": "{sided_minimap(left|right):height:8rem;border-radius:0.5rem;overflow:hidden}"
             },
             {
               "id": "has_sidewalk",
-              "question": "Is there a sidewalk on the left|right side of the road?",
+              "question": "Is there a sidewalk on this side of the road?",
               "mappings": [
                 {
                   "if": "sidewalk:left|right=yes",
@@ -111,19 +112,21 @@
           "iconSize": "20,20,center"
         },
         {
+          "#": "The center line",
           "color": "#ffffff55",
           "width": 8
         },
         {
+          "#": "left",
           "color": {
             "render": "#888"
           },
-          "dasharray": {
+          "dashArray": {
             "render": "",
             "mappings": [
               {
-                "if": "sidewalk:right=",
+                "if": "sidewalk:left=",
-                "then": "6,6"
+                "then": "1,12"
               }
             ]
           },
@@ -133,7 +136,6 @@
               {
                 "if": {
                   "or": [
-                    "sidewalk:left=",
                     "sidewalk:left=no",
                     "sidewalk:left=separate"
                   ]
@@ -146,12 +148,12 @@
         },
         {
           "color": "#888",
-          "dasharray": {
+          "dashArray": {
             "render": "",
             "mappings": [
               {
                 "if": "sidewalk:right=",
-                "then": "6,6"
+                "then": "1,12"
               }
             ]
           },
@@ -161,7 +163,6 @@
               {
                 "if": {
                   "or": [
-                    "sidewalk:right=",
                     "sidewalk:right=no",
                     "sidewalk:right=separate"
                   ]

scripts/lint.ts

@@ -32,7 +32,7 @@ function fixLayerConfig(config: LayerConfigJson): void {
         }
     }
 
-    if (config.mapRendering === undefined || config.id !== "sidewalks") {
+    if (config.mapRendering === undefined && config.id !== "sidewalks") {
         // This is a legacy format, lets create a pointRendering
         let location: ("point" | "centroid")[] = ["point"]
         let wayHandling: number = config["wayHandling"] ?? 0