General cleanup, improve sidewalk rendering

Logic/SimpleMetaTagger.ts

@@ -97,9 +97,9 @@ export default class SimpleMetaTagger {
             /**
              * Sets the key onto the properties (but doesn't overwrite if already existing)
              */
-            function set(key, value) {
-                if (tgs[key] === undefined || tgs[key] === "") {
-                    tgs[key] = value
+            function set(k, value) {
+                if (tgs[k] === undefined || tgs[k] === "") {
+                    tgs[k] = value
                     somethingChanged = true
                 }
             }

Models/ThemeConfig/LineRenderingConfig.ts

@@ -25,10 +25,7 @@ export default class LineRenderingConfig extends WithContextLoader {
         this.offset = this.tr("offset", "0");
     }
 
-
-    public GenerateLeafletStyle(
-        tags: UIEventSource<any>
-    ):
+public GenerateLeafletStyle(        tags: {}    ):
         {
             color: string,
             weight: number,
@@ -48,8 +45,8 @@ export default class LineRenderingConfig extends WithContextLoader {
             if (tags === undefined) {
                 return deflt
             }
-            const str = tr?.GetRenderValue(tags.data)?.txt ?? deflt;
-            return Utils.SubstituteKeys(str, tags.data)?.replace(/{.*}/g, "");
+            const str = tr?.GetRenderValue(tags)?.txt ?? deflt;
+            return Utils.SubstituteKeys(str, tags)?.replace(/{.*}/g, "");
         }
 
         const dashArray = render(this.dashArray)?.split(" ")?.map(Number);
@@ -62,7 +59,6 @@ export default class LineRenderingConfig extends WithContextLoader {
 
         const weight = rendernum(this.width, 5);
         const offset = rendernum(this.offset, 0)
-        console.log("Calculated offset:", offset, "for", this.offset)
         return {
             color,
             weight,

Models/ThemeConfig/TagRenderingConfig.ts

@@ -141,7 +141,7 @@ export default class TagRenderingConfig {
                 const mp = {
                     if: TagUtils.Tag(mapping.if, `${mappingContext}.if`),
                     ifnot: (mapping.ifnot !== undefined ? TagUtils.Tag(mapping.ifnot, `${mappingContext}.ifnot`) : undefined),
-                    then: Translations.T(mapping.then, `{mappingContext}.then`),
+                    then: Translations.T(mapping.then, `${mappingContext}.then`),
                     hideInAnswer: hideInAnswer
                 };
                 if (this.question) {

UI/ShowDataLayer/ShowDataLayer.ts

@@ -16,7 +16,7 @@ export default class ShowDataLayer {
     private readonly _features: RenderingMultiPlexerFeatureSource
     private readonly _layerToShow: LayerConfig;
     private readonly _selectedElement: UIEventSource<any>
-    private readonly allElements : ElementStorage
+    private readonly allElements: ElementStorage
     // Used to generate a fresh ID when needed
     private _cleanCount = 0;
     private geoLayer = undefined;
@@ -31,7 +31,7 @@ export default class ShowDataLayer {
      */
     private readonly leafletLayersPerId = new Map<string, { feature: any, leafletlayer: any }>()
 
-    private readonly showDataLayerid : number;
+    private readonly showDataLayerid: number;
     private static dataLayerIds = 0
 
     constructor(options: ShowDataLayerOptions & { layerToShow: LayerConfig }) {
@@ -147,16 +147,20 @@ export default class ShowDataLayer {
             }
             try {
 
-                if((feat.geometry.type === "LineString" || feat.geometry.type === "MultiLineString")) {
+                if ((feat.geometry.type === "LineString" || feat.geometry.type === "MultiLineString")) {
+                    const self = this;
                     const coords = L.GeoJSON.coordsToLatLngs(feat.geometry.coordinates)
                     const tagsSource = this.allElements?.addOrGetElement(feat) ?? new UIEventSource<any>(feat.properties);
-                    const lineStyle = this._layerToShow.lineRendering[feat.lineRenderingIndex].GenerateLeafletStyle(tagsSource)
-                    const offsettedLine = L.polyline(coords, lineStyle);
-                    
+                    let offsettedLine;
+                    tagsSource.map(tags => this._layerToShow.lineRendering[feat.lineRenderingIndex].GenerateLeafletStyle(tags)).addCallbackAndRunD(lineStyle => {
+                        if (offsettedLine !== undefined) {
+                            self.geoLayer.removeLayer(offsettedLine)
+                        }
+                        offsettedLine = L.polyline(coords, lineStyle);
                         this.postProcessFeature(feat, offsettedLine)
-                    
                         offsettedLine.addTo(this.geoLayer)
-                }else{
+                    })
+                } else {
                     this.geoLayer.addData(feat);
                 }
             } catch (e) {
@@ -187,16 +191,16 @@ export default class ShowDataLayer {
         const pointRenderingIndex = feature.pointRenderingIndex
         const lineRenderingIndex = feature.lineRenderingIndex
 
-        if(pointRenderingIndex !== undefined){
+        if (pointRenderingIndex !== undefined) {
             return {
                 icon: layer.mapRendering[pointRenderingIndex].GenerateLeafletStyle(tagsSource, this._enablePopups)
             }
         }
-        if(lineRenderingIndex !== undefined){
+        if (lineRenderingIndex !== undefined) {
             return layer.lineRendering[lineRenderingIndex].GenerateLeafletStyle(tagsSource)
         }
 
-        throw "Neither lineRendering nor mapRendering defined for "+feature
+        throw "Neither lineRendering nor mapRendering defined for " + feature
     }
 
     private pointToLayer(feature, latLng): L.Layer {
@@ -211,7 +215,7 @@ export default class ShowDataLayer {
 
         let tagSource = this.allElements?.getEventSourceById(feature.properties.id) ?? new UIEventSource<any>(feature.properties)
         const clickable = !(layer.title === undefined && (layer.tagRenderings ?? []).length === 0)
-        let style : any = layer.mapRendering[feature.pointRenderingIndex].GenerateLeafletStyle(tagSource, clickable);
+        let style: any = layer.mapRendering[feature.pointRenderingIndex].GenerateLeafletStyle(tagSource, clickable);
         const baseElement = style.html;
         if (!this._enablePopups) {
             baseElement.SetStyle("cursor: initial !important")

UI/i18n/Translations.ts

@@ -26,6 +26,9 @@ export default class Translations {
         if (t === undefined || t === null) {
             return undefined;
         }
+        if(typeof t === "number"){
+            t = ""+t
+        }
         if (typeof t === "string") {
             return new Translation({"*": t}, context);
         }

assets/themes/sidewalks/sidewalks.json

@@ -41,7 +41,7 @@
       "tagRenderings": [],
       "mapRendering": [
         {
-          "color": "#ddd",
+          "color": "#ffffff55",
           "width": 8
         },
         {
@@ -49,11 +49,12 @@
             "render": "#888"
           },
           "width": {
-            "render": "8",
+            "render": 6,
             "mappings": [
               {
                 "if": {
                   "or": [
+                    "sidewalk:left=",
                     "sidewalk:left=no",
                     "sidewalk:left=separate"
                   ]
@@ -62,12 +63,26 @@
               }
             ]
           },
-          "offset": -8
+          "offset": -6
         },
         {
           "color": "#888",
-          "width": 8,
-          "offset": 8
+          "width": {
+            "render": 6,
+            "mappings": [
+              {
+                "if": {
+                  "or": [
+                    "sidewalk:right=",
+                    "sidewalk:right=no",
+                    "sidewalk:right=separate"
+                  ]
+                },
+                "then": 0
+              }
+            ]
+          },
+          "offset": 6
         }
       ],
       "allowSplit": true