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

Customizations/AllKnownLayouts.ts

@@ -14,9 +14,9 @@ import {NatureReserves} from "./Layers/NatureReserves";
 import {Natuurpunt} from "./Layouts/Natuurpunt";
 
 export class AllKnownLayouts {
-    public static allSets: any = AllKnownLayouts.AllLayouts();
+    public static allSets = AllKnownLayouts.AllLayouts();
 
-    private static AllLayouts(): any {
+    private static AllLayouts(): Map<string, Layout> {
         const all = new All();
         const layouts: Layout[] = [
             new Groen(),
@@ -32,7 +32,7 @@ export class AllKnownLayouts {
             new Statues(),
             */
         ];
-        const allSets = {};
+        const allSets: Map<string, Layout> = new Map();
         for (const layout of layouts) {
             allSets[layout.name] = layout;
             all.layers = all.layers.concat(layout.layers);

Customizations/LayerDefinition.ts

@@ -88,7 +88,6 @@ export class LayerDefinition {
         }
     } = undefined) {
         if (options === undefined) {
-            console.log("No options!")
             return;
         }
         this.name = options.name;
@@ -100,7 +99,6 @@ export class LayerDefinition {
         this.title = options.title;
         this.elementsToShow = options.elementsToShow;
         this.style = options.style;
-        console.log(this)
     }
 
     asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>, selectedElement: UIEventSource<any>,

Customizations/Layers/BikeParkings.ts

@@ -5,12 +5,15 @@ import * as L from "leaflet";
 import FixedText from "../Questions/FixedText";
 import ParkingType from "../Questions/bike/ParkingType";
 import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
+import BikeStationOperator from "../Questions/bike/StationOperator";
+import Translations from "../../UI/i18n/Translations";
+import ParkingOperator from "../Questions/bike/ParkingOperator";
 
 
 export default class BikeParkings extends LayerDefinition {
     constructor() {
         super();
-        this.name = "bike_parking";
+        this.name = Translations.t.cyclofix.parking.name.txt;
         this.icon = "./assets/bike/parking.svg";
         this.overpassFilter = new Tag("amenity", "bicycle_parking");
         this.newElementTags = [
@@ -20,10 +23,10 @@ export default class BikeParkings extends LayerDefinition {
 
         this.minzoom = 13;
         this.style = this.generateStyleFunction();
-        this.title = new FixedText("Fietsparking");
+        this.title = new FixedText(Translations.t.cyclofix.parking.title)
         this.elementsToShow = [
             new ImageCarouselWithUploadConstructor(),
-            new OperatorTag(),
+            //new ParkingOperator(),
             new ParkingType()
         ];
 
@@ -36,7 +39,8 @@ export default class BikeParkings extends LayerDefinition {
                 color: "#00bb00",
                 icon: L.icon({
                     iconUrl: self.icon,
-                    iconSize: [50, 50]
+                    iconSize: [50, 50],
+                    iconAnchor: [25,50]
                 })
             };
         };

Customizations/Layers/BikeShop.ts

@@ -0,0 +1,122 @@
+import {TagRenderingOptions} from "../TagRendering";
+import {LayerDefinition} from "../LayerDefinition";
+import {And, Tag} from "../../Logic/TagsFilter";
+import L from "leaflet";
+import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
+import {NameQuestion} from "../Questions/NameQuestion";
+
+export class BikeShop extends LayerDefinition {
+
+
+    private readonly sellsBikes = new Tag("service:bicycle:retail", "yes");
+    private readonly repairsBikes = new Tag("service:bicycle:repair", "yes");
+
+    constructor() {
+        super(
+            {
+                name: "bike shop or repair",
+                icon: "assets/bike/repair_shop.svg",
+                minzoom: 14,
+                overpassFilter: new Tag("shop", "bicycle"),
+                newElementTags: [new Tag("shop", "bicycle")]
+            }
+        );
+
+        this.title = new TagRenderingOptions({
+            mappings: [
+                {k: new And([new Tag("name", "*"), this.sellsBikes]), txt: "Bicycle shop {name}"},
+                {
+                    k: new And([new Tag("name", "*"), new Tag("service:bicycle:retail", "no")]),
+                    txt: "Bicycle repair {name}",
+                },
+                {
+                    k: new And([new Tag("name", "*"), new Tag("service:bicycle:retail", "")]),
+                    txt: "Bicycle repair {name}"
+                },
+
+                {k: this.sellsBikes, txt: "Bicycle shop"},
+                {k: new Tag("service:bicycle:retail", "no"), txt: "Bicycle repair"},
+                {k: new Tag("service:bicycle:retail", ""), txt: "Bicycle repair/shop"},
+            ]
+        })
+        
+        
+        this.elementsToShow = [
+            new ImageCarouselWithUploadConstructor(),
+            new TagRenderingOptions({
+                question: "What is the name of this bicycle shop?",
+                freeform: {
+                    key: "name",
+                    renderTemplate: "The name of this bicycle shop is {name}",
+                    template: "The name of this bicycle shop is $$$"
+                }
+            }),
+
+            new TagRenderingOptions({
+                question: "Can one buy a bike here?",
+                mappings: [
+                    {k: this.sellsBikes, txt: "Bikes are sold here"},
+                    {k: new Tag("service:bicycle:retail", "no"), txt: "No bikes are sold here"},
+                ]
+            }),
+
+            new TagRenderingOptions({
+                question: "Can one buy a new bike here?",
+                mappings: [
+                    {k: new Tag("service:bicycle:second_hand", "yes"), txt: "Second-hand bikes are sold here"},
+                    {k: new Tag("service:bicycle:second_hand", "only"), txt: "All bicycles sold here are second-hand"},
+                    {k: new Tag("service:bicycle:second_hand", "no"), txt: "Only brand new bikes are sold here"},
+                ]
+            }).OnlyShowIf(this.sellsBikes),
+
+
+            new TagRenderingOptions({
+                question: "Does this shop repair bicycles?",
+                mappings: [
+                    {k: this.repairsBikes, txt: "Bikes are repaired here, by the shop owner (for a fee)"},
+                    {k: new Tag("service:bicycle:repair", "only_sold"), txt: "Only bikes that were bought here, are repaired"},
+                    {k: new Tag("service:bicycle:repair", "brand"), txt: "Only bikes of a fixed brand are repaired here"},
+                    {k: new Tag("service:bicycle:repair", "no"), txt: "Bikes are not repaired here"},
+                ]
+            }),
+
+            new TagRenderingOptions({
+                question: "Can one hire a new bike here?",
+                mappings: [
+                    {k: new Tag("service:bicycle:rental", "yes"), txt: "Bikes can be rented here"},
+                    {k: new Tag("service:bicycle:rental", "no"), txt:  "Bikes cannot be rented here"},
+                ]
+            }).OnlyShowIf(this.sellsBikes),
+
+            new TagRenderingOptions({
+                question: "Are there tools here so that one can repair their own bike?",
+                mappings: [
+                    {k: new Tag("service:bicycle:diy", "yes"), txt: "Tools for DIY are available here"},
+                    {k: new Tag("service:bicycle:diy", "no"), txt: "No tools for DIY are available here"},
+                ]
+            }),
+        ]
+
+
+        this.style = (tags) => {
+            let icon = "assets/bike/repair_shop.svg";
+
+            if (this.sellsBikes.matchesProperties(tags)) {
+                icon = "assets/bike/shop.svg";
+            }
+
+            return {
+                color: "#ff0000",
+                icon: L.icon({
+                    iconUrl: icon,
+                    iconSize: [50, 50],
+                    iconAnchor: [25, 50]
+                })
+            }
+        }
+
+
+    }
+    
+    
+}

Customizations/Layers/BikeShops.ts

@@ -0,0 +1,73 @@
+import { LayerDefinition } from "../LayerDefinition";
+import Translations from "../../UI/i18n/Translations";
+import { Tag } from "../../Logic/TagsFilter";
+import FixedText from "../Questions/FixedText";
+import { ImageCarouselWithUploadConstructor } from "../../UI/Image/ImageCarouselWithUpload";
+import * as L from "leaflet";
+import ShopRetail from "../Questions/bike/ShopRetail";
+import ShopPump from "../Questions/bike/ShopPump";
+import ShopRental from "../Questions/bike/ShopRental";
+import ShopRepair from "../Questions/bike/ShopRepair";
+import ShopDiy from "../Questions/bike/ShopDiy";
+import ShopName from "../Questions/bike/ShopName";
+import ShopSecondHand from "../Questions/bike/ShopSecondHand";
+import { TagRenderingOptions } from "../TagRendering";
+
+
+export default class BikeShops extends LayerDefinition {
+    private readonly sellsBikes = new Tag("service:bicycle:retail", "yes")
+    private readonly repairsBikes = new Tag("service:bicycle:repair", "yes")
+
+    constructor() {
+        super();
+        this.name = Translations.t.cyclofix.shop.name.txt
+        this.icon = "./assets/bike/repair_shop.svg"
+        this.overpassFilter = new Tag("shop", "bicycle");
+        this.newElementTags = [
+            new Tag("shop", "bicycle"),
+        ]
+        this.maxAllowedOverlapPercentage = 10
+
+        this.minzoom = 13;
+        this.style = this.generateStyleFunction();
+        this.title = new TagRenderingOptions({
+            mappings: [
+                {k: this.sellsBikes, txt: "Bicycle shop"},
+                {k: new Tag("service:bicycle:retail", "no"), txt: Translations.t.cyclofix.shop.titleRepair},
+                {k: new Tag("service:bicycle:retail", ""), txt: Translations.t.cyclofix.shop.title},
+            ]
+        })
+        
+        this.elementsToShow = [
+            new ImageCarouselWithUploadConstructor(),
+            //new ParkingOperator(),
+            new ShopRetail(),
+            new ShopRental(),
+            new ShopRepair(),
+            new ShopPump(),
+            new ShopDiy(),
+            new ShopName(),
+            new ShopSecondHand()
+        ]
+    }
+
+    private generateStyleFunction() {
+        const self = this;
+        return function (tags: any) {
+            let icon = "assets/bike/repair_shop.svg";
+
+            if (self.sellsBikes.matchesProperties(tags)) {
+                icon = "assets/bike/shop.svg";
+            }
+
+            return {
+                color: "#00bb00",
+                icon: L.icon({
+                    iconUrl: self.icon,
+                    iconSize: [50, 50],
+                    iconAnchor: [25, 50]
+                })
+            }
+        }
+    }
+}

Customizations/Layers/BikeStations.ts

@@ -12,6 +12,7 @@ import PumpManometer from "../Questions/bike/PumpManometer";
 import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
 import PumpOperational from "../Questions/bike/PumpOperational";
 import PumpValves from "../Questions/bike/PumpValves";
+import Translations from "../../UI/i18n/Translations";
 
 
 export default class BikeStations extends LayerDefinition {
@@ -22,7 +23,7 @@ export default class BikeStations extends LayerDefinition {
 
     constructor() {
         super();
-        this.name = "bike station or pump";
+        this.name = Translations.t.cyclofix.station.name.txt;
         this.icon = "./assets/wrench.svg";
 
         this.overpassFilter = new And([
@@ -36,7 +37,7 @@ export default class BikeStations extends LayerDefinition {
 
         this.minzoom = 13;
         this.style = this.generateStyleFunction();
-        this.title = new FixedText("Bike station");
+        this.title = new FixedText(Translations.t.cyclofix.station.title.txt)
 
         this.elementsToShow = [
             new ImageCarouselWithUploadConstructor(),
@@ -50,7 +51,7 @@ export default class BikeStations extends LayerDefinition {
             new PumpValves().OnlyShowIf(this.pump),
             new PumpOperational().OnlyShowIf(this.pump),
 
-            new BikeStationOperator(),
+            // new BikeStationOperator(),
             // new BikeStationBrand()   DISABLED
         ];
     }
@@ -73,14 +74,19 @@ export default class BikeStations extends LayerDefinition {
                     }
                 }
             } else {
+                if (!self.pump.matchesProperties(properties)) {
                     iconName = "repair_station.svg"
+                } else {
+                    iconName = "repair_station.svg"
+                }
             }
             const iconUrl = `./assets/bike/${iconName}`
             return {
                 color: "#00bb00",
                 icon: L.icon({
                     iconUrl: iconUrl,
-                    iconSize: [50, 50]
+                    iconSize: [50, 50],
+                    iconAnchor: [25,50]
                 })
             };
         };

Customizations/Layers/Bookcases.ts

@@ -1,10 +1,8 @@
 import {LayerDefinition} from "../LayerDefinition";
 import L from "leaflet";
-import {And, Or, Regex, Tag} from "../../Logic/TagsFilter";
+import {And, Or, Tag} from "../../Logic/TagsFilter";
-import {QuestionDefinition} from "../../Logic/Question";
 import {TagRenderingOptions} from "../TagRendering";
 import {NameInline} from "../Questions/NameInline";
-import {NameQuestion} from "../Questions/NameQuestion";
 import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
 
 export class Bookcases extends LayerDefinition {
@@ -121,7 +119,10 @@ export class Bookcases extends LayerDefinition {
                     key: "ref",
                     template: "Het referentienummer is $$$",
                     renderTemplate: "Gekend als {brand} <b>{ref}</b>"
-                }
+                },
+                mappings: [
+                    {k: new And([new  Tag("brand",""), new Tag("nobrand","yes"), new Tag("ref", "")]), txt: "Maakt geen deel uit van een groter netwerk"}
+                ]
             }).OnlyShowIf(new Tag("brand","*")),
 
             new TagRenderingOptions({

Customizations/Layers/DrinkingWater.ts

@@ -10,8 +10,8 @@ export class DrinkingWater extends LayerDefinition {
 
     constructor() {
         super();
-        this.name = "drinking_water";
+        this.name = "drinking water";
-        this.icon = "./assets/bug.svg";
+        this.icon = "./assets/bike/drinking_water.svg";
 
         this.overpassFilter = new Or([
             new And([
@@ -52,7 +52,8 @@ export class DrinkingWater extends LayerDefinition {
                 color: "#00bb00",
                 icon: new L.icon({
                     iconUrl: self.icon,
-                    iconSize: [40, 40]
+                    iconSize: [50, 50],
+                    iconAnchor: [25,50]
                 })
             };
         };

Customizations/Layout.ts

@@ -1,20 +1,30 @@
 import {LayerDefinition} from "./LayerDefinition";
+import {UIElement} from "../UI/UIElement";
+import {FixedUiElement} from "../UI/Base/FixedUiElement";
+import Translation from "../UI/i18n/Translation";
+import Translations from "../UI/i18n/Translations";
+import Locale from "../UI/i18n/Locale";
+import {VariableUiElement} from "../UI/Base/VariableUIElement";
+import {OsmConnection, UserDetails} from "../Logic/OsmConnection";
+import {UIEventSource} from "../UI/UIEventSource";
 
 /**
  * A layout is a collection of settings of the global view (thus: welcome text, title, selection of layers).
  */
 export class Layout {
+
     public name: string;
-    public title: string;
+    public title: UIElement;
     public layers: LayerDefinition[];
-    public welcomeMessage: string;
+    public welcomeMessage: UIElement;
-    public gettingStartedPlzLogin: string;
+    public gettingStartedPlzLogin: UIElement;
-    public welcomeBackMessage: string;
+    public welcomeBackMessage: UIElement;
+    public welcomeTail: UIElement;
 
     public startzoom: number;
+    public supportedLanguages: string[];
     public startLon: number;
     public startLat: number;
-    public welcomeTail: string;
 
     public locationContains: string[];
 
@@ -33,26 +43,79 @@ export class Layout {
      */
     constructor(
         name: string,
-        title: string,
+        supportedLanguages: string[],
+        title: UIElement | string,
         layers: LayerDefinition[],
         startzoom: number,
         startLat: number,
         startLon: number,
-        welcomeMessage: string,
+        welcomeMessage: UIElement | string,
-        gettingStartedPlzLogin: string = "Please login to get started",
+        gettingStartedPlzLogin: UIElement | string = Translations.t.general.getStarted,
-        welcomeBackMessage: string = "You are logged in. Welcome back!",
+        welcomeBackMessage: UIElement | string = Translations.t.general.welcomeBack,
-        welcomeTail: string = ""
+        welcomeTail: UIElement | string = ""
     ) {
-        this.title = title;
+        this.supportedLanguages = supportedLanguages;
+        this.title = typeof (title) === 'string' ? new FixedUiElement(title) : title;
         this.startLon = startLon;
         this.startLat = startLat;
         this.startzoom = startzoom;
         this.name = name;
         this.layers = layers;
-        this.welcomeMessage = welcomeMessage;
+        this.welcomeMessage = Translations.W(welcomeMessage)
-        this.gettingStartedPlzLogin = gettingStartedPlzLogin;
+        this.gettingStartedPlzLogin = Translations.W(gettingStartedPlzLogin);
-        this.welcomeBackMessage = welcomeBackMessage;
+        this.welcomeBackMessage = Translations.W(welcomeBackMessage);
-        this.welcomeTail = welcomeTail;
+        this.welcomeTail = Translations.W(welcomeTail);
+    }
+
+
+}
+
+export class WelcomeMessage extends UIElement {
+    private readonly layout: Layout;
+    private readonly userDetails: UIEventSource<UserDetails>;
+    private osmConnection: OsmConnection;
+
+    private readonly description: UIElement;
+    private readonly plzLogIn: UIElement;
+    private readonly welcomeBack: UIElement;
+    private readonly tail: UIElement;
+
+
+    constructor(layout: Layout, osmConnection: OsmConnection) {
+        super(osmConnection.userDetails);
+        this.ListenTo(Locale.language);
+        this.osmConnection = osmConnection;
+        this.layout = layout;
+        this.userDetails = osmConnection.userDetails;
+
+        this.description = layout.welcomeMessage;
+        console.log("   >>>>",this.description, "DESCR ")
+        this.plzLogIn = layout.gettingStartedPlzLogin;
+        this.welcomeBack = layout.welcomeBackMessage;
+        this.tail = layout.welcomeTail;
+    }
+
+    InnerRender(): string {
+        return "<div id='welcomeMessage'>" +
+            this.description.Render() +
+            "<br/>"+
+            (this.userDetails.data.loggedIn ? this.welcomeBack : this.plzLogIn).Render() +
+            "<br/>"+
+            this.tail.Render() +
+            "</div>"
+
+            ;
+        /*
+        return new VariableUiElement(
+            this.userDetails.map((userdetails) => {
+            }),
+            function () {
+               
+            }).ListenTo(Locale.language);*/
+    }
+
+    protected InnerUpdate(htmlElement: HTMLElement) {
+        this.osmConnection.registerActivateOsmAUthenticationClass()
     }
 
 }

Customizations/Layouts/All.ts

@@ -4,6 +4,7 @@ export class All extends Layout{
     constructor() {
         super(
             "all",
+            ["en"],
             "All quest layers",
             [],
             15,

Customizations/Layouts/Bookcases.ts

@@ -4,6 +4,7 @@ import * as Layer from "../Layers/Bookcases";
 export class Bookcases extends Layout{
     constructor() {
         super(    "bookcases",
+            ["nl"],
             "Open Bookcase Map",
             [new Layer.Bookcases()],
             14,

Customizations/Layouts/Cyclofix.ts

@@ -1,30 +1,32 @@
 import {Layout} from "../Layout";
 import BikeParkings from "../Layers/BikeParkings";
 import BikeServices from "../Layers/BikeStations";
+import BikeShops from "../Layers/BikeShops";
 import {GhostBike} from "../Layers/GhostBike";
-import {DrinkingWater, DrinkingWaterLayer} from "../Layers/DrinkingWater";
+import Translations from "../../UI/i18n/Translations";
+import {DrinkingWater} from "../Layers/DrinkingWater";
+import {BikeShop} from "../Layers/BikeShop"
+import Combine from "../../UI/Base/Combine";
 
 
 export default class Cyclofix extends Layout {
     constructor() {
         super(
             "pomp",
-            "Cyclofix bicycle infrastructure",
+            ["en", "nl", "fr"],
-            [new GhostBike(), new BikeServices(), new BikeParkings(), new DrinkingWater()],
+            Translations.t.cyclofix.title,
+            [new BikeServices(), new BikeShop(), new DrinkingWater(), new BikeParkings()],
             16,
             50.8465573,
             4.3516970,
-
+               /* Translations.t.cyclofix.title/*/
-
+            new Combine([
-            "<h3>Cyclofix bicycle infrastructure</h3>\n" +
+                "<h3>",
-            "\n" +
+                Translations.t.cyclofix.title,
-            "<p><b>EN&gt;</b> On this map we want to collect data about the whereabouts of bicycle pumps and public racks in Brussels." +
+                "</h3><br/><p>",
-            "As a result, cyclists will be able to quickly find the nearest infrastructure for their needs.</p>" +
+                Translations.t.cyclofix.description,
-            "<p><b>NL&gt;</b> Op deze kaart willen we gegevens verzamelen over de locatie van fietspompen en openbare stelplaatsen in Brussel." +
+                "</p>"
-            "Hierdoor kunnen fietsers snel de dichtstbijzijnde infrastructuur vinden die voldoet aan hun behoeften.</p>" +
+            ])//*/
-            "<p><b>FR&gt;</b> Sur cette carte, nous voulons collecter des données sur la localisation des pompes à vélo et des supports publics à Bruxelles." +
+        );
-            "Les cyclistes pourront ainsi trouver rapidement l'infrastructure la plus proche de leurs besoins.</p>"
-            ,
-            "", "");
     }
 }

Customizations/Layouts/GRB.ts

@@ -4,6 +4,7 @@ import {GrbToFix} from "../Layers/GrbToFix";
 export class GRB extends Layout {
     constructor() {
         super("grb",
+            ["en"],
             "Grb import fix tool",
             [new GrbToFix()],
             15,

Customizations/Layouts/Groen.ts

@@ -7,6 +7,7 @@ export class Groen extends Layout {
     
     constructor() {
         super("buurtnatuur",
+            ["nl"],
             "Buurtnatuur",
             [new NatureReserves(), new Park(), new Bos()],
             10,

Customizations/Layouts/MetaMap.ts

@@ -5,6 +5,7 @@ import {Map} from "../Layers/Map";
 export class MetaMap extends Layout{
     constructor() {
         super(    "metamap",
+            ["en"],
             "Open Map Map",
             [new Map()],
             1,

Customizations/Layouts/Natuurpunt.ts

@@ -7,6 +7,7 @@ export class Natuurpunt extends Layout{
     constructor() {
         super(
             "natuurpunt",
+            ["nl"],
             "De natuur in",
             [new Birdhide(), new InformationBoard(), new NatureReserves(true)],
             12,

Customizations/Layouts/Statues.ts

@@ -5,6 +5,7 @@ export class Statues extends Layout{
     constructor() {
         super(    "statues",
             "Open Artwork Map",
+            ["en"],
             [new Artwork()],
             10,
             50.8435,

Customizations/Layouts/StreetWidth.ts

@@ -7,6 +7,7 @@ export class StreetWidth extends Layout{
     
     constructor() {
         super(    "width",
+            ["nl"],
             "Straatbreedtes in Brugge",
             [new Widths(
                 2,

Customizations/Layouts/Toilets.ts

@@ -4,6 +4,7 @@ import * as Layer from "../Layers/Toilets";
 export class Toilets extends Layout{
     constructor() {
         super(      "toilets",
+            ["en"],
             "Open Toilet Map",
             [new Layer.Toilets()],
             12,

Customizations/Layouts/WalkByBrussels.ts

@@ -6,6 +6,7 @@ import { Park } from "../Layers/Park";
 export class WalkByBrussels extends Layout {
     constructor() {
         super("walkbybrussels",
+            ["en","fr","nl"],
             "Drinking Water Spots",
             [new DrinkingWater(), new Park(), new NatureReserves()],
             10,

Customizations/Questions/FixedText.ts

@@ -1,7 +1,8 @@
 import { TagRenderingOptions } from "../TagRendering";
+import {UIElement} from "../../UI/UIElement";
 
 export default class FixedText extends TagRenderingOptions {
-    constructor(category: string) {
+    constructor(category: string | UIElement) {
         super({
             mappings: [
                 {

Customizations/Questions/NameInline.ts

@@ -1,5 +1,6 @@
 import {TagRenderingOptions} from "../TagRendering";
 import {And, Tag} from "../../Logic/TagsFilter";
+import {UIElement} from "../../UI/UIElement";
 
 
 export class NameInline extends TagRenderingOptions{

Customizations/Questions/bike/ParkingOperator.ts

@@ -0,0 +1,27 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag, And} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ParkingOperator extends TagRenderingOptions {
+    constructor() {
+        const to = Translations.t.cyclofix.parking.operator
+        super({
+            priority: 15,
+            question: to.question.Render(),
+            freeform: {
+                key: "operator",
+                template: to.template.txt,
+                renderTemplate: to.render.txt,
+                placeholder: Translations.t.cyclofix.freeFormPlaceholder.txt
+            },
+            mappings: [
+                {k: new Tag("operator", "KU Leuven"), txt: "KU Leuven"},
+                {k: new Tag("operator", "Stad Halle"), txt: "Stad Halle"},
+                {k: new Tag("operator", "Saint Gilles - Sint Gillis"), txt: "Saint Gilles - Sint Gillis"},
+                {k: new Tag("operator", "Jette"), txt: "Jette"},
+                {k: new And([new Tag("operator", ""), new Tag("operator:type", "private")]), txt: to.private.Render()}
+            ]
+        });
+    }
+}

Customizations/Questions/bike/ParkingType.ts

@@ -1,38 +1,61 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+import Combine from "../../../UI/Base/Combine";
 
-
+class ParkingTypeHelper {
-export default class ParkingType extends TagRenderingOptions {
+    static GenerateMappings() {
-    private static images = {
+        const images = {
             stands: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Bike_racks_at_north-west_of_Westfield_-_geograph.org.uk_-_1041057.jpg/100px-Bike_racks_at_north-west_of_Westfield_-_geograph.org.uk_-_1041057.jpg",
             wall_loops: "https://wiki.openstreetmap.org/w/images/thumb/c/c2/Bike-parking-wheelbender.jpg/100px-Bike-parking-wheelbender.jpg",
             handlebar_holder: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Bicycle_parking_handlebar_holder.jpg/100px-Bicycle_parking_handlebar_holder.jpg",
             shed: "https://wiki.openstreetmap.org/w/images/thumb/b/b2/Bike-shelter.jpg/100px-Bike-shelter.jpg",
+            rack: "https://wiki.openstreetmap.org/w/images/thumb/4/41/Triton_Bike_Rack.png/100px-Triton_Bike_Rack.png",
             "two-tier": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Bicis_a_l%27estaci%C3%B3_de_Leiden.JPG/100px-Bicis_a_l%27estaci%C3%B3_de_Leiden.JPG"
+        };
+
+
+        const toImg = (url) => `<img src=${url}>`
+        const mappings = [];
+        const to = Translations.t.cyclofix.parking.type
+
+        for (const imagesKey in images) {
+            const mapping =
+                {
+                    k: new Tag("bicycle_parking", imagesKey),
+                    txt: new Combine([
+                        to[imagesKey],
+                        to.eg,
+                        toImg(images[imagesKey])
+                    ])
+                };
+
+            mappings.push(mapping);
+
         }
 
-    private static toImgTxt(url: string) {
+        return mappings;
-        return `<img src=${url}>`
+    }
 }
 
+export default class ParkingType extends TagRenderingOptions {
     constructor() {
+
+        const to = Translations.t.cyclofix.parking.type
+
+
         super({
             priority: 5,
-            question: "Van welk type is deze fietsenparking?",
+            question: to.question,
             freeform: {
                 key: "bicycle_parking",
                 extraTags: new Tag("fixme", "Freeform bicycle_parking= tag used: possibly a wrong value"),
-                template: "Iets anders: $$$",
+                template: to.template.txt,
-                renderTemplate: "Dit is een fietsenparking van het type: {bicycle_parking}",
+                renderTemplate: to.render.txt,
-                placeholder: "Specifieer"
+                placeholder: Translations.t.cyclofix.freeFormPlaceholder,
             },
-            mappings: [
+            mappings: ParkingTypeHelper.GenerateMappings()
-                {k: new Tag("bicycle_parking", "stands"), txt: ParkingType.toImgTxt(ParkingType.images.stands)},
+
-                {k: new Tag("bicycle_parking", "wall_loops"), txt: ParkingType.toImgTxt(ParkingType.images.wall_loops)},
-                {k: new Tag("bicycle_parking", "handlebar_holder"), txt: ParkingType.toImgTxt(ParkingType.images.handlebar_holder)},
-                {k: new Tag("bicycle_parking", "shed"), txt: ParkingType.toImgTxt(ParkingType.images.shed)},
-                {k: new Tag("bicycle_parking", "two-tier"), txt: ParkingType.toImgTxt(ParkingType.images["two-tier"])}
-            ]
         });
     }
 }

Customizations/Questions/bike/PumpManometer.ts

@@ -1,15 +1,17 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class PumpManometer extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cyclofix.station.manometer
         super({
-            question: "Does the pump have a pressure indicator or manometer?",
+            question: to.question,
             mappings: [
-                {k: new Tag("manometer", "yes"), txt: "Yes, there is a manometer"},
+                {k: new Tag("manometer", "yes"), txt: to.yes},
-                {k: new Tag("manometer","broken"), txt: "Yes, but it is broken"},
+                {k: new Tag("manometer", "no"), txt: to.no},
-                {k: new Tag("manometer", "yes"), txt: "No"}
+                {k: new Tag("manometer", "broken"), txt: to.broken}
             ]
         });   
     }   

Customizations/Questions/bike/PumpManual.ts

@@ -1,15 +1,17 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class PumpManual extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cyclofix.station.electric
         super({
             priority: 5,
-            question: "Is this an electric bike pump?",
+            question: to.question.Render(),
             mappings: [
-                {k: new Tag("manual", "yes"), txt: "Manual pump"},
+                {k: new Tag("manual", "yes"), txt: to.manual.Render()},
-                {k: new Tag("manual", "no"), txt: "Electric pump"}
+                {k: new Tag("manual", "no"), txt: to.electric.Render()}
             ]
         });
     }

Customizations/Questions/bike/PumpOperational.ts

@@ -1,14 +1,16 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class PumpOperational extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cyclofix.station.operational
         super({
-            question: "Is the bicycle pump still operational?",
+            question: to.question.Render(),
             mappings: [
-                {k: new Tag("service:bicycle:pump:operational_status","broken"), txt: "This pump is broken"},
+                {k: new Tag("service:bicycle:pump:operational_status","broken"), txt: to.broken.txt},
-                {k: new Tag("service:bicycle:pump:operational_status",""), txt: "This pump is operational"}
+                {k: new Tag("service:bicycle:pump:operational_status",""), txt: to.operational.txt}
             ]
         });
     }

Customizations/Questions/bike/PumpValves.ts

@@ -1,24 +1,27 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class PumpValves extends TagRenderingOptions{
     constructor() {
+        const to = Translations.t.cyclofix.station.valves
         super({
-            question: "What valves are supported?",
+            question: to.question.Render(),
             mappings: [
                 {
                     k: new Tag("valves", " sclaverand;schrader;dunlop"),
-                    txt: "There is a default head, so Presta, Dunlop and Auto"
+                    txt: to.default.Render()
                 },
-                {k: new Tag("valves", "dunlop"), txt: "Only dunlop"},
+                {k: new Tag("valves", "dunlop"), txt: to.dunlop.Render()},
-                {k: new Tag("valves", "sclaverand"), txt: "Only Sclaverand (also known as Dunlop)"},
+                {k: new Tag("valves", "sclaverand"), txt: to.sclaverand.Render()},
-                {k: new Tag("valves", "auto"), txt: "Only auto"},
+                {k: new Tag("valves", "auto"), txt: to.auto.Render()},
             ],
             freeform: {
+                extraTags: new Tag("fixme", "Freeform valves= tag used: possibly a wrong value"),
                 key: "valves",
-                template: "Supported valves are $$$",
+                template: to.template.txt,
-                renderTemplate: "Supported valves are {valves}"
+                renderTemplate: to.render.txt
             }
         });
     }

Customizations/Questions/bike/ShopDiy.ts

@@ -0,0 +1,19 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ShopPump extends TagRenderingOptions {
+    constructor() {
+        const key = 'service:bicycle:diy'
+        const to = Translations.t.cylofix.shop.diy
+        super({
+            priority: 5,
+            question: to.question.Render(),
+            mappings: [
+                {k: new Tag(key, "yes"), txt: to.yes.Render()},
+                {k: new Tag(key, "no"), txt: to.no.Render()},
+            ]
+        });
+    }
+}

Customizations/Questions/bike/ShopName.ts

@@ -0,0 +1,18 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ShopPump extends TagRenderingOptions {
+    constructor() {
+        const to = Translations.t.cylofix.shop.qName
+        super({
+            priority: 5,
+            question: to.question.Render(),
+            freeform: {
+                key: "name",
+                renderTemplate: to.render.txt,
+                template: to.template.txt
+            }
+        })
+    }
+}

Customizations/Questions/bike/ShopPump.ts

@@ -0,0 +1,19 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ShopPump extends TagRenderingOptions {
+    constructor() {
+        const key = 'service:bicycle:pump'
+        const to = Translations.t.cyclofix.shop.pump
+        super({
+            priority: 5,
+            question: to.question.Render(),
+            mappings: [
+                {k: new Tag(key, "yes"), txt: to.yes.Render()},
+                {k: new Tag(key, "no"), txt: to.no.Render()},
+            ]
+        });
+    }
+}

Customizations/Questions/bike/ShopRental.ts

@@ -0,0 +1,19 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ShopRental extends TagRenderingOptions {
+    constructor() {
+        const key = 'service:bicycle:rental'
+        const to = Translations.t.cyclofix.shop.rental
+        super({
+            priority: 5,
+            question: to.question.Render(),
+            mappings: [
+                {k: new Tag(key, "yes"), txt: to.yes.Render()},
+                {k: new Tag(key, "no"), txt: to.no.Render()},
+            ]
+        });
+    }
+}

Customizations/Questions/bike/ShopRepair.ts

@@ -0,0 +1,21 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ShopRepair extends TagRenderingOptions {
+    constructor() {
+        const key = 'service:bicycle:repair'
+        const to = Translations.t.cyclofix.shop.repair
+        super({
+            priority: 5,
+            question: to.question.Render(),
+            mappings: [
+                {k: new Tag(key, "yes"), txt: to.yes.Render()},
+                {k: new Tag(key, "only_sold"), txt: to.sold.Render()},
+                {k: new Tag(key, "brand"), txt: to.brand.Render()},
+                {k: new Tag(key, "no"), txt: to.no.Render()},
+            ]
+        });
+    }
+}

Customizations/Questions/bike/ShopRetail.ts

@@ -0,0 +1,19 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ShopRetail extends TagRenderingOptions {
+    constructor() {
+        const key = 'service:bicycle:retail'
+        const to = Translations.t.cyclofix.shop.retail
+        super({
+            priority: 5,
+            question: to.question,
+            mappings: [
+                {k: new Tag(key, "yes"), txt: to.yes},
+                {k: new Tag(key, "no"), txt: to.no},
+            ]
+        });
+    }
+}

Customizations/Questions/bike/ShopSecondHand.ts

@@ -0,0 +1,20 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ShopPump extends TagRenderingOptions {
+    constructor() {
+        const key = 'service:bicycle:second_hand'
+        const to = Translations.t.cylofix.shop.secondHand
+        super({
+            priority: 5,
+            question: to.question.Render(),
+            mappings: [
+                {k: new Tag(key, "yes"), txt: to.yes.Render()},
+                {k: new Tag(key, "no"), txt: to.no.Render()},
+                {k: new Tag(key, "only"), txt: to.only.Render()},
+            ]
+        });
+    }
+}

Customizations/Questions/bike/StationBrand.ts

@@ -4,6 +4,8 @@ import {Tag} from "../../../Logic/TagsFilter";
 
 /**
  * Currently not used in Cyclofix because it's a little vague
+ * 
+ * TODO: Translations
  */
 export default class BikeStationBrand extends TagRenderingOptions {
     private static options = {

Customizations/Questions/bike/StationChain.ts

@@ -1,15 +1,17 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class StationChain extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cyclofix.station.chain
         super({
             priority: 5,
-            question: "Does this bike station have a special tool to repair your bike chain?",
+            question: to.question.Render(),
             mappings: [
-                {k: new Tag("service:bicycle:chain_tool", "yes"), txt: "There is a chain tool."},
+                {k: new Tag("service:bicycle:chain_tool", "yes"), txt: to.yes.Render()},
-                {k: new Tag("service:bicycle:chain_tool", "no"), txt: "There is no chain tool."},
+                {k: new Tag("service:bicycle:chain_tool", "no"), txt: to.no.Render()},
             ]
         });
     }

Customizations/Questions/bike/StationOperator.ts

@@ -1,25 +1,27 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class BikeStationOperator extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cyclofix.station.operator
         super({
             priority: 15,
-            question: "Who operates this bike station (name of university, shop, city...)?",
+            question: to.question,
-            freeform: {
-                key: "operator",
-                template: "This bike station is operated by $$$",
-                renderTemplate: "This bike station is operated by {operator}",
-                placeholder: "organisatie"
-            },
             mappings: [
                 {k: new Tag("operator", "KU Leuven"), txt: "KU Leuven"},
                 {k: new Tag("operator", "Stad Halle"), txt: "Stad Halle"},
                 {k: new Tag("operator", "Saint Gilles - Sint Gillis"), txt: "Saint Gilles - Sint Gillis"},
                 {k: new Tag("operator", "Jette"), txt: "Jette"},
-                {k: new Tag("operator", "private"), txt: "Beheer door een privépersoon"}
+                {k: new Tag("operator", "private"), txt: to.private}
-            ]
+            ],
+            freeform: {
+                key: "operator",
+                template: to.template.txt,
+                renderTemplate: to.render.txt,
+                placeholder: "organisatie"
+            }
         });
     }
 }

Customizations/Questions/bike/StationPumpTools.ts

@@ -1,16 +1,18 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag, And} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class BikeStationPumpTools extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cyclofix.station.services
         super({
             priority: 15,
-            question: "Which services are available at this bike station?",
+            question: to.question,
             mappings: [
-                {k: new And([new Tag("service:bicycle:tools", "no"), new Tag("service:bicycle:pump", "yes")]), txt: "There is only a pump available."},
+                {k: new And([new Tag("service:bicycle:tools", "no"), new Tag("service:bicycle:pump", "yes")]), txt: to.pump},
-                {k: new And([new Tag("service:bicycle:tools", "yes"), new Tag("service:bicycle:pump", "no")]), txt: "There are only tools (screwdrivers, pliers...) available."},
+                {k: new And([new Tag("service:bicycle:tools", "yes"), new Tag("service:bicycle:pump", "no")]), txt: to.tools},
-                {k: new And([new Tag("service:bicycle:tools", "yes"), new Tag("service:bicycle:pump", "yes")]), txt: "There are both tools and a pump available."}
+                {k: new And([new Tag("service:bicycle:tools", "yes"), new Tag("service:bicycle:pump", "yes")]), txt: to.both}
             ]
         });
     }

Customizations/Questions/bike/StationStand.ts

@@ -1,14 +1,16 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class BikeStationStand extends TagRenderingOptions {
     constructor() {
+        const to = Translations
         super({
             priority: 10,
             question: "Does this bike station have a hook to suspend your bike with or a stand to elevate it?",
             mappings: [
-                {k: new Tag("service:bicycle:stand", "yes"), txt: "There is a hook or stand."},
+                {k: new Tag("service:bicycle:stand", "yes"), txt: "There is a hook or stand"},
                 {k: new Tag("service:bicycle:stand", "no"), txt: "There is no hook or stand"},
             ]
         });

Customizations/TagRendering.ts

@@ -1,17 +1,20 @@
 import {UIElement} from "../UI/UIElement";
 import {UIEventSource} from "../UI/UIEventSource";
 import {And, Tag, TagsFilter, TagUtils} from "../Logic/TagsFilter";
-import {UIRadioButton} from "../UI/Base/UIRadioButton";
 import {FixedUiElement} from "../UI/Base/FixedUiElement";
 import {SaveButton} from "../UI/SaveButton";
 import {Changes} from "../Logic/Changes";
-import {TextField} from "../UI/Base/TextField";
-import {UIInputElement} from "../UI/Base/UIInputElement";
-import {UIRadioButtonWithOther} from "../UI/Base/UIRadioButtonWithOther";
 import {VariableUiElement} from "../UI/Base/VariableUIElement";
 import {TagDependantUIElement, TagDependantUIElementConstructor} from "./UIElementConstructor";
 import {OnlyShowIfConstructor} from "./OnlyShowIf";
 import {UserDetails} from "../Logic/OsmConnection";
+import {TextField} from "../UI/Input/TextField";
+import {InputElement} from "../UI/Input/InputElement";
+import {InputElementWrapper} from "../UI/Input/InputElementWrapper";
+import {FixedInputElement} from "../UI/Input/FixedInputElement";
+import {RadioButton} from "../UI/Input/RadioButton";
+import Translations from "../UI/i18n/Translations";
+import Locale from "../UI/i18n/Locale";
 
 export class TagRenderingOptions implements TagDependantUIElementConstructor {
 
@@ -20,8 +23,17 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
      */
 
     public options: {
-        priority?: number; question?: string; primer?: string;
+        priority?: number;
-        freeform?: { key: string; tagsPreprocessor?: (tags: any) => any; template: string; renderTemplate: string; placeholder?: string; extraTags?: TagsFilter }; mappings?: { k: TagsFilter; txt: string; priority?: number, substitute?: boolean }[]
+        question?: string | UIElement;
+        freeform?: {
+            key: string;
+            tagsPreprocessor?: (tags: any) => any;
+            template: string;
+            renderTemplate: string;
+            placeholder?: string | UIElement;
+            extraTags?: TagsFilter
+        };
+        mappings?: { k: TagsFilter; txt: string | UIElement; priority?: number, substitute?: boolean }[]
     };
 
 
@@ -35,7 +47,7 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
          * If 'question' is undefined, then the question is never asked at all
          * If the question is "" (empty string) then the question is 
          */
-        question?: string,
+        question?: UIElement | string,
 
         /**
          * What is the priority of the question.
@@ -56,7 +68,7 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
          * 
          * 
          */
-        mappings?: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[],
+        mappings?: { k: TagsFilter, txt: UIElement | string, priority?: number, substitute?: boolean }[],
 
 
         /**
@@ -67,17 +79,11 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
         freeform?: {
             key: string, template: string,
             renderTemplate: string
-            placeholder?: string,
+            placeholder?: string | UIElement,
             extraTags?: TagsFilter,
         },
         
         
-        /**
-         * Optional:
-         * if defined, this a common piece of tag that is shown in front of every mapping (except freeform)
-         */
-        primer?: string,
-
         /**
          * In some very rare cases, tags have to be rewritten before displaying
          * This function can be used for that.
@@ -85,6 +91,7 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
          */
         tagsPreprocessor?: ((tags: any) => void)
     }) {
+
         this.options = options;
     }
 
@@ -129,29 +136,25 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
 class TagRendering extends UIElement implements TagDependantUIElement {
 
 
-    private _priority: number;
     private _userDetails: UIEventSource<UserDetails>;
+    private _priority: number;
 
-    Priority(): number {
-        return this._priority;
-    }
 
-    private _question: string;
+    private _question: UIElement;
-    private _primer: string;
+    private _mapping: { k: TagsFilter, txt: UIElement, priority?: number }[];
-    private _mapping: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[];
+    private _renderMapping: { k: TagsFilter, txt: UIElement, priority?: number }[];
-    private _renderMapping: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[];
 
     private _tagsPreprocessor?: ((tags: any) => any);
     private _freeform: {
         key: string, template: string,
         renderTemplate: string,
 
-        placeholder?: string,
+        placeholder?: string | UIElement,
         extraTags?: TagsFilter
     };
 
-    private readonly _questionElement: UIElement;
+
-    private readonly _textField: TextField<TagsFilter>; // Only here to update
+    private readonly _questionElement: InputElement<TagsFilter>;
 
     private readonly _saveButton: UIElement;
     private readonly _skipButton: UIElement;
@@ -165,19 +168,19 @@ class TagRendering extends UIElement implements TagDependantUIElement {
     constructor(tags: UIEventSource<any>, changes: Changes, options: {
         priority?: number
 
-        question?: string,
+        question?: string | UIElement,
-        primer?: string,
 
         freeform?: {
             key: string, template: string,
             renderTemplate: string
-            placeholder?: string,
+            placeholder?: string | UIElement,
             extraTags?: TagsFilter,
         },
         tagsPreprocessor?: ((tags: any) => any),
-        mappings?: { k: TagsFilter, txt: string, priority?: number, substitute?: boolean }[]
+        mappings?: { k: TagsFilter, txt: string | UIElement, priority?: number, substitute?: boolean }[]
     }) {
         super(tags);
+        this.ListenTo(Locale.language);
         const self = this;
         this.ListenTo(this._questionSkipped);
         this.ListenTo(this._editMode);
@@ -185,9 +188,10 @@ class TagRendering extends UIElement implements TagDependantUIElement {
         this._userDetails = changes.login.userDetails;
         this.ListenTo(this._userDetails);
 
-        this._question = options.question;
+        if (options.question !== undefined) {
+            this._question = Translations.W(options.question);
+        }
         this._priority = options.priority ?? 0;
-        this._primer = options.primer ?? "";
         this._tagsPreprocessor = function (properties) {
             if (options.tagsPreprocessor === undefined) {
                 return properties;
@@ -204,94 +208,36 @@ class TagRendering extends UIElement implements TagDependantUIElement {
         this._renderMapping = [];
         this._freeform = options.freeform;
 
-        // Prepare the choices for the Radio buttons
-        const choices: UIElement[] = [];
-        const usedChoices: string [] = [];
 
         for (const choice of options.mappings ?? []) {
-            if (choice.k === null) {
+            let choiceSubbed = {
-                this._mapping.push(choice);
+                k: choice.k,
-                continue;
+                txt: this.ApplyTemplate(choice.txt),
-            }
+                priority: choice.priority
-            let choiceSubbed = choice;
+            };
+
             if (choice.substitute) {
                 choiceSubbed = {
                     k: choice.k.substituteValues(
                         options.tagsPreprocessor(this._source.data)),
                     txt: this.ApplyTemplate(choice.txt),
-                    substitute: false,
                     priority: choice.priority
                 }
             }
 
 
-            const txt = choiceSubbed.txt
+            this._mapping.push({
-            // Choices is what is shown in the radio buttons
+                k: choiceSubbed.k,
-            if (usedChoices.indexOf(txt) < 0) {
+                txt: choiceSubbed.txt
-
-                choices.push(new FixedUiElement(txt));
-                usedChoices.push(txt);
-                // This is used to convert the radio button index into tags needed to add
-                this._mapping.push(choiceSubbed);
-            } else {
-                this._renderMapping.push(choiceSubbed); // only used while rendering
-            }
-        }
-
-        // Map radiobutton choice and textfield answer onto tagfilter. That tagfilter will be pushed into the changes later on
-        const pickChoice = (i => {
-            if (i === undefined || i === null) {
-                return undefined
-            }
-            return self._mapping[i].k
             });
-        const pickString =
-            (string) => {
-                if (string === "" || string === undefined) {
-                    return undefined;
         }
-                const tag = new Tag(self._freeform.key, string);
-                if (self._freeform.extraTags === undefined) {
-                    return tag;
-                }
-                return new And([
-                        self._freeform.extraTags,
-                        tag
-                    ]
-                );
-            };
 
 
         // Prepare the actual input element -> pick an appropriate implementation
-        let inputElement: UIInputElement<TagsFilter>;
-
-        
-        if (this._freeform !== undefined && this._mapping !== undefined) {
-            // Radio buttons with 'other'
-            inputElement = new UIRadioButtonWithOther(
-                choices,
-                this._freeform.template,
-                this._freeform.placeholder,
-                pickChoice,
-                pickString
-            );
-            this._questionElement = inputElement;
-        } else if (this._mapping !== [] && this._mapping.length > 0) {
-            // This is a classic radio selection element
-            inputElement = new UIRadioButton(new UIEventSource(choices), pickChoice, false)
-            this._questionElement = inputElement;
-        } else if (this._freeform !== undefined) {
-            this._textField = new TextField(new UIEventSource<string>(this._freeform.placeholder), pickString);
-            inputElement = this._textField;
-            this._questionElement = new FixedUiElement(
-                "<div>" + this._freeform.template.replace("$$$", inputElement.Render()) + "</div>")
-        } else {
-            throw "Invalid questionRendering, expected at least choices or a freeform"
-        }
-
 
+        this._questionElement = this.InputElementFor(options);
         const save = () => {
-            const selection = inputElement.GetValue().data;
+            const selection = self._questionElement.GetValue().data;
             if (selection) {
                 changes.addTag(tags.data.id, selection);
             }
@@ -305,42 +251,128 @@ class TagRendering extends UIElement implements TagDependantUIElement {
         }
 
         // Setup the save button and it's action
-        this._saveButton = new SaveButton(inputElement.GetValue())
+        this._saveButton = new SaveButton(this._questionElement.GetValue())
             .onClick(save);
 
+        this._editButton = new FixedUiElement("");
         if (this._question !== undefined) {
             this._editButton = new FixedUiElement("<img class='editbutton' src='./assets/pencil.svg' alt='edit'>")
                 .onClick(() => {
-                    console.log("Click", self._editButton);
-                    if (self._textField) {
-                        self._textField.value.setData(self._source.data["name"] ?? "");
-                    }
-
                     self._editMode.setData(true);
+                    self._questionElement.GetValue().setData(self.CurrentValue());
                 });
-        } else {
-            this._editButton = new FixedUiElement("");
         }
 
 
         const cancelContents = this._editMode.map((isEditing) => {
             if (isEditing) {
-                return "<span class='skip-button'>Annuleren</span>";
+                return "<span class='skip-button'>"+Translations.t.general.cancel.R()+"</span>";
             } else {
-                return "<span class='skip-button'>Overslaan (Ik weet het niet zeker...)</span>";
+                return "<span class='skip-button'>"+Translations.t.general.skip.R()+"</span>";
             }
         });
         // And at last, set up the skip button
         this._skipButton = new VariableUiElement(cancelContents).onClick(cancel)    ;
+    }
 
 
+    private InputElementFor(options: {
+        freeform?: {
+            key: string, template: string,
+            renderTemplate: string
+            placeholder?: string | UIElement,
+            extraTags?: TagsFilter,
+        },
+        mappings?: { k: TagsFilter, txt: string | UIElement, priority?: number, substitute?: boolean }[]
+    }):
+        InputElement<TagsFilter> {
+
+        const elements = [];
+
+        if (options.mappings !== undefined) {
+            
+            const previousTexts= [];
+            for (const mapping of options.mappings) {
+                if(mapping.k === null){
+                    continue;
+                }
+                if(previousTexts.indexOf(mapping.txt) >= 0){
+                    continue;
+                }
+                previousTexts.push(mapping.txt);
+                
+                elements.push(this.InputElementForMapping(mapping));
+            }
+        }
+
+        if (options.freeform !== undefined) {
+            elements.push(this.InputForFreeForm(options.freeform));
+        }
+
+
+        if (elements.length == 0) {
+            console.warn("WARNING: no tagrendering with following options:", options);
+            return new FixedInputElement("This should not happen: no tag renderings defined", undefined);
+        }
+        if (elements.length == 1) {
+            return elements[0];
+        }
+
+        return new RadioButton(elements, false);
+
     }
 
-    private ApplyTemplate(template: string): string {
+
-        const tags = this._tagsPreprocessor(this._source.data);
+    private InputElementForMapping(mapping: { k: TagsFilter, txt: string | UIElement }) {
-        return TagUtils.ApplyTemplate(template, tags);
+        return new FixedInputElement(mapping.txt, mapping.k);
     }
 
+
+    private InputForFreeForm(freeform): InputElement<TagsFilter> {
+        if (freeform === undefined) {
+            return undefined;
+        }
+
+
+        const pickString =
+            (string) => {
+                if (string === "" || string === undefined) {
+                    return undefined;
+                }
+                const tag = new Tag(freeform.key, string);
+                if (freeform.extraTags === undefined) {
+                    return tag;
+                }
+                return new And([
+                        tag,
+                        freeform.extraTags
+                    ]
+                );
+            };
+
+        const toString =
+            (tag) => {
+                if (tag instanceof And) {
+                    return toString(tag.and[0])
+                } else if (tag instanceof Tag) {
+                    return tag.value
+                }
+                return undefined;
+            }
+
+
+        let inputElement: InputElement<TagsFilter>;
+        const textField = new TextField({
+            placeholder: this._freeform.placeholder,
+            fromString: pickString,
+            toString: toString
+        });
+
+        const prepost = freeform.template.split("$$$");
+        return new InputElementWrapper(prepost[0], textField, prepost[1]);
+    }
+
+
     IsKnown(): boolean {
         const tags = TagUtils.proprtiesToKV(this._source.data);
 
@@ -353,6 +385,24 @@ class TagRendering extends UIElement implements TagDependantUIElement {
         return this._freeform !== undefined && this._source.data[this._freeform.key] !== undefined;
     }
 
+    private CurrentValue(): TagsFilter {
+        console.log("Creating a current value...")
+        const tags = TagUtils.proprtiesToKV(this._source.data);
+
+        for (const oneOnOneElement of this._mapping.concat(this._renderMapping)) {
+            if (oneOnOneElement.k !== null && oneOnOneElement.k.matches(tags)) {
+                return oneOnOneElement.k;
+            }
+        }
+        if (this._freeform === undefined) {
+            return undefined;
+        }
+
+        console.log("Got a freeform tag:", new Tag(this._freeform.key, this._source.data[this._freeform.key]))
+        return new Tag(this._freeform.key, this._source.data[this._freeform.key]);
+    }
+
+
     IsQuestioning(): boolean {
         if (this.IsKnown()) {
             return false;
@@ -368,10 +418,10 @@ class TagRendering extends UIElement implements TagDependantUIElement {
         return true;
     }
 
-    private RenderAnwser(): string {
+    private RenderAnwser(): UIElement {
         const tags = TagUtils.proprtiesToKV(this._source.data);
 
-        let freeform = "";
+        let freeform: UIElement = new FixedUiElement("");
         let freeformScore = -10;
         if (this._freeform !== undefined && this._source.data[this._freeform.key] !== undefined) {
             freeform = this.ApplyTemplate(this._freeform.renderTemplate);
@@ -400,34 +450,36 @@ class TagRendering extends UIElement implements TagDependantUIElement {
 
         if (highestTemplate !== undefined) {
             // we render the found template
-                return this._primer + this.ApplyTemplate(highestTemplate);
+            return this.ApplyTemplate(highestTemplate);
         }
 
 
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
 
         if (this.IsQuestioning() || this._editMode.data) {
             // Not yet known or questioning, we have to ask a question
 
+            const question = this._question.Render();
 
             return "<div class='question'>" +
-                "<span class='question-text'>" + this._question + "</span>" +
+                "<span class='question-text'>" + question + "</span>" +
-                (this._question !== "" ? "<br/>" : "") +
+                (this._question.IsEmpty() ? "" : "<br/>") +
-                this._questionElement.Render() +
+                "<div>" + this._questionElement.Render() + "</div>" +
                 this._skipButton.Render() +
                 this._saveButton.Render() +
                 "</div>"
         }
 
         if (this.IsKnown()) {
-            const html = this.RenderAnwser();
+            const answer = this.RenderAnwser()
-            if (html == "") {
+            if (answer.IsEmpty()) {
                 return "";
             }
+            const html = answer.Render();
             let editButton = "";
-            if(this._userDetails.data.loggedIn){
+            if (this._userDetails.data.loggedIn && this._question !== undefined) {
                 editButton = this._editButton.Render();
             }
 
@@ -441,13 +493,23 @@ class TagRendering extends UIElement implements TagDependantUIElement {
 
     }
 
+
+    Priority(): number {
+        return this._priority;
+    }
+
+    private ApplyTemplate(template: string | UIElement): UIElement {
+        if (template instanceof UIElement) {
+            return template;
+        }
+        const tags = this._tagsPreprocessor(this._source.data);
+        return new FixedUiElement(TagUtils.ApplyTemplate(template, tags));
+    }
+
+
     InnerUpdate(htmlElement: HTMLElement) {
         super.InnerUpdate(htmlElement);
-        this._questionElement.Update();
+        this._questionElement.Update(); // Another manual update for them
-        this._saveButton.Update();
-        this._skipButton.Update();
-        this._textField?.Update();
-        this._editButton.Update();
     }
 
 }

Logic/Changes.ts

@@ -6,7 +6,6 @@ import {OsmConnection} from "./OsmConnection";
 import {OsmNode, OsmObject} from "./OsmObject";
 import {ElementStorage} from "./ElementStorage";
 import {UIEventSource} from "../UI/UIEventSource";
-import {Question, QuestionDefinition} from "./Question";
 import {And, Tag, TagsFilter} from "./TagsFilter";
 
 export class Changes {

Logic/Imgur.ts

@@ -60,7 +60,6 @@ export class Imgur {
             }
 
             
-            console.log(data);
             const licenseInfo = new LicenseInfo();
             
             licenseInfo.licenseShortName = data.license;

Logic/LayerUpdater.ts

@@ -57,8 +57,7 @@ export class LayerUpdater {
     }
 
     private handleFail(reason: any) {
-        console.log("QUERY FAILED", reason);
+        console.log("QUERY FAILED (retrying in 1 sec)", reason);
-        console.log("Retrying in 1s")
         this.previousBounds = undefined;
         const self = this;
         window.setTimeout(
@@ -73,7 +72,6 @@ export class LayerUpdater {
         }
         console.log("Zoom level: ",this._map.map.getZoom(), "Least needed zoom:", this._minzoom)
         if (this._map.map.getZoom() < this._minzoom || this._map.Location.data.zoom < this._minzoom) {
-            console.log("Not running query: zoom not sufficient");
             return;
         }
 

Logic/OsmConnection.ts

@@ -123,6 +123,7 @@ export class OsmConnection {
     public preferenceSources : any = {}
     
     public GetPreference(key: string) : UIEventSource<string>{
+        key = "mapcomplete-"+key;
         if (this.preferenceSources[key] !== undefined) {
             return this.preferenceSources[key];
         }

Logic/Question.ts

@@ -1,508 +0,0 @@
-import {Changes} from "./Changes";
-import {UIElement} from "../UI/UIElement";
-import {UIEventSource} from "../UI/UIEventSource";
-
-export class QuestionUI extends UIElement {
-    private readonly _q: Question;
-    private readonly _tags: UIEventSource<any>;
-    /**
-     * The ID of the calling question - used to trigger it's onsave
-     */
-    private readonly _qid;
-
-    constructor(q: Question, qid: number, tags: UIEventSource<any>) {
-        super(tags);
-        this._q = q;
-        this._tags = tags;
-        this._qid = qid;
-    }
-
-
-    private RenderRadio() {
-        let radios = "";
-        let c = 0;
-        for (let answer of this._q.question.answers) {
-            const human = answer.text;
-            const ansId = "q" + this._qid + "-answer" + c;
-            radios +=
-                "<input type='radio' name='q" + this._qid + "' id='" + ansId + "' value='" + c + "' />" +
-                "<label for='" + ansId + "'>" + human + "</label>" +
-                "<br />";
-            c++;
-        }
-        return radios;
-    }
-
-    private RenderRadioText() {
-        let radios = "";
-        let c = 0;
-        for (let answer of this._q.question.answers) {
-            const human = answer.text;
-            const ansId = "q" + this._qid + "-answer" + c;
-            radios +=
-                "<input type='radio' name='q" + this._qid + "' id='" + ansId + "' value='" + c + "' />" +
-                "<label for='" + ansId + "'>" + human + "</label>" +
-                "<br />";
-            c++;
-        }
-        const ansId = "q" + this._qid + "-answer" + c;
-
-        radios +=
-            "<input type='radio' name='q" + this._qid + "' id='" + ansId + "' value='" + c + "' />" +
-            "<label for='" + ansId + "'><input type='text' id='q-" + this._qid + "-textbox' onclick='checkRadioButton(\"" + ansId + "\")'/></label>" +
-            "<br />";
-
-        return radios;
-    }
-
-
-    InnerRender(): string {
-
-        if (!this._q.Applicable(this._tags.data)) {
-            return "";
-        }
-
-
-        const q = this._q.question;
-
-
-        let answers = "";
-        if (q.type == "radio") {
-            answers += this.RenderRadio();
-        } else if (q.type == "text") {
-            answers += "<input type='text' id='q-" + this._qid + "-textbox'/><br/>"
-        } else if (q.type == "radio+text") {
-            answers += this.RenderRadioText();
-        } else {
-            alert("PLZ RENDER TYPE " + q.type);
-        }
-
-
-        const embeddedScriptSave = 'questionAnswered(' + this._qid + ', "' + this._tags.data.id + '", false )';
-        const embeddedScriptSkip = 'questionAnswered(' + this._qid + ', "' + this._tags.data.id + '", true )';
-        const saveButton = "<input class='save-button' type='button' onclick='" + embeddedScriptSave + "' value='Opslaan' />";
-        const skip = "<input class='skip-button' type='button' onclick='" + embeddedScriptSkip + "' value='Ik ben niet zeker (vraag overslaan)' />";
-        return q.question + "<br/>  " + answers + saveButton + skip;
-    }
-
-    InnerUpdate(htmlElement: HTMLElement) {
-    }
-}
-
-
-export class QuestionDefinition {
-
-
-    static noNameOrNameQuestion(question: string, noExplicitName : string, severity : number) : QuestionDefinition{
-        const q = new QuestionDefinition(question);
-        
-        q.type = 'radio+text';
-        q.addAnwser(noExplicitName, "noname","yes");
-        q.addUnrequiredTag("name", "*");
-        q.addUnrequiredTag("noname", "yes");
-        
-        q.key = "name";
-        q.severity = severity;
-        return q;
-    }
-    
-    static textQuestion(
-        question: string,
-        key: string,
-        severity: number
-    ): QuestionDefinition {
-        const q = new QuestionDefinition(question);
-        q.type = 'text';
-        q.key = key;
-        q.severity = severity;
-        q.addUnrequiredTag(key, '*');
-        return q;
-    }
-
-    static radioQuestionSimple(
-        question: string,
-        severity: number,
-        key: string,
-        answers: { text: string, value: string }[]) {
-
-
-        const answers0: {
-            text: string,
-            tags: { k: string, v: string }[],
-        }[] = [];
-        for (const i in answers) {
-            const answer = answers[i];
-            answers0.push({text: answer.text, tags: [{k: key, v: answer.value}]})
-        }
-
-        var q = this.radioQuestion(question, severity, answers0);
-        q.key = key;
-        q.addUnrequiredTag(key, '*');
-        return q;
-    }
-
-    static radioAndTextQuestion(
-        question: string,
-        severity: number,
-        key: string,
-        answers: { text: string, value: string }[]) {
-
-        const q = this.radioQuestionSimple(question, severity, key, answers);
-        q.type = 'radio+text';
-        return q;
-
-    }
-
-    static radioQuestion(
-        question: string,
-        severity: number,
-        answers:
-            {
-                text: string,
-                tags: { k: string, v: string }[],
-            }[]
-    ): QuestionDefinition {
-
-
-        const q = new QuestionDefinition(question);
-        q.severity = severity;
-        q.type = 'radio';
-        q.answers = answers;
-        for (const i in answers) {
-            const answer = answers[i];
-            for (const j in answer.tags) {
-                const tag = answer.tags[j];
-                q.addUnrequiredTag(tag.k, tag.v);
-            }
-        }
-
-        return q;
-    }
-
-
-    static GrbNoNumberQuestion() : QuestionDefinition{
-        const q = new QuestionDefinition("Heeft dit gebouw een huisnummer?");
-        q.type = "radio";
-        q.severity = 10;
-        q.answers = [{
-            text: "Ja, het OSM-huisnummer is correct",
-            tags: [{k: "fixme", v: ""}]
-        }, {
-
-            text: "Nee, het is een enkele garage",
-            tags: [{k: "building", v: "garage"}, {k: "fixme", v: ""}]
-        }, {
-
-            text: "Nee, het zijn meerdere garages",
-            tags: [{k: "building", v: "garages"}, {k: "fixme", v: ""}]
-        }
-
-
-        ];
-        q.addRequiredTag("fixme", "GRB thinks that this has number no number")
-        return q;
-    }
-
-    static GrbHouseNumberQuestion() : QuestionDefinition{
-
-
-        const q = new QuestionDefinition("Wat is het huisnummer?");
-        q.type = "radio+text";
-        q.severity = 10;
-
-        q.answers = [{
-            text: "Het OSM-huisnummer is correct",
-            tags: [{k: "fixme", v: ""}],
-        }]
-        q.key = "addr:housenumber";
-        
-      
-        q.addRequiredTag("fixme", "*");
-        
-        return q;
-    }
-
-
-    private constructor(question: string) {
-        this.question = question;
-    }
-
-    /**
-     * Question for humans
-     */
-    public question: string;
-
-    /**
-     * 'type' indicates how the answers are rendered and must be one of:
-     * 'text' for a free to fill text field
-     * 'radio' for radiobuttons
-     * 'radio+text' for radiobuttons and a freefill text field
-     * 'dropdown' for a dropdown menu
-     * 'number' for a number field
-     *
-     * If 'text' or 'number' is specified, 'key' is used as tag for the answer.
-     * If 'radio' or 'dropdown' is specified, the answers are used from 'tags'
-     *
-     */
-    public type: string = 'radio';
-    /**
-     * Only used for 'text' or 'number' questions
-     */
-    public key: string = null;
-
-    public answers: {
-        text: string,
-        tags: { k: string, v: string }[]
-    }[];
-
-    /**
-     * Indicates that the element must have _all_ the tags defined below
-     * Dictionary 'key' => [values]; empty list is wildcard
-     */
-    private mustHaveAllTags = [];
-
-    /**
-     * Indicates that the element must _not_ have any of the tags defined below.
-     * Dictionary 'key' => [values]
-     */
-    private mustNotHaveTags = [];
-
-    /**
-     * Severity: how important the question is
-     * The higher, the sooner it'll be shown
-     */
-    public severity: number = 0;
-
-    addRequiredTag(key: string, value: string) {
-        if (this.mustHaveAllTags[key] === undefined) {
-            this.mustHaveAllTags[key] = [value];
-        } else {
-            if(this.mustHaveAllTags[key] === []){
-                // Wildcard
-                return;
-            }
-            this.mustHaveAllTags[key].push(value);
-        }
-
-        if (value === '*') {
-            this.mustHaveAllTags[key] = [];
-        }
-        return this;
-    }
-
-    addUnrequiredTag(key: string, value: string) {
-        let valueList = this.mustNotHaveTags[key];
-
-        if (valueList === undefined) {
-            valueList = [value];
-            this.mustNotHaveTags[key] = valueList;
-        } else {
-            if (valueList === []) {
-                return;
-            }
-            valueList.push(value);
-        }
-
-        if (value === '*') {
-            this.mustNotHaveTags[key] = [];
-        }
-        return this;
-    }
-
-    private addAnwser(anwser: string, key: string, value: string) {
-        if (this.answers === undefined) {
-            this.answers = [{text: anwser, tags: [{k: key, v: value}]}];
-        } else {
-            this.answers.push({text: anwser, tags: [{k: key, v: value}]});
-        }
-        this.addUnrequiredTag(key, value);
-    }
-
-    public isApplicable(alreadyExistingTags): boolean {
-        for (let k in this.mustHaveAllTags) {
-
-            var actual = alreadyExistingTags[k];
-            if (actual === undefined) {
-                return false;
-            }
-
-            let possibleVals = this.mustHaveAllTags[k];
-            if (possibleVals.length == 0) {
-                // Wildcard
-                continue;
-            }
-
-            let index = possibleVals.indexOf(actual);
-            if (index < 0) {
-                return false
-            }
-        }
-
-        for (var k in this.mustNotHaveTags) {
-            var actual = alreadyExistingTags[k];
-            if (actual === undefined) {
-                continue;
-            }
-            let impossibleVals = this.mustNotHaveTags[k];
-            if (impossibleVals.length == 0) {
-                // Wildcard
-                return false;
-            }
-
-            let index = impossibleVals.indexOf(actual);
-            if (index >= 0) {
-                return false
-            }
-        }
-
-        return true;
-
-    }
-}
-
-
-export class Question {
-
-
-    // All the questions are stored in here, to be able to retrieve them globaly. This is a workaround, see below
-    static questions = Question.InitCallbackFunction();
-
-    static InitCallbackFunction(): Question[] {
-
-        // This needs some explanation, as it is a workaround
-        Question.questions = [];
-        // The html in a popup is only created when the user actually clicks to open it
-        // This means that we can not bind code to an HTML-element (as it doesn't exist yet)
-        // We work around this, by letting the 'save' button just call the function 'questionAnswered' with the ID of the question
-        // THis defines and registers this global function
-
-
-        /**
-         * Calls back to the question with either the answer or 'skip'
-         * @param questionId
-         * @param elementId
-         */
-        function questionAnswered(questionId, elementId, dontKnow) {
-            if (dontKnow) {
-                Question.questions[questionId].Skip(elementId);
-            } else {
-                Question.questions[questionId].OnSave(elementId);
-            }
-        }
-
-
-        function checkRadioButton(id) {
-            // @ts-ignore
-            document.getElementById(id).checked = true;
-        }
-
-        // must cast as any to set property on window
-        // @ts-ignore
-        const _global = (window /* browser */ || global /* node */) as any;
-        _global.questionAnswered = questionAnswered;
-        _global.checkRadioButton = checkRadioButton;
-        return [];
-    }
-
-
-    public readonly question: QuestionDefinition;
-    private _changeHandler: Changes;
-    private readonly _qId;
-    public skippedElements: string[] = [];
-
-    constructor(
-        changeHandler: Changes,
-        question: QuestionDefinition) {
-
-        this.question = question;
-
-        this._qId = Question.questions.length;
-        this._changeHandler = changeHandler;
-        Question.questions.push(this);
-    }
-
-    /**
-     * SHould this question be asked?
-     * Returns false if question is already there or if a premise is missing
-     */
-    public Applicable(tags): boolean {
-
-        if (this.skippedElements.indexOf(tags.id) >= 0) {
-            return false;
-        }
-        
-        return this.question.isApplicable(tags);
-    }
-
-    /**
-     *
-     * @param elementId: the OSM-id of the element to perform the change on, format 'way/123', 'node/456' or 'relation/789'
-     * @constructor
-     */
-    protected OnSave(elementId: string) {
-        let tagsToApply: { k: string, v: string }[] = [];
-        const q: QuestionDefinition = this.question;
-        let tp = this.question.type;
-        if (tp === "radio") {
-            const selected = document.querySelector('input[name="q' + this._qId + '"]:checked');
-            if (selected === null) {
-                console.log("No answer selected");
-                return
-            }
-            let index = (selected as any).value;
-            tagsToApply = q.answers[index].tags;
-        } else if (tp === "text") {
-            // @ts-ignore
-            let value = document.getElementById("q-" + this._qId + "-textbox").value;
-            if (value === undefined || value.length == 0) {
-                console.log("Answer too short");
-                return;
-            }
-            tagsToApply = [{k: q.key, v: value}];
-        } else if (tp === "radio+text") {
-            const selected = document.querySelector('input[name="q' + this._qId + '"]:checked');
-            if (selected === null) {
-                console.log("No answer selected");
-                return
-            }
-            let index = (selected as any).value;
-            if (index < q.answers.length) {
-                // A 'proper' answer was selected
-                tagsToApply = q.answers[index].tags;
-            } else {
-                // The textfield was selected 
-                // @ts-ignore
-                let value = document.getElementById("q-" + this._qId + "-textbox").value;
-                if (value === undefined || value.length < 3) {
-                    console.log("Answer too short");
-                    return;
-                }
-                tagsToApply = [{k: q.key, v: value}];
-            }
-
-        }
-
-        console.log("Question.ts: Applying tags",tagsToApply," to element ", elementId);
-
-        for (const toApply of tagsToApply) {
-            this._changeHandler.addChange(elementId, toApply.k, toApply.v);
-        }
-        
-    }
-
-    /**
-     * Creates the HTML question for this tag collection
-     */
-    public CreateHtml(tags: UIEventSource<any>): UIElement {
-        return new QuestionUI(this, this._qId, tags);
-    }
-
-
-    private Skip(elementId: any) {
-        this.skippedElements.push(elementId);
-        console.log("SKIP");
-        // Yeah, this is cheating below
-        // It is an easy way to notify the UIElement that something has changed
-        this._changeHandler._allElements.getElement(elementId).ping();
-    }
-}

Logic/StrayClickHandler.ts

@@ -10,16 +10,16 @@ import {UIElement} from "../UI/UIElement";
 export class StrayClickHandler {
     private _basemap: Basemap;
     private _lastMarker;
-    private _leftMessage: UIEventSource<() => UIElement>;
+    private _fullScreenMessage: UIEventSource<UIElement>;
     private _uiToShow: (() => UIElement);
 
     constructor(
         basemap: Basemap,
         selectElement: UIEventSource<any>,
-        leftMessage: UIEventSource<() => UIElement>, 
+        fullScreenMessage: UIEventSource<UIElement>, 
         uiToShow: (() => UIElement)) {
         this._basemap = basemap;
-        this._leftMessage = leftMessage;
+        this._fullScreenMessage = fullScreenMessage;
         this._uiToShow = uiToShow;
         const self = this;
         const map = basemap.map;
@@ -32,15 +32,16 @@ export class StrayClickHandler {
             self._lastMarker = L.marker([lastClick.lat, lastClick.lon]);
             const uiElement = uiToShow();
             const popup = L.popup().setContent(uiElement.Render());
-            uiElement.Activate();
             uiElement.Update();
+            uiElement.Activate();
             self._lastMarker.addTo(map);
             self._lastMarker.bindPopup(popup).openPopup();
 
             self._lastMarker.on("click", () => {
-                leftMessage.setData(self._uiToShow);
+                fullScreenMessage.setData(self._uiToShow());
             });
-
+            uiElement.Update();
+            uiElement.Activate();
         });
 
         selectElement.addCallback(() => {

UI/AddButton.ts

@@ -123,6 +123,7 @@ export class AddButton extends UIElement {
         const self = this;
 
         htmlElement.onclick = function (event) {
+            // @ts-ignore
             if(event.consumed){
                 return;
             }

UI/Base/Button.ts

@@ -18,7 +18,7 @@ export class Button extends UIElement {
     }
 
 
-    protected InnerRender(): string {
+    InnerRender(): string {
 
         return "<form>" +
             "<button id='button-"+this.id+"' type='button' "+this._clss+">" + this._text.Render() +  "</button>" +

UI/Base/CheckBox.ts

@@ -3,15 +3,17 @@ import {UIEventSource} from "../UIEventSource";
 
 
 export class CheckBox extends UIElement{
+    private data: UIEventSource<boolean>;
 
     constructor(data: UIEventSource<boolean>) {
         super(data);
+        this.data = data;
         
     }
 
 
     protected InnerRender(): string {
-        return "";
+        return "Current val: "+this.data.data;
     }
     
 }

UI/Base/Combine.ts

@@ -0,0 +1,31 @@
+import {UIElement} from "../UIElement";
+import Translations from "../i18n/Translations";
+
+export default class Combine extends UIElement {
+    private uiElements: (string | UIElement)[];
+
+    constructor(uiElements: (string | UIElement)[]) {
+        super(undefined);
+        this.uiElements = uiElements;
+    }
+
+    InnerRender(): string {
+        let elements = "";
+        for (const element of this.uiElements) {
+            if (element instanceof UIElement) {
+                elements += element.Render();
+            } else {
+                elements += element;
+            }
+        }
+        return elements;
+    }
+
+    protected InnerUpdate(htmlElement: HTMLElement) {
+        for (const element of this.uiElements) {
+            if (element instanceof UIElement) {
+                element.Update();
+            }
+        }
+    }
+}

UI/Base/DropDownUI.ts

@@ -1,61 +0,0 @@
-import {UIEventSource} from "../UIEventSource";
-import {UIElement} from "../UIElement";
-
-export class DropDownUI extends UIElement {
-
-    selectedElement: UIEventSource<string>
-    private _label: string;
-    private _values: { value: string; shown: string }[];
-
-    constructor(label: string, values: { value: string, shown: string }[],
-                selectedElement: UIEventSource<string> = undefined) {
-        super(undefined);
-        this._label = label;
-        this._values = values;
-        this.selectedElement = selectedElement ?? new UIEventSource<string>(values[0].value);
-        if(selectedElement.data === undefined){
-            this.selectedElement.setData(values[0].value)
-        }
-        const self = this;
-        this.selectedElement.addCallback(() => {
-            self.InnerUpdate();
-        });
-    }
-
-
-    protected InnerRender(): string {
-
-        let options = "";
-        for (const value of this._values) {
-            options += "<option value='" + value.value + "'>" + value.shown + "</option>"
-        }
-
-        return "<form>" +
-            "<label for='dropdown-" + this.id + "'>" + this._label + "</label>" +
-            "<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" +
-            options +
-            "</select>" +
-            "</form>";
-    }
-
-    InnerUpdate() {
-        const self = this;
-        const e = document.getElementById("dropdown-" + this.id);
-        if(e === null){
-            return;
-        }
-        // @ts-ignore
-        if (this.selectedElement.data !== e.value) {
-            // @ts-ignore
-            e.value = this.selectedElement.data;
-        }
-        e.onchange = function () {
-            // @ts-ignore
-            const selectedValue = e.options[e.selectedIndex].value;
-            console.log("Putting data", selectedValue)
-            self.selectedElement.setData(selectedValue);
-        }
-        
-    }
-
-}

UI/Base/FixedUiElement.ts

@@ -5,10 +5,10 @@ export class FixedUiElement extends UIElement {
 
     constructor(html: string) {
         super(undefined);
-        this._html = html;
+        this._html = html ?? "";
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         return this._html;
     }
 

UI/Base/TextField.ts

@@ -1,59 +0,0 @@
-import {UIElement} from "../UIElement";
-import {UIEventSource} from "../UIEventSource";
-import {UIInputElement} from "./UIInputElement";
-
-
-export class TextField<T> extends UIInputElement<T> {
-
-    public value: UIEventSource<string> = new UIEventSource<string>("");
-    /**
-     * Pings and has the value data
-     */
-    public enterPressed = new UIEventSource<string>(undefined);
-    private _placeholder: UIEventSource<string>;
-    private _mapping: (string) => T;
-
-    constructor(placeholder: UIEventSource<string>,
-                mapping: ((string) => T)) {
-        super(placeholder);
-        this._placeholder = placeholder;
-        this._mapping = mapping;
-    }
-
-    GetValue(): UIEventSource<T> {
-        return this.value.map(this._mapping);
-    }
-
-    protected InnerRender(): string {
-        return "<form onSubmit='return false' class='form-text-field'>" +
-            "<input type='text' placeholder='" + (this._placeholder.data ?? "") + "' id='text-" + this.id + "'>" +
-            "</form>";
-    }
-
-    InnerUpdate(htmlElement: HTMLElement) {
-        super.InnerUpdate(htmlElement);
-        const field = document.getElementById('text-' + this.id);
-        const self = this;
-        field.oninput = () => {
-            // @ts-ignore
-            self.value.setData(field.value);
-        };
-
-        field.addEventListener("keyup", function (event) {
-            if (event.key === "Enter") {
-                // @ts-ignore
-                self.enterPressed.setData(field.value);
-            }
-        });
-
-
-    }
-
-    Clear() {
-        const field = document.getElementById('text-' + this.id);
-        if (field !== undefined) {
-            // @ts-ignore
-            field.value = "";
-        }
-    }
-}

UI/Base/UIInputElement.ts

@@ -1,8 +0,0 @@
-import {UIElement} from "../UIElement";
-import {UIEventSource} from "../UIEventSource";
-
-export abstract class UIInputElement<T> extends UIElement{
-    
-    abstract GetValue() : UIEventSource<T>;
-    
-}

UI/Base/UIRadioButton.ts

@@ -1,109 +0,0 @@
-import {UIElement} from "../UIElement";
-import {UIEventSource} from "../UIEventSource";
-import {UIInputElement} from "./UIInputElement";
-
-export class UIRadioButton<T> extends UIInputElement<T> {
-
-    public readonly SelectedElementIndex: UIEventSource<number>
-        = new UIEventSource<number>(null);
-
-    private readonly _elements: UIEventSource<UIElement[]>
-    private _selectFirstAsDefault: boolean;
-    private _valueMapping: (i: number) => T;
-
-    constructor(elements: UIEventSource<UIElement[]>,
-                valueMapping: ((i: number) => T),
-                selectFirstAsDefault = true) {
-        super(elements);
-        this._elements = elements;
-        this._selectFirstAsDefault = selectFirstAsDefault;
-        const self = this;
-        this._valueMapping = valueMapping;
-        this.SelectedElementIndex.addCallback(() => {
-            self.InnerUpdate(undefined);
-        })
-    }
-    
-    GetValue(): UIEventSource<T> {
-        return this.SelectedElementIndex.map(this._valueMapping);
-    }
-
-
-    private IdFor(i) {
-        return 'radio-' + this.id + '-' + i;
-    }
-
-    protected InnerRender(): string {
-
-        let body = "";
-        let i = 0;
-        for (const el of this._elements.data) {
-            const htmlElement =
-                '<input type="radio" id="' + this.IdFor(i) + '" name="radiogroup-' + this.id + '">' +
-                '<label for="' + this.IdFor(i) + '">' + el.Render() + '</label>' +
-                '<br>';
-            body += htmlElement;
-
-            i++;
-        }
-
-        return "<form id='" + this.id + "-form'>" + body + "</form>";
-    }
-
-    InnerUpdate(htmlElement: HTMLElement) {
-        const self = this;
-
-        function checkButtons() {
-            for (let i = 0; i < self._elements.data.length; i++) {
-                const el = document.getElementById(self.IdFor(i));
-                // @ts-ignore
-                if (el.checked) {
-                    self.SelectedElementIndex.setData(i);
-                }
-            }
-        }
-
-
-        const el = document.getElementById(this.id);
-        el.addEventListener("change",
-            function () {
-                checkButtons();
-            }
-        );
-
-        if (this.SelectedElementIndex.data == null) {
-            if (this._selectFirstAsDefault) {
-                const el = document.getElementById(this.IdFor(0));
-                if (el) {
-                    // @ts-ignore
-                    el.checked = true;
-                    checkButtons();
-                }
-            }
-        } else {
-
-            // We check that what is selected matches the previous rendering
-            var checked = -1;
-            var expected = this.SelectedElementIndex.data;
-            if (expected) {
-
-                for (let i = 0; i < self._elements.data.length; i++) {
-                    const el = document.getElementById(self.IdFor(i));
-                    // @ts-ignore
-                    if (el.checked) {
-                        checked = i;
-                    }
-                }
-                if (expected != checked) {
-                    const el = document.getElementById(this.IdFor(expected));
-                    // @ts-ignore
-                    el.checked = true;
-                }
-            }
-        }
-
-
-    }
-
-
-}

UI/Base/UIRadioButtonWithOther.ts

@@ -1,72 +0,0 @@
-import {UIInputElement} from "./UIInputElement";
-import {UIEventSource} from "../UIEventSource";
-import {UIRadioButton} from "./UIRadioButton";
-import {UIElement} from "../UIElement";
-import {TextField} from "./TextField";
-import {FixedUiElement} from "./FixedUiElement";
-
-
-export class UIRadioButtonWithOther<T> extends UIInputElement<T> {
-    private readonly _radioSelector: UIRadioButton<T>;
-    private readonly _freeformText: TextField<T>;
-    private readonly _value: UIEventSource<T> = new UIEventSource<T>(undefined)
-
-    constructor(choices: UIElement[],
-                otherChoiceTemplate: string,
-                placeholder: string,
-                choiceToValue: ((i: number) => T),
-                stringToValue: ((string: string) => T)) {
-        super(undefined);
-        const self = this;
-
-        this._freeformText = new TextField(
-            new UIEventSource<string>(placeholder),
-            stringToValue);
-
-
-        const otherChoiceElement = new FixedUiElement(
-            otherChoiceTemplate.replace("$$$",  this._freeformText.Render()));
-        choices.push(otherChoiceElement);
-
-        this._radioSelector = new UIRadioButton(new UIEventSource(choices),
-            (i) => {
-                if (i === undefined || i === null) {
-                    return undefined;
-                }
-                if (i + 1 >= choices.length) {
-                    return  this._freeformText.GetValue().data
-                }
-                return choiceToValue(i);
-            },
-            false);
-
-        this._radioSelector.GetValue().addCallback(
-            (i) => {
-                self._value.setData(i);
-            });
-        this._freeformText.GetValue().addCallback((str) => {
-                self._value.setData(str);
-            }
-        );
-        this._freeformText.onClick(() => {
-            self._radioSelector.SelectedElementIndex.setData(choices.length - 1);
-        })
-
-
-    }
-
-    GetValue(): UIEventSource<T> {
-        return this._value;
-    }
-
-    protected InnerRender(): string {
-        return this._radioSelector.Render();
-    }
-
-    InnerUpdate(htmlElement: HTMLElement) {
-        super.InnerUpdate(htmlElement);
-        this._radioSelector.Update();
-        this._freeformText.Update();
-    }
-
-}

UI/Base/VariableUIElement.ts

@@ -12,16 +12,8 @@ export class VariableUiElement extends UIElement {
 
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         return this._html.data;
     }
     
-    InnerUpdate(htmlElement: HTMLElement) {
-        super.InnerUpdate(htmlElement);
-        if(this._innerUpdate !== undefined){
-            this._innerUpdate(htmlElement);
-        }
-    }
-
-
 }

UI/CenterMessageBox.ts

@@ -1,6 +1,7 @@
 import {UIElement} from "./UIElement";
 import {UIEventSource} from "./UIEventSource";
 import {OsmConnection} from "../Logic/OsmConnection";
+import Translations from "./i18n/Translations";
 
 export class CenterMessageBox extends UIElement {
 
@@ -34,17 +35,17 @@ export class CenterMessageBox extends UIElement {
 
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
 
         if (this._centermessage.data != "") {
             return this._centermessage.data;
         }
         if (this._queryRunning.data) {
-            return "Data wordt geladen...";
+            return Translations.t.centerMessage.loadingData.txt;
         } else if (this._zoomInMore.data) {
-            return "Zoom in om de data te zien en te bewerken";
+            return Translations.t.centerMessage.zoomIn.txt;
         }
-        return "Klaar!";
+        return Translations.t.centerMessage.ready.txt;
     }
 
 

UI/FeatureInfoBox.ts

@@ -10,7 +10,7 @@ import {TagRenderingOptions} from "../Customizations/TagRendering";
 import {OsmLink} from "../Customizations/Questions/OsmLink";
 import {WikipediaLink} from "../Customizations/Questions/WikipediaLink";
 import {And} from "../Logic/TagsFilter";
-import {TagDependantUIElement} from "../Customizations/UIElementConstructor";
+import {TagDependantUIElement, TagDependantUIElementConstructor} from "../Customizations/UIElementConstructor";
 
 export class FeatureInfoBox extends UIElement {
 
@@ -30,8 +30,8 @@ export class FeatureInfoBox extends UIElement {
 
     constructor(
         tagsES: UIEventSource<any>,
-        title: TagRenderingOptions,
+        title: TagRenderingOptions | UIElement,
-        elementsToShow: TagRenderingOptions[],
+        elementsToShow: TagDependantUIElementConstructor[],
         changes: Changes,
         userDetails: UIEventSource<UserDetails>
     ) {
@@ -56,7 +56,11 @@ export class FeatureInfoBox extends UIElement {
             }
         )
 
+        if (title instanceof UIElement) {
+            this._title = title;
+        } else {
             this._title = new TagRenderingOptions(title.options).construct(deps);
+        }
         this._osmLink = new OsmLink().construct(deps);
         this._wikipedialink = new WikipediaLink().construct(deps);
 
@@ -115,4 +119,6 @@ export class FeatureInfoBox extends UIElement {
             "</div>";
     }
     
+    
+
 }

UI/FullScreenMessageBoxHandler.ts

@@ -1,14 +1,16 @@
-/**
- * Keeps 'messagebox' and 'messageboxmobile' in sync, shows a 'close' button on the latter one
- */
 import {UIEventSource} from "./UIEventSource";
 import {UIElement} from "./UIElement";
 import {VariableUiElement} from "./Base/VariableUIElement";
+import Translations from "./i18n/Translations";
 
-export class MessageBoxHandler {
+/**
-    private _uielement: UIEventSource<() => UIElement>;
+ * Handles the full screen popup on mobile
+ */
+export class FullScreenMessageBoxHandler {
     
-    constructor(uielement: UIEventSource<() => UIElement>,
+    private _uielement: UIEventSource<UIElement>;
+
+    constructor(uielement: UIEventSource<UIElement>,
                 onClear: (() => void)) {
         this._uielement = uielement;
         this.listenTo(uielement);
@@ -22,14 +24,13 @@ export class MessageBoxHandler {
             }
         }
 
-        new VariableUiElement(new UIEventSource<string>("<h2>Naar de kaart</h2>"),
+        Translations.t.general.returnToTheMap
-            () => {
+            .onClick(() => {
-                document.getElementById("to-the-map").onclick = function () {
+                console.log("Clicked 'return to the map'")
                 uielement.setData(undefined);
                 onClear();
-                }
+            })
-            }
+            .AttachTo("to-the-map-h2");
-        ).AttachTo("to-the-map");
 
 
     }
@@ -45,7 +46,6 @@ export class MessageBoxHandler {
     update() {
         const wrapper = document.getElementById("messagesboxmobilewrapper");
         const gen = this._uielement.data;
-        console.log("Generator: ", gen);
         if (gen === undefined) {
             wrapper.classList.add("hidden")
             if (location.hash !== "") {
@@ -55,12 +55,8 @@ export class MessageBoxHandler {
         }
         location.hash = "#element"
         wrapper.classList.remove("hidden");
-      /*  gen()
-            ?.HideOnEmpty(true)
-            ?.AttachTo("messagesbox")
-            ?.Activate();*/
 
-        gen()
+        gen
             ?.HideOnEmpty(true)
             ?.AttachTo("messagesboxmobile")
             ?.Activate();

UI/Image/ImageCarousel.ts

@@ -23,8 +23,8 @@ export class ImageCarouselConstructor implements TagDependantUIElementConstructo
         return 0;
     }
 
-    construct(tags: UIEventSource<any>, changes: Changes): TagDependantUIElement {
+    construct(dependencies: { tags: UIEventSource<any>, changes: Changes }): TagDependantUIElement {
-        return new ImageCarousel(tags, changes);
+        return new ImageCarousel(dependencies.tags, dependencies.changes);
     }
 
 }

UI/Image/ImageCarouselWithUpload.ts

@@ -34,14 +34,14 @@ class ImageCarouselWithUpload extends TagDependantUIElement {
         const changes = dependencies.changes;
         this._imageElement = new ImageCarousel(tags, changes);
         const userDetails = changes.login.userDetails;
-        const license = changes.login.GetPreference( "mapcomplete-pictures-license");
+        const license = changes.login.GetPreference( "pictures-license");
         this._pictureUploader = new OsmImageUploadHandler(tags,
             userDetails, license,
             changes, this._imageElement.slideshow).getUI();
 
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         return this._imageElement.Render() +
             this._pictureUploader.Render();
     }

UI/ImageUploadFlow.ts

@@ -3,13 +3,13 @@ import {UIEventSource} from "./UIEventSource";
 import $ from "jquery"
 import {Imgur} from "../Logic/Imgur";
 import {UserDetails} from "../Logic/OsmConnection";
-import {DropDownUI} from "./Base/DropDownUI";
+import {DropDown} from "./Input/DropDown";
 import {VariableUiElement} from "./Base/VariableUIElement";
+import Translations from "./i18n/Translations";
 
 export class ImageUploadFlow extends UIElement {
     private _licensePicker: UIElement;
     private _selectedLicence: UIEventSource<string>;
-    private _licenseExplanation: UIElement;
     private _isUploading: UIEventSource<number> = new UIEventSource<number>(0)
     private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) };
     private _userdetails: UIEventSource<UserDetails>;
@@ -31,47 +31,33 @@ export class ImageUploadFlow extends UIElement {
         this._uploadOptions = uploadOptions;
         this.ListenTo(this._isUploading);
 
-        const licensePicker = new DropDownUI("Jouw foto wordt gepubliceerd ",
+        const licensePicker = new DropDown(Translations.t.image.willBePublished,
-
             [
-                {value: "CC0", shown: "in het publiek domein"},
+                {value: "CC0", shown: Translations.t.image.cco},
-                {value: "CC-BY-SA 4.0", shown: "onder een CC-BY-SA-licentie"},
+                {value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs},
-                {value: "CC-BY 4.0", shown: "onder een CC-BY-licentie"}
+                {value: "CC-BY 4.0", shown: Translations.t.image.ccb}
             ],
             preferedLicense
         );
         this._licensePicker = licensePicker;
-        this._selectedLicence = licensePicker.selectedElement;
+        this._selectedLicence = licensePicker.GetValue();
 
 
-        const licenseExplanations = {
-            "CC-BY-SA 4.0":
-                "<b>Creative Commonse met naamsvermelding en gelijk delen</b><br/>" +
-                "Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden én ze afgeleide werken met deze licentie en attributie delen.",
-            "CC-BY 4.0":
-                "<b>Creative Commonse met naamsvermelding</b> <br/>" +
-                "Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden",
-            "CC0":
-                "<b>Geen copyright</b><br/> Je foto mag door iedereen voor alles gebruikt worden"
-        }
-        this._licenseExplanation = new VariableUiElement(
-            this._selectedLicence.map((license) => {
-                return licenseExplanations[license]
-            })
-        );
     }
 
 
-    protected InnerRender(): string {
+    InnerRender(): string {
 
         if (!this._userdetails.data.loggedIn) {
-            return "<div class='activate-osm-authentication'>Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden</div>";
+            return `<div class='activate-osm-authentication'>${Translations.t.image.pleaseLogin.Render()}</div>`;
         }
+
+        let uploadingMessage = "";
         if (this._isUploading.data == 1) {
-            return "<b>Bezig met een foto te uploaden...</b>"
+            return `<b>${Translations.t.image.uploadingPicture.Render()}</b>`
         }
         if (this._isUploading.data > 0) {
-            return "<b>Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan...</b>"
+            uploadingMessage = "<b>Uploading multiple pictures, " + this._isUploading.data + " left...</b>"
         }
 
         return "" +
@@ -81,10 +67,12 @@ export class ImageUploadFlow extends UIElement {
 
             "<div class='imageflow-file-input-wrapper'>" +
             "<img src='./assets/camera-plus.svg' alt='upload image'/> " +
-            "<span class='imageflow-add-picture'>Voeg foto toe</span>" +
+            `<span class='imageflow-add-picture'>${Translations.t.image.addPicture.R()}</span>` +
             "<div class='break'></div>"+
             "</div>" +
-            this._licensePicker.Render() +
+
+            this._licensePicker.Render() + "<br/>" +
+            uploadingMessage +
 
             "</label>" +
             

UI/Input/DropDown.ts

@@ -0,0 +1,100 @@
+import {UIEventSource} from "../UIEventSource";
+import {UIElement} from "../UIElement";
+import {InputElement} from "./InputElement";
+import instantiate = WebAssembly.instantiate;
+import {FixedUiElement} from "../Base/FixedUiElement";
+import Translations from "../i18n/Translations";
+
+export class DropDown<T> extends InputElement<T> {
+
+    private readonly _label: UIElement;
+    private readonly _values: { value: T; shown: UIElement }[];
+
+    private readonly _value;
+
+    constructor(label: string | UIElement,
+                values: { value: T, shown: string | UIElement }[],
+                value: UIEventSource<T> = undefined) {
+        super(undefined);
+        this._value = value ?? new UIEventSource<T>(undefined);
+        this._label = Translations.W(label);
+        this._values = values.map(v => {
+                return {
+                    value: v.value,
+                    shown: Translations.W(v.shown)
+                }
+            }
+        );
+        for (const v of this._values) {
+            this.ListenTo(v.shown._source);
+        }
+        this.ListenTo(this._value)
+
+    }
+
+    GetValue(): UIEventSource<T> {
+        return this._value;
+    }
+
+    ShowValue(t: T): boolean {
+        if (!this.IsValid(t)) {
+            return false;
+        }
+        this._value.setData(t);
+    }
+
+    IsValid(t: T): boolean {
+        for (const value of this._values) {
+            if (value.value === t) {
+                return true;
+            }
+        }
+        return false
+    }
+
+
+    InnerRender(): string {
+        if(this._values.length <=1){
+            return "";
+        }
+        
+        let options = "";
+        for (let i = 0; i < this._values.length; i++) {
+            options += "<option value='" + i + "'>" + this._values[i].shown.InnerRender() + "</option>"
+
+        }
+        return "<form>" +
+            "<label for='dropdown-" + this.id + "'>" + this._label.Render() + "</label>" +
+            "<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" +
+            options +
+            "</select>" +
+            "</form>";
+    }
+
+    protected InnerUpdate(element) {
+       
+
+        var e = document.getElementById("dropdown-" + this.id);
+        if(e === null){
+            return;
+        }
+        const self = this;
+        e.onchange = (() => {
+            // @ts-ignore
+            var index = parseInt(e.selectedIndex);
+            self._value.setData(self._values[index].value);
+
+        });
+
+        var t = this._value.data;
+        for (let i = 0; i < this._values.length ; i++) {
+            const value = this._values[i];
+            if (value.value == t) {
+                // @ts-ignore
+                e.selectedIndex = i;
+            }
+        }
+
+    }
+
+}

UI/Input/FixedInputElement.ts

@@ -0,0 +1,35 @@
+import {InputElement} from "./InputElement";
+import {UIEventSource} from "../UIEventSource";
+import {UIElement} from "../UIElement";
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+
+export class FixedInputElement<T> extends InputElement<T> {
+    private rendering: UIElement;
+    private value: UIEventSource<T>;
+
+    constructor(rendering: UIElement | string, value: T) {
+        super(undefined);
+        this.value = new UIEventSource<T>(value);
+        this.rendering = typeof (rendering) === 'string' ? new FixedUiElement(rendering) : rendering;
+    }
+
+    GetValue(): UIEventSource<T> {
+        return this.value;
+    }
+    
+    ShowValue(t: T): boolean {
+        return false;
+    }
+
+    InnerRender(): string {
+        return this.rendering.Render();
+    }
+
+    IsValid(t: T): boolean {
+        return t == this.value.data;
+    }
+    
+    
+
+}

UI/Input/InputElement.ts

@@ -0,0 +1,11 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../UIEventSource";
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+export abstract class InputElement<T> extends UIElement{
+    
+    abstract GetValue() : UIEventSource<T>;
+    
+    abstract IsValid(t: T) : boolean;
+    
+}

UI/Input/InputElementWrapper.ts

@@ -0,0 +1,41 @@
+import {InputElement} from "./InputElement";
+import {UIEventSource} from "../UIEventSource";
+import {UIElement} from "../UIElement";
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+
+export class InputElementWrapper<T> extends InputElement<T>{
+    private pre: UIElement ;
+    private input: InputElement<T>;
+    private post: UIElement ;
+    
+    constructor(
+        pre: UIElement | string,
+        input: InputElement<T>,
+        post: UIElement | string
+        
+    ) {
+        super(undefined);
+        this.pre = typeof(pre) === 'string' ?  new FixedUiElement(pre) : pre
+        this.input = input;
+        this.post =typeof(post) === 'string' ?  new FixedUiElement(post) : post
+    }
+    
+    
+    GetValue(): UIEventSource<T> {
+        return this.input.GetValue();
+    }
+    
+    ShowValue(t: T) {
+        return this.input.ShowValue(t);
+    }
+
+    InnerRender(): string {
+        return this.pre.Render() + this.input.Render() + this.post.Render();
+    }
+
+    IsValid(t: T): boolean {
+        return this.input.IsValid(t);
+    }
+    
+}

UI/Input/RadioButton.ts

@@ -0,0 +1,146 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../UIEventSource";
+import {InputElement} from "./InputElement";
+
+export class RadioButton<T> extends InputElement<T> {
+
+    private readonly _selectedElementIndex: UIEventSource<number>
+        = new UIEventSource<number>(null);
+
+    private value: UIEventSource<T>;
+    private readonly _elements: InputElement<T>[]
+    private _selectFirstAsDefault: boolean;
+
+
+    constructor(elements: InputElement<T>[],
+                selectFirstAsDefault = true) {
+        super(undefined);
+        this._elements = elements;
+        this._selectFirstAsDefault = selectFirstAsDefault;
+        const self = this;
+
+
+        this.value =
+            UIEventSource.flatten(this._selectedElementIndex.map(
+                (selectedIndex) => {
+                    if (selectedIndex !== undefined && selectedIndex !== null) {
+                        return elements[selectedIndex].GetValue()
+                    }
+                }
+            ), elements.map(e => e.GetValue()));
+
+        this.value.addCallback((t) => {
+            self.ShowValue(t);
+        })
+
+
+        for (let i = 0; i < elements.length; i++) {
+            // If an element is clicked, the radio button corresponding with it should be selected as well
+            elements[i].onClick(() => {
+                self._selectedElementIndex.setData(i);
+            });
+        }
+
+    }
+
+    IsValid(t: T): boolean {
+        for (const inputElement of this._elements) {
+            if (inputElement.IsValid(t)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    GetValue(): UIEventSource<T> {
+        return this.value;
+    }
+
+
+    private IdFor(i) {
+        return 'radio-' + this.id + '-' + i;
+    }
+
+    InnerRender(): string {
+
+        let body = "";
+        let i = 0;
+        for (const el of this._elements) {
+            const htmlElement =
+                '<input type="radio" id="' + this.IdFor(i) + '" name="radiogroup-' + this.id + '">' +
+                '<label for="' + this.IdFor(i) + '">' + el.Render() + '</label>' +
+                '<br>';
+            body += htmlElement;
+
+            i++;
+        }
+
+        return "<form id='" + this.id + "-form'>" + body + "</form>";
+    }
+
+    public ShowValue(t: T): boolean {
+        if (t === undefined) {
+            return false;
+        }
+        if (!this.IsValid(t)) {
+            return false;
+        }
+        // We check that what is selected matches the previous rendering
+        for (let i = 0; i < this._elements.length; i++) {
+            const e = this._elements[i];
+            if (e.IsValid(t)) {
+                this._selectedElementIndex.setData(i);
+                e.GetValue().setData(t);
+                const radio = document.getElementById(this.IdFor(i));
+                // @ts-ignore
+                radio?.checked = true;
+                return;
+            }
+
+        }
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        const self = this;
+
+        function checkButtons() {
+            for (let i = 0; i < self._elements.length; i++) {
+                const el = document.getElementById(self.IdFor(i));
+                // @ts-ignore
+                if (el.checked) {
+                    self._selectedElementIndex.setData(i);
+                }
+            }
+        }
+
+
+        const el = document.getElementById(this.id);
+        el.addEventListener("change",
+            function () {
+                checkButtons();
+            }
+        );
+        if (this._selectedElementIndex.data !== null) {
+            const el = document.getElementById(this.IdFor(this._selectedElementIndex.data));
+            if (el) {
+                // @ts-ignore
+                el.checked = true;
+                checkButtons();
+            }
+        } else if (this._selectFirstAsDefault) {
+            this.ShowValue(this.value.data);
+            if (this._selectedElementIndex.data === null || this._selectedElementIndex.data === undefined) {
+                const el = document.getElementById(this.IdFor(0));
+                if (el) {
+                    // @ts-ignore
+                    el.checked = true;
+                    checkButtons();
+                }
+            }
+        }
+
+
+    };
+
+
+}

UI/Input/TextField.ts

@@ -0,0 +1,119 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../UIEventSource";
+import {InputElement} from "./InputElement";
+import {FixedUiElement} from "../Base/FixedUiElement";
+import Translations from "../i18n/Translations";
+
+
+export class TextField<T> extends InputElement<T> {
+
+    private value: UIEventSource<string>;
+    private mappedValue: UIEventSource<T>;
+    /**
+     * Pings and has the value data
+     */
+    public enterPressed = new UIEventSource<string>(undefined);
+    private _placeholder: UIElement;
+    private _fromString?: (string: string) => T;
+    private _toString: (t: T) => string;
+
+    constructor(options: {
+        placeholder?: string | UIElement,
+        toString: (t: T) => string,
+        fromString: (string: string) => T,
+        value?: UIEventSource<T>
+    }) {
+        super(undefined);
+        const self = this;
+        this.value = new UIEventSource<string>("");
+
+        this.mappedValue = options?.value ?? new UIEventSource<T>(undefined);
+        this.mappedValue.addCallback(() => self.InnerUpdate());
+
+        // @ts-ignore
+        this._fromString = options.fromString ?? ((str) => (str))
+        this.value.addCallback((str) => this.mappedValue.setData(options.fromString(str)));
+        this.mappedValue.addCallback((t) => this.value.setData(options.toString(t)));
+
+
+        this._placeholder = Translations.W(options.placeholder ?? "");
+        this.ListenTo(this._placeholder._source);
+        this._toString = options.toString ?? ((t) => ("" + t));
+
+
+        this.mappedValue.addCallback((t) => {
+            if (t === undefined || t === null) {
+                return;
+            }
+            const field = document.getElementById('text-' + this.id);
+            if (field === undefined || field === null) {
+                return;
+            }
+            // @ts-ignore
+            field.value = options.toString(t);
+        })
+    }
+
+    GetValue(): UIEventSource<T> {
+        return this.mappedValue;
+    }
+
+    ShowValue(t: T): boolean {
+        if (!this.IsValid(t)) {
+            return false;
+        }
+        this.mappedValue.setData(t);
+    }
+
+    InnerRender(): string {
+        return "<form onSubmit='return false' class='form-text-field'>" +
+            "<input type='text' placeholder='" + this._placeholder.InnerRender() + "' id='text-" + this.id + "'>" +
+            "</form>";
+    }
+
+    InnerUpdate() {
+        const field = document.getElementById('text-' + this.id);
+        if (field === null) {
+            return;
+        }
+        const self = this;
+        field.oninput = () => {
+            // @ts-ignore
+            self.value.setData(field.value);
+        };
+
+        field.addEventListener("keyup", function (event) {
+            if (event.key === "Enter") {
+                // @ts-ignore
+                self.enterPressed.setData(field.value);
+            }
+        });
+
+        if (this.IsValid(this.mappedValue.data)) {
+            const expected = this._toString(this.mappedValue.data);
+            // @ts-ignore
+            if (field.value !== expected) {
+                // @ts-ignore
+                field.value = expected;
+            }
+        }
+
+
+    }
+
+    IsValid(t: T): boolean {
+        if(t === undefined || t === null){
+            return false;
+        }
+        const result = this._toString(t);
+        return result !== undefined && result !== null;
+    }
+
+    Clear() {
+        const field = document.getElementById('text-' + this.id);
+        if (field !== undefined) {
+            // @ts-ignore
+            field.value = "";
+        }
+    }
+}

UI/PendingChanges.ts

@@ -21,7 +21,7 @@ export class PendingChanges extends UIElement {
         })
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         if (this._isSaving.data) {
             return "<span class='alert'>Saving</span>";
         }

UI/SaveButton.ts

@@ -1,5 +1,6 @@
 import {UIEventSource} from "./UIEventSource";
 import {UIElement} from "./UIElement";
+import Translations from "./i18n/Translations";
 
 export class SaveButton extends UIElement {
     private _value: UIEventSource<any>;
@@ -12,14 +13,14 @@ export class SaveButton extends UIElement {
         this._value = value;
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         if (this._value.data === undefined ||
             this._value.data === null
             || this._value.data === ""
         ) {
-            return "<span class='save-non-active'>Opslaan</span>"
+            return "<span class='save-non-active'>"+Translations.t.general.save.Render()+"</span>"
         }
-        return "<span class='save'>Opslaan</span>";
+        return "<span class='save'>"+Translations.t.general.save.Render()+"</span>";
     }
 
 }

UI/SearchAndGo.ts

@@ -1,15 +1,26 @@
 import {UIElement} from "./UIElement";
-import {TextField} from "./Base/TextField";
+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 Translations from "./i18n/Translations";
 
 
 export class SearchAndGo extends UIElement {
 
-    private _placeholder = new UIEventSource("Zoek naar een locatie...")
+    private _placeholder = new UIEventSource<Translation>(Translations.t.general.search.search)
-    private _searchField = new TextField(this._placeholder);
+    private _searchField = new TextField<string>({
+            placeholder: new VariableUiElement(
+                this._placeholder.map(uiElement => uiElement.InnerRender(), [Locale.language])
+            ),
+            fromString: str => str,
+            toString: str => str
+        }
+    );
 
     private _foundEntries = new UIEventSource([]);
     private _map: Basemap;
@@ -33,14 +44,14 @@ export class SearchAndGo extends UIElement {
 
     // Triggered by 'enter' or onclick
     private RunSearch() {
-        const searchString = this._searchField.value.data;
+        const searchString = this._searchField.GetValue().data;
         this._searchField.Clear();
-        this._placeholder.setData("Bezig met zoeken...");
+        this._placeholder.setData(Translations.t.general.search.searching);
         const self = this;
         Geocoding.Search(searchString, this._map, (result) => {
 
                 if (result.length == 0) {
-                    this._placeholder.setData("Niets gevonden");
+                    this._placeholder.setData(Translations.t.general.search.nothing);
                     return;
                 }
 
@@ -50,16 +61,15 @@ export class SearchAndGo extends UIElement {
                     [bb[1], bb[3]]
                 ]
                 self._map.map.fitBounds(bounds);
-                this._placeholder.setData("Zoek naar een locatie...");
+                this._placeholder.setData(Translations.t.general.search.search);
             },
             () => {
-                this._placeholder.setData("Niets gevonden: er ging iets mis");
+                this._placeholder.setData(Translations.t.general.search.error);
             });
 
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
-        // "<img class='search' src='./assets/search.svg' alt='Search'> " +
         return this._searchField.Render() +
             this._goButton.Render();
 

UI/SimpleAddUI.ts

@@ -42,7 +42,7 @@ export class SimpleAddUI extends UIElement {
             // <button type='button'> looks SO retarded
             // the default type of button is 'submit', which performs a POST and page reload
             const button =
-                new Button(new FixedUiElement("Voeg hier een " + option.name + " toe"),
+                new Button(new FixedUiElement("Add a " + option.name + " here"),
                     this.CreatePoint(option));
             this._addButtons.push(button);
         }
@@ -60,19 +60,19 @@ export class SimpleAddUI extends UIElement {
         }
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
-        const header = "<h2>Geen selectie</h2>" +
+        const header = "<h2>No data here</h2>" +
-            "Je klikte ergens waar er nog geen gezochte data is.<br/>";
+            "You clicked somewhere where no data is known yet.<br/>";
         if (!this._userDetails.data.loggedIn) {
-            return header + "<a class='activate-osm-authentication'>Gelieve je aan te melden om een nieuw punt toe te voegen</a>"
+            return header + "<a class='activate-osm-authentication'>Please log in to add a new point</a>"
         }
 
         if (this._zoomlevel.data.zoom < 19) {
-            return header + "Zoom verder in om een element toe te voegen.";
+            return header + "Zoom in further to add a point.";
         }
 
         if (this._dataIsLoading.data) {
-            return header + "De data is nog aan het laden. Nog even geduld, dan kan je een punt toevoegen";
+            return header + "The data is still loading. Please wait a bit before you add a new point";
         }
 
         var html = "";
@@ -83,10 +83,6 @@ export class SimpleAddUI extends UIElement {
     }
 
     InnerUpdate(htmlElement: HTMLElement) {
-        super.InnerUpdate(htmlElement);
-        for (const button of this._addButtons) {
-            button.Update();
-        }
         this._userDetails.data.osmConnection.registerActivateOsmAUthenticationClass();
     }
 

UI/UIElement.ts

@@ -1,5 +1,4 @@
 import {UIEventSource} from "./UIEventSource";
-import instantiate = WebAssembly.instantiate;
 
 export abstract class UIElement {
     
@@ -20,12 +19,13 @@ export abstract class UIElement {
 
     public ListenTo(source: UIEventSource<any>) {
         if (source === undefined) {
-            return;
+            return this;
         }
         const self = this;
         source.addCallback(() => {
             self.Update();
         })
+        return this;
     }
 
     private _onClick: () => void;
@@ -38,11 +38,10 @@ export abstract class UIElement {
     
     Update(): void {
         let element = document.getElementById(this.id);
-        if (element === null || element === undefined) {
+        if (element === undefined || element === null) {
             // The element is not painted
             return;
         }
-
         element.innerHTML = this.InnerRender();
         if (this._hideIfEmpty) {
             if (element.innerHTML === "") {
@@ -84,7 +83,8 @@ export abstract class UIElement {
     }
     
     // Called after the HTML has been replaced. Can be used for css tricks
-    InnerUpdate(htmlElement : HTMLElement){}
+   protected InnerUpdate(htmlElement: HTMLElement) {
+   }
 
     Render(): string {
         return "<span class='uielement' id='" + this.id + "'>" + this.InnerRender() + "</span>"
@@ -93,15 +93,14 @@ export abstract class UIElement {
     AttachTo(divId: string) {
         let element = document.getElementById(divId);
         if (element === null) {
-            console.log("SEVERE: could not attach UIElement to ", divId);
+            throw "SEVERE: could not attach UIElement to " + divId;
-            return;
         }
         element.innerHTML = this.Render();
         this.Update();
         return this;
     }
 
-    protected abstract InnerRender(): string;
+    public abstract InnerRender(): string;
 
     public Activate(): void {
         for (const i in this) {
@@ -121,5 +120,6 @@ export abstract class UIElement {
     public IsEmpty(): boolean {
         return this.InnerRender() === "";
     }
-
 }
+
+

UI/UIEventSource.ts

@@ -27,6 +27,23 @@ export class UIEventSource<T>{
         }
     }
 
+    public static flatten<X>(source: UIEventSource<UIEventSource<X>>, possibleSources: UIEventSource<any>[]): UIEventSource<X> {
+        const sink = new UIEventSource<X>(source.data?.data);
+
+        source.addCallback((latestData) => {
+           sink.setData(latestData?.data);
+        });
+
+        for (const possibleSource of possibleSources) {
+            possibleSource.addCallback(() => {
+                sink.setData(source.data?.data);
+                
+            })
+        }
+        
+        return sink;
+    }
+    
     public map<J>(f: ((T) => J),
                   extraSources: UIEventSource<any>[] = []): UIEventSource<J> {
         const self = this;
@@ -50,4 +67,15 @@ export class UIEventSource<T>{
     }
 
     
+    public syncWith(otherSource: UIEventSource<T>){
+        this.addCallback((latest) => otherSource.setData(latest));
+        const self = this;
+        otherSource.addCallback((latest) => self.setData(latest));
+        if(this.data === undefined){
+           this.setData(otherSource.data);
+        }else{
+            otherSource.setData(this.data);
+        }
+    }
+
 }

UI/UserBadge.ts

@@ -5,6 +5,7 @@ import {Basemap} from "../Logic/Basemap";
 import L from "leaflet";
 import {FixedUiElement} from "./Base/FixedUiElement";
 import {VariableUiElement} from "./Base/VariableUIElement";
+import Translations from "./i18n/Translations";
 
 /**
  * Handles and updates the user badge
@@ -15,12 +16,15 @@ export class UserBadge extends UIElement {
     private _logout: UIElement;
     private _basemap: Basemap;
     private _homeButton: UIElement;
+    private _languagePicker: UIElement;
 
 
     constructor(userDetails: UIEventSource<UserDetails>,
                 pendingChanges: UIElement,
+                languagePicker: UIElement,
                 basemap: Basemap) {
         super(userDetails);
+        this._languagePicker = languagePicker;
         this._userDetails = userDetails;
         this._pendingChanges = pendingChanges;
         this._basemap = basemap;
@@ -57,10 +61,10 @@ export class UserBadge extends UIElement {
 
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         const user = this._userDetails.data;
         if (!user.loggedIn) {
-            return "<div class='activate-osm-authentication'>Klik hier om aan te melden bij OSM</div>";
+            return "<div class='activate-osm-authentication'>" + Translations.t.general.loginWithOpenStreetMap.R()+ "</div>";
         }
         
         
@@ -113,6 +117,7 @@ export class UserBadge extends UIElement {
             "   <a href='https://www.openstreetmap.org/user/" + user.name + "/history' target='_blank'><img class='small-userbadge-icon' src='./assets/star.svg' alt='star'/> " + user.csCount +
             "</a></span> " +
             this._logout.Render() +
+            this._languagePicker.Render() +
             this._pendingChanges.Render() +
             "</p>" +
        

UI/i18n/Locale.ts

@@ -0,0 +1,24 @@
+import {UIEventSource} from "../UIEventSource";
+import {OsmConnection} from "../../Logic/OsmConnection";
+
+
+export default class Locale {
+    public static language: UIEventSource<string> = Locale.getInitialLanguage();
+
+    private static getInitialLanguage() {
+        // The key to save in local storage
+        const LANGUAGE_KEY = 'language'
+
+        const lng = new UIEventSource("en");
+        const saved = localStorage.getItem(LANGUAGE_KEY);
+        lng.setData(saved);
+
+
+        lng.addCallback(data => {
+            console.log("Selected language", data);
+            localStorage.setItem(LANGUAGE_KEY, data)
+        });
+
+        return lng;
+    }
+}

UI/i18n/Translation.ts

@@ -0,0 +1,39 @@
+import { UIElement } from "../UIElement"
+import Locale from "./Locale"
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+
+export default class Translation extends UIElement {
+    get txt(): string {
+        const txt = this.translations[Locale.language.data];
+        if (txt !== undefined) {
+            return txt;
+        }
+        const en = this.translations["en"];
+        console.warn("No translation for language ", Locale.language.data, "for", en);
+        if (en !== undefined) {
+            return en;
+        }
+        for (const i in this.translations) {
+            return this.translations[i]; // Return a random language
+        }
+        return "Missing translation"
+    }
+
+    InnerRender(): string {
+        return this.txt
+    }
+
+    public readonly translations: object
+
+    constructor(translations: object) {
+        super(Locale.language)
+        this.translations = translations
+    }
+
+
+    public R(): string {
+        return new Translation(this.translations).Render();
+    }
+
+}

UI/i18n/Translations.ts

@@ -0,0 +1,371 @@
+import Translation from "./Translation";
+import T from "./Translation";
+import {UIElement} from "../UIElement";
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+
+export default class Translations {
+    static t = {
+        cyclofix: {
+            title: new T({
+                en: 'Cyclofix bicycle infrastructure',
+                nl: 'Cyclofix fietsinfrastructuur',
+                fr: 'TODO: FRENCH TRANSLATION'
+            }),
+            description: new T({
+                en: "On this map we want to collect data about the whereabouts of bicycle pumps and public racks in Brussels." +
+                    "As a result, cyclists will be able to quickly find the nearest infrastructure for their needs.",
+                nl: "Op deze kaart willen we gegevens verzamelen over de locatie van fietspompen en openbare stelplaatsen in Brussel." +
+                    "Hierdoor kunnen fietsers snel de dichtstbijzijnde infrastructuur vinden die voldoet aan hun behoeften.",
+                fr: "Sur cette carte, nous voulons collecter des données sur la localisation des pompes à vélo et des supports publics à Bruxelles." +
+                    "Les cyclistes pourront ainsi trouver rapidement l'infrastructure la plus proche de leurs besoins."
+            }),
+            freeFormPlaceholder: new T({en: 'specify', nl: 'specifieer', fr: 'TODO: fr'}),
+            parking: {
+                name: new T({en: 'bike parking', nl: 'fietsparking', fr: 'TODO: fr'}),
+                title: new T({en: 'Bike parking', nl: 'Fietsparking', fr: 'TODO: fr'}),
+                type: {
+                    render: new T({
+                        en: 'This is a bicycle parking of the type: {bicycle_parking}',
+                        nl: 'Dit is een fietsenparking van het type: {bicycle_parking}',
+                        fr: 'TODO: fr'
+                    }),
+                    template: new T({en: 'Some other type: $$$', nl: 'Een ander type: $$$', fr: 'TODO: fr'}),
+                    question: new T({
+                        en: 'What is the type of this bicycle parking?',
+                        nl: 'Van welk type is deze fietsenparking?',
+                        fr: 'TODO: fr'
+                    }),
+                    eg: new T({en: ", for example", nl: ", bijvoorbeeld"}),
+                    stands: new T({en: 'Staple racks', nl: 'Nietjes', fr: 'TODO: fr'}),
+                    wall_loops: new T({en: 'Wheel rack/loops', nl: 'Wielrek/lussen', fr: 'TODO: fr'}),
+                    handlebar_holder: new T({en: 'Handlebar holder', nl: 'Stuurhouder', fr: 'TODO: fr'}),
+                    shed: new T({en: 'Shed', nl: 'Schuur', fr: 'TODO: fr'}),
+                    rack: new T({en: 'Rack', nl: 'Rek', fr: 'TODO: fr'}),
+                    "two-tier": new T({en: 'Two-tiered', nl: 'Dubbel (twee verdiepingen)', fr: 'TODO: fr'}),
+                },
+
+                operator: {
+                    render: new T({
+                        en: 'This bike parking is operated by {operator}',
+                        nl: 'Deze fietsenparking wordt beheerd door {operator}',
+                        fr: 'TODO: fr'
+                    }),
+                    template: new T({en: 'A different operator: $$$', nl: 'Een andere beheerder: $$$', fr: 'TODO: fr'}),
+                    question: new T({
+                        en: 'Who operates this bike station (name of university, shop, city...)?',
+                        nl: 'Wie beheert deze fietsenparking (naam universiteit, winkel, stad...)?',
+                        fr: 'TODO: fr'
+                    }),
+                    private: new T({
+                        en: 'Operated by a private person',
+                        nl: 'Wordt beheerd door een privépersoon',
+                        fr: 'TODO: fr'
+                    }),
+                }
+            },
+            station: {
+                name: new T({
+                    en: 'bike station (repair, pump or both)',
+                    nl: 'fietsstation (herstel, pomp of allebei)',
+                    fr: 'TODO: fr'
+                }),
+                title: new T({en: 'Bike station', nl: 'Fietsstation', fr: 'TODO: fr'}),
+                manometer: {
+                    question: new T({
+                        en: 'Does the pump have a pressure indicator or manometer?',
+                        nl: 'Heeft deze pomp een luchtdrukmeter?',
+                        fr: 'TODO: fr'
+                    }),
+                    yes: new T({en: 'There is a manometer', nl: 'Er is een luchtdrukmeter', fr: 'TODO: fr'}),
+                    no: new T({en: 'There is no manometer', nl: 'Er is geen luchtdrukmeter', fr: 'TODO: fr'}),
+                    broken: new T({
+                        en: 'There is manometer but it is broken',
+                        nl: 'Er is een luchtdrukmeter maar die is momenteel defect',
+                        fr: 'TODO: fr'
+                    })
+                },
+                electric: {
+                    question: new T({
+                        en: 'Is this an electric bike pump?',
+                        nl: 'Is dit een electrische fietspomp?',
+                        fr: 'TODO: fr'
+                    }),
+                    manual: new T({en: 'Manual pump', nl: 'Manuele pomp', fr: 'TODO: fr'}),
+                    electric: new T({en: 'Electrical pump', nl: 'Electrische pomp', fr: 'TODO: fr'})
+                },
+                operational: {
+                    question: new T({
+                        en: 'Is the bike pump still operational?',
+                        nl: 'Werkt de fietspomp nog?',
+                        fr: 'TODO: fr'
+                    }),
+                    operational: new T({
+                        en: 'The bike pump is operational',
+                        nl: 'De fietspomp werkt nog',
+                        fr: 'TODO: fr'
+                    }),
+                    broken: new T({en: 'The bike pump is broken', nl: 'De fietspomp is kapot', fr: 'TODO: fr'})
+                },
+                valves: {
+                    question: new T({
+                        en: 'What valves are supported?',
+                        nl: 'Welke ventielen werken er met de pomp?',
+                        fr: 'TODO: fr'
+                    }),
+                    default: new T({
+                        en: 'There is a default head, so Dunlop, Sclaverand and auto',
+                        nl: 'Er is een standaard aansluiting, die dus voor Dunlop, Sclaverand en auto\'s werkt',
+                        fr: 'TODO: fr'
+                    }),
+                    dunlop: new T({en: 'Only Dunlop', nl: 'Enkel Dunlop', fr: 'TODO: fr'}),
+                    sclaverand: new T({
+                        en: 'Only Sclaverand (also known as Presta)',
+                        nl: 'Enkel Sclaverand (ook gekend als Presta)',
+                        fr: 'TODO: fr'
+                    }),
+                    auto: new T({en: 'Only for cars', nl: 'Enkel voor auto\'s', fr: 'TODO: fr'}),
+                    render: new T({
+                        en: 'This pump supports the following valves: {valves}',
+                        nl: 'Deze pomp werkt met de volgende ventielen: {valves}',
+                        fr: 'TODO: fr'
+                    }),
+                    template: new T({
+                        en: 'Some other valve(s): $$$',
+                        nl: 'Een ander type ventiel(en): $$$',
+                        fr: 'TODO: fr'
+                    })
+                },
+                chain: {
+                    question: new T({
+                        en: 'Does this bike station have a special tool to repair your bike chain?',
+                        nl: 'Heeft dit fietsstation een speciale reparatieset voor je ketting?',
+                        fr: 'TODO: fr'
+                    }),
+                    yes: new T({
+                        en: 'There is a chain tool',
+                        nl: 'Er is een reparatieset voor je ketting',
+                        fr: 'TODO: fr'
+                    }),
+                    no: new T({
+                        en: 'There is no chain tool',
+                        nl: 'Er is geen reparatieset voor je ketting',
+                        fr: 'TODO: fr'
+                    }),
+                },
+                operator: {
+                    render: new T({
+                        en: 'This bike station is operated by {operator}',
+                        nl: 'Dit fietsstation wordt beheerd door {operator}',
+                        fr: 'TODO: fr'
+                    }),
+                    template: new T({en: 'A different operator: $$$', nl: 'Een andere beheerder: $$$', fr: 'TODO: fr'}),
+                    question: new T({
+                        en: 'Who operates this bike station (name of university, shop, city...)?',
+                        nl: 'Wie beheert dit fietsstation (naam universiteit, winkel, stad...)?',
+                        fr: 'TODO: fr'
+                    }),
+                    private: new T({
+                        en: 'Operated by a private person',
+                        nl: 'Wordt beheerd door een privépersoon',
+                        fr: 'TODO: fr'
+                    }),
+                },
+                services: {
+                    question: new T({
+                        en: 'Which services are available at this bike station?',
+                        nl: 'Welke functies biedt dit fietsstation?',
+                        fr: 'TODO: fr'
+                    }),
+                    pump: new T({
+                        en: 'There is only a pump available',
+                        nl: 'Er is enkel een pomp beschikbaar',
+                        fr: 'TODO: fr'
+                    }),
+                    tools: new T({
+                        en: 'There are only tools (screwdrivers, pliers...) available',
+                        nl: 'Er is enkel gereedschap beschikbaar (schroevendraaier, tang...)',
+                        fr: 'TODO: fr'
+                    }),
+                    both: new T({
+                        en: 'There are both tools and a pump available',
+                        nl: 'Er is zowel een pomp als gereedschap beschikbaar',
+                        fr: 'TODO: fr'
+                    }),
+                },
+                stand: {
+                    question: new T({
+                        en: 'Does this bike station have a hook to suspend your bike with or a stand to elevate it?',
+                        nl: 'Heeft dit fietsstation een haak of standaard om je fiets op te hangen/zetten?',
+                        fr: 'TODO: fr'
+                    }),
+                    yes: new T({en: 'There is a hook or stand', nl: 'Er is een haak of standaard', fr: 'TODO: fr'}),
+                    no: new T({en: 'There is no hook or stand', nl: 'Er is geen haak of standaard', fr: 'TODO: fr'}),
+                }
+            },
+            shop: {
+                name: new T({en: 'bike shop', nl: 'fietswinkel', fr: 'TODO: fr'}),
+                title: new T({en: 'Bike repair/shop', nl: 'Fietswinkel/herstelling', fr: 'TODO: fr'}),
+                titleRepair: new T({en: 'Bike shop', nl: 'Fietswinkel', fr: 'TODO: fr'}),
+                retail: {
+                    question: new T({
+                        en: 'Does this shop sell bikes?',
+                        nl: 'Verkoopt deze winkel fietsen?',
+                        fr: 'TODO: fr'
+                    }),
+                    yes: new T({en: 'This shop sells bikes', nl: 'Deze winkel verkoopt fietsen', fr: 'TODO: fr'}),
+                    no: new T({
+                        en: 'This shop doesn\'t sell bikes',
+                        nl: 'Deze winkel verkoopt geen fietsen',
+                        fr: 'TODO: fr'
+                    }),
+                },
+                repair: {
+                    question: new T({
+                        en: 'Does this shop repair bikes?',
+                        nl: 'Verkoopt deze winkel fietsen?',
+                        fr: 'TODO: fr'
+                    }),
+                    yes: new T({en: 'This shop repairs bikes', nl: 'Deze winkel herstelt fietsen', fr: 'TODO: fr'}),
+                    no: new T({
+                        en: 'This shop doesn\'t repair bikes',
+                        nl: 'Deze winkel herstelt geen fietsen',
+                        fr: 'TODO: fr'
+                    }),
+                    sold: new T({en: 'This shop only repairs bikes bought here', nl: 'Deze winkel herstelt enkel fietsen die hier werden gekocht', fr: 'TODO: fr'}),
+                    brand: new T({en: 'This shop only repairs bikes of a certain brand', nl: 'Deze winkel herstelt enkel fietsen van een bepaald merk', fr: 'TODO: fr'}),
+                },
+                rental: {
+                    question: new T({
+                        en: 'Does this shop rent out bikes?',
+                        nl: 'Verhuurt deze winkel fietsen?',
+                        fr: 'TODO: fr'
+                    }),
+                    yes: new T({en: 'This shop rents out bikes', nl: 'Deze winkel verhuurt fietsen', fr: 'TODO: fr'}),
+                    no: new T({
+                        en: 'This shop doesn\'t rent out bikes',
+                        nl: 'Deze winkel verhuurt geen fietsen',
+                        fr: 'TODO: fr'
+                    }),
+                },
+                pump: {
+                    question: new T({
+                        en: 'Does this shop offer a bike pump for use by anyone?',
+                        nl: 'Biedt deze winkel een fietspomp aan voor iedereen?',
+                        fr: 'TODO: fr'
+                    }),
+                    yes: new T({
+                        en: 'This shop offers a bike pump for anyone',
+                        nl: 'Deze winkel biedt geen fietspomp aan voor eender wie',
+                        fr: 'TODO: fr'
+                    }),
+                    no: new T({
+                        en: 'This shop doesn\'t offer a bike pump for anyone',
+                        nl: 'Deze winkel biedt een fietspomp aan voor iedereen',
+                        fr: 'TODO: fr'
+                    })
+                },
+                qName: {
+                    question: new T({en: 'What is the name of this bicycle shop?', nl: 'Wat is de naam van deze fietswinkel?', fr: 'TODO: fr'}),
+                    render: new T({en: 'This bicycle shop is called {name}', nl: 'Deze fietswinkel heet {name}', fr: 'TODO: fr'}),
+                    template: new T({en: 'This bicycle shop is called: $$$', nl: 'Deze fietswinkel heet: $$$', fr: 'TODO: fr'})
+                },
+                secondHand: {
+                    question: new T({en: 'Does this shop sell second-hand bikes?', nl: 'Verkoopt deze winkel tweedehands fietsen?', fr: 'TODO: fr'}),
+                    yes: new T({en: 'This shop sells second-hand bikes', nl: 'Deze winkel verkoopt tweedehands fietsen', fr: 'TODO: fr'}),
+                    no: new T({en: 'This shop doesn\'t sell second-hand bikes', nl: 'Deze winkel verkoopt geen tweedehands fietsen', fr: 'TODO: fr'}),
+                    only: new T({en: 'This shop only sells second-hand bikes', nl: 'Deze winkel verkoopt enkel tweedehands fietsen', fr: 'TODO: fr'}),
+                },
+                diy: {
+                    question: new T({en: 'Are there tools here to repair your own bike?', nl: 'Biedt deze winkel gereedschap aan om je fiets zelf te herstellen?', fr: 'TODO: fr'}),
+                    yes: new T({en: 'This shop offers tools for DIY repair', nl: 'Deze winkel biedt gereedschap aan om je fiets zelf te herstellen', fr: 'TODO: fr'}),
+                    no: new T({en: 'This shop doesn\'t offer tools for DIY repair', nl: 'Deze winkel biedt geen gereedschap aan om je fiets zelf te herstellen', fr: 'TODO: fr'}),
+                }
+            }
+        },
+        image: {
+            addPicture: new T({en: 'Add picture', nl: 'Voeg foto toe', fr: 'TODO: fr'}),
+            uploadingPicture: new T({
+                en: 'Uploading your picture...',
+                nl: 'Bezig met een foto te uploaden...',
+                fr: 'TODO: fr'
+            }),
+            pleaseLogin: new T({
+                en: 'Please login to add a picure or to answer questions',
+                nl: 'Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden',
+                fr: 'TODO: fr'
+            }),
+            willBePublished: new T({
+                en: 'Your picture will be published: ',
+                nl: 'Jouw foto wordt gepubliceerd: ',
+                fr: 'TODO: fr'
+            }),
+            cco: new T({en: 'in the public domain', nl: 'in het publiek domein', fr: 'TODO: fr'}),
+            ccbs: new T({en: 'under the CC-BY-SA-license', nl: 'onder de CC-BY-SA-licentie', fr: 'TODO: fr'}),
+            ccb: new T({en: 'under the CC-BY-license', nl: 'onder de CC-BY-licentie', fr: 'TODO: fr'})
+        },
+        centerMessage: {
+            loadingData: new T({en: 'Loading data...', nl: 'Data wordt geladen...', fr: 'TODO: fr'}),
+            zoomIn: new T({
+                en: 'Zoom in to view or edit the data',
+                nl: 'Zoom in om de data te zien en te bewerken',
+                fr: 'TODO: fr'
+            }),
+            ready: new T({en: 'Done!', nl: 'Klaar!', fr: 'TODO: fr'}),
+        },
+        general: {
+            loginWithOpenStreetMap: new T({en: "Login with OpenStreetMap", nl: "Aanmelden met OpenStreetMap"}),
+            getStarted: new T({
+                en: "<span class='activate-osm-authentication'>Login with OpenStreetMap</span> or <a href='https://www.openstreetmap.org/user/new' target='_blank'>make a free account to get started</a>",
+                nl: "<span class='activate-osm-authentication'>Meld je aan met je OpenStreetMap-account</span> of <a href='https://www.openstreetmap.org/user/new' target='_blank'>maak snel en gratis een account om te beginnen/a>",
+            }),
+            welcomeBack: new T({
+                en: "You are logged in, welcome back!",
+                nl: "Je bent aangemeld. Welkom terug!"
+            }),
+            search: {
+                search: new Translation({
+                    en: "Search a location",
+                    nl: "Zoek naar een locatie"
+                }),
+                searching: new Translation({
+                    en: "Searching...",
+                    nl: "Aan het zoeken..."
+                }),
+                nothing: new Translation({
+                    en: "Nothing found...",
+                    nl: "Niet gevonden..."
+                }),
+                error: new Translation({
+                    en: "Something went wrong...",
+                    nl: "Niet gelukt..."
+                })
+
+            },
+            returnToTheMap: new T({
+                en: "Return to the map",
+                nl: "Naar de kaart"
+            }),
+            save: new T({
+                en: "Save",
+                nl: "Opslaan"
+            }),
+            cancel: new T({
+                en: "Cancel",
+                nl: "Annuleren"
+            }),
+            skip: new T({
+                en: "Skip this question",
+                nl: "Vraag overslaan"
+            })
+        }   
+    }
+
+    public static W(s: string | UIElement): UIElement {
+        if (s instanceof UIElement) {
+            return s;
+        }
+        return new FixedUiElement(s);
+    }
+
+}

assets/bike/broken_pump.svg

@@ -9,9 +9,10 @@
 <rect x="34.3118" y="72.5698" width="28" height="5" fill="white"/>
 <rect x="65.3118" y="60.5698" width="4" height="8" fill="white"/>
 <rect x="68.3118" y="64.5699" width="3" height="4" fill="white"/>
-<rect x="66" y="72.2385" width="21.8167" height="3.68967" transform="rotate(-44.3049 66 72.2385)" fill="#F00D0D"/>
+<rect x="56" y="42" width="5" height="10" fill="#171615"/>
 </g>
-<rect x="68.4303" y="56.8712" width="22.1163" height="3.52552" transform="rotate(43.5782 68.4303 56.8712)" fill="#F00D0D"/>
+<rect x="72.4167" y="53.8615" width="29.0549" height="7.85787" transform="rotate(43.5782 72.4167 53.8615)" fill="#F00D0D"/>
+<path d="M68.2141 73.9097L88.6128 54L94.0003 59.5199L73.6016 79.4295L68.2141 73.9097Z" fill="#F00D0D"/>
 <defs>
 <filter id="filter0_d" x="-3" y="2" width="102.479" height="102.479" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>

assets/bike/drinking_water.svg

@@ -0,0 +1,18 @@
+<svg width="98" height="124" viewBox="0 0 98 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55.0445 114.094C53.2614 117.981 47.7386 117.981 45.9555 114.094L15.2124 47.085C13.6928 43.7729 16.1129 40 19.7569 40L81.2431 40C84.8871 40 87.3072 43.7729 85.7876 47.085L55.0445 114.094Z" fill="#6BC4F7"/>
+<circle cx="49" cy="49" r="49" fill="#6BC4F7"/>
+<g filter="url(#filter0_d)">
+<path d="M79 41.8705C79 39.3976 77.4079 35.6726 74.1327 30.4823C71.8064 26.7956 69.5171 23.8005 69.4208 23.6747C69.0964 23.2513 68.5726 23 68.0144 23C67.4562 23 66.9322 23.2514 66.6078 23.6748C66.3787 23.9738 61.828 29.939 59.0942 35.3688C54.8849 28.8794 50.9494 23.7307 50.9067 23.6748C50.5821 23.2513 50.0582 23 49.5 23C48.9418 23 48.4179 23.2513 48.0934 23.6747C48.0468 23.7357 43.367 29.8581 38.753 37.1701C38.2587 37.9536 37.7856 38.7192 37.3295 39.4706C34.9483 35.6504 32.5162 32.4661 32.3922 32.3043C32.0677 31.8809 31.5438 31.6296 30.9856 31.6296C30.4274 31.6296 29.9036 31.8809 29.5791 32.3043C29.4828 32.43 27.1935 35.4252 24.8672 39.1119C21.5921 44.3021 20 48.0271 20 50.5C20 55.6193 24.0504 59.8732 29.3205 60.6234C30.1402 70.3329 38.8775 78 49.5 78C60.6619 78 69.7429 69.5347 69.7429 59.1295C69.7429 57.2539 69.2077 54.9089 68.1449 52.1097C74.1423 52.0443 79 47.4766 79 41.8705V41.8705ZM23.457 50.5C23.457 49.457 24.0257 46.8053 27.8344 40.7656C28.9755 38.9562 30.126 37.2947 30.9856 36.0929C32.1576 37.7318 33.8718 40.2278 35.3741 42.8008C31.9223 48.9002 29.9183 53.7824 29.3954 57.3607C26.0053 56.6784 23.457 53.8613 23.457 50.5V50.5ZM49.5 74.7773C40.2443 74.7773 32.7142 67.7578 32.7142 59.1295C32.7142 56.3792 34.2766 50.6239 41.7201 38.8241C44.7375 34.0407 47.784 29.7745 49.5 27.4354C51.213 29.7702 54.2519 34.0258 57.2673 38.8042C64.7212 50.6167 66.2857 56.3773 66.2857 59.1296C66.2858 67.7578 58.7557 74.7773 49.5 74.7773V74.7773ZM68.0144 48.8887C67.5836 48.8887 67.156 48.8549 66.7362 48.7879C65.3713 45.8533 63.5372 42.506 61.2717 38.8163C62.8077 35.0043 66.1199 30.1147 68.0149 27.4638C68.8707 28.6601 70.0148 30.3125 71.153 32.1162C74.9727 38.1694 75.543 40.8257 75.543 41.8705C75.543 45.7402 72.1656 48.8887 68.0144 48.8887V48.8887Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d" x="16" y="23" width="67" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

assets/bike/parking.svg

@@ -2,85 +2,10 @@
 <path d="M52.1412 111.419C50.4633 115.605 44.5366 115.605 42.8588 111.419L24.7014 66.1099C23.385 62.8252 25.8039 59.25 29.3426 59.25L65.6574 59.25C69.1962 59.25 71.615 62.8252 70.2986 66.11L52.1412 111.419Z" fill="#5675DF"/>
 <ellipse cx="48.5" cy="47.5" rx="48.5" ry="47.5" fill="#5675DF"/>
 <g filter="url(#filter0_d)">
-<circle cx="39" cy="66" r="2" stroke="white" stroke-width="2"/>
+<path d="M42.2812 53.1875V71H36.2812V25.5H53.0625C58.0417 25.5 61.9375 26.7708 64.75 29.3125C67.5833 31.8542 69 35.2188 69 39.4062C69 43.8229 67.6146 47.2292 64.8438 49.625C62.0938 52 58.1458 53.1875 53 53.1875H42.2812ZM42.2812 48.2812H53.0625C56.2708 48.2812 58.7292 47.5312 60.4375 46.0312C62.1458 44.5104 63 42.3229 63 39.4688C63 36.7604 62.1458 34.5938 60.4375 32.9688C58.7292 31.3438 56.3854 30.5 53.4062 30.4375H42.2812V48.2812Z" fill="white"/>
 </g>
-<g filter="url(#filter1_d)">
-<path d="M37.375 67H25L31.75 51.4H38.5H43.375H48.625M48.625 51.4L46.75 47H49.375H52M48.625 51.4L49.375 53.4L50.875 56.6L55 67M48.625 51.4L45.0625 57.4L42.925 61M41.5 63.4L42.925 61M34.375 55.8L38.125 64.6L30.625 47L32.875 51.8M40.375 65.4L42.925 61" stroke="white" stroke-width="2"/>
-</g>
-<g filter="url(#filter2_d)">
-<circle cx="23" cy="67" r="9" stroke="white" stroke-width="2"/>
-</g>
-<g filter="url(#filter3_d)">
-<circle cx="55" cy="67" r="9" stroke="white" stroke-width="2"/>
-</g>
-<path d="M61 77V59.0476V55.9524L62.4814 54.4851C64.4301 52.5549 67.5699 52.5549 69.5186 54.4851L71 55.9524V58.4286V77" stroke="white" stroke-width="2"/>
-<line x1="66" y1="53" x2="66" y2="16" stroke="white" stroke-width="2"/>
-<g filter="url(#filter4_d)">
-<circle cx="66" cy="23" r="13" fill="white"/>
-</g>
-<g filter="url(#filter5_d)">
-<circle cx="66" cy="23" r="11" fill="#496DEB"/>
-</g>
-<g filter="url(#filter6_d)">
-<path d="M64.1729 24.9902V30H62.4854V17.2031H67.2051C68.6055 17.2031 69.7012 17.5605 70.4922 18.2754C71.2891 18.9902 71.6875 19.9365 71.6875 21.1143C71.6875 22.3564 71.2979 23.3145 70.5186 23.9883C69.7451 24.6562 68.6348 24.9902 67.1875 24.9902H64.1729ZM64.1729 23.6104H67.2051C68.1074 23.6104 68.7988 23.3994 69.2793 22.9775C69.7598 22.5498 70 21.9346 70 21.1318C70 20.3701 69.7598 19.7607 69.2793 19.3037C68.7988 18.8467 68.1396 18.6094 67.3018 18.5918H64.1729V23.6104Z" fill="white"/>
-</g>
-<line x1="43" y1="78" x2="72" y2="78" stroke="white" stroke-width="2"/>
 <defs>
-<filter id="filter0_d" x="32" y="63" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_d" x="32.2812" y="25.5" width="40.7188" height="53.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-<filter id="filter1_d" x="19.4777" y="46" width="40.4518" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-<filter id="filter2_d" x="9" y="57" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-<filter id="filter3_d" x="41" y="57" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-<filter id="filter4_d" x="49" y="10" width="34" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-<filter id="filter5_d" x="51" y="12" width="30" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-<filter id="filter6_d" x="58.4854" y="17.2031" width="17.2021" height="20.7969" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
 <feOffset dy="4"/>

assets/bike/parking_old.svg

@@ -0,0 +1,93 @@
+<svg width="97" height="123" viewBox="0 0 97 123" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M52.1412 111.419C50.4633 115.605 44.5366 115.605 42.8588 111.419L24.7014 66.1099C23.385 62.8252 25.8039 59.25 29.3426 59.25L65.6574 59.25C69.1962 59.25 71.615 62.8252 70.2986 66.11L52.1412 111.419Z" fill="#5675DF"/>
+<ellipse cx="48.5" cy="47.5" rx="48.5" ry="47.5" fill="#5675DF"/>
+<g filter="url(#filter0_d)">
+<circle cx="39" cy="66" r="2" stroke="white" stroke-width="2"/>
+</g>
+<g filter="url(#filter1_d)">
+<path d="M37.375 67H25L31.75 51.4H38.5H43.375H48.625M48.625 51.4L46.75 47H49.375H52M48.625 51.4L49.375 53.4L50.875 56.6L55 67M48.625 51.4L45.0625 57.4L42.925 61M41.5 63.4L42.925 61M34.375 55.8L38.125 64.6L30.625 47L32.875 51.8M40.375 65.4L42.925 61" stroke="white" stroke-width="2"/>
+</g>
+<g filter="url(#filter2_d)">
+<circle cx="23" cy="67" r="9" stroke="white" stroke-width="2"/>
+</g>
+<g filter="url(#filter3_d)">
+<circle cx="55" cy="67" r="9" stroke="white" stroke-width="2"/>
+</g>
+<path d="M61 77V59.0476V55.9524L62.4814 54.4851C64.4301 52.5549 67.5699 52.5549 69.5186 54.4851L71 55.9524V58.4286V77" stroke="white" stroke-width="2"/>
+<line x1="66" y1="53" x2="66" y2="16" stroke="white" stroke-width="2"/>
+<g filter="url(#filter4_d)">
+<circle cx="66" cy="23" r="13" fill="white"/>
+</g>
+<g filter="url(#filter5_d)">
+<circle cx="66" cy="23" r="11" fill="#496DEB"/>
+</g>
+<g filter="url(#filter6_d)">
+<path d="M64.1729 24.9902V30H62.4854V17.2031H67.2051C68.6055 17.2031 69.7012 17.5605 70.4922 18.2754C71.2891 18.9902 71.6875 19.9365 71.6875 21.1143C71.6875 22.3564 71.2979 23.3145 70.5186 23.9883C69.7451 24.6562 68.6348 24.9902 67.1875 24.9902H64.1729ZM64.1729 23.6104H67.2051C68.1074 23.6104 68.7988 23.3994 69.2793 22.9775C69.7598 22.5498 70 21.9346 70 21.1318C70 20.3701 69.7598 19.7607 69.2793 19.3037C68.7988 18.8467 68.1396 18.6094 67.3018 18.5918H64.1729V23.6104Z" fill="white"/>
+</g>
+<line x1="43" y1="78" x2="72" y2="78" stroke="white" stroke-width="2"/>
+<defs>
+<filter id="filter0_d" x="32" y="63" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="19.4777" y="46" width="40.4518" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter2_d" x="9" y="57" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter3_d" x="41" y="57" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter4_d" x="49" y="10" width="34" height="34" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter5_d" x="51" y="12" width="30" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter6_d" x="58.4854" y="17.2031" width="17.2021" height="20.7969" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

clean.sh

@@ -0,0 +1,12 @@
+#! /bin/bash
+rm *.js
+rm Logic/*.js
+rm Logic/*.js
+rm Logic/*/*.js
+rm Logic/*/*/*.js
+rm UI/*.js
+rm UI/*/*.js
+rm UI/*/*/*.js
+rm Customizations/*.js
+rm Customizations/*/*.js
+rm Customizations/*/*/*.js

index.css

@@ -238,6 +238,13 @@ form {
     height: 1em;
 }
 
+#language-select {
+    pointer-events: all;
+    cursor: pointer;
+    position: absolute;
+    margin-left: 2em;
+    margin-top: 3em;
+}
 
 #messagesbox-wrapper {
 }
@@ -303,23 +310,26 @@ form {
     }
 }
 
-
 #to-the-map {
+    position: relative;
+}
 
+#to-the-map h2{
+    
+    position: absolute;
     height: 4em;
+    
     padding: 0.5em;
     margin: 0;
     
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    
     padding-right: 2em;
+    padding-top: 1em;
+    text-align: center;
     width: 100%;
-    text-align: right;
     color: white;
     background-color: #7ebc6f;
     cursor: pointer;
+    
 }
 
 

index.html

@@ -9,17 +9,22 @@
           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
           crossorigin=""/>
     <link rel="stylesheet" href="./index.css"/>
-    <meta property="og:image" content="https://buurtnatuur.be/assets/BuurtnatuurFront.jpg" />
+    <meta property="og:image" content="/assets/bike/cyclofix.jpeg" />
     <meta property="og:type" content="website" />
-    <meta property="og:title" content="Buurtnatuur.be - samen natuur in kaart brengen" />
+    <meta property="og:title" content="Cyclofix - a map for and by cyclists" />
-    <meta property="og:description" content="Met deze tool kan je natuur in je buurt in kaart brengen en meer informatie geven over je favoriete plekje" />
+    <meta property="og:description" content="With this tool, cyclists can contribute to a map of cycling infrastructure" />
 </head>
 <body>
 <div id="messagesboxmobilewrapper">
     <div id="messagesboxmobile-scroll">
         <div id="messagesboxmobile"></div>
     </div>
-    <div id="to-the-map">Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is blocking it.</div>
+    <div id="to-the-map">
+        <h2 id="to-the-map-h2">
+            Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is
+            blocking it.
+        </h2>
+    </div>
 </div>
 
 <div id="topleft-tools">
@@ -28,6 +33,7 @@
             Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is
             blocking it.
         </div>
+        <div id="language-select"></div>
         <br/>
         <div id="searchbox"></div>
     </div>

index.ts

@@ -11,7 +11,7 @@ import {Tag, TagUtils} from "./Logic/TagsFilter";
 import {FilteredLayer} from "./Logic/FilteredLayer";
 import {LayerUpdater} from "./Logic/LayerUpdater";
 import {UIElement} from "./UI/UIElement";
-import {MessageBoxHandler} from "./UI/MessageBoxHandler";
+import {FullScreenMessageBoxHandler} from "./UI/FullScreenMessageBoxHandler";
 import {Overpass} from "./Logic/Overpass";
 import {FeatureInfoBox} from "./UI/FeatureInfoBox";
 import {GeoLocationHandler} from "./Logic/GeoLocationHandler";
@@ -22,6 +22,14 @@ import {SearchAndGo} from "./UI/SearchAndGo";
 import {CollapseButton} from "./UI/Base/CollapseButton";
 import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
 import {All} from "./Customizations/Layouts/All";
+import Translations from "./UI/i18n/Translations";
+import Translation from "./UI/i18n/Translation";
+import Locale from "./UI/i18n/Locale";
+import {Layout, WelcomeMessage} from "./Customizations/Layout";
+import {DropDown} from "./UI/Input/DropDown";
+import {FixedInputElement} from "./UI/Input/FixedInputElement";
+import {FixedUiElement} from "./UI/Base/FixedUiElement";
+import ParkingType from "./Customizations/Questions/bike/ParkingType";
 
 
 // --------------------- Read the URL parameters -----------------
@@ -83,22 +91,32 @@ if (paramDict.test) {
     dryRun = paramDict.test === "true";
 }
 
-const layoutToUse = AllKnownLayouts.allSets[defaultLayout];
+const layoutToUse: Layout = AllKnownLayouts.allSets[defaultLayout];
 console.log("Using layout: ", layoutToUse.name);
 
-document.title = layoutToUse.title;
+document.title = layoutToUse.title.InnerRender();
+Locale.language.addCallback(e => {
+    document.title = layoutToUse.title.InnerRender();
+})
 
 
 // ----------------- Setup a few event sources -------------
 
 
+// const LanguageSelect = document.getElementById('language-select') as HTMLOptionElement
+// eLanguageSelect.addEventListener('selectionchange')
+
+
 // The message that should be shown at the center of the screen
 const centerMessage = new UIEventSource<string>("");
 
 // The countdown: if set to e.g. ten, it'll start counting down. When reaching zero, changes will be saved. NB: this is implemented later, not in the eventSource
 const secondsTillChangesAreSaved = new UIEventSource<number>(0);
 
-const leftMessage = new UIEventSource<() => UIElement>(undefined);
+// const leftMessage = new UIEventSource<() => UIElement>(undefined);
+
+// This message is shown full screen on mobile devices
+const fullScreenMessage = new UIEventSource<UIElement>(undefined);
 
 const selectedElement = new UIEventSource<any>(undefined);
 
@@ -112,9 +130,19 @@ const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: numb
 
 // ----------------- Prepare the important objects -----------------
 
+const osmConnection = new OsmConnection(dryRun);
+
+
+Locale.language.syncWith(osmConnection.GetPreference("language"));
+
+// @ts-ignore
+window.setLanguage = function (language: string) {
+    Locale.language.setData(language)
+}
+
+
 const saveTimeout = 30000; // After this many milliseconds without changes, saves are sent of to OSM
 const allElements = new ElementStorage();
-const osmConnection = new OsmConnection(dryRun);
 const changes = new Changes(
     "Beantwoorden van vragen met #MapComplete voor vragenset #" + layoutToUse.name,
     osmConnection, allElements);
@@ -137,7 +165,6 @@ const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement(
 
 
 // ------------- Setup the layers -------------------------------
-const controls = {};
 const addButtons: {
     name: string,
     icon: string,
@@ -167,8 +194,6 @@ for (const layer of layoutToUse.layers) {
 
     const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
 
-    controls[layer.name] = flayer.isDisplayed;
-
     const addButton = {
         name: layer.name,
         icon: layer.icon,
@@ -184,8 +209,13 @@ const layerUpdater = new LayerUpdater(bm, minZoom, flayers);
 
 // ------------------ Setup various UI elements ------------
 
+let languagePicker = new DropDown(" ", layoutToUse.supportedLanguages.map(lang => {
+        return {value: lang, shown: lang}
+    }
+), Locale.language).AttachTo("language-select");
 
-new StrayClickHandler(bm, selectedElement, leftMessage, () => {
+
+new StrayClickHandler(bm, selectedElement, fullScreenMessage, () => {
         return new SimpleAddUI(bm.Location,
             bm.LastClickLocation,
             changes,
@@ -197,7 +227,7 @@ new StrayClickHandler(bm, selectedElement, leftMessage, () => {
 );
 
 /**
- * Show the questions and information for the selected element on the leftMessage
+ * Show the questions and information for the selected element on the fullScreen
  */
 selectedElement.addCallback((data) => {
     // Which is the applicable set?
@@ -206,14 +236,16 @@ selectedElement.addCallback((data) => {
         const applicable = layer.overpassFilter.matches(TagUtils.proprtiesToKV(data));
         if (applicable) {
             // This layer is the layer that gives the questions
-            leftMessage.setData(() =>
+
-                new FeatureInfoBox(
+            const featureBox = new FeatureInfoBox(
                 allElements.getElement(data.id),
                 layer.title,
                 layer.elementsToShow,
                 changes,
                 osmConnection.userDetails
-                ));
+            );
+
+            fullScreenMessage.setData(featureBox);
             break;
         }
     }
@@ -224,36 +256,28 @@ selectedElement.addCallback((data) => {
 const pendingChanges = new PendingChanges(
     changes, secondsTillChangesAreSaved,);
 
-new UserBadge(osmConnection.userDetails, pendingChanges, bm)
+new UserBadge(osmConnection.userDetails,
+    pendingChanges,
+    new FixedUiElement(""),
+    bm)
     .AttachTo('userbadge');
 
 new SearchAndGo(bm).AttachTo("searchbox");
 
 new CollapseButton("messagesbox")
     .AttachTo("collapseButton");
-
+new WelcomeMessage(layoutToUse, osmConnection).AttachTo("messagesbox");
-var welcomeMessage = () => {
+fullScreenMessage.setData(
-    return new VariableUiElement(
+    new WelcomeMessage(layoutToUse, osmConnection)
-        osmConnection.userDetails.map((userdetails) => {
+);
-            var login = layoutToUse.gettingStartedPlzLogin;
-            if (userdetails.loggedIn) {
-                login = layoutToUse.welcomeBackMessage;
-            }
-            return "<div id='welcomeMessage'>" +
-                layoutToUse.welcomeMessage + login + layoutToUse.welcomeTail +
-                "</div>";
-        }),
-        function () {
-            osmConnection.registerActivateOsmAUthenticationClass()
-        });
-}
-leftMessage.setData(welcomeMessage);
-welcomeMessage().AttachTo("messagesbox");
 
 
-var messageBox = new MessageBoxHandler(leftMessage, () => {
+new FullScreenMessageBoxHandler(fullScreenMessage, () => {
     selectedElement.setData(undefined)
-});
+}).update();
+
+// fullScreenMessage.setData(generateWelcomeMessage());
+
 
 new CenterMessageBox(
     minZoom,
@@ -276,4 +300,6 @@ new GeoLocationHandler(bm).AttachTo("geolocate-button");
 // --------------- Send a ping to start various action --------
 
 locationControl.ping();
-messageBox.update();
+
+
+window.setTimeout(() => {Locale.language.setData("nl")}, 5000)

test.ts

@@ -1,17 +1,13 @@
-import {UIEventSource} from "./UI/UIEventSource";
+import {DropDown} from "./UI/Input/DropDown";
-import {Changes} from "./Logic/Changes";
+import Locale from "./UI/i18n/Locale";
-import {OsmConnection} from "./Logic/OsmConnection";
+import Combine from "./UI/Base/Combine";
-import {ElementStorage} from "./Logic/ElementStorage";
+import Translations from "./UI/i18n/Translations";
-import {WikipediaLink} from "./Customizations/Questions/WikipediaLink";
-import {OsmLink} from "./Customizations/Questions/OsmLink";
-import {ConfirmDialog} from "./UI/ConfirmDialog";
-import {Imgur} from "./Logic/Imgur";
-import {VariableUiElement} from "./UI/Base/VariableUIElement";
 
+console.log("Hello world")
 
-const html = new UIEventSource<string>("Some text");
+let languagePicker = new DropDown("", ["en", "nl"].map(lang => {
+        return {value: lang, shown: lang}
+    }
+), Locale.language).AttachTo("maindiv");
 
-const uielement = new VariableUiElement(html);
+new Combine(["abc",Translations.t.cyclofix.title, Translations.t.cyclofix.title]).AttachTo("extradiv");
-uielement.AttachTo("maindiv")
-
-window.setTimeout(() => {html.setData("Different text")}, 1000)