New preset-system, better 'add new POI'-ui with small confirmation

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();
@@ -36,6 +37,7 @@ export class AllKnownLayouts {
         const knownKeys = []
         for (const layout of layouts) {
             for (const layer of layout.layers) {
+                console.log("Adding ", Translations.W(layer.name).InnerRender());
                 const key = layer.overpassFilter.asOverpass().join("");
                 if (knownKeys.indexOf(key) >= 0) {
                     continue;

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

@@ -35,10 +35,18 @@ export default class BikeCafes extends LayerDefinition {
                 new Tag("pub", "cycling")
             ])
         ]) 
-        this.newElementTags = [
+        
+        this.presets = [
+            {
+                title: Translations.t.cyclofix.cafe.title,
+                icon: "/assets/bike/cafe.svg",
+                tags :  [
                     new Tag("amenity", "pub"),
                     new Tag("pub", "cycling"),
-        ];
+                ]
+            }
+        ]
+        
         this.maxAllowedOverlapPercentage = 10;
 
         this.minzoom = 13;

Customizations/Layers/BikeOtherShops.ts

@@ -40,7 +40,7 @@ export default class BikeOtherShops extends LayerDefinition {
             anyValueExcept("shop", "bicycle"),
             this.hasBikeServices
         ])
-        this.newElementTags = undefined
+        this.presets = []
         this.maxAllowedOverlapPercentage = 10
         this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY
 

Customizations/Layers/BikeParkings.ts

@@ -19,9 +19,14 @@ 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,
+            icon: "/assets/bike/parking.svg",
+            tags: [
                 new Tag("amenity", "bicycle_parking"),
-        ];
+            ]
+        }];
+
         this.maxAllowedOverlapPercentage = 10;
 
         this.minzoom = 13;

Customizations/Layers/BikeShops.ts

@@ -24,9 +24,13 @@ 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,
+            icon: "/assets/bike/repair_shop.svg",
+            tags: [
                 new Tag("shop", "bicycle"),
             ]
+        }]
         this.maxAllowedOverlapPercentage = 10
         this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY
 

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,30 @@ 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,
+                icon: "/assets/bike/pump.svg",
+                tags: [this.repairStation, this.pump, this.notools]
+            },
+            {
+                title: tr.titleRepair,
+                description: tr.services.tools,
+                icon: "/assets/bike/repair_station.svg",
+                tags: [this.repairStation, this.tools, this.nopump]
+            },
+            {
+                title: tr.titlePumpAndRepair,
+                description: tr.services.both,
+                icon: "/assets/bike/repair_station_pump.svg",
+                tags: [this.repairStation, this.tools, this.nopump]
+            },
+
+        ]
 
-        this.newElementTags = [
-            new Tag("amenity", "bicycle_repair_station")
-        ];
         this.maxAllowedOverlapPercentage = 10;
 
         this.minzoom = 13;

Customizations/Layers/Birdhide.ts

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

Customizations/Layers/Bookcases.ts

@@ -12,7 +12,12 @@ 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,
+            icon: "/assets/bookcase.svg"
+        }];
         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,11 @@ export class DrinkingWater extends LayerDefinition {
         ]);
 
 
-        this.newElementTags = [
+        this.presets = [{
-            new Tag("amenity", "drinking_water"),
+            title: Translations.t.cyclofix.drinking_water.title,
-        ];
+            icon: "/assets/bike/drinking_water.svg",
+            tags: [new Tag("amenity", "drinking_water")]
+        }];
         this.maxAllowedOverlapPercentage = 10;
         this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY
 

Customizations/Layers/GhostBike.ts

@@ -15,6 +15,16 @@ 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",
+                icon: "/assets/bike/ghost.svg",
+                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,16 @@ 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",
+                icon: "/assets/nature/info.png",
+                tags: [new Tag("tourism", "information")]
+            },
+                {
+                    title: "Kaart",
+                    icon: "/assets/map.svg",
+                    tags: [new Tag("tourism", "information"), new Tag("information", "map")]
+                }],
             maxAllowedOverlapPercentage: 0,
             icon: "assets/nature/info.png",
         });

Customizations/Layers/Map.ts

@@ -12,16 +12,19 @@ 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",
+            icon: "/assets/map.svg",
+            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)){
+            if (isOsmSource.matchesProperties(properties)) {
                 icon = "assets/osm-logo-white-bg.svg";
                 
                 const attr = properties["map_source:attribution"];

Customizations/Layers/NatureReserves.ts

@@ -18,8 +18,14 @@ 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",
+            icon: undefined,
+            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,14 @@ 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, ... ",
+            icon: undefined,
+            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,12 +11,18 @@ 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",
+                icon: "/assets/viewpoint.svg",
+                tags: [new Tag("tourism", "viewpoint"),
+                    new Tag("fixme", "Added with mapcomplete. This viewpoint should probably me merged with some existing feature")]
+            }],
             icon: "assets/viewpoint.svg",
             wayHandling: LayerDefinition.WAYHANDLING_CENTER_ONLY,
             style: tags => {
                 return {
-                    color: undefined, icon:{
+                    color: undefined, icon: {
                         iconUrl: "assets/viewpoint.svg",
                         iconSize: [20, 20]
                     }

InitUiElements.ts

@@ -54,7 +54,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 +62,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);

UI/Base/SubtleButton.ts

@@ -17,7 +17,7 @@ export class SubtleButton extends UIElement{
     InnerRender(): string {
         return new Combine([
             '<span class="subtle-button">',
-            `<img src='${this.imageUrl}'>`,
+            this.imageUrl !== undefined ? `<img src='${this.imageUrl}'>` : "",
             this.message,
             '</span>'
         ]).Render();

UI/SimpleAddUI.ts

@@ -8,6 +8,16 @@ 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";
+
+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
@@ -17,17 +27,22 @@ export class SimpleAddUI extends UIElement {
     private _addButtons: UIElement[];
     private _lastClickLocation: UIEventSource<{ lat: number; lon: number }>;
     private _changes: Changes;
-    private _selectedElement: UIEventSource<{feature: any}>;
+    private _selectedElement: UIEventSource<{ feature: any }>;
     private _dataIsLoading: UIEventSource<boolean>;
     private _userDetails: UIEventSource<UserDetails>;
 
+    private _confirmPreset: UIEventSource<Preset>
+        = new UIEventSource<Preset>(undefined);
+    private confirmButton: UIElement = undefined;
+    private cancelButton: UIElement;
+
     constructor(zoomlevel: UIEventSource<{ zoom: number }>,
                 lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
                 changes: Changes,
-                selectedElement: UIEventSource<{feature: any}>,
+                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._zoomlevel = zoomlevel;
@@ -39,18 +54,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 +106,49 @@ export class SimpleAddUI extends UIElement {
     }
 
     InnerRender(): string {
-        const header = Translations.t.general.add.header;
+
+
+        if (this._confirmPreset.data !== undefined) {
+
+
+            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.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>"]).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 +157,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/i18n/Translations.ts

@@ -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"}),
@@ -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({
@@ -768,13 +780,21 @@ export default class Translations {
                 })
             },
             morescreen: {
-                intro:new T({
+                intro: new T({
-                    en:"<h3>More quests</h3>Do you enjoy collecting geodata? <br/>There are more layers available.",
+                    en: "<h3>More quests</h3>Do you enjoy collecting geodata? <br/>There are more layers available.",
                 }),
                 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."
+            })
         }
     }
 

index.css

@@ -1212,3 +1212,8 @@ form {
     margin-right: 0.5em;
     padding: 0.5em;
 }
+
+
+.add-ui {
+    font-size: large;
+}

index.ts

@@ -182,7 +182,8 @@ const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement(
 
 // ------------- Setup the layers -------------------------------
 const addButtons: {
-    name: UIElement,
+    name: string | UIElement,
+    description: string | UIElement,
     icon: string,
     tags: Tag[],
     layerToAddTo: FilteredLayer
@@ -211,13 +212,17 @@ for (const layer of layoutToUse.layers) {
 
     const flayer = FilteredLayer.fromDefinition(layer, bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
 
+    for (const preset of layer.presets) {
+
         const addButton = {
-        name: Translations.W(layer.name),
+            name: preset.title,
-        icon: layer.icon,
+            description: preset.description,
-        tags: layer.newElementTags,
+            icon: preset.icon,
+            tags: preset.tags,
             layerToAddTo: flayer
         }
         addButtons.push(addButton);
+    }
     flayers.push(flayer);
 }
 
@@ -240,7 +245,13 @@ if (flayers.length > 1) {
 }
 
 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);
+    });
+    
 });