Add drinking water layer

Customizations/AllKnownLayouts.ts

@@ -1,22 +1,24 @@
-import {Groen} from "./Layouts/Groen";
-import {Toilets} from "./Layouts/Toilets";
-import {GRB} from "./Layouts/GRB";
-import {Statues} from "./Layouts/Statues";
-import {Bookcases} from "./Layouts/Bookcases";
+import { Groen } from "./Layouts/Groen";
+import { Toilets } from "./Layouts/Toilets";
+import { GRB } from "./Layouts/GRB";
+import { Statues } from "./Layouts/Statues";
+import { Bookcases } from "./Layouts/Bookcases";
 import Cyclofix from "./Layouts/Cyclofix";
-import {All} from "./Layouts/All";
-import {Layout} from "./Layout";
+import { DrinkingWater } from "./Layouts/DrinkingWater";
+import { All } from "./Layouts/All";
+import { Layout } from "./Layout";
 
 export class AllKnownLayouts {
     public static allSets: any = AllKnownLayouts.AllLayouts();
 
-    private static AllLayouts() : any{
+    private static AllLayouts(): any {
         const all = new All();
-        const layouts : Layout[] = [
+        const layouts: Layout[] = [
             new Groen(),
             new GRB(),
             new Cyclofix(),
             new Bookcases(),
+            new DrinkingWater(),
             all
             /*new Toilets(),
             new Statues(),

Customizations/Layers/DrinkingWater.ts

@@ -0,0 +1,61 @@
+import { LayerDefinition } from "../LayerDefinition";
+import { And, Or, Tag } from "../../Logic/TagsFilter";
+import { OperatorTag } from "../Questions/OperatorTag";
+import * as L from "leaflet";
+import FixedText from "../Questions/FixedText";
+import { BikeParkingType } from "../Questions/BikeParkingType";
+import { TagRenderingOptions } from "../TagRendering";
+import { ImageCarouselWithUploadConstructor } from "../../UI/Image/ImageCarouselWithUpload";
+
+export class DrinkingWaterLayer extends LayerDefinition {
+
+    constructor() {
+        super();
+        this.name = "drinking_water";
+        this.icon = "./assets/bug.svg";
+
+        this.overpassFilter = new Or([
+            new And([
+                new Tag("amenity", "drinking_water")
+            ])
+        ]);
+
+
+        this.newElementTags = [
+            new Tag("amenity", "drinking_water"),
+        ];
+        this.maxAllowedOverlapPercentage = 10;
+
+        this.minzoom = 13;
+        this.style = this.generateStyleFunction();
+        this.title = new FixedText("Drinking water");
+        this.elementsToShow = [
+            new OperatorTag(),
+            new BikeParkingType()
+        ];
+        this.elementsToShow = [new ImageCarouselWithUploadConstructor(), new TagRenderingOptions({
+            question: "How easy is it to fill water bottles?",
+            mappings: [
+                { k: new Tag("bottle", "yes"), txt: "It is easy to refill water bottles" },
+                { k: new Tag("bottle", "no"), txt: "Water bottles may not fit" }
+            ],
+        })];
+
+    }
+
+
+    private generateStyleFunction() {
+        const self = this;
+        return function (properties: any) {
+
+            return {
+                color: "#00bb00",
+                icon: new L.icon({
+                    iconUrl: self.icon,
+                    iconSize: [40, 40]
+                })
+            };
+        };
+    }
+
+}

Customizations/Layouts/DrinkingWater.ts

@@ -0,0 +1,26 @@
+import { Layout } from "../Layout";
+import { DrinkingWaterLayer } from "../Layers/DrinkingWater";
+
+export class DrinkingWater extends Layout {
+    constructor() {
+        super("drinkingwater",
+            "Drinking Water Spots",
+            [new DrinkingWaterLayer()],
+            10,
+            50.8435,
+            4.3688,
+
+
+            "        <h3>Drinking water</h3>\n" +
+            "\n" +
+            "<p>" +
+            "Help with creating a map of drinking water points!"
+
+            ,
+            "  <p>Start by <a href=\"https://www.openstreetmap.org/user/new\" target=\"_blank\">creating an account\n" +
+            "            </a> or by " +
+            "            <span onclick=\"authOsm()\" class=\"activate-osm-authentication\">logging in</span>.</p>",
+            "Start by clicking a pin and answering the questions");
+    }
+
+}