Merge branch 'master' of github.com:pietervdvn/MapComplete

Customizations/AllKnownLayouts.ts

@@ -12,6 +12,7 @@ import {Widths} from "./Layers/Widths";
 import {StreetWidth} from "./Layouts/StreetWidth";
 import {NatureReserves} from "./Layers/NatureReserves";
 import {Natuurpunt} from "./Layouts/Natuurpunt";
+import Translations from "../UI/i18n/Translations";
 
 export class AllKnownLayouts {
     public static allSets = AllKnownLayouts.AllLayouts();

Customizations/LayerDefinition.ts

@@ -13,7 +13,7 @@ export class LayerDefinition {
 
 
     /**
-     * This name is shown in the 'add XXX button'
+     * This name is used in the 'hide or show this layer'-buttons
      */
     name: string | UIElement;
 
@@ -26,7 +26,12 @@ export class LayerDefinition {
      * These tags are added whenever a new point is added by the user on the map.
      * This is the ideal place to add extra info, such as "fixme=added by MapComplete, geometry should be checked"
      */
-    newElementTags: Tag[]
+    presets: {
+        tags: Tag[],
+        title: string | UIElement,
+        description?: string | UIElement,
+        icon?: string
+    }[]
     /**
      * Not really used anymore
      * This is meant to serve as icon in the buttons
@@ -91,9 +96,14 @@ export class LayerDefinition {
     static WAYHANDLING_CENTER_AND_WAY = 2;
     
     constructor(options: {
-        name: string | UIElement,
+        name: string,
         description: string | UIElement,
-        newElementTags: Tag[],
+        presets: {
+            tags: Tag[],
+            title: string | UIElement,
+            description?: string | UIElement,
+            icon?: string
+        }[],
         icon: string,
         minzoom: number,
         overpassFilter: TagsFilter,
@@ -112,7 +122,7 @@ export class LayerDefinition {
         this.name = options.name;
         this.description = options.description;
         this.maxAllowedOverlapPercentage = options.maxAllowedOverlapPercentage ?? 0;
-        this.newElementTags = options.newElementTags;
+        this.presets = options.presets;
         this.icon = options.icon;
         this.minzoom = options.minzoom;
         this.overpassFilter = options.overpassFilter;

Customizations/Layers/BikeCafes.ts

@@ -9,6 +9,7 @@ import Website from "../Questions/Website";
 import CafeRepair from "../Questions/bike/CafeRepair";
 import CafeDiy from "../Questions/bike/CafeDiy";
 import CafePump from "../Questions/bike/CafePump";
+import {EmailQuestion} from "../Questions/EmailQuestion";
 
 
 export default class BikeCafes extends LayerDefinition {
@@ -25,11 +26,18 @@ export default class BikeCafes extends LayerDefinition {
                 new Tag("pub", "cycling")
             ])
         ]) 
-        this.newElementTags = [
+        
+        this.presets = [
+            {
+                title: Translations.t.cyclofix.cafe.title,
+                tags :  [
                     new Tag("amenity", "pub"),
                     new Tag("pub", "cycling"),
                 ]
-        this.maxAllowedOverlapPercentage = 10
+            }
+        ]
+        
+        this.maxAllowedOverlapPercentage = 10;
 
         this.minzoom = 13
         this.style = this.generateStyleFunction()
@@ -37,8 +45,9 @@ export default class BikeCafes extends LayerDefinition {
         this.elementsToShow = [
             new ImageCarouselWithUploadConstructor(),
             new CafeName(),
-            new PhoneNumberQuestion("{name}"),
             new Website("{name}"),
+            new PhoneNumberQuestion("{name}"),
+            new EmailQuestion("{name}"),
             new CafeRepair(),
             new CafeDiy(),
             new CafePump()

Customizations/Layers/BikeOtherShops.ts

@@ -27,7 +27,7 @@ export default class BikeOtherShops extends LayerDefinition {
             anyValueExcept("shop", "bicycle"),
             new Tag(/^service:bicycle:/, "*"),
         ])
-        this.newElementTags = undefined
+        this.presets = []
         this.maxAllowedOverlapPercentage = 10
         this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY
 

Customizations/Layers/BikeParkings.ts

@@ -19,9 +19,13 @@ export default class BikeParkings extends LayerDefinition {
         this.name = Translations.t.cyclofix.parking.name;
         this.icon = "./assets/bike/parking.svg";
         this.overpassFilter = new Tag("amenity", "bicycle_parking");
-        this.newElementTags = [
+        this.presets = [{
+            title: Translations.t.cyclofix.parking.title,
+            tags: [
                 new Tag("amenity", "bicycle_parking"),
-        ];
+            ]
+        }];
+
         this.maxAllowedOverlapPercentage = 10;
 
         this.minzoom = 13;

Customizations/Layers/BikeShops.ts

@@ -13,6 +13,7 @@ import ShopSecondHand from "../Questions/bike/ShopSecondHand";
 import { TagRenderingOptions } from "../TagRendering";
 import {PhoneNumberQuestion} from "../Questions/PhoneNumberQuestion";
 import Website from "../Questions/Website";
+import {EmailQuestion} from "../Questions/EmailQuestion";
 
 
 export default class BikeShops extends LayerDefinition {
@@ -24,9 +25,12 @@ export default class BikeShops extends LayerDefinition {
         this.name = Translations.t.cyclofix.shop.name
         this.icon = "./assets/bike/repair_shop.svg"
         this.overpassFilter = new Tag("shop", "bicycle");
-        this.newElementTags = [
+        this.presets = [{
+            title: Translations.t.cyclofix.shop.title,
+            tags: [
                 new Tag("shop", "bicycle"),
             ]
+        }]
         this.maxAllowedOverlapPercentage = 10
         this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY
 
@@ -52,8 +56,9 @@ export default class BikeShops extends LayerDefinition {
         this.elementsToShow = [
             new ImageCarouselWithUploadConstructor(),
             new ShopName(),
-            new PhoneNumberQuestion("{name}"),
             new Website("{name}"),
+            new PhoneNumberQuestion("{name}"),
+            new EmailQuestion("{name}"),
             new ShopRetail(),
             new ShopRental(),
             new ShopRepair(),

Customizations/Layers/BikeStations.ts

@@ -1,5 +1,5 @@
 import {LayerDefinition} from "../LayerDefinition";
-import {And, Tag, TagsFilter, Or} from "../../Logic/TagsFilter";
+import {And, Tag, TagsFilter, Or, Not} from "../../Logic/TagsFilter";
 import BikeStationChain from "../Questions/bike/StationChain";
 import BikeStationPumpTools from "../Questions/bike/StationPumpTools";
 import BikeStationStand from "../Questions/bike/StationStand";
@@ -16,10 +16,14 @@ import { TagRenderingOptions } from "../TagRendering";
 
 
 export default class BikeStations extends LayerDefinition {
+    private readonly repairStation = new Tag("amenity", "bicycle_repair_station");
     private readonly pump = new Tag("service:bicycle:pump", "yes");
+    private readonly nopump = new Tag("service:bicycle:pump", "no");
     private readonly pumpOperationalAny = new Tag("service:bicycle:pump:operational_status", "yes");
     private readonly pumpOperationalOk = new Or([new Tag("service:bicycle:pump:operational_status", "yes"), new Tag("service:bicycle:pump:operational_status", "operational"), new Tag("service:bicycle:pump:operational_status", "ok"), new Tag("service:bicycle:pump:operational_status", "")]);
     private readonly tools = new Tag("service:bicycle:tools", "yes");
+    private readonly notools = new Tag("service:bicycle:tools", "no");
+
     private readonly to = Translations.t.cyclofix.station
 
     constructor() {
@@ -27,13 +31,27 @@ export default class BikeStations extends LayerDefinition {
         this.name = Translations.t.cyclofix.station.name;
         this.icon = "./assets/bike/repair_station_pump.svg";
 
-        this.overpassFilter = new And([
+        const tr = Translations.t.cyclofix.station
-            new Tag("amenity", "bicycle_repair_station")
+        this.overpassFilter = this.repairStation;
-        ]);
+        this.presets = [
+            {
+                title: tr.titlePump,
+                description: tr.services.pump,
+                tags: [this.repairStation, this.pump, this.notools]
+            },
+            {
+                title: tr.titleRepair,
+                description: tr.services.tools,
+                tags: [this.repairStation, this.tools, this.nopump]
+            },
+            {
+                title: tr.titlePumpAndRepair,
+                description: tr.services.both,
+                tags: [this.repairStation, this.tools, this.pump]
+            },
+
+        ]
 
-        this.newElementTags = [
-            new Tag("amenity", "bicycle_repair_station")
-        ];
         this.maxAllowedOverlapPercentage = 10;
 
         this.minzoom = 13;

Customizations/Layers/Birdhide.ts

@@ -18,7 +18,12 @@ export class Birdhide extends LayerDefinition {
             icon: "assets/nature/birdhide.svg",
             minzoom: 12,
             wayHandling: LayerDefinition.WAYHANDLING_CENTER_AND_WAY,
-            newElementTags: [Birdhide.birdhide],
+            presets: [
+                {
+                    title: "Vogelkijkplaats",
+                    tags: [Birdhide.birdhide]
+                }
+            ],
             style(tags: any): { color: string; icon: any } {
                 return {color: "", icon: undefined};
             },

Customizations/Layers/Bookcases.ts

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

Customizations/Layers/Bos.ts

@@ -22,10 +22,15 @@ export class Bos extends LayerDefinition {
         );
 
 
-        this.newElementTags = [
+        this.presets = [{
+            title: "Bos",
+            description: "Voeg een ontbrekend bos toe aan de kaart",
+            icon: undefined,
+            tags: [
                 new Tag("landuse", "forest"),
                 new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")
-        ];
+            ]
+        }];
         this.maxAllowedOverlapPercentage = 10;
 
         this.minzoom = 13;

Customizations/Layers/DrinkingWater.ts

@@ -21,9 +21,10 @@ export class DrinkingWater extends LayerDefinition {
         ]);
 
 
-        this.newElementTags = [
+        this.presets = [{
-            new Tag("amenity", "drinking_water"),
+            title: Translations.t.cyclofix.drinking_water.title,
-        ];
+            tags: [new Tag("amenity", "drinking_water")]
+        }];
         this.maxAllowedOverlapPercentage = 10;
         this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY
 

Customizations/Layers/GhostBike.ts

@@ -15,6 +15,15 @@ export class GhostBike extends LayerDefinition {
         this.description = "A <b>ghost bike</b> is a memorial for a cyclist who died in a traffic accident," +
             " in the form of a white bicycle placed permanently near the accident location.";
 
+
+        this.presets = [
+            {
+                title: "Ghost bike",
+                description: "Add a missing ghost bike to the map",
+                tags: [new Tag("historic", "memorial"), new Tag("memorial", "ghost_bike")]
+            }
+        ]
+
         this.elementsToShow = [
             new FixedText(this.description),
             new ImageCarouselWithUploadConstructor(),

Customizations/Layers/GrbToFix.ts

@@ -8,7 +8,7 @@ export class GrbToFix extends LayerDefinition {
         super();
 
         this.name = "grb";
-        this.newElementTags = undefined;
+        this.presets = [];
         this.icon = "./assets/star.svg";
         this.overpassFilter = new Regex("fixme", "GRB");
         this.minzoom = 13;

Customizations/Layers/InformationBoard.ts

@@ -11,7 +11,14 @@ export class InformationBoard extends LayerDefinition {
             description: "Een informatiebord of kaart",
             minzoom: 12,
             overpassFilter: new Tag("tourism", "information"),
-            newElementTags: [new Tag("tourism", "information")],
+            presets: [{
+                title: "Informatiebord",
+                tags: [new Tag("tourism", "information")]
+            },
+                {
+                    title: "Kaart",
+                    tags: [new Tag("tourism", "information"), new Tag("information", "map")]
+                }],
             maxAllowedOverlapPercentage: 0,
             icon: "assets/nature/info.png",
         });

Customizations/Layers/Map.ts

@@ -12,13 +12,15 @@ export class Map extends LayerDefinition {
         this.minzoom = 12;
 
         this.overpassFilter = new Tag("information", "map");
-        this.newElementTags = [new Tag("tourism", "information"), new Tag("information", "map")];
+        this.presets = [{
+            title: "Map",
+            tags: [new Tag("tourism", "information"), new Tag("information", "map")]
+        }];
 
 
         const isOsmSource = new Tag("map_source", "OpenStreetMap");
 
 
-        
         this.style = (properties) => {
             let icon = "assets/map.svg";
             if (isOsmSource.matchesProperties(properties)) {

Customizations/Layers/NatureReserves.ts

@@ -18,8 +18,13 @@ export class NatureReserves extends LayerDefinition {
             new Or([new Tag("leisure", "nature_reserve"), new Tag("boundary", "protected_area")]);
         this.maxAllowedOverlapPercentage = 10;
 
-        this.newElementTags = [new Tag("leisure", "nature_reserve"),
+        this.presets = [{
+            title: "Natuurreservaat",
+            description: "Voeg een ontbrekend, erkend natuurreservaat toe, bv. een gebied dat beheerd wordt door het ANB of natuurpunt",
+            tags: [new Tag("leisure", "nature_reserve"),
                 new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")]
+        }
+        ];
         this.minzoom = 13;
         this.title = new NameInline("natuurreservaat");
         this.style = this.generateStyleFunction();

Customizations/Layers/Park.ts

@@ -50,8 +50,13 @@ export class Park extends LayerDefinition {
         this.icon = undefined;
         this.overpassFilter =
             new Or([new Tag("leisure", "park"), new Tag("landuse", "village_green")]);
-        this.newElementTags = [new Tag("leisure", "park"),
+        this.presets = [{
-            new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")];
+            title: "Park",
+            description: "Voeg een ontbrekend park toe. Een park is een groene ruimte die openbaar is." +
+                "Typisch vind je er banken, vuilbakken, standbeelden, ... ",
+            tags: [new Tag("leisure", "park"),
+                new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")]
+        }];
         this.maxAllowedOverlapPercentage = 25;
 
         this.minzoom = 13;

Customizations/Layers/Viewpoint.ts

@@ -11,7 +11,12 @@ export class Viewpoint extends LayerDefinition {
         super({
             name: "Bezienswaardigheid",
             description: "Wil je een foto toevoegen van iets dat geen park, bos of natuurgebied is? Dit kan hiermee",
-            newElementTags: [new Tag("tourism", "viewpoint"), new Tag("fixme", "Added with mapcomplete. This viewpoint should probably me merged with some existing feature")],
+            presets: [{
+                title: "Bezienswaardigheid (andere)",
+                description: "Wens je een foto toe te voegen dat geen park, bos of (erkend) natuurreservaat is? Dit kan hiermee",
+                tags: [new Tag("tourism", "viewpoint"),
+                    new Tag("fixme", "Added with mapcomplete. This viewpoint should probably me merged with some existing feature")]
+            }],
             icon: "assets/viewpoint.svg",
             wayHandling: LayerDefinition.WAYHANDLING_CENTER_ONLY,
             style: tags => {

Customizations/Layout.ts

@@ -96,12 +96,12 @@ export class WelcomeMessage extends UIElement {
     constructor(layout: Layout,
                 languagePicker: UIElement,
                 osmConnection: OsmConnection) {
-        super(osmConnection.userDetails);
+        super(osmConnection?.userDetails);
         this.languagePicker = languagePicker;
         this.ListenTo(Locale.language);
         this.osmConnection = osmConnection;
         this.layout = layout;
-        this.userDetails = osmConnection.userDetails;
+        this.userDetails = osmConnection?.userDetails;
 
         this.description = layout.welcomeMessage;
         this.plzLogIn = layout.gettingStartedPlzLogin;
@@ -110,9 +110,15 @@ export class WelcomeMessage extends UIElement {
     }
 
     InnerRender(): string {
+
+        let loginStatus = "";
+        if (this.userDetails !== undefined) {
+            loginStatus = (this.userDetails.data.loggedIn ? this.welcomeBack : this.plzLogIn).Render();
+        }
+
         return "<span>" +
             this.description.Render() +
-            (this.userDetails.data.loggedIn ? this.welcomeBack : this.plzLogIn).Render() +
+            loginStatus +
             this.tail.Render() +
             "<br/>" +
             this.languagePicker.Render() +

Customizations/Questions/EmailQuestion.ts

@@ -0,0 +1,18 @@
+import {TagRenderingOptions} from "../TagRendering";
+import {UIElement} from "../../UI/UIElement";
+import Translations from "../../UI/i18n/Translations";
+
+export class EmailQuestion extends TagRenderingOptions {
+
+    constructor(category: string | UIElement) {
+        super({
+            question: Translations.t.general.questions.emailOf.Subs({category: category}),
+            freeform: {
+                renderTemplate: Translations.t.general.questions.emailIs.Subs({category: category}),
+                template: "$email$",
+                key: "email"
+            }
+        });
+    }
+
+}

Customizations/Questions/Website.ts

@@ -9,8 +9,8 @@ export default class Website extends TagRenderingOptions {
             question: Translations.t.general.questions.websiteOf.Subs({category: category}),
             freeform: {
                 renderTemplate: Translations.t.general.questions.websiteIs,
-                template: "$phone$",
+                template: "website",
-                key: "phone"
+                key: "website"
             }
         });
     }

Customizations/TagRendering.ts

@@ -360,7 +360,9 @@ class TagRendering extends UIElement implements TagDependantUIElement {
             return undefined;
         }
 
-        const prepost = Translations.W(freeform.template).InnerRender().split("$");
+        const prepost = Translations.W(freeform.template).InnerRender()
+            .replace("$$$","$string$")
+            .split("$");
         const type = prepost[1];
         
         let isValid = TagRenderingOptions.inputValidation[type];

Helpers.ts

@@ -1,6 +1,5 @@
-import {OsmConnection} from "./Logic/OsmConnection";
-import {Changes} from "./Logic/Changes";
 import {UIEventSource} from "./UI/UIEventSource";
+import {Changes} from "./Logic/Osm/Changes";
 
 export class Helpers {
 

InitUiElements.ts

@@ -6,25 +6,30 @@ import {ShareScreen} from "./UI/ShareScreen";
 import {FixedUiElement} from "./UI/Base/FixedUiElement";
 import {CheckBox} from "./UI/Input/CheckBox";
 import Combine from "./UI/Base/Combine";
-import {OsmConnection} from "./Logic/OsmConnection";
-import {Basemap} from "./Logic/Basemap";
 import {UIEventSource} from "./UI/UIEventSource";
 import {UIElement} from "./UI/UIElement";
 import {MoreScreen} from "./UI/MoreScreen";
+import {Tag} from "./Logic/TagsFilter";
+import {FilteredLayer} from "./Logic/FilteredLayer";
+import {FeatureInfoBox} from "./UI/FeatureInfoBox";
+import {ElementStorage} from "./Logic/ElementStorage";
+import {Preset} from "./UI/SimpleAddUI";
+import {Changes} from "./Logic/Osm/Changes";
+import {OsmConnection} from "./Logic/Osm/OsmConnection";
+import {Basemap} from "./Logic/Leaflet/Basemap";
 
 export class InitUiElements {
 
 
-    static OnlyIf(featureSwitch: UIEventSource<string>, callback: () => void) {
+    static OnlyIf(featureSwitch: UIEventSource<boolean>, callback: () => void) {
         featureSwitch.addCallback(() => {
 
-            if (featureSwitch.data === "false") {
+            if (featureSwitch.data) {
-                return;
-            }
                 callback();
+            }
         });
 
-        if (featureSwitch.data !== "false") {
+        if (featureSwitch.data) {
             callback();
         }
 
@@ -33,13 +38,15 @@ export class InitUiElements {
 
     private static CreateWelcomePane(layoutToUse: Layout, osmConnection: OsmConnection, bm: Basemap) {
 
-        const welcome = new WelcomeMessage(layoutToUse, Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage), osmConnection)
+        const welcome = new WelcomeMessage(layoutToUse,
+            Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage),
+            osmConnection)
 
         const fullOptions = new TabbedComponent([
             {header: `<img src='${layoutToUse.icon}'>`, content: welcome},
             {header: `<img src='${'./assets/osm-logo.svg'}'>`, content: Translations.t.general.openStreetMapIntro},
             {header: `<img src='${'./assets/share.svg'}'>`, content: new ShareScreen(layoutToUse, bm.Location)},
-            {header: `<img src='${'./assets/add.svg'}'>`, content: new MoreScreen(bm.Location)}
+            {header: `<img src='${'./assets/add.svg'}'>`, content: new MoreScreen(layoutToUse.name, bm.Location)}
         ])
 
         return fullOptions;
@@ -54,7 +61,7 @@ export class InitUiElements {
 
         const help = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/help.svg'  alt='help'></div>`);
         const close = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/close.svg'  alt='close'></div>`);
-        new CheckBox(
+        const checkbox = new CheckBox(
             new Combine([
                 "<span class='collapse-button'>", close, "</span>",
                 "<span id='welcomeMessage'>", fullOptions.onClick(() => {
@@ -62,6 +69,14 @@ export class InitUiElements {
             new Combine(["<span class='open-button'>", help, "</span>"])
             , true
         ).AttachTo("messagesbox");
+        let dontCloseYet = true;
+        bm.Location.addCallback(() => {
+            if(dontCloseYet){
+                dontCloseYet = false;
+                return;
+            }
+            checkbox.isEnabled.setData(false);
+        })
 
 
         const fullOptions2 = this.CreateWelcomePane(layoutToUse, osmConnection, bm);
@@ -73,4 +88,74 @@ export class InitUiElements {
 
     }
 
+
+    static InitLayers(layoutToUse: Layout, osmConnection: OsmConnection,
+                      changes: Changes,
+                      allElements: ElementStorage,
+                      bm: Basemap,
+                      fullScreenMessage: UIEventSource<UIElement>,
+                      selectedElement: UIEventSource<any>): {
+        minZoom: number
+        flayers: FilteredLayer[],
+        presets: Preset[]
+    } {
+        const addButtons:Preset[]
+            = [];
+
+        const flayers: FilteredLayer[] = []
+
+        let minZoom = 0;
+
+        for (const layer of layoutToUse.layers) {
+
+            const generateInfo = (tagsES, feature) => {
+
+                return new FeatureInfoBox(
+                    feature,
+                    tagsES,
+                    layer.title,
+                    layer.elementsToShow,
+                    changes,
+                    osmConnection.userDetails
+                )
+            };
+
+            minZoom = Math.max(minZoom, layer.minzoom);
+
+            const flayer = FilteredLayer.fromDefinition(layer, bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
+
+            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,
+                    icon: preset.icon,
+                    tags: preset.tags,
+                    layerToAddTo: flayer
+                }
+                addButtons.push(addButton);
+            }
+            flayers.push(flayer);
+        }
+
+        
+        
+        return {
+            minZoom: minZoom,
+            flayers: flayers,
+            presets: addButtons
+        }
+    }
+
 }

Logic/Bounds.ts

@@ -0,0 +1,6 @@
+export interface Bounds {
+    north: number,
+    east: number,
+    south: number,
+    west: number
+}

Logic/LayerUpdater.ts

@@ -1,9 +1,9 @@
-import {Basemap} from "./Basemap";
-import {Overpass} from "./Overpass";
 import {Or, TagsFilter} from "./TagsFilter";
 import {UIEventSource} from "../UI/UIEventSource";
 import {FilteredLayer} from "./FilteredLayer";
-
+import {Bounds} from "./Bounds";
+import {Overpass} from "./Osm/Overpass";
+import {Basemap} from "./Leaflet/Basemap";
 
 export class LayerUpdater {
     private _map: Basemap;
@@ -14,7 +14,7 @@ export class LayerUpdater {
     /**
      * The previous bounds for which the query has been run
      */
-    private previousBounds: { north: number, east: number, south: number, west: number };
+    private previousBounds: Bounds;
 
     private _overpass: Overpass;
     private _minzoom: number;
@@ -93,10 +93,21 @@ export class LayerUpdater {
         if (this.runningQuery.data) {
             console.log("Still running a query, skip");
         }
-        var bbox = this.buildBboxFor();
+        
+        const bounds = this._map.map.getBounds();
+
+        const diff =0.07;
+
+        const n = bounds.getNorth() + diff;
+        const e = bounds.getEast() +  diff;
+        const s = bounds.getSouth() - diff;
+        const w = bounds.getWest() -  diff;
+
+        this.previousBounds = {north: n, east: e, south: s, west: w};
+        
         this.runningQuery.setData(true);
         const self = this;
-        this._overpass.queryGeoJson(bbox,
+        this._overpass.queryGeoJson(this.previousBounds,
             function (data) {
                 self.handleData(data)
             },
@@ -107,19 +118,7 @@ export class LayerUpdater {
 
     }
 
-    private buildBboxFor(): string {
-        const b = this._map.map.getBounds();
-        const diff =0.07;
    
-        const n = b.getNorth() + diff;
-        const e = b.getEast() +  diff;
-        const s = b.getSouth() - diff;
-        const w = b.getWest() -  diff;
-
-        this.previousBounds = {north: n, east: e, south: s, west: w};
-
-        return "[bbox:" + s + "," + w + "," + n + "," + e + "]";
-    }
 
     private IsInBounds(): boolean {
 

Logic/Leaflet/Basemap.ts

@@ -1,6 +1,6 @@
 import L from "leaflet"
-import {UIEventSource} from "../UI/UIEventSource";
+import {UIEventSource} from "../../UI/UIEventSource";
-import {UIElement} from "../UI/UIElement";
+import {UIElement} from "../../UI/UIElement";
 
 
 export class BaseLayers {

Logic/Leaflet/GeoLocationHandler.ts

@@ -1,8 +1,8 @@
 import {Basemap} from "./Basemap";
-import {UIEventSource} from "../UI/UIEventSource";
-import {UIElement} from "../UI/UIElement";
 import L from "leaflet";
-import {Helpers} from "../Helpers";
+import {UIEventSource} from "../../UI/UIEventSource";
+import {UIElement} from "../../UI/UIElement";
+import {Helpers} from "../../Helpers";
 
 export class GeoLocationHandler extends UIElement {
 
@@ -65,8 +65,8 @@ export class GeoLocationHandler extends UIElement {
             self._marker = newMarker;
         });
 
-        navigator.permissions.query({name: 'geolocation'})
+        navigator?.permissions?.query({name: 'geolocation'})
-            .then(function (status) {
+            ?.then(function (status) {
                 console.log("Geolocation is already", status)
                 if (status.state === "granted") {
                     self.StartGeolocating();

Logic/Leaflet/StrayClickHandler.ts

@@ -1,7 +1,7 @@
 import {Basemap} from "./Basemap";
 import L from "leaflet";
-import {UIEventSource} from "../UI/UIEventSource";
+import {UIEventSource} from "../../UI/UIEventSource";
-import {UIElement} from "../UI/UIElement";
+import {UIElement} from "../../UI/UIElement";
 
 /**
  * The stray-click-hanlders adds a marker to the map if no feature was clicked.

Logic/Osm/Changes.ts

@@ -2,11 +2,11 @@
  * Handles all changes made to OSM.
  * Needs an authenticator via OsmConnection
  */
+import {UIEventSource} from "../../UI/UIEventSource";
 import {OsmConnection} from "./OsmConnection";
 import {OsmNode, OsmObject} from "./OsmObject";
-import {ElementStorage} from "./ElementStorage";
+import {And, Tag, TagsFilter} from "../TagsFilter";
-import {UIEventSource} from "../UI/UIEventSource";
+import {ElementStorage} from "../ElementStorage";
-import {And, Tag, TagsFilter} from "./TagsFilter";
 
 export class Changes {
 
@@ -261,11 +261,4 @@ console.log("Received change",key, value)
         });
     }
     
-    public asQuestions(qs : QuestionDefinition[]){
-        let ls = [];
-        for (var i in qs){
-            ls.push(new Question(this, qs[i]));
-        } 
-        return ls;
-    }
 }

Logic/Osm/Geocoding.ts

@@ -1,7 +1,5 @@
-import * as $ from "jquery"
+import {Basemap} from "../Leaflet/Basemap";
-import {UIEventSource} from "../UI/UIEventSource";
+import $ from "jquery"
-import {Basemap} from "./Basemap";
-
 export class Geocoding {
 
     private static readonly host = "https://nominatim.openstreetmap.org/search?";

Logic/Osm/Notes.ts

@@ -0,0 +1,9 @@
+import {Bounds} from "../Bounds";
+
+export class Notes {
+
+
+    queryGeoJson(bounds: Bounds, continuation: ((any) => void), onFail: ((reason) => void)): void {
+
+    }
+}

Logic/Osm/OsmConnection.ts

@@ -1,6 +1,6 @@
 // @ts-ignore
 import osmAuth from "osm-auth";
-import {UIEventSource} from "../UI/UIEventSource";
+import {UIEventSource} from "../../UI/UIEventSource";
 
 export class UserDetails {
 
@@ -17,21 +17,41 @@ export class UserDetails {
 
 export class OsmConnection {
 
-    private auth = new osmAuth({
+    public auth;
-        oauth_consumer_key: 'hivV7ec2o49Two8g9h8Is1VIiVOgxQ1iYexCbvem',
-        oauth_secret: 'wDBRTCem0vxD7txrg1y6p5r8nvmz8tAhET7zDASI',
-        auto: true // show a login form if the user is not authenticated and
-                   // you try to do a call
-    });
     public userDetails: UIEventSource<UserDetails>;
     private _dryRun: boolean;
 
-    constructor(dryRun: boolean) {
+    constructor(dryRun: boolean, oauth_token: UIEventSource<string>) {
+
+        this.auth = new osmAuth({
+            oauth_consumer_key: 'hivV7ec2o49Two8g9h8Is1VIiVOgxQ1iYexCbvem',
+            oauth_secret: 'wDBRTCem0vxD7txrg1y6p5r8nvmz8tAhET7zDASI',
+            singlepage: true,
+            landing: window.location.href,
+            auto: true // show a login form if the user is not authenticated and
+                       // you try to do a call
+
+        });
+
+
         this.userDetails = new UIEventSource<UserDetails>(new UserDetails());
         this.userDetails.data.osmConnection = this;
         this.userDetails.data.dryRun = dryRun;
         this._dryRun = dryRun;
 
+
+        if(oauth_token.data !== undefined){
+            console.log(oauth_token.data)
+            const self = this;
+            this.auth.bootstrapToken(oauth_token.data, 
+                (x) => {
+                    console.log("Called back: ", x)
+                    self.AttemptLogin();
+                }, this.auth);
+            
+            oauth_token.setData(undefined);
+           
+        }
         if (this.auth.authenticated()) {
             this.AttemptLogin(); // Also updates the user badge
         } else {
@@ -43,6 +63,7 @@ export class OsmConnection {
             console.log("DRYRUN ENABLED");
         }
 
+       
     }
 
     public LogOut() {

Logic/Osm/OsmImageUploadHandler.ts

@@ -1,11 +1,11 @@
 /**
  * Helps in uplaoding, by generating the rigth title, decription and by adding the tag to the changeset
  */
-import {UIEventSource} from "../UI/UIEventSource";
-import {ImageUploadFlow} from "../UI/ImageUploadFlow";
 import {Changes} from "./Changes";
+import {UIEventSource} from "../../UI/UIEventSource";
+import {ImageUploadFlow} from "../../UI/ImageUploadFlow";
 import {UserDetails} from "./OsmConnection";
-import {SlideShow} from "../UI/SlideShow";
+import {SlideShow} from "../../UI/SlideShow";
 
 export class OsmImageUploadHandler {
     private _tags: UIEventSource<any>;

Logic/Osm/Overpass.ts

@@ -1,11 +1,11 @@
-import {TagsFilter} from "./TagsFilter";
-import * as OsmToGeoJson from "osmtogeojson";
-import * as $ from "jquery";
-
-
 /**
  * Interfaces overpass to get all the latest data
  */
+import {Bounds} from "../Bounds";
+import {TagsFilter} from "../TagsFilter";
+import $ from "jquery"
+import * as OsmToGeoJson from "osmtogeojson";
+
 export class Overpass {
     private _filter: TagsFilter
     public static testUrl: string = null
@@ -14,21 +14,21 @@ export class Overpass {
         this._filter = filter
     }
 
-    public buildQuery(bbox: string): string {
+    
+    private 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)
     }
     
-    queryGeoJson(bbox: string, continuation: ((any) => void), onFail: ((reason) => void)): void {
+    queryGeoJson(bounds: Bounds, continuation: ((any) => void), onFail: ((reason) => void)): void {
-        let query = this.buildQuery(bbox)
+        
+        let query = this.buildQuery( "[bbox:" + bounds.south + "," + bounds.west + "," + bounds.north + "," + bounds.east + "]")
 
         if(Overpass.testUrl !== null){
             console.log("Using testing URL")

Logic/TagsFilter.ts

@@ -55,8 +55,8 @@ export class Regex extends TagsFilter {
 
 
 export class Tag extends TagsFilter {
-    public key: string | RegExp
+    public key: string
-    public value: string | RegExp
+    public value: string 
     public invertValue: boolean
 
     constructor(key: string | RegExp, value: string | RegExp, invertValue = false) {
@@ -69,7 +69,9 @@ export class Tag extends TagsFilter {
         }
 
         super()
+        // @ts-ignore
         this.key = key
+        // @ts-ignore
         this.value = value
         this.invertValue = invertValue
     }
@@ -107,10 +109,14 @@ export class Tag extends TagsFilter {
     }
 
     asOverpass(): string[] {
+        // @ts-ignore
         const keyIsRegex = this.key instanceof RegExp
+        // @ts-ignore
         const key = keyIsRegex ? (this.key as RegExp).source : this.key
 
+        // @ts-ignore
         const valIsRegex = this.value instanceof RegExp
+        // @ts-ignore
         const val = valIsRegex ? (this.value as RegExp).source : this.value
 
         const regexKeyPrefix = keyIsRegex ? '~' : ''
@@ -276,7 +282,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;

README.md

@@ -17,10 +17,10 @@ Furthermore, it shows images present in the `image` tag or, if a `wikidata` or `
 
 ## Examples
 
-- [Buurtnatuur.be](http://buurntatuur.be), developed for the Belgian [Green party](https://www.groen.be/). They also funded the initial development!
+- [Buurtnatuur.be](http://buurtnatuur.be), developed for the Belgian [Green party](https://www.groen.be/). They also funded the initial development!
-- [Cyclofix](https://pietervdvn.github.io/MapComplete/index.html?quests=pomp), further development on [Open Summer of Code](https://summerofcode.be/) funded by [Brussels Mobility](https://mobilite-mobiliteit.brussels/en)
+- [Cyclofix](https://pietervdvn.github.io/MapComplete/index.html?layout=cyclofix), further development on [Open Summer of Code](https://summerofcode.be/) funded by [Brussels Mobility](https://mobilite-mobiliteit.brussels/en). Landing page at https://cyclofix.osm.be/
 - [Bookcases](https://pietervdvn.github.io/MapComplete/index.html?quests=bookcases#element) cause I like to collect them.
-- [Map of Maps](https://pietervdvn.github.io/MapComplete/index.html?layout=metamap#element), after a tweet
+- [Map of Maps](https://pietervdvn.github.io/MapComplete/index.html?layout=metamap&z=14&lat=50.650&lon=4.2668#element), after a tweet
 
 Have a theme idea? Drop it in the [issues](https://github.com/pietervdvn/MapComplete/issues)
 

UI/Base/SubtleButton.ts

@@ -1,23 +1,36 @@
 import {UIElement} from "../UIElement";
 import Translations from "../i18n/Translations";
 import Combine from "./Combine";
+import {link} from "fs";
 
 
 export class SubtleButton extends UIElement{
     private imageUrl: string;
     private message: UIElement;
+    private linkTo: { url: string, newTab?: boolean } = undefined;
 
-    constructor(imageUrl: string, message: string | UIElement) {
+    constructor(imageUrl: string, message: string | UIElement, linkTo: { url: string, newTab?: boolean } = undefined) {
         super(undefined);
+        this.linkTo = linkTo;
         this.message = Translations.W(message);
         this.imageUrl = imageUrl;
 
     }
 
     InnerRender(): string {
+
+        if(this.linkTo != undefined){
+            return new Combine([
+                `<a class="subtle-button" href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
+                this.imageUrl !== undefined ? `<img src='${this.imageUrl}'>` : "",
+                this.message,
+                '</a>'
+            ]).Render();
+        }
+        
         return new Combine([
             '<span class="subtle-button">',
-            `<img src='${this.imageUrl}'>`,
+            this.imageUrl !== undefined ? `<img src='${this.imageUrl}'>` : "",
             this.message,
             '</span>'
         ]).Render();

UI/FeatureInfoBox.ts

@@ -1,10 +1,6 @@
 import {UIElement} from "./UIElement";
 import {UIEventSource} from "./UIEventSource";
-import {QuestionPicker} from "./QuestionPicker";
-import {OsmImageUploadHandler} from "../Logic/OsmImageUploadHandler";
 import {ImageCarousel} from "./Image/ImageCarousel";
-import {Changes} from "../Logic/Changes";
-import {UserDetails} from "../Logic/OsmConnection";
 import {VerticalCombine} from "./Base/VerticalCombine";
 import {TagRenderingOptions} from "../Customizations/TagRendering";
 import {OsmLink} from "../Customizations/Questions/OsmLink";
@@ -12,6 +8,8 @@ import {WikipediaLink} from "../Customizations/Questions/WikipediaLink";
 import {And} from "../Logic/TagsFilter";
 import {TagDependantUIElement, TagDependantUIElementConstructor} from "../Customizations/UIElementConstructor";
 import Translations from "./i18n/Translations";
+import {Changes} from "../Logic/Osm/Changes";
+import {UserDetails} from "../Logic/Osm/OsmConnection";
 
 export class FeatureInfoBox extends UIElement {
 
@@ -33,7 +31,6 @@ export class FeatureInfoBox extends UIElement {
 
 
     private _infoboxes: TagDependantUIElement[];
-    private _questions: QuestionPicker;
 
     private _oneSkipped = Translations.t.general.oneSkippedQuestion.Clone();
     private _someSkipped = Translations.t.general.skippedQuestions.Clone();

UI/Image/ImageCarousel.ts

@@ -4,11 +4,11 @@ import {UIEventSource} from "../UIEventSource";
 import {SlideShow} from "../SlideShow";
 import {FixedUiElement} from "../Base/FixedUiElement";
 import {VerticalCombine} from "../Base/VerticalCombine";
-import {Changes} from "../../Logic/Changes";
 import {VariableUiElement} from "../Base/VariableUIElement";
 import {ConfirmDialog} from "../ConfirmDialog";
-import {UserDetails} from "../../Logic/OsmConnection";
 import {TagDependantUIElement, TagDependantUIElementConstructor} from "../../Customizations/UIElementConstructor";
+import {Changes} from "../../Logic/Osm/Changes";
+import {UserDetails} from "../../Logic/Osm/OsmConnection";
 
 export class ImageCarouselConstructor implements TagDependantUIElementConstructor{
     IsKnown(properties: any): boolean {

UI/Image/ImageCarouselWithUpload.ts

@@ -1,10 +1,9 @@
 import {TagDependantUIElement, TagDependantUIElementConstructor} from "../../Customizations/UIElementConstructor";
 import {ImageCarousel} from "./ImageCarousel";
-import {OsmImageUploadHandler} from "../../Logic/OsmImageUploadHandler";
 import {UIEventSource} from "../UIEventSource";
-import {Changes} from "../../Logic/Changes";
-import {UserDetails} from "../../Logic/OsmConnection";
 import {ImageUploadFlow} from "../ImageUploadFlow";
+import {Changes} from "../../Logic/Osm/Changes";
+import {OsmImageUploadHandler} from "../../Logic/Osm/OsmImageUploadHandler";
 
 export class ImageCarouselWithUploadConstructor implements TagDependantUIElementConstructor{
     IsKnown(properties: any): boolean {

UI/LayerSelection.ts

@@ -26,7 +26,7 @@ export class LayerSelection extends UIElement{
           this._checkboxes.push(new CheckBox(
               new Combine([checkbox, icon, name]),
               new Combine([
-                  Img.checkmark,
+                  Img.no_checkmark,
                   icon,
                   layer.layerDef.name]),
               layer.isDisplayed));

UI/MoreScreen.ts

@@ -13,9 +13,11 @@ import {SubtleButton} from "./Base/SubtleButton";
 
 export class MoreScreen extends UIElement {
     private currentLocation: UIEventSource<{ zoom: number, lat: number, lon: number }>;
+    private currentLayout: string;
 
-    constructor(currentLocation: UIEventSource<{ zoom: number, lat: number, lon: number }>) {
+    constructor(currentLayout: string, currentLocation: UIEventSource<{ zoom: number, lat: number, lon: number }>) {
         super(currentLocation);
+        this.currentLayout = currentLayout;
         this.currentLocation = currentLocation;
     }
 
@@ -28,22 +30,21 @@ export class MoreScreen extends UIElement {
             if (layout.hideFromOverview) {
                 continue
             }
+            if (layout.name === this.currentLayout) {
+                continue;
+            }
 
             const linkText =
                 `https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon}`
             const link =
                 new SubtleButton(layout.icon,
                     new Combine([
-                        `<a href="${linkText}" target="_blank">`,
-                        "<div>",
                         "<b>",
                         Translations.W(layout.title),
                         "</b>",
                         "<br/>",
                         Translations.W(layout.description),
-                        "</div>",
+                    ]), {url: linkText, newTab: false});
-                        "</a>"
-                    ]));
 
             els.push(link)
         }

UI/PendingChanges.ts

@@ -1,6 +1,6 @@
 import {UIElement} from "./UIElement";
 import {UIEventSource} from "./UIEventSource";
-import {Changes} from "../Logic/Changes";
+import {Changes} from "../Logic/Osm/Changes";
 
 export class PendingChanges extends UIElement {
     private _pendingChangesCount: UIEventSource<number>;

UI/QuestionPicker.ts

@@ -1,47 +0,0 @@
-import {UIElement} from "./UIElement";
-import {Question} from "../Logic/Question";
-import {UIEventSource} from "./UIEventSource";
-
-export class QuestionPicker extends UIElement {
-    private readonly _questions: Question[];
-    private readonly tags: any;
-    private source: UIEventSource<any>;
-
-    constructor(questions: Question[],
-                tags: UIEventSource<any>) {
-        super(tags);
-        this._questions = questions;
-        this.tags = tags.data;
-        this.source = tags;
-    }
-
-
-    protected InnerRender(): string {
-
-        let t = this.tags;
-        let highestPriority = Number.MIN_VALUE;
-        let highestQ: Question;
-        for (const q of this._questions) {
-            
-            if (!q.Applicable(t)) {
-                continue;
-            }
-
-            const priority = q.question.severity;
-            if (priority > highestPriority) {
-                highestPriority = priority;
-                highestQ = q;
-            }
-        }
-
-
-        if (highestQ === undefined) {
-            return "Er zijn geen vragen meer!";
-        }
-
-        return "<div class='question'>" +
-            highestQ.CreateHtml(this.source).Render() +
-            "</div>";
-    }
-
-}

UI/SearchAndGo.ts

@@ -1,13 +1,13 @@
-import {UIElement} from "./UIElement";
-import {TextField} from "./Input/TextField";
-import {UIEventSource} from "./UIEventSource";
-import {FixedUiElement} from "./Base/FixedUiElement";
-import {Geocoding} from "../Logic/Geocoding";
-import {Basemap} from "../Logic/Basemap";
-import {VariableUiElement} from "./Base/VariableUIElement";
-import Translation from "./i18n/Translation";
 import Locale from "./i18n/Locale";
+import {UIEventSource} from "./UIEventSource";
+import {UIElement} from "./UIElement";
+import Translation from "./i18n/Translation";
+import {VariableUiElement} from "./Base/VariableUIElement";
+import {FixedUiElement} from "./Base/FixedUiElement";
+import {TextField} from "./Input/TextField";
+import {Geocoding} from "../Logic/Osm/Geocoding";
 import Translations from "./i18n/Translations";
+import {Basemap} from "../Logic/Leaflet/Basemap";
 
 
 export class SearchAndGo extends UIElement {

UI/SimpleAddUI.ts

@@ -2,12 +2,23 @@ import {UIElement} from "./UIElement";
 import {UIEventSource} from "./UIEventSource";
 import {Tag} from "../Logic/TagsFilter";
 import {FilteredLayer} from "../Logic/FilteredLayer";
-import {Changes} from "../Logic/Changes";
 import {FixedUiElement} from "./Base/FixedUiElement";
 import {Button} from "./Base/Button";
-import {UserDetails} from "../Logic/OsmConnection";
 import Translations from "./i18n/Translations";
 import Combine from "./Base/Combine";
+import {SubtleButton} from "./Base/SubtleButton";
+import {VerticalCombine} from "./Base/VerticalCombine";
+import Locale from "./i18n/Locale";
+import {Changes} from "../Logic/Osm/Changes";
+import {UserDetails} from "../Logic/Osm/OsmConnection";
+
+export interface Preset {
+    description: string | UIElement,
+    name: string | UIElement,
+    icon: string,
+    tags: Tag[],
+    layerToAddTo: FilteredLayer
+}
 
 /**
  * Asks to add a feature at the last clicked location, at least if zoom is sufficient
@@ -21,15 +32,23 @@ export class SimpleAddUI extends UIElement {
     private _dataIsLoading: UIEventSource<boolean>;
     private _userDetails: UIEventSource<UserDetails>;
 
+    private _confirmPreset: UIEventSource<Preset>
+        = new UIEventSource<Preset>(undefined);
+    private confirmButton: UIElement = undefined;
+    private cancelButton: UIElement;
+    private goToInboxButton: UIElement = new SubtleButton("./assets/envelope.svg", 
+        Translations.t.general.goToInbox, {url:"https://www.openstreetmap.org/messages/inbox", newTab: false});
+
     constructor(zoomlevel: UIEventSource<{ zoom: number }>,
                 lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
                 changes: Changes,
                 selectedElement: UIEventSource<{ feature: any }>,
                 dataIsLoading: UIEventSource<boolean>,
                 userDetails: UIEventSource<UserDetails>,
-                addButtons: { name: UIElement; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
+                addButtons: { description: string | UIElement, name: string | UIElement; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
     ) {
         super(zoomlevel);
+        this.ListenTo(Locale.language);
         this._zoomlevel = zoomlevel;
         this._lastClickLocation = lastClickLocation;
         this._changes = changes;
@@ -39,18 +58,47 @@ export class SimpleAddUI extends UIElement {
         this.ListenTo(userDetails);
         this.ListenTo(dataIsLoading);
         this._addButtons = [];
+        this.ListenTo(this._confirmPreset);
+        this.clss = "add-ui"
 
+        const self = this;
         for (const option of addButtons) {
             // <button type='button'> looks SO retarded
             // the default type of button is 'submit', which performs a POST and page reload
             const button =
-                new Button(Translations.t.general.add.addNew.Subs({category: option.name}),
+                new SubtleButton(
-                    this.CreatePoint(option));
+                    option.icon,
+                    new Combine([
+                        "<b>",
+                        option.name,
+                        "</b><br/>",
+                        option.description !== undefined ? option.description : ""])
+                ).onClick(
+                    () => {
+                        self.confirmButton = new SubtleButton(option.icon,
+                            new Combine([
+                                "<b>",
+                                option.name,
+                                "</b><br/>",
+                                option.description !== undefined ? option.description : ""]));
+                        self.confirmButton.onClick(self.CreatePoint(option));
+                        self._confirmPreset.setData(option);
+                    }
+                )
+
+
             this._addButtons.push(button);
         }
+        
+        this.cancelButton = new SubtleButton(
+            "./assets/close.svg",
+            Translations.t.general.cancel
+        ).onClick(() => {
+            self._confirmPreset.setData(undefined);
+        })
     }
 
-    private CreatePoint(option: {icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }) {
+    private CreatePoint(option: { tags: Tag[]; layerToAddTo: FilteredLayer }) {
         const self = this;
         return () => {
 
@@ -62,12 +110,60 @@ export class SimpleAddUI extends UIElement {
     }
 
     InnerRender(): string {
-        const header = Translations.t.general.add.header;
+
+
+        if (this._confirmPreset.data !== undefined) {
+
+            if(this._userDetails.data.dryRun){
+                this.CreatePoint(this._confirmPreset.data)();
+                return;
+            }
+
+            return new Combine([
+                Translations.t.general.add.confirmIntro.Subs({title: this._confirmPreset.data.name}),
+                this._userDetails.data.dryRun ? "<span class='alert'>TESTING - changes won't be saved</span>":"",
+                this.confirmButton,
+                this.cancelButton
+
+            ]).Render();
+
+
+        }
+
+
+        let header: UIElement = Translations.t.general.add.header;
+
+        
+        if(this._userDetails === undefined){
+            return header.Render();
+        }
         
         if (!this._userDetails.data.loggedIn) {
             return new Combine([header, Translations.t.general.add.pleaseLogin]).Render()
         }
 
+        if (this._userDetails.data.unreadMessages > 0) {
+            return new Combine([header, "<span class='alert'>",
+                Translations.t.general.readYourMessages,
+                "</span>",
+                this.goToInboxButton
+            ]).Render();
+        }
+
+        if (this._userDetails.data.dryRun) {
+            header = new Combine([header,
+                "<span class='alert'>",
+                "Test mode - changes won't be saved",
+                "</span>"
+            ]);
+        }
+
+        if (this._userDetails.data.csCount < 5) {
+            return new Combine([header, "<span class='alert'>",
+                Translations.t.general.fewChangesBefore,
+                "</span>"]).Render();
+        }
+
         if (this._zoomlevel.data.zoom < 19) {
             return new Combine([header, Translations.t.general.add.zoomInFurther]).Render()
         }
@@ -76,10 +172,13 @@ export class SimpleAddUI extends UIElement {
             return new Combine([header, Translations.t.general.add.stillLoading]).Render()
         }
 
+
         var html = "";
         for (const button of this._addButtons) {
             html += button.Render();
         }
+
+
         return header.Render() + html;
     }
 

UI/UIElement.ts

@@ -7,6 +7,7 @@ export abstract class UIElement extends UIEventSource<string>{
 
     public readonly id: string;
     public readonly _source: UIEventSource<any>;
+    public clss : string = ""
     
     private _hideIfEmpty = false;
     
@@ -103,7 +104,7 @@ export abstract class UIElement extends UIEventSource<string>{
    }
 
     Render(): string {
-        return "<span class='uielement' id='" + this.id + "'>" + this.InnerRender() + "</span>"
+        return `<span class='uielement ${this.clss}' id='${this.id}'>${this.InnerRender()}</span>`
     }
 
     AttachTo(divId: string) {

UI/UserBadge.ts

@@ -1,11 +1,11 @@
 import {UIElement} from "./UIElement";
-import {UserDetails} from "../Logic/OsmConnection";
 import {UIEventSource} from "./UIEventSource";
-import {Basemap} from "../Logic/Basemap";
 import L from "leaflet";
 import {FixedUiElement} from "./Base/FixedUiElement";
 import {VariableUiElement} from "./Base/VariableUIElement";
 import Translations from "./i18n/Translations";
+import {UserDetails} from "../Logic/Osm/OsmConnection";
+import {Basemap} from "../Logic/Leaflet/Basemap";
 
 /**
  * Handles and updates the user badge

UI/i18n/Translations.ts

@@ -136,12 +136,12 @@ export default class Translations {
                     }),
                     yes: new T({
                         en: "This parking has room for cargo bikes",
-                        nl: "Deze parking is overdekt (er is een afdak)",
+                        nl: "Deze parking heeft plaats voor bakfietsen",
                         fr: "TODO: fr"
                     }),
                     designated: new T({
                         en: "This parking has designated (official) spots for cargo bikes.",
-                        nl: "Deze parking is overdekt (er is een afdak)",
+                        nl: "Er zijn speciale plaatsen voorzien voor bakfietsen",
                         fr: "TODO: fr"
                     }),
                     no: new T({
@@ -282,9 +282,9 @@ export default class Translations {
                         fr: "Il y a seulement une pompe"
                     }),
                     tools: new T({
-                        en: "There are only tools (screwdrivers, pliers...) aanwezig",
+                        en: "There are only tools (screwdrivers, pliers...) present",
                         nl: "Er is enkel gereedschap aanwezig (schroevendraaier, tang...)",
-                        fr: "Il y a seulement des outils (tournevis, pinces..."
+                        fr: "Il y a seulement des outils (tournevis, pinces...)"
                     }),
                     both: new T({
                         en: "There are both tools and a pump present",
@@ -298,9 +298,17 @@ export default class Translations {
                         nl: "Heeft dit herstelpunt een haak of standaard om je fiets op te hangen/zetten?",
                         fr: "Est-ce que cette station vélo à un crochet pour suspendre son velo ou une accroche pour l'élevé?"
                     }),
-                    yes: new T({en: "There is a hook or stand", nl: "Er is een haak of standaard", fr: "Oui il y a un crochet ou une accroche"}),
+                    yes: new T({
-                    no: new T({en: "There is no hook or stand", nl: "Er is geen haak of standaard", fr: "Non il n'y pas de crochet ou d'accroche"}),
+                        en: "There is a hook or stand",
-                }
+                        nl: "Er is een haak of standaard",
+                        fr: "Oui il y a un crochet ou une accroche"
+                    }),
+                    no: new T({
+                        en: "There is no hook or stand",
+                        nl: "Er is geen haak of standaard",
+                        fr: "Non il n'y pas de crochet ou d'accroche"
+                    }),
+                },
             },
             shop: {
                 name: new T({en: "bike repair/shop", nl: "fietszaak", fr: "magasin ou réparateur de vélo"}),
@@ -418,8 +426,8 @@ export default class Translations {
                 }
             },
             cafe: {
-                name: new T({en: "bike cafe", nl: "fietscafé", fr: "TODO: fr"}),
+                name: new T({en: "Bike cafe", nl: "Fietscafé", fr: "TODO: fr"}),
-                title: new T({en: "Bike cafe", nl: "fietscafé", fr: "TODO: fr"}),
+                title: new T({en: "Bike cafe", nl: "Fietscafé", fr: "TODO: fr"}),
                 qName: {
                     question: new T({en: "What is the name of this bike cafe?", nl: "Wat is de naam van dit fietscafé?", fr: "TODO: fr"}),
                     render: new T({en: "This bike cafe is called {name}", nl: "Dit fietscafé heet <b>{name}</b>", fr: "TODO: fr"}),
@@ -702,6 +710,10 @@ export default class Translations {
                 stillLoading: new T({
                     en: "The data is still loading. Please wait a bit before you add a new point",
                     nl: "De data wordt nog geladen. Nog even geduld en dan kan je een punt toevoegen."
+                }),
+                confirmIntro: new T({
+                    en: "<h3>Add a {title} here?</h3>The point you create here will be visible for everyone. Please, only add things on to the map if they truly exist. A lot of applications use this data.",
+                    nl: "<h3>Voeg hier een {title} toe?</h3>Het punt dat je hier toevoegt, is zichtbaar voor iedereen. Veel applicaties gebruiken deze data, voeg dus enkel punten toe die echt bestaan."
                 })
             },
             pickLanguage: new T({
@@ -736,7 +748,16 @@ export default class Translations {
                 websiteIs: new T({
                     en: "Website: <a href='{website}' target='_blank'>{website}</a>",
                     nl: "Website: <a href='{website}' target='_blank'>{website}</a>"
-                })
+                }),
+                emailOf: new T({
+                        en: "What is the email address of {category}?",
+                        nl: "Wat is het email-adres van {category}?"
+                    }
+                ),
+                emailIs: new T({
+                    en: "The email address of this {category} is <a href='mailto:{email}' target='_blank'>{email}</a>",
+                    nl: "Het email-adres van {category} is <a href='mailto:{email}' target='_blank'>{email}</a>"
+                }),
 
             },
             openStreetMapIntro: new T({
@@ -774,7 +795,19 @@ export default class Translations {
                 streetcomplete: new T({
                     en: "Another, similar application is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>"
                 })
-            }
+            },
+            readYourMessages: new T({
+                en: "Please, read all your OpenStreetMap-messages before adding a new point.",
+                nl: "Gelieve eerst je berichten op OpenStreetMap te lezen alvorens nieuwe punten toe te voegen."
+            }),
+            fewChangesBefore: new T({
+                en: "Please, answer a few questions of existing points before adding a new point.",
+                nl: "Gelieve eerst enkele vragen van bestaande punten te beantwoorden vooraleer zelf punten toe te voegen."
+            }),
+            goToInbox: new T({
+                en: "Open inbox",
+                nl: "Ga naar de berichten"
+            })
         }
     }
 

index.css

@@ -4,10 +4,6 @@ html, body {
     padding: 0;
 }
 
-a {
-    text-decoration: unset;
-    color:unset;
-}
 
 body {
     font-family: 'Helvetica Neue', Arial, sans-serif;
@@ -1206,9 +1202,21 @@ form {
 
 }
 
+.subtle-button a {
+    text-decoration: unset !important;
+    color:unset !important;
+    display: block ruby;
+}
+
+
 .subtle-button img{
     width: 3em;
     max-height: 3em;
     margin-right: 0.5em;
     padding: 0.5em;
 }
+
+
+.add-ui {
+    font-size: large;
+}

index.html

@@ -47,7 +47,7 @@
 <div id="leafletDiv"></div>
 
 <script src="./index.ts"></script>
-<script src="vendor/Leaflet.AccuratePosition.js"></script>
+<script src="./vendor/Leaflet.AccuratePosition.js"></script>
 
 <script data-goatcounter="https://pietervdvn.goatcounter.com/count"
         async src="//gc.zgo.at/count.js"></script>

index.ts

@@ -1,20 +1,14 @@
-import {OsmConnection} from "./Logic/OsmConnection";
-import {Changes} from "./Logic/Changes";
 import {ElementStorage} from "./Logic/ElementStorage";
 import {UIEventSource} from "./UI/UIEventSource";
 import {UserBadge} from "./UI/UserBadge";
-import {Basemap, BaseLayers} from "./Logic/Basemap";
 import {PendingChanges} from "./UI/PendingChanges";
 import {CenterMessageBox} from "./UI/CenterMessageBox";
 import {Helpers} from "./Helpers";
-import {Tag, TagUtils} from "./Logic/TagsFilter";
+import {TagUtils} from "./Logic/TagsFilter";
-import {FilteredLayer} from "./Logic/FilteredLayer";
 import {LayerUpdater} from "./Logic/LayerUpdater";
 import {UIElement} from "./UI/UIElement";
 import {FullScreenMessageBoxHandler} from "./UI/FullScreenMessageBoxHandler";
 import {FeatureInfoBox} from "./UI/FeatureInfoBox";
-import {GeoLocationHandler} from "./Logic/GeoLocationHandler";
-import {StrayClickHandler} from "./Logic/StrayClickHandler";
 import {SimpleAddUI} from "./UI/SimpleAddUI";
 import {VariableUiElement} from "./UI/Base/VariableUIElement";
 import {SearchAndGo} from "./UI/SearchAndGo";
@@ -22,7 +16,7 @@ import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
 import {CheckBox} from "./UI/Input/CheckBox";
 import Translations from "./UI/i18n/Translations";
 import Locale from "./UI/i18n/Locale";
-import {Layout, WelcomeMessage} from "./Customizations/Layout";
+import {Layout} from "./Customizations/Layout";
 import {DropDown} from "./UI/Input/DropDown";
 import {FixedUiElement} from "./UI/Base/FixedUiElement";
 import {LayerSelection} from "./UI/LayerSelection";
@@ -31,10 +25,12 @@ import {Img} from "./UI/Img";
 import {QueryParameters} from "./Logic/QueryParameters";
 import {Utils} from "./Utils";
 import {LocalStorageSource} from "./Logic/LocalStorageSource";
-import {Button} from "./UI/Base/Button";
-import {TabbedComponent} from "./UI/Base/TabbedComponent";
-import {ShareScreen} from "./UI/ShareScreen";
 import {InitUiElements} from "./InitUiElements";
+import {StrayClickHandler} from "./Logic/Leaflet/StrayClickHandler";
+import {BaseLayers, Basemap} from "./Logic/Leaflet/Basemap";
+import {GeoLocationHandler} from "./Logic/Leaflet/GeoLocationHandler";
+import {OsmConnection} from "./Logic/Osm/OsmConnection";
+import {Changes} from "./Logic/Osm/Changes";
 
 
 // --------------------- Special actions based on the parameters -----------------
@@ -105,19 +101,25 @@ const fullScreenMessage = new UIEventSource<UIElement>(undefined);
 // The latest element that was selected - used to generate the right UI at the right place
 const selectedElement = new UIEventSource<{ feature: any }>(undefined);
 
-const zoom = QueryParameters.GetQueryParameter("z", "" + layoutToUse.startzoom)
+const zoom = QueryParameters.GetQueryParameter("z", undefined)
     .syncWith(LocalStorageSource.Get("zoom"));
-const lat = QueryParameters.GetQueryParameter("lat", "" + layoutToUse.startLat)
+const lat = QueryParameters.GetQueryParameter("lat", undefined)
     .syncWith(LocalStorageSource.Get("lat"));
-const lon = QueryParameters.GetQueryParameter("lon", "" + layoutToUse.startLon)
+const lon = QueryParameters.GetQueryParameter("lon", undefined)
     .syncWith(LocalStorageSource.Get("lon"));
 
-const featureSwitchUserbadge = QueryParameters.GetQueryParameter("fs-userbadge", ""+layoutToUse.enableUserBadge);
+function featSw(key: string, deflt: boolean): UIEventSource<boolean> {
-const featureSwitchSearch = QueryParameters.GetQueryParameter("fs-search", ""+layoutToUse.enableSearch);
+    return QueryParameters.GetQueryParameter("fs-userbadge", "" + deflt).map((str) => {
-const featureSwitchWelcomeMessage = QueryParameters.GetQueryParameter("fs-welcome-message", "true");
+        return str !== "false";
-const featureSwitchLayers = QueryParameters.GetQueryParameter("fs-layers", ""+layoutToUse.enableLayers);
+    });
-const featureSwitchAddNew = QueryParameters.GetQueryParameter("fs-add-new", ""+layoutToUse.enableAdd);
+}
-const featureSwitchIframe = QueryParameters.GetQueryParameter("fs-iframe", "false");
+
+const featureSwitchUserbadge = featSw("fs-userbadge", layoutToUse.enableUserBadge);
+const featureSwitchSearch = featSw("fs-search", layoutToUse.enableSearch);
+const featureSwitchLayers = featSw("fs-layers", layoutToUse.enableLayers);
+const featureSwitchAddNew = featSw("fs-add-new", layoutToUse.enableAdd);
+const featureSwitchWelcomeMessage = featSw("fs-welcome-message", true);
+const featureSwitchIframe = featSw("fs-iframe", false);
 
 
 const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
@@ -134,9 +136,9 @@ locationControl.addCallback((latlonz) => {
 
 
 // ----------------- Prepare the important objects -----------------
-
+const osmConnection: OsmConnection =  new OsmConnection(
-const osmConnection = new OsmConnection(
+    QueryParameters.GetQueryParameter("test", "false").data === "true",
-    QueryParameters.GetQueryParameter("test", "false").data === "true"
+    QueryParameters.GetQueryParameter("oauth_token", undefined)
 );
 
 
@@ -148,8 +150,8 @@ window.setLanguage = function (language: string) {
 }
 
 Locale.language.addCallback((currentLanguage) => {
-    console.log("REsetting languate to", layoutToUse.supportedLanguages[0])
     if (layoutToUse.supportedLanguages.indexOf(currentLanguage) < 0) {
+        console.log("Resetting languate to", layoutToUse.supportedLanguages[0], "as", currentLanguage, " is unsupported")
         // The current language is not supported -> switch to a supported one
         Locale.language.setData(layoutToUse.supportedLanguages[0]);
     }
@@ -181,47 +183,10 @@ const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement(
 
 
 // ------------- Setup the layers -------------------------------
-const addButtons: {
-    name: UIElement,
-    icon: string,
-    tags: Tag[],
-    layerToAddTo: FilteredLayer
-}[]
-    = [];
 
-const flayers: FilteredLayer[] = []
+const layerSetup = InitUiElements.InitLayers(layoutToUse, osmConnection, changes, allElements, bm, fullScreenMessage, selectedElement);
 
-let minZoom = 0;
+const layerUpdater = new LayerUpdater(bm, layerSetup.minZoom, layerSetup.flayers);
-
-for (const layer of layoutToUse.layers) {
-
-    const generateInfo = (tagsES, feature) => {
-
-        return new FeatureInfoBox(
-            feature,
-            tagsES,
-            layer.title,
-            layer.elementsToShow,
-            changes,
-            osmConnection.userDetails
-        )
-    };
-
-    minZoom = Math.max(minZoom, layer.minzoom);
-
-    const flayer = FilteredLayer.fromDefinition(layer, bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
-
-    const addButton = {
-        name: Translations.W(layer.name),
-        icon: layer.icon,
-        tags: layer.newElementTags,
-        layerToAddTo: flayer
-    }
-    addButtons.push(addButton);
-    flayers.push(flayer);
-}
-
-const layerUpdater = new LayerUpdater(bm, minZoom, flayers);
 
 
 // --------------- Setting up layer selection ui --------
@@ -233,14 +198,20 @@ const openFilterButton = `
 
 let baseLayerOptions =  BaseLayers.baseLayers.map((layer) => {return {value: layer, shown: layer.name}});
 const backgroundMapPicker = new Combine([new DropDown(`Background map`, baseLayerOptions, bm.CurrentLayer), openFilterButton]);
-const layerSelection = new Combine([`<p class="filter__label">Maplayers</p>`, new LayerSelection(flayers)]);
+const layerSelection = new Combine([`<p class="filter__label">Maplayers</p>`, new LayerSelection(layerSetup.flayers)]);
 let layerControl = backgroundMapPicker;
-if (flayers.length > 1) {
+if (layerSetup.flayers.length > 1) {
     layerControl = new Combine([layerSelection, backgroundMapPicker]);
 }
 
 InitUiElements.OnlyIf(featureSwitchLayers, () => {
-    new CheckBox(layerControl, closedFilterButton).AttachTo("filter__selection");
+
+    const checkbox = new CheckBox(layerControl, closedFilterButton);
+    checkbox.AttachTo("filter__selection");
+    bm.Location.addCallback(() => {
+        checkbox.isEnabled.setData(false);
+    });
+    
 });
 
 
@@ -261,7 +232,7 @@ InitUiElements.OnlyIf(featureSwitchAddNew, () => {
                 selectedElement,
                 layerUpdater.runningQuery,
                 osmConnection.userDetails,
-                addButtons);
+                layerSetup.presets);
         }
     );
 });
@@ -272,6 +243,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) {
@@ -317,17 +291,17 @@ new FullScreenMessageBoxHandler(fullScreenMessage, () => {
 }).update();
 
 InitUiElements.OnlyIf(featureSwitchWelcomeMessage, () => {
-    InitUiElements.InitWelcomeMessage(layoutToUse, osmConnection, bm, fullScreenMessage)
+    InitUiElements.InitWelcomeMessage(layoutToUse,
+        featureSwitchUserbadge.data ? osmConnection : undefined, bm, fullScreenMessage)
 });
 
-if ((window != window.top && featureSwitchWelcomeMessage.data === "false") || featureSwitchIframe.data !== "false") {
+if ((window != window.top && !featureSwitchWelcomeMessage.data) || featureSwitchIframe.data) {
-    console.log("WELCOME? ",featureSwitchWelcomeMessage.data)
     new FixedUiElement(`<a href='${window.location}' target='_blank'><span class='iframe-escape'><img src='assets/pop-out.svg'></span></a>`).AttachTo("top-right")
 }
 
 
 new CenterMessageBox(
-    minZoom,
+    layerSetup.minZoom,
     centerMessage,
     osmConnection,
     locationControl,

test.ts

@@ -1,4 +0,0 @@
-import {MoreScreen} from "./UI/MoreScreen";
-import {UIEventSource} from "./UI/UIEventSource";
-
-new MoreScreen(new UIEventSource<{zoom: number, lat: number, lon: number}>({zoom: 16, lat: 51.3, lon: 3.2})).AttachTo("maindiv")