Linting themes, fix userbadges

2021-10-21 21:41:45 +02:00 · 2021-10-21 21:41:45 +02:00 · b9b8a5c71a
commit b9b8a5c71a
parent 9336e19757
27 changed files with 4074 additions and 3903 deletions
--- a/Models/ThemeConfig/Json/LayerConfigJson.ts
+++ b/Models/ThemeConfig/Json/LayerConfigJson.ts
@ -124,15 +124,6 @@ export interface LayerConfigJson {

    mapRendering: (PointRenderingConfigJson | LineRenderingConfigJson)[]

-
-    /**
-     * Wayhandling: should a way/area be displayed as:
-     * 0) The way itself
-     * 1) Only the centerpoint
-     * 2) The centerpoint and the way
-     */
-    wayHandling?: number;
-
    /**
     * If set, this layer will pass all the features it receives onto the next layer.
     * This is ideal for decoration, e.g. directionss on cameras
--- a/Models/ThemeConfig/Json/PointRenderingConfigJson.ts
+++ b/Models/ThemeConfig/Json/PointRenderingConfigJson.ts
@ -31,14 +31,12 @@ export default interface PointRenderingConfigJson {
    icon?: string | TagRenderingConfigJson;

    /**
-     * IconsOverlays are a list of extra icons/badges to overlay over the icon.
-     * The 'badge'-toggle changes their behaviour.
-     * If badge is set, it will be added as a 25% height icon at the bottom right of the icon, with all the badges in a flex layout.
-     * If badges is false, it'll be a simple overlay
+     * A list of extra badges to show next to the icon as small badge
+     * They will be added as a 25% height icon at the bottom right of the icon, with all the badges in a flex layout.
     *
-     * Note: strings are interpreted as icons, so layering and substituting is supported
+     * Note: strings are interpreted as icons, so layering and substituting is supported. You can use `circle:white;./my_icon.svg` to add a background circle
     */
-    iconOverlays?: { if: string | AndOrTagConfigJson, then: string | TagRenderingConfigJson, badge?: boolean }[]
+    iconBadges?: { if: string | AndOrTagConfigJson, then: string | TagRenderingConfigJson }[]


    /**
--- a/Models/ThemeConfig/LayerConfig.ts
+++ b/Models/ThemeConfig/LayerConfig.ts
@ -20,9 +20,6 @@ import PointRenderingConfigJson from "./Json/PointRenderingConfigJson";
 import LineRenderingConfigJson from "./Json/LineRenderingConfigJson";

 export default class LayerConfig extends WithContextLoader{
-    static WAYHANDLING_DEFAULT = 0;
-    static WAYHANDLING_CENTER_ONLY = 1;
-    static WAYHANDLING_CENTER_AND_WAY = 2;

    id: string;
    name: Translation;
@ -41,7 +38,6 @@ export default class LayerConfig extends WithContextLoader{
    public readonly mapRendering: PointRenderingConfig[]
    public readonly lineRendering: LineRenderingConfig[]

-    wayHandling: number;
    public readonly units: Unit[];
    public readonly deletion: DeleteConfig | null;
    public readonly allowMove: MoveConfig | null
@ -153,7 +149,6 @@ export default class LayerConfig extends WithContextLoader{
        this.passAllFeatures = json.passAllFeatures ?? false;
        this.minzoom = json.minzoom ?? 0;
        this.minzoomVisible = json.minzoomVisible ?? this.minzoom;
-        this.wayHandling = json.wayHandling ?? 0;
        if (json.presets !== undefined && json.presets?.map === undefined) {
            throw "Presets should be a list of items (at " + context + ")"
        }
--- a/Models/ThemeConfig/PointRenderingConfig.ts
+++ b/Models/ThemeConfig/PointRenderingConfig.ts
@ -16,7 +16,7 @@ import {VariableUiElement} from "../../UI/Base/VariableUIElement";
 export default class PointRenderingConfig extends WithContextLoader {

    public readonly icon: TagRenderingConfig;
-    public readonly iconOverlays: { if: TagsFilter; then: TagRenderingConfig; badge: boolean }[];
+    public readonly iconBadges: { if: TagsFilter; then: TagRenderingConfig }[];
    public readonly iconSize: TagRenderingConfig;
    public readonly label: TagRenderingConfig;
    public readonly rotation: TagRenderingConfig;
@ -24,21 +24,20 @@ export default class PointRenderingConfig extends WithContextLoader {
    constructor(json: PointRenderingConfigJson, context: string) {
        super(json, context)
        this.icon = this.tr("icon", "");
-        this.iconOverlays = (json.iconOverlays ?? []).map((overlay, i) => {
-            let tr = new TagRenderingConfig(
-                overlay.then,
-                `iconoverlays.${i}`
-            );
-            if (
-                typeof overlay.then === "string" &&
-                SharedTagRenderings.SharedIcons.get(overlay.then) !== undefined
-            ) {
+        this.iconBadges = (json.iconBadges ?? []).map((overlay, i) => {
+            let tr : TagRenderingConfig;
+            if (typeof overlay.then === "string" &&
+                SharedTagRenderings.SharedIcons.get(overlay.then) !== undefined) {
                tr = SharedTagRenderings.SharedIcons.get(overlay.then);
+            }else{
+                tr = new TagRenderingConfig(
+                    overlay.then,
+                    `iconBadges.${i}`
+                );
            }
            return {
                if: TagUtils.Tag(overlay.if),
-                then: tr,
-                badge: overlay.badge ?? false,
+                then: tr
            };
        });

@ -50,7 +49,7 @@ export default class PointRenderingConfig extends WithContextLoader {
            }
        }
        this.iconSize = this.tr("iconSize", "40,40,center");
-        this.label = this.tr("label", "");
+        this.label = this.tr("label", undefined);
        this.rotation = this.tr("rotation", "0");
    }

@ -59,7 +58,7 @@ export default class PointRenderingConfig extends WithContextLoader {
        const parts: Set<string>[] = [];
        parts.push(this.icon?.ExtractImages(true));
        parts.push(
-            ...this.iconOverlays?.map((overlay) => overlay.then.ExtractImages(true))
+            ...this.iconBadges?.map((overlay) => overlay.then.ExtractImages(true))
        );

        const allIcons = new Set<string>();
@ -69,7 +68,102 @@ export default class PointRenderingConfig extends WithContextLoader {
        return allIcons;
    }

+    /**
+     * Given a single HTML spec (either a single image path OR "image_path_to_known_svg:fill-colour", returns a fixedUIElement containing that
+     * The element will fill 100% and be positioned absolutely with top:0 and left: 0
+     */
+    private static FromHtmlSpec(htmlSpec: string, style: string, isBadge = false): BaseUIElement {
+        if (htmlSpec === undefined) {
+            return undefined;
+        }
+        const match = htmlSpec.match(/([a-zA-Z0-9_]*):([^;]*)/);
+        if (match !== null && Svg.All[match[1] + ".svg"] !== undefined) {
+            const svg = (Svg.All[match[1] + ".svg"] as string)
+            const targetColor = match[2]
+            const img = new Img(svg.replace(/#000000/g, targetColor), true)
+                .SetStyle(style)
+            if(isBadge){
+                img.SetClass("badge")
+            }
+            return img
+        } else {
+            return new FixedUiElement(`<img src="${htmlSpec}" style="${style}" />`);
+        }
+    }
    
+    private static FromHtmlMulti(multiSpec: string, rotation: string , isBadge: boolean, defaultElement: BaseUIElement = undefined){
+        if(multiSpec === undefined){
+            return defaultElement
+        }
+        const style = `width:100%;height:100%;transform: rotate( ${rotation} );display:block;position: absolute; top: 0; left: 0`;
+
+        const htmlDefs = multiSpec.trim()?.split(";") ?? []
+        const elements = Utils.NoEmpty(htmlDefs).map(def => PointRenderingConfig.FromHtmlSpec(def, style, isBadge))
+        if (elements.length === 0) {
+            return defaultElement
+        } else {
+            return new Combine(elements).SetClass("relative block w-full h-full")
+        }
+    }
+
+    public GetSimpleIcon(tags: UIEventSource<any>): BaseUIElement {
+        const self = this;
+        if (this.icon === undefined) {
+            return undefined;
+        }
+        return new VariableUiElement(tags.map(tags => {
+            const rotation = self.rotation?.GetRenderValue(tags)?.txt ?? "0deg"
+            
+            const htmlDefs = self.icon.GetRenderValue(tags)?.txt
+            let defaultPin : BaseUIElement = undefined
+            if(self.label === undefined){
+                defaultPin =  Svg.teardrop_with_hole_green_svg()
+            }
+            return PointRenderingConfig.FromHtmlMulti(htmlDefs, rotation,false, defaultPin)
+        })).SetClass("w-full h-full block")
+    }
+
+    private GetBadges(tags: UIEventSource<any>): BaseUIElement {
+        if (this.iconBadges.length === 0) {
+            return undefined
+        }
+        return new VariableUiElement(
+            tags.map(tags => {
+
+                const badgeElements = this.iconBadges.map(badge => {
+
+                    if (!badge.if.matchesProperties(tags)) {
+                        // Doesn't match...
+                        return undefined
+                    }
+
+                    const htmlDefs = badge.then.GetRenderValue(tags)?.txt
+                    const badgeElement= PointRenderingConfig.FromHtmlMulti(htmlDefs, "0", true)?.SetClass("block relative")
+                    if(badgeElement === undefined){
+                        return undefined;
+                    }
+                    return new Combine([badgeElement]).SetStyle("width: 1.5rem").SetClass("block")
+                    
+                })
+
+                return new Combine(badgeElements).SetClass("inline-flex h-full")
+            })).SetClass("absolute bottom-0 right-1/3 h-1/2 w-0")
+    }
+
+    private GetLabel(tags: UIEventSource<any>): BaseUIElement {
+        if (this.label === undefined) {
+            return undefined;
+        }
+        const self = this;
+        return new VariableUiElement(tags.map(tags => {
+            const label = self.label
+                ?.GetRenderValue(tags)
+                ?.Subs(tags)
+                ?.SetClass("block text-center")
+            return new Combine([label]).SetClass("flex flex-col items-center mt-1")
+        }))
+
+    }

    public GenerateLeafletStyle(
        tags: UIEventSource<any>,
@ -82,8 +176,7 @@ export default class PointRenderingConfig extends WithContextLoader {
            popupAnchor: [number, number];
            iconUrl: string;
            className: string;
-        }
-     {
+        } {
        function num(str, deflt = 40) {
            const n = Number(str);
            if (isNaN(n)) {
@ -122,109 +215,18 @@ export default class PointRenderingConfig extends WithContextLoader {
            anchorH = iconH;
        }

-        const iconUrlStatic = render(this.icon);
-        const self = this;

-        function genHtmlFromString(sourcePart: string, rotation: string): BaseUIElement {
-            const style = `width:100%;height:100%;transform: rotate( ${rotation} );display:block;position: absolute; top: 0; left: 0`;
-            let html: BaseUIElement = new FixedUiElement(
-                `<img src="${sourcePart}" style="${style}" />`
-            );
-            const match = sourcePart.match(/([a-zA-Z0-9_]*):([^;]*)/);
-            if (match !== null && Svg.All[match[1] + ".svg"] !== undefined) {
-                html = new Img(
-                    (Svg.All[match[1] + ".svg"] as string).replace(
-                        /#000000/g,
-                        match[2]
-                    ),
-                    true
-                ).SetStyle(style);
-            }
-            return html;
-        }
+        const iconAndBadges = new Combine([this.GetSimpleIcon(tags), this.GetBadges(tags)])
+            .SetStyle(`width: ${iconW}px; height: ${iconH}px`)
+            .SetClass("block relative")


-        const mappedHtml = tags?.map((tgs) => {
-            // What do you mean, 'tgs' is never read?
-            // It is read implicitly in the 'render' method
-            const iconUrl = render(self.icon);
-            const rotation = render(self.rotation, "0deg");
-
-            let htmlParts: BaseUIElement[] = [];
-            let sourceParts = Utils.NoNull(
-                iconUrl.split(";").filter((prt) => prt != "")
-            );
-            for (const sourcePart of sourceParts) {
-                htmlParts.push(genHtmlFromString(sourcePart, rotation));
-            }
-
-            let badges = [];
-            for (const iconOverlay of self.iconOverlays) {
-                if (!iconOverlay.if.matchesProperties(tgs)) {
-                    continue;
-                }
-                if (iconOverlay.badge) {
-                    const badgeParts: BaseUIElement[] = [];
-                    const renderValue = iconOverlay
-                        .then
-                        .GetRenderValue(tgs)
-
-                    if (renderValue === undefined) {
-                        continue;
-                    }
-
-                    const partDefs = renderValue.txt.split(";")
-                        .filter((prt) => prt != "");
-
-                    for (const badgePartStr of partDefs) {
-                        badgeParts.push(genHtmlFromString(badgePartStr, "0"));
-                    }
-
-                    const badgeCompound = new Combine(badgeParts).SetStyle(
-                        "display:flex;position:relative;width:100%;height:100%;"
-                    );
-
-                    badges.push(badgeCompound);
-                } else {
-                    htmlParts.push(
-                        genHtmlFromString(iconOverlay.then.GetRenderValue(tgs).txt, "0")
-                    );
-                }
-            }
-
-            if (badges.length > 0) {
-                const badgesComponent = new Combine(badges).SetStyle(
-                    "display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;"
-                );
-                htmlParts.push(badgesComponent);
-            }
-
-            if (sourceParts.length == 0) {
-                iconH = 0;
-            }
-            try {
-                const label = self.label
-                    ?.GetRenderValue(tgs)
-                    ?.Subs(tgs)
-                    ?.SetClass("block text-center")
-                    ?.SetStyle("margin-top: " + (iconH + 2) + "px");
-                if (label !== undefined) {
-                    htmlParts.push(
-                        new Combine([label]).SetClass("flex flex-col items-center")
-                    );
-                }
-            } catch (e) {
-                console.error(e, tgs);
-            }
-            return new Combine(htmlParts);
-        });
-
        return {
-                html: mappedHtml === undefined ? new FixedUiElement(self.icon.render.txt) : new VariableUiElement(mappedHtml),
+            html: new Combine([iconAndBadges, this.GetLabel(tags)]).SetStyle("flex flex-col"),
            iconSize: [iconW, iconH],
            iconAnchor: [anchorW, anchorH],
            popupAnchor: [0, 3 - anchorH],
-                iconUrl: iconUrlStatic,
+            iconUrl: undefined,
            className: clickable
                ? "leaflet-div-icon"
                : "leaflet-div-icon unclickable",
--- a/Models/ThemeConfig/TagRenderingConfig.ts
+++ b/Models/ThemeConfig/TagRenderingConfig.ts
@ -246,11 +246,6 @@ export default class TagRenderingConfig {

        return false;
    }
-
-    public IsQuestionBoxElement(): boolean {
-        return this.question === null && this.condition === null;
-    }
-
    /**
     * Gets all the render values. Will return multiple render values if 'multianswer' is enabled.
     * The result will equal [GetRenderValue] if not 'multiAnswer'
@ -295,7 +290,7 @@ export default class TagRenderingConfig {
     * Not compatible with multiAnswer - use GetRenderValueS instead in that case
     * @constructor
     */
-    public GetRenderValue(tags: any): Translation {
+    public GetRenderValue(tags: any, defltValue: any = undefined): Translation {
        if (this.mappings !== undefined && !this.multiAnswer) {
            for (const mapping of this.mappings) {
                if (mapping.if === undefined) {
@ -315,7 +310,7 @@ export default class TagRenderingConfig {
        if (tags[this.freeform.key] !== undefined) {
            return this.render;
        }
-        return undefined;
+        return defltValue;
    }

    public ExtractImages(isIcon: boolean): Set<string> {
--- a/assets/layers/bicycle_library/bicycle_library.json
+++ b/assets/layers/bicycle_library/bicycle_library.json
@ -269,13 +269,11 @@
    "iconOverlays": [
        {
            "if": "opening_hours~*",
-            "then": "isOpen",
-            "badge": true
+            "then": "isOpen"
        },
        {
            "if": "service:bicycle:pump=yes",
-            "then": "circle:#e2783d;./assets/layers/bike_repair_station/pump.svg",
-            "badge": true
+            "then": "circle:#e2783d;./assets/layers/bike_repair_station/pump.svg"
        }
    ],
    "width": {
@ -293,16 +291,14 @@
            "icon": {
                "render": "pin:#22ff55;./assets/layers/bicycle_library/bicycle_library.svg"
            },
-            "iconOverlays": [
+            "iconBadges": [
                {
                    "if": "opening_hours~*",
-                    "then": "isOpen",
-                    "badge": true
+                    "then": "isOpen"
                },
                {
                    "if": "service:bicycle:pump=yes",
-                    "then": "circle:#e2783d;./assets/layers/bike_repair_station/pump.svg",
-                    "badge": true
+                    "then": "circle:#e2783d;./assets/layers/bike_repair_station/pump.svg"
                }
            ],
            "iconSize": {
--- a/assets/layers/bicycle_tube_vending_machine/bicycle_tube_vending_machine.json
+++ b/assets/layers/bicycle_tube_vending_machine/bicycle_tube_vending_machine.json
@ -48,8 +48,7 @@
                    "operational_status=closed"
                ]
            },
-            "then": "close:#c33",
-            "badge": true
+            "then": "close:#c33"
        }
    ],
    "iconSize": "50,50,bottom",
@ -282,7 +281,7 @@
            "icon": {
                "render": "pin:#ffffff;./assets/layers/bicycle_tube_vending_machine/pinIcon.svg"
            },
-            "iconOverlays": [
+            "iconBadges": [
                {
                    "if": {
                        "or": [
@ -290,8 +289,7 @@
                            "operational_status=closed"
                        ]
                    },
-                    "then": "close:#c33",
-                    "badge": true
+                    "then": "close:#c33"
                }
            ],
            "iconSize": "50,50,bottom",
--- a/assets/layers/bike_cleaning/bike_cleaning.json
+++ b/assets/layers/bike_cleaning/bike_cleaning.json
@ -81,8 +81,7 @@
            "then": {
                "render": "./assets/layers/bike_cleaning/bike_cleaning_icon.svg",
                "roaming": true
-            },
-            "badge": true
+            }
        }
    ],
    "titleIcons": [
@ -168,7 +167,7 @@
            "icon": {
                "render": "./assets/layers/bike_cleaning/bike_cleaning.svg"
            },
-            "iconOverlays": [
+            "iconBadges": [
                {
                    "if": {
                        "and": [
@ -179,8 +178,7 @@
                    "then": {
                        "render": "./assets/layers/bike_cleaning/bike_cleaning_icon.svg",
                        "roaming": true
-                    },
-                    "badge": true
+                    }
                }
            ],
            "iconSize": "50,50,bottom",
--- a/assets/layers/bike_repair_station/bike_repair_station.json
+++ b/assets/layers/bike_repair_station/bike_repair_station.json
@ -673,8 +673,7 @@
    "iconOverlays": [
        {
            "if": "operator=De Fietsambassade Gent",
-            "then": "./assets/themes/cyclofix/fietsambassade_gent_logo_small.svg",
-            "badge": true
+            "then": "./assets/themes/cyclofix/fietsambassade_gent_logo_small.svg"
        }
    ],
    "iconSize": {
@ -826,11 +825,10 @@
                    }
                ]
            },
-            "iconOverlays": [
+            "iconBadges": [
                {
                    "if": "operator=De Fietsambassade Gent",
-                    "then": "./assets/themes/cyclofix/fietsambassade_gent_logo_small.svg",
-                    "badge": true
+                    "then": "./assets/themes/cyclofix/fietsambassade_gent_logo_small.svg"
                }
            ],
            "iconSize": {
--- a/assets/layers/bike_shop/bike_shop.json
+++ b/assets/layers/bike_shop/bike_shop.json
@ -723,13 +723,11 @@
    "iconOverlays": [
        {
            "if": "opening_hours~*",
-            "then": "isOpen",
-            "badge": true
+            "then": "isOpen"
        },
        {
            "if": "service:bicycle:pump=yes",
-            "then": "circle:#e2783d;./assets/layers/bike_repair_station/pump.svg",
-            "badge": true
+            "then": "circle:#e2783d;./assets/layers/bike_repair_station/pump.svg"
        },
        {
            "if": {
@ -739,8 +737,7 @@
            },
            "then": {
                "render": "./assets/layers/bike_cleaning/bike_cleaning_icon.svg"
-            },
-            "badge": true
+            }
        }
    ],
    "width": {
@ -768,16 +765,14 @@
                    }
                ]
            },
-            "iconOverlays": [
+            "iconBadges": [
                {
                    "if": "opening_hours~*",
-                    "then": "isOpen",
-                    "badge": true
+                    "then": "isOpen"
                },
                {
                    "if": "service:bicycle:pump=yes",
-                    "then": "circle:#e2783d;./assets/layers/bike_repair_station/pump.svg",
-                    "badge": true
+                    "then": "circle:#e2783d;./assets/layers/bike_repair_station/pump.svg"
                },
                {
                    "if": {
@ -787,8 +782,7 @@
                    },
                    "then": {
                        "render": "./assets/layers/bike_cleaning/bike_cleaning_icon.svg"
-                    },
-                    "badge": true
+                    }
                }
            ],
            "iconSize": {
--- a/assets/layers/cafe_pub/cafe_pub.json
+++ b/assets/layers/cafe_pub/cafe_pub.json
@ -28,8 +28,7 @@
    "iconOverlays": [
        {
            "if": "opening_hours~*",
-            "then": "isOpen",
-            "badge": true
+            "then": "isOpen"
        }
    ],
    "label": {
@ -215,11 +214,10 @@
                    }
                ]
            },
-            "iconOverlays": [
+            "iconBadges": [
                {
                    "if": "opening_hours~*",
-                    "then": "isOpen",
-                    "badge": true
+                    "then": "isOpen"
                }
            ],
            "label": {
--- a/assets/layers/charging_station/charging_station.json
+++ b/assets/layers/charging_station/charging_station.json
@ -3220,63 +3220,9 @@
    ],
    "mapRendering": [
        {
-      "icon": {
-        "render": "pin:#fff;./assets/themes/charging_stations/plug.svg",
-        "mappings": [
-          {
-            "if": "bicycle=yes",
-            "then": "pin:#fff;./assets/themes/charging_stations/bicycle.svg"
-          },
-          {
-            "if": {
-              "or": [
-                "car=yes",
-                "motorcar=yes"
+            "location": [
+                "point"
            ]
-            },
-            "then": "pin:#fff;./assets/themes/charging_stations/car.svg"
-          }
-        ]
-      },
-      "iconOverlays": [
-        {
-          "if": {
-            "or": [
-              "disused:amenity=charging_station",
-              "operational_status=broken"
-            ]
-          },
-          "then": "cross_bottom_right:#c22;"
-        },
-        {
-          "if": {
-            "or": [
-              "proposed:amenity=charging_station",
-              "planned:amenity=charging_station"
-            ]
-          },
-          "then": "./assets/layers/charging_station/under_construction.svg",
-          "badge": true
-        },
-        {
-          "if": {
-            "and": [
-              "bicycle=yes",
-              {
-                "or": [
-                  "motorcar=yes",
-                  "car=yes"
-                ]
-              }
-            ]
-          },
-          "then": "circle:#fff;./assets/themes/charging_stations/car.svg",
-          "badge": true
-        }
-      ],
-      "iconSize": {
-        "render": "50,50,bottom"
-      }
        }
    ],
    "presets": [
--- a/assets/layers/drinking_water/drinking_water.json
+++ b/assets/layers/drinking_water/drinking_water.json
@ -33,8 +33,7 @@
                    "operational_status=closed"
                ]
            },
-            "then": "close:#c33",
-            "badge": true
+            "then": "close:#c33"
        }
    ],
    "iconSize": "40,40,bottom",
@ -185,7 +184,7 @@
            "icon": {
                "render": "pin:#6BC4F7;./assets/layers/drinking_water/drips.svg"
            },
-            "iconOverlays": [
+            "iconBadges": [
                {
                    "if": {
                        "or": [
@ -193,8 +192,7 @@
                            "operational_status=closed"
                        ]
                    },
-                    "then": "close:#c33",
-                    "badge": true
+                    "then": "close:#c33"
                }
            ],
            "iconSize": "40,40,bottom",
--- a/assets/layers/food/food.json
+++ b/assets/layers/food/food.json
@ -35,8 +35,7 @@
    "iconOverlays": [
        {
            "if": "opening_hours~*",
-            "then": "isOpen",
-            "badge": true
+            "then": "isOpen"
        },
        {
            "if": {
@ -47,8 +46,7 @@
            },
            "then": {
                "render": "circle:white;./assets/themes/fritures/Vegetarian-mark.svg"
-            },
-            "badge": true
+            }
        }
    ],
    "label": {
@ -656,11 +654,10 @@
                    }
                ]
            },
-            "iconOverlays": [
+            "iconBadges": [
                {
                    "if": "opening_hours~*",
-                    "then": "isOpen",
-                    "badge": true
+                    "then": "isOpen"
                },
                {
                    "if": {
@ -671,8 +668,7 @@
                    },
                    "then": {
                        "render": "circle:white;./assets/themes/fritures/Vegetarian-mark.svg"
-                    },
-                    "badge": true
+                    }
                }
            ],
            "label": {
--- a/assets/layers/playground/playground.json
+++ b/assets/layers/playground/playground.json
@ -482,8 +482,7 @@
                    "opening_hours~*"
                ]
            },
-            "then": "isOpen",
-            "badge": true
+            "then": "isOpen"
        }
    ],
    "width": {
@ -541,7 +540,7 @@
            "icon": {
                "render": "./assets/themes/playgrounds/playground.svg"
            },
-            "iconOverlays": [
+            "iconBadges": [
                {
                    "if": {
                        "and": [
@ -549,8 +548,7 @@
                            "opening_hours~*"
                        ]
                    },
-                    "then": "isOpen",
-                    "badge": true
+                    "then": "isOpen"
                }
            ],
            "iconSize": {
--- a/assets/layers/public_bookcase/public_bookcase.json
+++ b/assets/layers/public_bookcase/public_bookcase.json
@ -45,7 +45,7 @@
        ]
    },
    "icon": {
-        "render": "./assets/themes/bookcases/bookcase.svg;"
+        "render": "./assets/themes/bookcases/bookcase.svg"
    },
    "label": {
        "mappings": [
--- a/assets/layers/shops/shops.json
+++ b/assets/layers/shops/shops.json
@ -279,8 +279,7 @@
    "iconOverlays": [
        {
            "if": "opening_hours~*",
-            "then": "isOpen",
-            "badge": true
+            "then": "isOpen"
        }
    ],
    "width": {
@ -328,11 +327,10 @@
            "icon": {
                "render": "./assets/themes/shops/shop.svg"
            },
-            "iconOverlays": [
+            "iconBadges": [
                {
                    "if": "opening_hours~*",
-                    "then": "isOpen",
-                    "badge": true
+                    "then": "isOpen"
                }
            ],
            "iconSize": {
--- a/assets/layers/sport_pitch/sport_pitch.json
+++ b/assets/layers/sport_pitch/sport_pitch.json
@ -420,8 +420,7 @@
                    "opening_hours~*"
                ]
            },
-            "then": "isOpen",
-            "badge": true
+            "then": "isOpen"
        },
        {
            "if": {
@ -431,8 +430,7 @@
                    "access=no"
                ]
            },
-            "then": "circle:white;./assets/layers/sport_pitch/lock.svg",
-            "badge": true
+            "then": "circle:white;./assets/layers/sport_pitch/lock.svg"
        }
    ],
    "width": {
@ -514,7 +512,7 @@
                    }
                ]
            },
-            "iconOverlays": [
+            "iconBadges": [
                {
                    "if": {
                        "and": [
@ -522,8 +520,7 @@
                            "opening_hours~*"
                        ]
                    },
-                    "then": "isOpen",
-                    "badge": true
+                    "then": "isOpen"
                },
                {
                    "if": {
@ -533,8 +530,7 @@
                            "access=no"
                        ]
                    },
-                    "then": "circle:white;./assets/layers/sport_pitch/lock.svg",
-                    "badge": true
+                    "then": "circle:white;./assets/layers/sport_pitch/lock.svg"
                }
            ],
            "iconSize": {
--- a/assets/svg/license_info.json
+++ b/assets/svg/license_info.json
@ -1411,6 +1411,26 @@
      "https://www.onlinewebfonts.com/icon/197818"
    ]
  },
+  {
+    "path": "teardrop_with_hole_green.svg",
+    "license": "CC-BY-SA 3.0 Unported",
+    "authors": [
+      "Mono, derivated work User:Benoit Rochon"
+    ],
+    "sources": [
+      "https://commons.wikimedia.org/wiki/File:Map_pin_icon_green.svg"
+    ]
+  },
+    {
+    "path": "teardrop.svg",
+    "license": "CC-BY-SA 3.0 Unported",
+    "authors": [
+      "Mono, derivated work User:Benoit Rochon"
+    ],
+    "sources": [
+      "https://commons.wikimedia.org/wiki/File:Map_pin_icon_green.svg"
+    ]
+  },
  {
    "path": "translate.svg",
    "license": "CC-BY-SA 3.0",
--- a/assets/svg/teardrop.svg
+++ b/assets/svg/teardrop.svg
@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2816"
+   version="1.1"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   width="94"
+   height="128"
+   sodipodi:docname="teardrop.svg">
+  <metadata
+     id="metadata2822">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs2820">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       id="perspective2824" />
+  </defs>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1003"
+     id="namedview2818"
+     showgrid="false"
+     inkscape:zoom="3.0991164"
+     inkscape:cx="-71.403124"
+     inkscape:cy="60.493358"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2816" />
+  <path
+     style="fill:#000000;fill-opacity:0.98823529"
+     d="M 46.977003,126.64334 C 46.693972,125.95584 40.813862,120.20567 36.603071,114.98067 11.655836,81.858372 -16.158365,51.082905 16.319943,13.682837 30.700637,-0.21083367 48.43303,-1.0034227 66.662563,5.4726973 117.9922,35.174601 80.828906,83.627914 56.427079,115.48067 l -9.450076,11.16267 z M 62.417383,75.872046 C 96.654166,51.387445 70.185413,4.2391813 32.569429,19.913013 21.585178,25.769872 16.134954,35.960547 15.944071,47.980664 c -0.524495,11.693153 5.685418,21.471037 15.526227,27.460808 7.055481,3.840074 10.157178,4.533661 18.145697,4.057654 5.177622,-0.308516 8.161127,-1.153847 12.801388,-3.62708 z"
+     id="path4127"
+     sodipodi:nodetypes="ccccccccccsc" />
+  <path
+     sodipodi:type="arc"
+     style="fill:#000000;fill-opacity:0.98823529;fill-rule:nonzero;stroke:none"
+     id="path4129"
+     sodipodi:cx="52.363636"
+     sodipodi:cy="49.05526"
+     sodipodi:rx="51.222816"
+     sodipodi:ry="41.754009"
+     d="m 41.682107,89.891342 a 51.222816,41.754009 0 1 1 1.276617,0.208091"
+     sodipodi:start="1.7808687"
+     sodipodi:end="8.0386371"
+     sodipodi:open="true"
+     transform="matrix(0.87829487,0,0,1.0519028,0.55474126,-6.9952658)" />
+  <path
+     sodipodi:type="arc"
+     style="opacity:0.34016395;fill:#000000;fill-opacity:0;fill-rule:nonzero;stroke:none"
+     id="path4131"
+     sodipodi:cx="49.05526"
+     sodipodi:cy="48.59893"
+     sodipodi:rx="26.010695"
+     sodipodi:ry="20.991087"
+     d="m 43.631232,69.128546 a 26.010695,20.991087 0 1 1 0.64826,0.104614"
+     sodipodi:start="1.7808687"
+     sodipodi:end="8.0386371"
+     sodipodi:open="true"
+     transform="translate(0.64534523,0)" />
+  <path
+     sodipodi:type="arc"
+     style="fill:#000080;fill-opacity:0;fill-rule:nonzero;stroke:none"
+     id="path4135"
+     sodipodi:cx="35.365417"
+     sodipodi:cy="102.78788"
+     sodipodi:rx="16.655972"
+     sodipodi:ry="11.750445"
+     d="m 31.892136,114.28 a 16.655972,11.750445 0 1 1 0.415114,0.0586"
+     sodipodi:start="1.7808687"
+     sodipodi:end="8.0386371"
+     sodipodi:open="true"
+     transform="translate(0.64534523,0)" />
+</svg>
--- a/assets/svg/teardrop_with_hole_green.svg
+++ b/assets/svg/teardrop_with_hole_green.svg
@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2816"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   width="94"
+   height="128"
+   sodipodi:docname="Map_pin_icon_green.svg">
+  <metadata
+     id="metadata2822">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs2820">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       id="perspective2824" />
+  </defs>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview2818"
+     showgrid="false"
+     inkscape:zoom="3.0991164"
+     inkscape:cx="-5.0939007"
+     inkscape:cy="60.493358"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2816" />
+  <path
+     style="fill:#008000;fill-opacity:0.98823529"
+     d="M 46.977003,126.64334 C 46.693972,125.95584 40.813862,120.20567 36.603071,114.98067 11.655836,81.858372 -16.158365,51.082905 16.319943,13.682837 30.700637,-0.21083367 48.43303,-1.0034227 66.662563,5.4726973 117.9922,35.174601 80.828906,83.627914 56.427079,115.48067 l -9.450076,11.16267 z M 62.417383,75.872046 C 96.654166,51.387445 70.185413,4.2391813 32.569429,19.913013 21.585178,25.769872 16.134954,35.960547 15.944071,47.980664 c -0.524495,11.693153 5.685418,21.471037 15.526227,27.460808 7.055481,3.840074 10.157178,4.533661 18.145697,4.057654 5.177622,-0.308516 8.161127,-1.153847 12.801388,-3.62708 z"
+     id="path4127"
+     sodipodi:nodetypes="ccccccccccsc" />
+  <path
+     sodipodi:type="arc"
+     style="fill:#008000;fill-opacity:0.98823529;fill-rule:nonzero;stroke:none"
+     id="path4129"
+     sodipodi:cx="52.363636"
+     sodipodi:cy="49.05526"
+     sodipodi:rx="51.222816"
+     sodipodi:ry="41.754009"
+     d="m 41.682107,89.891342 a 51.222816,41.754009 0 1 1 1.276617,0.208091"
+     sodipodi:start="1.7808687"
+     sodipodi:end="8.0386371"
+     sodipodi:open="true"
+     transform="matrix(0.87829487,0,0,1.0519028,0.55474126,-6.9952658)" />
+  <path
+     sodipodi:type="arc"
+     style="opacity:0.34016395;fill:#000000;fill-opacity:0;fill-rule:nonzero;stroke:none"
+     id="path4131"
+     sodipodi:cx="49.05526"
+     sodipodi:cy="48.59893"
+     sodipodi:rx="26.010695"
+     sodipodi:ry="20.991087"
+     d="m 43.631232,69.128546 a 26.010695,20.991087 0 1 1 0.64826,0.104614"
+     sodipodi:start="1.7808687"
+     sodipodi:end="8.0386371"
+     sodipodi:open="true"
+     transform="translate(0.64534523,0)" />
+  <path
+     sodipodi:type="arc"
+     style="fill:#000080;fill-opacity:0;fill-rule:nonzero;stroke:none"
+     id="path4135"
+     sodipodi:cx="35.365417"
+     sodipodi:cy="102.78788"
+     sodipodi:rx="16.655972"
+     sodipodi:ry="11.750445"
+     d="m 31.892136,114.28 a 16.655972,11.750445 0 1 1 0.415114,0.0586"
+     sodipodi:start="1.7808687"
+     sodipodi:end="8.0386371"
+     sodipodi:open="true"
+     transform="translate(0.64534523,0)" />
+  <path
+     sodipodi:type="arc"
+     style="fill:#009400;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path4149"
+     sodipodi:cx="52.705883"
+     sodipodi:cy="52.021389"
+     sodipodi:rx="34.452763"
+     sodipodi:ry="33.540108"
+     d="m 45.521425,84.824145 a 34.452763,33.540108 0 1 1 0.85866,0.167155"
+     sodipodi:start="1.7808687"
+     sodipodi:end="8.0386371"
+     sodipodi:open="true"
+     transform="matrix(0.97020484,0,0,1.0272058,-4.0587829,-5.7503824)" />
+  <path
+     sodipodi:type="arc"
+     style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+     id="path4184"
+     sodipodi:cx="64.211853"
+     sodipodi:cy="68.789574"
+     sodipodi:rx="34.203297"
+     sodipodi:ry="36.623341"
+     d="m 57.079416,104.60778 a 34.203297,36.623341 0 1 1 0.852443,0.18252"
+     sodipodi:start="1.7808687"
+     sodipodi:end="8.0386371"
+     sodipodi:open="true"
+     transform="matrix(0.64629924,0,0,0.61681122,5.1261236,4.9013803)" />
+</svg>
--- a/assets/themes/climbing/climbing.json
+++ b/assets/themes/climbing/climbing.json
@ -156,8 +156,7 @@
      "iconOverlays": [
        {
          "if": "opening_hours~*",
-          "then": "isOpen",
-          "badge": true
+          "then": "isOpen"
        }
      ],
      "width": {
@ -221,11 +220,10 @@
          "icon": {
            "render": "./assets/themes/climbing/club.svg"
          },
-          "iconOverlays": [
+          "iconBadges": [
            {
              "if": "opening_hours~*",
-              "then": "isOpen",
-              "badge": true
+              "then": "isOpen"
            }
          ],
          "iconSize": {
@ -325,8 +323,7 @@
      "iconOverlays": [
        {
          "if": "opening_hours~*",
-          "then": "isOpen",
-          "badge": true
+          "then": "isOpen"
        }
      ],
      "width": "0",
@ -339,11 +336,10 @@
          "icon": {
            "render": "./assets/themes/climbing/climbing_gym.svg"
          },
-          "iconOverlays": [
+          "iconBadges": [
            {
              "if": "opening_hours~*",
-              "then": "isOpen",
-              "badge": true
+              "then": "isOpen"
            }
          ],
          "iconSize": {
--- a/assets/themes/facadegardens/facadegardens.json
+++ b/assets/themes/facadegardens/facadegardens.json
@ -84,33 +84,27 @@
      "iconOverlays": [
        {
          "if": "plant~.*vine.*",
-          "then": "circle:white;./assets/themes/facadegardens/klimplant.svg",
-          "badge": true
+          "then": "circle:white;./assets/themes/facadegardens/klimplant.svg"
        },
        {
          "if": "plant~.*groundcover.*",
-          "then": "circle:white;./assets/themes/facadegardens/bodembedekker.svg",
-          "badge": true
+          "then": "circle:white;./assets/themes/facadegardens/bodembedekker.svg"
        },
        {
          "if": "edible=true",
-          "then": "circle:white;./assets/themes/facadegardens/eetbaar.svg",
-          "badge": true
+          "then": "circle:white;./assets/themes/facadegardens/eetbaar.svg"
        },
        {
          "if": "rain_barel=yes",
-          "then": "circle:white;./assets/themes/facadegardens/gevelton.svg",
-          "badge": true
+          "then": "circle:white;./assets/themes/facadegardens/gevelton.svg"
        },
        {
          "if": "plant~.*shrub.*",
-          "then": "circle:white;./assets/themes/facadegardens/struik.svg",
-          "badge": true
+          "then": "circle:white;./assets/themes/facadegardens/struik.svg"
        },
        {
          "if": "plant~.*flower.*",
-          "then": "circle:white;./assets/themes/facadegardens/bloei.svg",
-          "badge": true
+          "then": "circle:white;./assets/themes/facadegardens/bloei.svg"
        }
      ],
      "tagRenderings": [
@ -486,36 +480,30 @@
              }
            ]
          },
-          "iconOverlays": [
+          "iconBadges": [
            {
              "if": "plant~.*vine.*",
-              "then": "circle:white;./assets/themes/facadegardens/klimplant.svg",
-              "badge": true
+              "then": "circle:white;./assets/themes/facadegardens/klimplant.svg"
            },
            {
              "if": "plant~.*groundcover.*",
-              "then": "circle:white;./assets/themes/facadegardens/bodembedekker.svg",
-              "badge": true
+              "then": "circle:white;./assets/themes/facadegardens/bodembedekker.svg"
            },
            {
              "if": "edible=true",
-              "then": "circle:white;./assets/themes/facadegardens/eetbaar.svg",
-              "badge": true
+              "then": "circle:white;./assets/themes/facadegardens/eetbaar.svg"
            },
            {
              "if": "rain_barel=yes",
-              "then": "circle:white;./assets/themes/facadegardens/gevelton.svg",
-              "badge": true
+              "then": "circle:white;./assets/themes/facadegardens/gevelton.svg"
            },
            {
              "if": "plant~.*shrub.*",
-              "then": "circle:white;./assets/themes/facadegardens/struik.svg",
-              "badge": true
+              "then": "circle:white;./assets/themes/facadegardens/struik.svg"
            },
            {
              "if": "plant~.*flower.*",
-              "then": "circle:white;./assets/themes/facadegardens/bloei.svg",
-              "badge": true
+              "then": "circle:white;./assets/themes/facadegardens/bloei.svg"
            }
          ],
          "iconSize": {
--- a/assets/themes/postboxes/postboxes.json
+++ b/assets/themes/postboxes/postboxes.json
@ -154,8 +154,7 @@
      "iconOverlays": [
        {
          "if": "opening_hours~*",
-          "then": "isOpen",
-          "badge": true
+          "then": "isOpen"
        }
      ],
      "width": {
@ -196,11 +195,10 @@
          "icon": {
            "render": "square:white;./assets/themes/postboxes/post_office.svg"
          },
-          "iconOverlays": [
+          "iconBadges": [
            {
              "if": "opening_hours~*",
-              "then": "isOpen",
-              "badge": true
+              "then": "isOpen"
            }
          ],
          "iconSize": {
--- a/css/index-tailwind-output.css
+++ b/css/index-tailwind-output.css
@ -748,6 +748,14 @@ video {
  right: 0.75rem;
 }

+.bottom-0 {
+  bottom: 0px;
+}
+
+.right-1\/3 {
+  right: 33.333333%;
+}
+
 .top-0 {
  top: 0px;
 }
@ -760,10 +768,6 @@ video {
  right: 0px;
 }

-.bottom-0 {
-  bottom: 0px;
-}
-
 .isolate {
  isolation: isolate;
 }
@ -856,6 +860,10 @@ video {
  margin-left: 0.75rem;
 }

+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mb-2 {
  margin-bottom: 0.5rem;
 }
@ -884,10 +892,6 @@ video {
  margin-bottom: 2.5rem;
 }

-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mt-0 {
  margin-top: 0px;
 }
@ -988,6 +992,10 @@ video {
  height: 2rem;
 }

+.h-1\/2 {
+  height: 50%;
+}
+
 .h-12 {
  height: 3rem;
 }
@ -1048,6 +1056,10 @@ video {
  width: 2rem;
 }

+.w-0 {
+  width: 0px;
+}
+
 .w-12 {
  width: 3rem;
 }
@ -1060,10 +1072,6 @@ video {
  width: 2.75rem;
 }

-.w-0 {
-  width: 0px;
-}
-
 .w-16 {
  width: 4rem;
 }
@ -1810,6 +1818,15 @@ html, body {
  display: block ruby;
 }

+.badge {
+}
+
+.badge svg {
+  /*Workaround for leaflet*/
+  width: unset !important;
+  height: 100% !important;
+}
+
 svg, img {
  box-sizing: content-box;
  width: 100%;
--- a/index.css
+++ b/index.css
@ -91,6 +91,15 @@ html, body {
    display: block ruby;
 }

+.badge {
+}
+
+.badge svg {
+    /*Workaround for leaflet*/
+    width: unset !important;
+    height: 100% !important;
+}
+
 svg, img {
    box-sizing: content-box;
    width: 100%;
--- a/scripts/lint.ts
+++ b/scripts/lint.ts
@ -30,14 +30,14 @@ function fixLayerConfig(config: LayerConfigJson): void {
    if (config.mapRendering === undefined || true) {
        // This is a legacy format, lets create a pointRendering
        let location: ("point" | "centroid")[] = ["point"]
-        let wayHandling: number = config.wayHandling
+        let wayHandling: number = config["wayHandling"] ?? 0
        if (wayHandling === 2) {
            location = ["point", "centroid"]
        }
        config.mapRendering = [
            {
                icon: config["icon"],
-                iconOverlays: config["iconOverlays"],
+                iconBadges: config["iconOverlays"],
                label: config["label"],
                iconSize: config["iconSize"],
                location,
@ -55,6 +55,8 @@ function fixLayerConfig(config: LayerConfigJson): void {
                config.mapRendering.push(lineRenderConfig)
            }
        }
+
+
        /*delete config["color"]
        delete config["width"]
        delete config["dashArray"]
@ -64,9 +66,21 @@ function fixLayerConfig(config: LayerConfigJson): void {
        delete config["label"]
        delete config["iconSize"]
        delete config["rotation"]
+         delete config["wayHandling"]
        */

+    }

+    for (const mapRenderingElement of config.mapRendering) {
+        if (mapRenderingElement["iconOverlays"] !== undefined) {
+            mapRenderingElement["iconBadges"] = mapRenderingElement["iconOverlays"]
+        }
+        for (const overlay of mapRenderingElement["iconBadges"] ?? []) {
+            if (overlay["badge"] !== true) {
+                console.log("Warning: non-overlay element for ", config.id)
+            }
+            delete overlay["badge"]
+        }
    }

 }