First working version with multi-rendering

Models/ThemeConfig/Json/LineRenderingConfigJson.ts

@@ -1,5 +1,4 @@
 import {TagRenderingConfigJson} from "./TagRenderingConfigJson";
-import {AndOrTagConfigJson} from "./TagConfigJson";
 
 /**
  * The LineRenderingConfig gives all details onto how to render a single line of a feature.
@@ -27,4 +26,10 @@ export default interface LineRenderingConfigJson {
      * Default value: "" (empty string == full line)
      */
     dashArray?: string | TagRenderingConfigJson
+
+    /**
+     * The number of pixels this line should be moved. 
+     * Use a positive numbe to move to the right, a negative to move to the left (left/right as defined by the drawing direction of the line)
+     */
+    offset?: number | TagRenderingConfigJson
 }

Models/ThemeConfig/LayerConfig.ts

@@ -6,9 +6,6 @@ import PresetConfig from "./PresetConfig";
 import {LayerConfigJson} from "./Json/LayerConfigJson";
 import Translations from "../../UI/i18n/Translations";
 import {TagUtils} from "../../Logic/Tags/TagUtils";
-import {Utils} from "../../Utils";
-import {UIEventSource} from "../../Logic/UIEventSource";
-import BaseUIElement from "../../UI/BaseUIElement";
 import FilterConfig from "./FilterConfig";
 import {Unit} from "../Unit";
 import DeleteConfig from "./DeleteConfig";
@@ -207,10 +204,6 @@ export default class LayerConfig extends WithContextLoader{
             .map((r, i) => new LineRenderingConfig(<LineRenderingConfigJson>r, context+".mapRendering["+i+"]"))
 
 
-        if(this.mapRendering.length > 1){
-            throw "Invalid maprendering for "+this.id+", currently only one mapRendering is supported!"
-        }
-
         this.tagRenderings = this.trs(json.tagRenderings, false);
 
         const missingIds = json.tagRenderings?.filter(tr => typeof tr !== "string" && tr["builtin"] === undefined && tr["id"] === undefined) ?? [];
@@ -284,31 +277,7 @@ export default class LayerConfig extends WithContextLoader{
     }
 
 
-    public GenerateLeafletStyle(
-        tags: UIEventSource<any>,
-        clickable: boolean
-    ): {
-        icon: {
-            html: BaseUIElement;
-            iconSize: [number, number];
-            iconAnchor: [number, number];
-            popupAnchor: [number, number];
-            iconUrl: string;
-            className: string;
-        };
-        color: string;
-        weight: number;
-        dashArray: number[];
-    } {
-
-
-        const icon = this.mapRendering[0].GenerateLeafletStyle(tags, clickable)
-        const lineStyle = (this.lineRendering[0] ?? new LineRenderingConfig({}, "default"))?.GenerateLeafletStyle(tags)
-        return {
-            icon: icon,
-            ...lineStyle
-        };
-    }
+    
 
     public ExtractImages(): Set<string> {
         const parts: Set<string>[] = [];

Models/ThemeConfig/LineRenderingConfig.ts

@@ -8,16 +8,17 @@ import LineRenderingConfigJson from "./Json/LineRenderingConfigJson";
 export default class LineRenderingConfig extends WithContextLoader {
 
 
-   public readonly color: TagRenderingConfig;
-    public readonly   width: TagRenderingConfig;
-    public readonly   dashArray: TagRenderingConfig;
+    public readonly color: TagRenderingConfig;
+    public readonly width: TagRenderingConfig;
+    public readonly dashArray: TagRenderingConfig;
+    public readonly offset: TagRenderingConfig;
 
     constructor(json: LineRenderingConfigJson, context: string) {
         super(json, context)
         this.color = this.tr("color", "#0000ff");
         this.width = this.tr("width", "7");
         this.dashArray = this.tr("dashArray", "");
-
+        this.offset = this.tr("offset", "0");
     }
 
 
@@ -27,40 +28,43 @@ export default class LineRenderingConfig extends WithContextLoader {
         {
             color: string,
             weight: number,
-            dashArray: number[]
+            dashArray: number[],
+            offset: number
+        } {
+        function rendernum(tr: TagRenderingConfig, deflt: number) {
+            const str = Number(render(tr, "" + deflt));
+            const n = Number(str);
+            if (isNaN(n)) {
+                return deflt;
+            }
+            return n;
         }
-     {
-         function rendernum(tr: TagRenderingConfig, deflt: number) {
-             const str = Number(render(tr, "" + deflt));
-             const n = Number(str);
-             if (isNaN(n)) {
-                 return deflt;
-             }
-             return n;
-         }
-         function render(tr: TagRenderingConfig, deflt?: string) {
-             if (tags === undefined) {
-                 return deflt
-             }
-             const str = tr?.GetRenderValue(tags.data)?.txt ?? deflt;
-             return Utils.SubstituteKeys(str, tags.data).replace(/{.*}/g, "");
-         }
 
-         const dashArray = render(this.dashArray)?.split(" ")?.map(Number);
-         let color = render(this.color, "#00f");
+        function render(tr: TagRenderingConfig, deflt?: string) {
+            if (tags === undefined) {
+                return deflt
+            }
+            const str = tr?.GetRenderValue(tags.data)?.txt ?? deflt;
+            return Utils.SubstituteKeys(str, tags.data)?.replace(/{.*}/g, "");
+        }
 
-         if (color.startsWith("--")) {
-             color = getComputedStyle(document.body).getPropertyValue(
-                 "--catch-detail-color"
-             );
-         }
+        const dashArray = render(this.dashArray)?.split(" ")?.map(Number);
+        let color = render(this.color, "#00f");
+        if (color.startsWith("--")) {
+            color = getComputedStyle(document.body).getPropertyValue(
+                "--catch-detail-color"
+            );
+        }
 
-         const weight = rendernum(this.width, 5);
-         return {
-             color,
-             weight,
-             dashArray
-         }
+        const weight = rendernum(this.width, 5);
+        const offset = rendernum(this.offset, 0)
+        console.log("Calculated offset:", offset, "for", this.offset)
+        return {
+            color,
+            weight,
+            dashArray,
+            offset
+        }
     }
-    
+
 }

Models/ThemeConfig/PointRenderingConfig.ts

@@ -15,6 +15,8 @@ import {VariableUiElement} from "../../UI/Base/VariableUIElement";
 
 export default class PointRenderingConfig extends WithContextLoader {
 
+    public readonly location: Set<"point" | "centroid">
+
     public readonly icon: TagRenderingConfig;
     public readonly iconBadges: { if: TagsFilter; then: TagRenderingConfig }[];
     public readonly iconSize: TagRenderingConfig;
@@ -23,6 +25,11 @@ export default class PointRenderingConfig extends WithContextLoader {
 
     constructor(json: PointRenderingConfigJson, context: string) {
         super(json, context)
+        this.location = new Set(json.location)
+
+        if(this.location.size == 0){
+            throw "A pointRendering should have at least one 'location' to defined where it should be rendered. (At "+context+".location)"
+        }
         this.icon = this.tr("icon", "");
         this.iconBadges = (json.iconBadges ?? []).map((overlay, i) => {
             let tr : TagRenderingConfig;
@@ -114,7 +121,7 @@ export default class PointRenderingConfig extends WithContextLoader {
         return new VariableUiElement(tags.map(tags => {
             const rotation = self.rotation?.GetRenderValue(tags)?.txt ?? "0deg"
             
-            const htmlDefs = self.icon.GetRenderValue(tags)?.txt
+            const htmlDefs = Utils.SubstituteKeys(self.icon.GetRenderValue(tags)?.txt, tags)
             let defaultPin : BaseUIElement = undefined
             if(self.label === undefined){
                 defaultPin =  Svg.teardrop_with_hole_green_svg()
@@ -137,7 +144,7 @@ export default class PointRenderingConfig extends WithContextLoader {
                         return undefined
                     }
 
-                    const htmlDefs = badge.then.GetRenderValue(tags)?.txt
+                    const htmlDefs = Utils.SubstituteKeys(badge.then.GetRenderValue(tags)?.txt, tags)
                     const badgeElement= PointRenderingConfig.FromHtmlMulti(htmlDefs, "0", true)?.SetClass("block relative")
                     if(badgeElement === undefined){
                         return undefined;

Models/ThemeConfig/TagRenderingConfig.ts

@@ -47,6 +47,12 @@ export default class TagRenderingConfig {
             this.condition = null;
         }
 
+        if(typeof json === "number"){
+            this.render =Translations.WT( ""+json)
+            return;
+        }
+        
+        
         if (json === undefined) {
             throw "Initing a TagRenderingConfig with undefined in " + context;
         }