start extra filter functionality

Customizations/JSON/FilterConfig.ts

@@ -0,0 +1,27 @@
+import { TagsFilter } from "../../Logic/Tags/TagsFilter";
+import { Translation } from "../../UI/i18n/Translation";
+import Translations from "../../UI/i18n/Translations";
+import FilterConfigJson from "./FilterConfigJson";
+import { FromJSON } from "./FromJSON";
+
+export default class FilterConfig {
+  readonly options: {
+    question: Translation;
+    osmTags: TagsFilter;
+  }[];
+
+  constructor(json: FilterConfigJson, context: string) {
+    this.options = json.options.map((option, i) => {
+      const question = Translations.T(
+        option.question,
+        context + ".options-[" + i + "].question"
+      );
+      const osmTags = FromJSON.Tag(
+        option.osmTags,
+        `${context}.options-[${i}].osmTags`
+      );
+
+      return { question: question, osmTags: osmTags };
+    });
+  }
+}

Customizations/JSON/FilterConfigJson.ts

@@ -0,0 +1,11 @@
+import { AndOrTagConfigJson } from "./TagConfigJson";
+
+export default interface FilterConfigJson {
+  /**
+   * The options for a filter
+   * If there are multiple options these will be a list of radio buttons
+   * If there is only one option this will be a checkbox
+   * Filtering is done based on the given osmTags that are compared to the objects in that layer.
+   */
+  options: { question: string | any; osmTags: AndOrTagConfigJson | string }[];
+}

Customizations/JSON/LayerConfig.ts

@@ -18,19 +18,18 @@ import {Tag} from "../../Logic/Tags/Tag";
 import BaseUIElement from "../../UI/BaseUIElement";
 import { Unit } from "./Denomination";
 import DeleteConfig from "./DeleteConfig";
+import FilterConfig from "./FilterConfig";
 
 export default class LayerConfig {
-
-
   static WAYHANDLING_DEFAULT = 0;
   static WAYHANDLING_CENTER_ONLY = 1;
   static WAYHANDLING_CENTER_AND_WAY = 2;
 
   id: string;
-    name: Translation
+  name: Translation;
   description: Translation;
   source: SourceConfig;
-    calculatedTags: [string, string][]
+  calculatedTags: [string, string][];
   doNotDownload: boolean;
   passAllFeatures: boolean;
   isShown: TagRenderingConfig;
@@ -39,7 +38,7 @@ export default class LayerConfig {
   title?: TagRenderingConfig;
   titleIcons: TagRenderingConfig[];
   icon: TagRenderingConfig;
-    iconOverlays: { if: TagsFilter, then: TagRenderingConfig, badge: boolean }[]
+  iconOverlays: { if: TagsFilter; then: TagRenderingConfig; badge: boolean }[];
   iconSize: TagRenderingConfig;
   label: TagRenderingConfig;
   rotation: TagRenderingConfig;
@@ -48,20 +47,23 @@ export default class LayerConfig {
   dashArray: TagRenderingConfig;
   wayHandling: number;
   public readonly units: Unit[];
-    public readonly deletion: DeleteConfig | null
+  public readonly deletion: DeleteConfig | null;
 
   presets: {
-        title: Translation,
+    title: Translation;
-        tags: Tag[],
+    tags: Tag[];
-        description?: Translation,
+    description?: Translation;
   }[];
 
   tagRenderings: TagRenderingConfig[];
+  filters: FilterConfig[];
 
-    constructor(json: LayerConfigJson,
+  constructor(
+    json: LayerConfigJson,
     units?: Unit[],
     context?: string,
-                official: boolean = true,) {
+    official: boolean = true
+  ) {
     this.units = units ?? [];
     context = context + "." + json.id;
     const self = this;
@@ -74,7 +76,10 @@ export default class LayerConfig {
       }
     }
 
-        this.description =Translations.T(json.description, context + ".description") ; 
+    this.description = Translations.T(
+      json.description,
+      context + ".description"
+    );
 
     let legacy = undefined;
     if (json["overpassTags"] !== undefined) {
@@ -83,45 +88,54 @@ export default class LayerConfig {
     }
     if (json.source !== undefined) {
       if (legacy !== undefined) {
-                throw context + "Both the legacy 'layer.overpasstags' and the new 'layer.source'-field are defined"
+        throw (
+          context +
+          "Both the legacy 'layer.overpasstags' and the new 'layer.source'-field are defined"
+        );
       }
 
       let osmTags: TagsFilter = legacy;
       if (json.source["osmTags"]) {
-                osmTags = FromJSON.Tag(json.source["osmTags"], context + "source.osmTags");
+        osmTags = FromJSON.Tag(
+          json.source["osmTags"],
+          context + "source.osmTags"
+        );
       }
 
       if (json.source["geoJsonSource"] !== undefined) {
-                throw context + "Use 'geoJson' instead of 'geoJsonSource'"
+        throw context + "Use 'geoJson' instead of 'geoJsonSource'";
       }
 
-            this.source = new SourceConfig({
+      this.source = new SourceConfig(
+        {
           osmTags: osmTags,
           geojsonSource: json.source["geoJson"],
           geojsonSourceLevel: json.source["geoJsonZoomLevel"],
           overpassScript: json.source["overpassScript"],
-                isOsmCache: json.source["isOsmCache"]
+          isOsmCache: json.source["isOsmCache"],
-            }, this.id);
+        },
+        this.id
+      );
     } else {
       this.source = new SourceConfig({
-                osmTags: legacy
+        osmTags: legacy,
-            })
+      });
     }
 
-
     this.calculatedTags = undefined;
     if (json.calculatedTags !== undefined) {
       if (!official) {
-                console.warn(`Unofficial theme ${this.id} with custom javascript! This is a security risk`)
+        console.warn(
+          `Unofficial theme ${this.id} with custom javascript! This is a security risk`
+        );
       }
       this.calculatedTags = [];
       for (const kv of json.calculatedTags) {
-
+        const index = kv.indexOf("=");
-                const index = kv.indexOf("=")
         const key = kv.substring(0, index);
         const code = kv.substring(index + 1);
 
-                this.calculatedTags.push([key, code])
+        this.calculatedTags.push([key, code]);
       }
     }
 
@@ -130,13 +144,14 @@ export default class LayerConfig {
     this.minzoom = json.minzoom ?? 0;
     this.maxzoom = json.maxzoom ?? 1000;
     this.wayHandling = json.wayHandling ?? 0;
-        this.presets = (json.presets ?? []).map((pr, i) =>
+    this.presets = (json.presets ?? []).map((pr, i) => ({
-            ({
       title: Translations.T(pr.title, `${context}.presets[${i}].title`),
-                tags: pr.tags.map(t => FromJSON.SimpleTag(t)),
+      tags: pr.tags.map((t) => FromJSON.SimpleTag(t)),
-                description: Translations.T(pr.description, `${context}.presets[${i}].description`)
+      description: Translations.T(
-            }))
+        pr.description,
-
+        `${context}.presets[${i}].description`
+      ),
+    }));
 
     /** Given a key, gets the corresponding property from the json (or the default if not found
      *
@@ -148,7 +163,11 @@ export default class LayerConfig {
         if (deflt === undefined) {
           return undefined;
         }
-                return new TagRenderingConfig(deflt, self.source.osmTags, `${context}.${key}.default value`);
+        return new TagRenderingConfig(
+          deflt,
+          self.source.osmTags,
+          `${context}.${key}.default value`
+        );
       }
       if (typeof v === "string") {
         const shared = SharedTagRenderings.SharedTagRendering.get(v);
@@ -156,54 +175,80 @@ export default class LayerConfig {
           return shared;
         }
       }
-            return new TagRenderingConfig(v, self.source.osmTags, `${context}.${key}`);
+      return new TagRenderingConfig(
+        v,
+        self.source.osmTags,
+        `${context}.${key}`
+      );
     }
 
     /**
      * Converts a list of tagRenderingCOnfigJSON in to TagRenderingConfig
      * A string is interpreted as a name to call
      */
-        function trs(tagRenderings?: (string | TagRenderingConfigJson)[], readOnly = false) {
+    function trs(
+      tagRenderings?: (string | TagRenderingConfigJson)[],
+      readOnly = false
+    ) {
       if (tagRenderings === undefined) {
         return [];
       }
 
-            return Utils.NoNull(tagRenderings.map(
+      return Utils.NoNull(
-                (renderingJson, i) => {
+        tagRenderings.map((renderingJson, i) => {
           if (typeof renderingJson === "string") {
-
             if (renderingJson === "questions") {
               if (readOnly) {
-                                throw `A tagrendering has a question, but asking a question does not make sense here: is it a title icon or a geojson-layer? ${context}. The offending tagrendering is ${JSON.stringify(renderingJson)}`
+                throw `A tagrendering has a question, but asking a question does not make sense here: is it a title icon or a geojson-layer? ${context}. The offending tagrendering is ${JSON.stringify(
+                  renderingJson
+                )}`;
               }
 
-                            return new TagRenderingConfig("questions", undefined)
+              return new TagRenderingConfig("questions", undefined);
             }
 
-
+            const shared =
-                        const shared = SharedTagRenderings.SharedTagRendering.get(renderingJson);
+              SharedTagRenderings.SharedTagRendering.get(renderingJson);
             if (shared !== undefined) {
               return shared;
             }
 
-                        const keys = Array.from(SharedTagRenderings.SharedTagRendering.keys())
+            const keys = Array.from(
+              SharedTagRenderings.SharedTagRendering.keys()
+            );
 
             if (Utils.runningFromConsole) {
               return undefined;
             }
 
-                        throw `Predefined tagRendering ${renderingJson} not found in ${context}.\n    Try one of ${(keys.join(", "))}\n    If you intent to output this text literally, use {\"render\": <your text>} instead"}`;
+            throw `Predefined tagRendering ${renderingJson} not found in ${context}.\n    Try one of ${keys.join(
+              ", "
+            )}\n    If you intent to output this text literally, use {\"render\": <your text>} instead"}`;
           }
-                    return new TagRenderingConfig(renderingJson, self.source.osmTags, `${context}.tagrendering[${i}]`);
+          return new TagRenderingConfig(
-                }));
+            renderingJson,
+            self.source.osmTags,
+            `${context}.tagrendering[${i}]`
+          );
+        })
+      );
     }
 
     this.tagRenderings = trs(json.tagRenderings, false);
 
+    this.filters = (json.filter ?? []).map((option, i) => {
+        return new FilterConfig(option, `${context}.filter-[${i}]`)
+    });
 
     const titleIcons = [];
-        const defaultIcons = ["phonelink", "emaillink", "wikipedialink", "osmlink", "sharelink"];
+    const defaultIcons = [
-        for (const icon of (json.titleIcons ?? defaultIcons)) {
+      "phonelink",
+      "emaillink",
+      "wikipedialink",
+      "osmlink",
+      "sharelink",
+    ];
+    for (const icon of json.titleIcons ?? defaultIcons) {
       if (icon === "defaults") {
         titleIcons.push(...defaultIcons);
       } else {
@@ -213,31 +258,37 @@ export default class LayerConfig {
 
     this.titleIcons = trs(titleIcons, true);
 
-
     this.title = tr("title", undefined);
     this.icon = tr("icon", "");
     this.iconOverlays = (json.iconOverlays ?? []).map((overlay, i) => {
-            let tr = new TagRenderingConfig(overlay.then, self.source.osmTags, `iconoverlays.${i}`);
+      let tr = new TagRenderingConfig(
-            if (typeof overlay.then === "string" && SharedTagRenderings.SharedIcons.get(overlay.then) !== undefined) {
+        overlay.then,
+        self.source.osmTags,
+        `iconoverlays.${i}`
+      );
+      if (
+        typeof overlay.then === "string" &&
+        SharedTagRenderings.SharedIcons.get(overlay.then) !== undefined
+      ) {
         tr = SharedTagRenderings.SharedIcons.get(overlay.then);
       }
       return {
         if: FromJSON.Tag(overlay.if),
         then: tr,
-                badge: overlay.badge ?? false
+        badge: overlay.badge ?? false,
-            }
+      };
     });
 
     const iconPath = this.icon.GetRenderValue({ id: "node/-1" }).txt;
     if (iconPath.startsWith(Utils.assets_path)) {
       const iconKey = iconPath.substr(Utils.assets_path.length);
       if (Svg.All[iconKey] === undefined) {
-                throw "Builtin SVG asset not found: " + iconPath
+        throw "Builtin SVG asset not found: " + iconPath;
       }
     }
     this.isShown = tr("isShown", "yes");
     this.iconSize = tr("iconSize", "40,40,center");
-        this.label = tr("label", "")
+    this.label = tr("label", "");
     this.color = tr("color", "#0000ff");
     this.width = tr("width", "7");
     this.rotation = tr("rotation", "0");
@@ -245,42 +296,47 @@ export default class LayerConfig {
 
     this.deletion = null;
     if (json.deletion === true) {
-            json.deletion = {
+      json.deletion = {};
-            }
     }
     if (json.deletion !== undefined && json.deletion !== false) {
-            this.deletion = new DeleteConfig(json.deletion, `${context}.deletion`)
+      this.deletion = new DeleteConfig(json.deletion, `${context}.deletion`);
     }
 
-
     if (json["showIf"] !== undefined) {
-            throw "Invalid key on layerconfig " + this.id + ": showIf. Did you mean 'isShown' instead?";
+      throw (
+        "Invalid key on layerconfig " +
+        this.id +
+        ": showIf. Did you mean 'isShown' instead?"
+      );
     }
   }
 
   public CustomCodeSnippets(): string[] {
     if (this.calculatedTags === undefined) {
-            return []
+      return [];
     }
 
-        return this.calculatedTags.map(code => code[1]);
+    return this.calculatedTags.map((code) => code[1]);
   }
 
   public AddRoamingRenderings(addAll: {
-        tagRenderings: TagRenderingConfig[],
+    tagRenderings: TagRenderingConfig[];
-        titleIcons: TagRenderingConfig[],
+    titleIcons: TagRenderingConfig[];
-        iconOverlays: { "if": TagsFilter, then: TagRenderingConfig, badge: boolean }[]
+    iconOverlays: {
-
+      if: TagsFilter;
+      then: TagRenderingConfig;
+      badge: boolean;
+    }[];
   }): LayerConfig {
-
+    let insertionPoint = this.tagRenderings
-        let insertionPoint = this.tagRenderings.map(tr => tr.IsQuestionBoxElement()).indexOf(true)
+      .map((tr) => tr.IsQuestionBoxElement())
+      .indexOf(true);
     if (insertionPoint < 0) {
       // No 'questions' defined - we just add them all to the end
       insertionPoint = this.tagRenderings.length;
     }
     this.tagRenderings.splice(insertionPoint, 0, ...addAll.tagRenderings);
 
-
     this.iconOverlays.push(...addAll.iconOverlays);
     for (const icon of addAll.titleIcons) {
       this.titleIcons.splice(0, 0, icon);
@@ -289,40 +345,42 @@ export default class LayerConfig {
   }
 
   public GetRoamingRenderings(): {
-        tagRenderings: TagRenderingConfig[],
+    tagRenderings: TagRenderingConfig[];
-        titleIcons: TagRenderingConfig[],
+    titleIcons: TagRenderingConfig[];
-        iconOverlays: { "if": TagsFilter, then: TagRenderingConfig, badge: boolean }[]
+    iconOverlays: {
-
+      if: TagsFilter;
+      then: TagRenderingConfig;
+      badge: boolean;
+    }[];
   } {
-
+    const tagRenderings = this.tagRenderings.filter((tr) => tr.roaming);
-        const tagRenderings = this.tagRenderings.filter(tr => tr.roaming);
+    const titleIcons = this.titleIcons.filter((tr) => tr.roaming);
-        const titleIcons = this.titleIcons.filter(tr => tr.roaming);
+    const iconOverlays = this.iconOverlays.filter((io) => io.then.roaming);
-        const iconOverlays = this.iconOverlays.filter(io => io.then.roaming)
 
     return {
       tagRenderings: tagRenderings,
       titleIcons: titleIcons,
-            iconOverlays: iconOverlays
+      iconOverlays: iconOverlays,
+    };
   }
 
-    }
+  public GenerateLeafletStyle(
-
+    tags: UIEventSource<any>,
-    public GenerateLeafletStyle(tags: UIEventSource<any>, clickable: boolean, widthHeight= "100%"):
+    clickable: boolean,
-        {
+    widthHeight = "100%"
-            icon:
+  ): {
-                {
+    icon: {
-                    html: BaseUIElement,
+      html: BaseUIElement;
-                    iconSize: [number, number],
+      iconSize: [number, number];
-                    iconAnchor: [number, number],
+      iconAnchor: [number, number];
-                    popupAnchor: [number, number],
+      popupAnchor: [number, number];
-                    iconUrl: string,
+      iconUrl: string;
-                    className: string
+      className: string;
-                },
+    };
-            color: string,
+    color: string;
-            weight: number,
+    weight: number;
-            dashArray: number[]
+    dashArray: number[];
   } {
-
     function num(str, deflt = 40) {
       const n = Number(str);
       if (isNaN(n)) {
@@ -341,7 +399,7 @@ export default class LayerConfig {
     }
 
     function render(tr: TagRenderingConfig, deflt?: string) {
-            const str = (tr?.GetRenderValue(tags.data)?.txt ?? deflt);
+      const str = tr?.GetRenderValue(tags.data)?.txt ?? deflt;
       return Utils.SubstituteKeys(str, tags.data).replace(/{.*}/g, "");
     }
 
@@ -350,14 +408,16 @@ export default class LayerConfig {
     let color = render(this.color, "#00f");
 
     if (color.startsWith("--")) {
-            color = getComputedStyle(document.body).getPropertyValue("--catch-detail-color")
+      color = getComputedStyle(document.body).getPropertyValue(
+        "--catch-detail-color"
+      );
     }
 
     const weight = rendernum(this.width, 5);
 
     const iconW = num(iconSize[0]);
     let iconH = num(iconSize[1]);
-        const mode = iconSize[2]?.trim()?.toLowerCase() ?? "center"
+    const mode = iconSize[2]?.trim()?.toLowerCase() ?? "center";
 
     let anchorW = iconW / 2;
     let anchorH = iconH / 2;
@@ -377,31 +437,35 @@ export default class LayerConfig {
 
     const iconUrlStatic = render(this.icon);
     const self = this;
-        const mappedHtml = tags.map(tgs => {
+    const mappedHtml = tags.map((tgs) => {
       function genHtmlFromString(sourcePart: 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}" />`);
+        let html: BaseUIElement = new FixedUiElement(
-                const match = sourcePart.match(/([a-zA-Z0-9_]*):([^;]*)/)
+          `<img src="${sourcePart}" style="${style}" />`
+        );
+        const match = sourcePart.match(/([a-zA-Z0-9_]*):([^;]*)/);
         if (match !== null && Svg.All[match[1] + ".svg"] !== undefined) {
           html = new Combine([
-                        (Svg.All[match[1] + ".svg"] as string)
+            (Svg.All[match[1] + ".svg"] as string).replace(
-                            .replace(/#000000/g, match[2])
+              /#000000/g,
+              match[2]
+            ),
           ]).SetStyle(style);
         }
         return html;
       }
 
-
       // 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 != ""));
+      let sourceParts = Utils.NoNull(
+        iconUrl.split(";").filter((prt) => prt != "")
+      );
       for (const sourcePart of sourceParts) {
-                htmlParts.push(genHtmlFromString(sourcePart))
+        htmlParts.push(genHtmlFromString(sourcePart));
       }
 
       let badges = [];
@@ -411,79 +475,88 @@ export default class LayerConfig {
         }
         if (iconOverlay.badge) {
           const badgeParts: BaseUIElement[] = [];
-                    const partDefs = iconOverlay.then.GetRenderValue(tgs).txt.split(";").filter(prt => prt != "");
+          const partDefs = iconOverlay.then
+            .GetRenderValue(tgs)
+            .txt.split(";")
+            .filter((prt) => prt != "");
 
           for (const badgePartStr of partDefs) {
-                        badgeParts.push(genHtmlFromString(badgePartStr))
+            badgeParts.push(genHtmlFromString(badgePartStr));
           }
 
-                    const badgeCompound = new Combine(badgeParts)
+          const badgeCompound = new Combine(badgeParts).SetStyle(
-                        .SetStyle("display:flex;position:relative;width:100%;height:100%;");
+            "display:flex;position:relative;width:100%;height:100%;"
-
+          );
-                    badges.push(badgeCompound)
 
+          badges.push(badgeCompound);
         } else {
-                    htmlParts.push(genHtmlFromString(
+          htmlParts.push(
-                        iconOverlay.then.GetRenderValue(tgs).txt));
+            genHtmlFromString(iconOverlay.then.GetRenderValue(tgs).txt)
+          );
         }
       }
 
       if (badges.length > 0) {
-                const badgesComponent = new Combine(badges)
+        const badgesComponent = new Combine(badges).SetStyle(
-                    .SetStyle("display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;");
+          "display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;"
-                htmlParts.push(badgesComponent)
+        );
+        htmlParts.push(badgesComponent);
       }
 
       if (sourceParts.length == 0) {
-                iconH = 0
+        iconH = 0;
       }
       try {
-
+        const label = self.label
-                const label = self.label?.GetRenderValue(tgs)?.Subs(tgs)
+          ?.GetRenderValue(tgs)
+          ?.Subs(tgs)
           ?.SetClass("block text-center")
-                    ?.SetStyle("margin-top: " + (iconH + 2) + "px")
+          ?.SetStyle("margin-top: " + (iconH + 2) + "px");
         if (label !== undefined) {
-                    htmlParts.push(new Combine([label]).SetClass("flex flex-col items-center"))
+          htmlParts.push(
+            new Combine([label]).SetClass("flex flex-col items-center")
+          );
         }
       } catch (e) {
-                console.error(e, tgs)
+        console.error(e, tgs);
       }
       return new Combine(htmlParts);
-        })
+    });
-
 
     return {
-            icon:
+      icon: {
-                {
         html: new VariableUiElement(mappedHtml),
         iconSize: [iconW, iconH],
         iconAnchor: [anchorW, anchorH],
         popupAnchor: [0, 3 - anchorH],
         iconUrl: iconUrlStatic,
-                    className: clickable ? "leaflet-div-icon" : "leaflet-div-icon unclickable"
+        className: clickable
+          ? "leaflet-div-icon"
+          : "leaflet-div-icon unclickable",
       },
       color: color,
       weight: weight,
-            dashArray: dashArray
+      dashArray: dashArray,
     };
   }
 
   public ExtractImages(): Set<string> {
-        const parts: Set<string>[] = []
+    const parts: Set<string>[] = [];
-        parts.push(...this.tagRenderings?.map(tr => tr.ExtractImages(false)))
+    parts.push(...this.tagRenderings?.map((tr) => tr.ExtractImages(false)));
-        parts.push(...this.titleIcons?.map(tr => tr.ExtractImages(true)))
+    parts.push(...this.titleIcons?.map((tr) => tr.ExtractImages(true)));
-        parts.push(this.icon?.ExtractImages(true))
+    parts.push(this.icon?.ExtractImages(true));
-        parts.push(...this.iconOverlays?.map(overlay => overlay.then.ExtractImages(true)))
+    parts.push(
+      ...this.iconOverlays?.map((overlay) => overlay.then.ExtractImages(true))
+    );
     for (const preset of this.presets) {
-            parts.push(new Set<string>(preset.description?.ExtractImages(false)))
+      parts.push(new Set<string>(preset.description?.ExtractImages(false)));
     }
 
     const allIcons = new Set<string>();
     for (const part of parts) {
-            part?.forEach(allIcons.add, allIcons)
+      part?.forEach(allIcons.add, allIcons);
     }
 
     return allIcons;
   }
-
 }

Customizations/JSON/LayerConfigJson.ts

@@ -1,6 +1,7 @@
 import {TagRenderingConfigJson} from "./TagRenderingConfigJson";
 import {AndOrTagConfigJson} from "./TagConfigJson";
 import {DeleteConfigJson} from "./DeleteConfigJson";
+import FilterConfigJson from "./FilterConfigJson";
 
 /**
  * Configuration for a single layer
@@ -233,6 +234,12 @@ export interface LayerConfigJson {
      */
     tagRenderings?: (string | TagRenderingConfigJson) [],
 
+
+    /**
+     * All the extra questions for filtering
+     */
+    filter?: (FilterConfigJson) [],
+
     /**
      * This block defines under what circumstances the delete dialog is shown for objects of this layer.
      * If set, a dialog is shown to the user to (soft) delete the point.

UI/BigComponents/FilterView.ts

@@ -39,11 +39,11 @@ export default class FilterView extends ScrollableFullScreen {
       const checkboxes: BaseUIElement[] = [];
 
       for (const layer of activeLayers.data) {
-        const icon = new Combine([Svg.checkbox_filled]).SetStyle(
+        const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem";
-          "width:1.5rem;height:1.5rem"
+
-        );
+        const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
         const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
-          "width:1.5rem;height:1.5rem"
+          iconStyle
         );
 
         if (layer.layerDef.name === undefined) {
@@ -53,13 +53,22 @@ export default class FilterView extends ScrollableFullScreen {
         const style = "display:flex;align-items:center;color:#007759";
 
         const name: Translation = Translations.WT(layer.layerDef.name)?.Clone();
-        name.SetStyle("font-size:large;");
 
-        const layerChecked = new Combine([icon, name.Clone()]).SetStyle(style);
+        const styledNameChecked = name
+          .Clone()
+          .SetStyle("font-size:large;padding-left:1.25rem");
+
+        const styledNameUnChecked = name
+          .Clone()
+          .SetStyle("font-size:large;padding-left:1.25rem");
+
+        const layerChecked = new Combine([icon, styledNameChecked]).SetStyle(
+          style
+        );
 
         const layerNotChecked = new Combine([
           iconUnselected,
-          name.Clone(),
+          styledNameUnChecked,
         ]).SetStyle(style);
 
         checkboxes.push(