Add auto icon picker for presets

Customizations/LayerDefinition.ts

@@ -30,7 +30,7 @@ export class LayerDefinition {
         tags: Tag[],
         title: string | UIElement,
         description?: string | UIElement,
-        icon: string
+        icon?: string
     }[]
     /**
      * Not really used anymore
@@ -102,7 +102,7 @@ export class LayerDefinition {
             tags: Tag[],
             title: string | UIElement,
             description?: string | UIElement,
-            icon: string
+            icon?: string
         }[],
         icon: string,
         minzoom: number,

Customizations/Layers/Bookcases.ts

@@ -16,7 +16,6 @@ export class Bookcases extends LayerDefinition {
             tags: [new Tag("amenity", "public_bookcase")],
             description: "Add a new bookcase here",
             title: Translations.t.bookcases.bookcase,
-            icon: "/assets/bookcase.svg"
         }];
         this.icon = "./assets/bookcase.svg";
         this.overpassFilter = new Tag("amenity", "public_bookcase");

Customizations/Layers/GhostBike.ts

@@ -20,7 +20,6 @@ export class GhostBike extends LayerDefinition {
             {
                 title: "Ghost bike",
                 description: "Add a missing ghost bike to the map",
-                icon: "/assets/bike/ghost.svg",
                 tags: [new Tag("historic", "memorial"), new Tag("memorial", "ghost_bike")]
             }
         ]

Customizations/Layers/InformationBoard.ts

@@ -13,12 +13,10 @@ export class InformationBoard extends LayerDefinition {
             overpassFilter: new Tag("tourism", "information"),
             presets: [{
                 title: "Informatiebord",
-                icon: "/assets/nature/info.png",
                 tags: [new Tag("tourism", "information")]
             },
                 {
                     title: "Kaart",
-                    icon: "/assets/map.svg",
                     tags: [new Tag("tourism", "information"), new Tag("information", "map")]
                 }],
             maxAllowedOverlapPercentage: 0,

Customizations/Layers/Map.ts

@@ -14,7 +14,6 @@ export class Map extends LayerDefinition {
         this.overpassFilter = new Tag("information", "map");
         this.presets = [{
             title: "Map",
-            icon: "/assets/map.svg",
             tags: [new Tag("tourism", "information"), new Tag("information", "map")]
         }];
 

Customizations/Layers/NatureReserves.ts

@@ -21,7 +21,6 @@ export class NatureReserves extends LayerDefinition {
         this.presets = [{
             title: "Natuurreservaat",
             description: "Voeg een ontbrekend, erkend natuurreservaat toe, bv. een gebied dat beheerd wordt door het ANB of natuurpunt",
-            icon: undefined,
             tags: [new Tag("leisure", "nature_reserve"),
                 new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")]
         }

Customizations/Layers/Park.ts

@@ -54,7 +54,6 @@ export class Park extends LayerDefinition {
             title: "Park",
             description: "Voeg een ontbrekend park toe. Een park is een groene ruimte die openbaar is." +
                 "Typisch vind je er banken, vuilbakken, standbeelden, ... ",
-            icon: undefined,
             tags: [new Tag("leisure", "park"),
                 new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")]
         }];

Customizations/Layers/Viewpoint.ts

@@ -14,7 +14,6 @@ export class Viewpoint extends LayerDefinition {
             presets: [{
                 title: "Bezienswaardigheid (andere)",
                 description: "Wens je een foto toe te voegen dat geen park, bos of (erkend) natuurreservaat is? Dit kan hiermee",
-                icon: "/assets/viewpoint.svg",
                 tags: [new Tag("tourism", "viewpoint"),
                     new Tag("fixme", "Added with mapcomplete. This viewpoint should probably me merged with some existing feature")]
             }],

Logic/Overpass.ts

@@ -16,14 +16,12 @@ export class Overpass {
 
     public buildQuery(bbox: string): string {
         const filters = this._filter.asOverpass()
-        console.log(filters)
         let filter = ""
         for (const filterOr of filters) {
             filter += 'nwr' + filterOr + ';'
         }
         const query =
             '[out:json][timeout:25]' + bbox + ';(' + filter + ');out body;>;out skel qt;'
-        console.log(query)
         return "https://overpass-api.de/api/interpreter?data=" + encodeURIComponent(query)
     }
 

Logic/TagsFilter.ts

@@ -276,7 +276,8 @@ export class TagUtils {
     static ApplyTemplate(template: string, tags: any): string {
         for (const k in tags) {
             while (template.indexOf("{" + k + "}") >= 0) {
-                template = template.replace("{" + k + "}", tags[k]);
+                const escaped = tags[k].replace(/</g, '&lt;').replace(/>/g, '&gt;');
+                template = template.replace("{" + k + "}", escaped);
             }
         }
         return template;

index.ts

@@ -214,6 +214,17 @@ for (const layer of layoutToUse.layers) {
 
     for (const preset of layer.presets) {
 
+        if (preset.icon === undefined) {
+            const tags = {};
+            for (const tag of preset.tags) {
+                const k = tag.key;
+                if (typeof (k) === "string") {
+                    tags[k] = tag.value;
+                }
+            }
+            preset.icon = layer.style(tags).icon.iconUrl;
+        }
+
         const addButton = {
             name: preset.title,
             description: preset.description,
@@ -283,6 +294,9 @@ InitUiElements.OnlyIf(featureSwitchAddNew, () => {
  * This is given to the div which renders fullscreen on mobile devices
  */
 selectedElement.addCallback((feature) => {
+    if (feature?.feature?.properties === undefined) {
+        return;
+    }
     const data = feature.feature.properties;
     // Which is the applicable set?
     for (const layer of layoutToUse.layers) {