Add drinking water layer

Customizations/AllKnownLayouts.ts

@@ -1,22 +1,24 @@
-import {Groen} from "./Layouts/Groen";
+import { Groen } from "./Layouts/Groen";
-import {Toilets} from "./Layouts/Toilets";
+import { Toilets } from "./Layouts/Toilets";
-import {GRB} from "./Layouts/GRB";
+import { GRB } from "./Layouts/GRB";
-import {Statues} from "./Layouts/Statues";
+import { Statues } from "./Layouts/Statues";
-import {Bookcases} from "./Layouts/Bookcases";
+import { Bookcases } from "./Layouts/Bookcases";
 import Cyclofix from "./Layouts/Cyclofix";
-import {All} from "./Layouts/All";
+import { DrinkingWater } from "./Layouts/DrinkingWater";
-import {Layout} from "./Layout";
+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");
+    }
+
+}

index.ts

@@ -1,27 +1,27 @@
-import {OsmConnection} from "./Logic/OsmConnection";
+import { OsmConnection } from "./Logic/OsmConnection";
-import {Changes} from "./Logic/Changes";
+import { Changes } from "./Logic/Changes";
-import {ElementStorage} from "./Logic/ElementStorage";
+import { ElementStorage } from "./Logic/ElementStorage";
-import {UIEventSource} from "./UI/UIEventSource";
+import { UIEventSource } from "./UI/UIEventSource";
-import {UserBadge} from "./UI/UserBadge";
+import { UserBadge } from "./UI/UserBadge";
-import {Basemap} from "./Logic/Basemap";
+import { Basemap } from "./Logic/Basemap";
-import {PendingChanges} from "./UI/PendingChanges";
+import { PendingChanges } from "./UI/PendingChanges";
-import {CenterMessageBox} from "./UI/CenterMessageBox";
+import { CenterMessageBox } from "./UI/CenterMessageBox";
-import {Helpers} from "./Helpers";
+import { Helpers } from "./Helpers";
-import {Tag, TagUtils} from "./Logic/TagsFilter";
+import { Tag, TagUtils } from "./Logic/TagsFilter";
-import {FilteredLayer} from "./Logic/FilteredLayer";
+import { FilteredLayer } from "./Logic/FilteredLayer";
-import {LayerUpdater} from "./Logic/LayerUpdater";
+import { LayerUpdater } from "./Logic/LayerUpdater";
-import {UIElement} from "./UI/UIElement";
+import { UIElement } from "./UI/UIElement";
-import {MessageBoxHandler} from "./UI/MessageBoxHandler";
+import { MessageBoxHandler } from "./UI/MessageBoxHandler";
-import {Overpass} from "./Logic/Overpass";
+import { Overpass } from "./Logic/Overpass";
-import {FeatureInfoBox} from "./UI/FeatureInfoBox";
+import { FeatureInfoBox } from "./UI/FeatureInfoBox";
-import {GeoLocationHandler} from "./Logic/GeoLocationHandler";
+import { GeoLocationHandler } from "./Logic/GeoLocationHandler";
-import {StrayClickHandler} from "./Logic/StrayClickHandler";
+import { StrayClickHandler } from "./Logic/StrayClickHandler";
-import {SimpleAddUI} from "./UI/SimpleAddUI";
+import { SimpleAddUI } from "./UI/SimpleAddUI";
-import {VariableUiElement} from "./UI/Base/VariableUIElement";
+import { VariableUiElement } from "./UI/Base/VariableUIElement";
-import {SearchAndGo} from "./UI/SearchAndGo";
+import { SearchAndGo } from "./UI/SearchAndGo";
-import {CollapseButton} from "./UI/Base/CollapseButton";
+import { CollapseButton } from "./UI/Base/CollapseButton";
-import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
+import { AllKnownLayouts } from "./Customizations/AllKnownLayouts";
-import {All} from "./Customizations/Layouts/All";
+import { All } from "./Customizations/Layouts/All";
 
 
 
@@ -29,9 +29,9 @@ import {All} from "./Customizations/Layouts/All";
 // --------------------- Read the URL parameters -----------------
 
 // @ts-ignore
-if(location.href.startsWith("http://buurtnatuur.be")){
+if (location.href.startsWith("http://buurtnatuur.be")) {
     // Reload the https version. This is important for the 'locate me' button
-    window.location.replace("https://buurtnatuur.be"); 
+    window.location.replace("https://buurtnatuur.be");
 }
 
 
@@ -40,7 +40,7 @@ let dryRun = false;
 if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
 
     // Set to true if testing and changes should NOT be saved
-    // dryRun = true;
+    dryRun = true;
     // If you have a testfile somewhere, enable this to spoof overpass
     // This should be hosted independantly, e.g. with `cd assets; webfsd -p 8080` + a CORS plugin to disable cors rules
     Overpass.testUrl = null; // "http://127.0.0.1:8080/test.json";
@@ -57,11 +57,11 @@ for (const k in AllKnownLayouts.allSets) {
     const possibleParts = layout.locationContains ?? [];
     console.log(layout.locationContains)
     for (const locationMatch of possibleParts) {
-        if(locationMatch === ""){
+        if (locationMatch === "") {
             continue
         }
-        console.log(layout.name," -> ", locationMatch, window.location.href.indexOf(locationMatch))
+        console.log(layout.name, " -> ", locationMatch, window.location.href.indexOf(locationMatch))
-        if(window.location.href.toLowerCase().indexOf(locationMatch.toLowerCase()) >= 0){
+        if (window.location.href.toLowerCase().indexOf(locationMatch.toLowerCase()) >= 0) {
             defaultQuest = layout.name;
             console.log("Detected a default by URL: ", layout.name, "matches", locationMatch)
         }
@@ -78,7 +78,7 @@ if (window.location.search) {
     if (paramDict.quests) {
         defaultQuest = paramDict.quests
     }
-    if(paramDict.test){
+    if (paramDict.test) {
         dryRun = true;
     }
 }
@@ -164,7 +164,7 @@ for (const layer of questSetToRender.layers) {
     };
 
     minZoom = Math.max(minZoom, layer.minzoom);
-    
+
     const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement,
         generateInfo);
 
@@ -185,14 +185,14 @@ const layerUpdater = new LayerUpdater(bm, minZoom, flayers);
 
 
 new StrayClickHandler(bm, selectedElement, leftMessage, () => {
-        return new SimpleAddUI(bm.Location,
+    return new SimpleAddUI(bm.Location,
-            bm.LastClickLocation,
+        bm.LastClickLocation,
-            changes,
+        changes,
-            selectedElement,
+        selectedElement,
-            layerUpdater.runningQuery,
+        layerUpdater.runningQuery,
-            osmConnection.userDetails,
+        osmConnection.userDetails,
-            addButtons);
+        addButtons);
-    }
+}
 );
 
 /**
@@ -216,7 +216,7 @@ selectedElement.addCallback((data) => {
             break;
         }
     }
-    }
+}
 );
 
 
@@ -239,7 +239,7 @@ var welcomeMessage = () => {
                 login = questSetToRender.welcomeBackMessage;
             }
             return "<div id='welcomeMessage'>" +
-                questSetToRender.welcomeMessage + login + questSetToRender.welcomeTail+
+                questSetToRender.welcomeMessage + login + questSetToRender.welcomeTail +
                 "</div>";
         }),
         function () {
@@ -250,7 +250,7 @@ leftMessage.setData(welcomeMessage);
 welcomeMessage().AttachTo("messagesbox");
 
 
-var messageBox = new MessageBoxHandler(leftMessage, () => {selectedElement.setData(undefined)});
+var messageBox = new MessageBoxHandler(leftMessage, () => { selectedElement.setData(undefined) });
 
 new CenterMessageBox(
     minZoom,