More css tweaks and bug fixes

Customizations/AllKnownLayouts.ts

@@ -33,11 +33,15 @@ export class AllKnownLayouts {
 
 
         const all = new All();
+        const knownKeys = []
         for (const layout of layouts) {
             for (const layer of layout.layers) {
-                if (all.layers.indexOf(layer) >= 0) {
+                const key = layer.overpassFilter.asOverpass().join("");
+                if (knownKeys.indexOf(key) >= 0) {
                     continue;
                 }
+                console.log(key)
+                knownKeys.push(key);
                 all.layers.push(layer);
             }
         }

Customizations/Layers/Widths.ts

@@ -37,7 +37,9 @@ export class Widths extends LayerDefinition {
 
     private readonly _oneSideParking = new Or([this._leftSideParking, this._rightSideParking]);
 
-    private readonly _carfree = new Or([new Tag("highway", "pedestrian"), new Tag("highway", "living_street")])
+    private readonly _carfree = new Or(
+        [new Tag("highway", "pedestrian"), new Tag("highway", "living_street"),
+        new Tag("access","destination"), new Tag("motor_vehicle", "destination")])
     private readonly _notCarFree = new Not(this._carfree);
 
     private calcProps(properties) {

Customizations/Layout.ts

@@ -14,6 +14,7 @@ import {UIEventSource} from "../UI/UIEventSource";
 export class Layout {
 
     public name: string;
+    public icon: string = "./assets/add.svg";
     public title: UIElement;
     public layers: LayerDefinition[];
     public welcomeMessage: UIElement;
@@ -55,7 +56,7 @@ export class Layout {
         welcomeTail: UIElement | string = ""
     ) {
         this.supportedLanguages = supportedLanguages;
-        this.title = typeof (title) === 'string' ? new FixedUiElement(title) : title;
+        this.title = Translations.W(title)
         this.startLon = startLon;
         this.startLat = startLat;
         this.startzoom = startzoom;
@@ -73,6 +74,7 @@ export class Layout {
 export class WelcomeMessage extends UIElement {
     private readonly layout: Layout;
     private readonly userDetails: UIEventSource<UserDetails>;
+    private languagePicker: UIElement;
     private osmConnection: OsmConnection;
 
     private readonly description: UIElement;
@@ -81,8 +83,11 @@ export class WelcomeMessage extends UIElement {
     private readonly tail: UIElement;
 
 
-    constructor(layout: Layout, osmConnection: OsmConnection) {
+    constructor(layout: Layout,
+                languagePicker: UIElement,
+                osmConnection: OsmConnection) {
         super(osmConnection.userDetails);
+        this.languagePicker = languagePicker;
         this.ListenTo(Locale.language);
         this.osmConnection = osmConnection;
         this.layout = layout;
@@ -99,6 +104,8 @@ export class WelcomeMessage extends UIElement {
             this.description.Render() +
             (this.userDetails.data.loggedIn ? this.welcomeBack : this.plzLogIn).Render() +
             this.tail.Render() +
+            "<br/>" +
+            this.languagePicker.Render() +
             "</span>"
 
             ;

Customizations/Layouts/Cyclofix.ts

@@ -25,5 +25,6 @@ export default class Cyclofix extends Layout {
                 "</p>"
             ])
         );
+        this.icon = "./assets/bike/pump.svg"
     }
 }

Customizations/Layouts/Natuurpunt.ts

@@ -2,6 +2,7 @@ import {Layout} from "../Layout";
 import {Birdhide} from "../Layers/Birdhide";
 import {InformationBoard} from "../Layers/InformationBoard";
 import {NatureReserves} from "../Layers/NatureReserves";
+import {DrinkingWater} from "../Layers/DrinkingWater";
 
 export class Natuurpunt extends Layout{
     constructor() {
@@ -9,7 +10,7 @@ export class Natuurpunt extends Layout{
             "natuurpunt",
             ["nl"],
             "De natuur in",
-            [new Birdhide(), new InformationBoard(), new NatureReserves(true)],
+            [new Birdhide(), new InformationBoard(), new NatureReserves(true), new DrinkingWater()],
             12,
             51.20875,
             3.22435,

Customizations/Layouts/StreetWidth.ts

@@ -5,6 +5,60 @@ import {UIEventSource} from "../../UI/UIEventSource";
 
 export class StreetWidth extends Layout{
     
+    private static meetMethode = `
+    
+    
+    We meten de ruimte die gedeeld wordt door auto's, fietsers en -in sommige gevallen- voetgangers.
+    We meten dus van _verhoogde_ stoeprand tot stoeprand omdat dit de ruimte is die wordt gedeeld door auto's en fietsers.
+    Daarnaast zoeken we ook een smaller stuk van de weg waar dat smallere stuk toch minstens 2m zo smal blijft.
+    Een obstakel (zoals een trap, elektriciteitkast) negeren we omdat dit de meting te fel beinvloed.
+    
+    In een aantal straten is er geen verhoogde stoep. In dit geval meten we van muur tot muur, omdat dit de gedeelde ruimte is.
+    We geven ook altijd een aanduiding of er al dan niet een voetpad aanwezig (en aan welke kant indien er maar één is), want indien er geen is heeft de voetganger ook ruimte nodig.
+    
+   (In sommige straten zijn er wel 'voetpadsuggesties' door een meter in andere kasseien te leggen, bv. met een kleurtje. Dit rekenen we niet als voetpad.
+   
+   Ook het parkeren van auto's wordt opgemeten.
+   Als er een parallele parkeerstrook is, dan duiden we dit aan en nemen we de parkeerstrook mee in de straatbreedte.
+   Als er een witte lijn is, dan negeren we dit. Deze witte lijnen duiden immers vaak een té smalle parkeerplaats aan - bv. 1.6m.
+   Een auto is tegenwoordig al snel 1.8m tot zelfs 2.0m, dus dan springt die auto gemakkelijk 20 tot 30cm uit op de baan.
+   
+   Staan de auto's schuin geparkeerd of dwarsgeparkeerd? 
+   Ook hier kan men het argument maken dat auto's er soms overspringen, maar dat is hier te variabel om in kaart te brengen.
+   Daarnaast gebeurt het minder dat auto's overspringen én zijn deze gevallen relatief zeldzaam in de binnenstad.
+   
+   Concreet: 
+   - Sla de 'parkeren'-vraag over
+   - Maak een foto en stuur die door naar Pieter (+ vermelding straatnaam of dergelijke)
+   - Meet de breedte vanaf de afbakening van de parkeerstrook.
+   
+   Ook bij andere lastige gevallen: maak een foto en vraag Pieter
+   
+   
+   
+   Instellen van de lasermeter
+   ===========================
+   
+   1) Zet de lasermeter aan met de rode knop
+   2) Het icoontje linksboven indiceert vanaf waar de laser meet - de voorkant of de achterkant van het apparaatje.
+        Dit kan aangepast worden met het knopje links-onderaan.
+        Kies wat je het liefste hebt
+   3) Het icoontje bovenaan-midden indiceert de stand van de laser: directe afstand, of afstand over de grond.
+        Dit MOET een driehoekje tonen.
+        Indien niet: duw op het knopje links-bovenaan totdat dit een rechte driehoek toont
+   4) Duw op de rode knop. Het lasertje gaat branden
+   5) Hou het meetbakje boven de stoeprand (met de juiste rand), richt de laser op de andere stoep
+   6) Duw opnieuw op de rode knop om te meten (de laser flikkert en gaat uit)
+   7) Lees de afstand af op het scherm. Let op: in 'hoekstand' is dit niet de onderste waarde, maar die er net boven.
+    
+    `
+    
+    
+    
+    
+    
+    
+    
     constructor() {
         super(    "width",
             ["nl"],

Helpers.ts

@@ -4,7 +4,6 @@ import {UIEventSource} from "./UI/UIEventSource";
 
 export class Helpers {
 
-
     static DoEvery(millis: number, f: (() => void)) {
         window.setTimeout(
             function () {
@@ -56,7 +55,6 @@ export class Helpers {
     * -> WHen uploading is done, the window is closed anyway
      */
     static LastEffortSave(changes: Changes) {
-
         window.addEventListener("beforeunload", function (e) {
             // Quickly save everyting!
             if (changes.pendingChangesES.data == 0) {

Logic/Imgur.ts

@@ -9,8 +9,11 @@ export class Imgur {
         handleSuccessfullUpload: ((imageURL: string) => void),
         allDone: (() => void),
         onFail: ((reason: string) => void),
-        offset:number = 0) {
+        offset:number) {
 
+        if(offset === undefined){
+            throw "Offset undefined - not uploading to prevent to much uploads!"
+        }
         if (blobs.length == offset) {
             allDone();
             return;

Logic/LayerUpdater.ts

@@ -63,7 +63,7 @@ export class LayerUpdater {
         this.previousBounds = undefined;
         const self = this;
         this._failCount++;
-        window.setTimeout(
+        window?.setTimeout(
             function(){self.update()}, this._failCount * 1000
         )
     }

Logic/LocalStorageSource.ts

@@ -3,9 +3,11 @@ import {UIEventSource} from "../UI/UIEventSource";
 export class LocalStorageSource {
 
     static Get(key: string, defaultValue: string = undefined): UIEventSource<string> {
+
         const saved = localStorage.getItem(key);
         const source = new UIEventSource<string>(saved ?? defaultValue);
 
+        // ignore when running from the console
         source.addCallback((data) => {
             localStorage.setItem(key, data);
             console.log("Wriging ", key, data)

Logic/QueryParameters.ts

@@ -17,6 +17,9 @@ export class QueryParameters {
 
     private static init() {
         const knownSources = {}
+        if(window === undefined){
+            return;
+        }
         if (window.location.search) {
             const params = window.location.search.substr(1).split("&");
             for (const param of params) {

Logic/StrayClickHandler.ts

@@ -29,7 +29,14 @@ export class StrayClickHandler {
             if (self._lastMarker !== undefined) {
                 map.removeLayer(self._lastMarker);
             }
-            self._lastMarker = L.marker([lastClick.lat, lastClick.lon]);
+            self._lastMarker = L.marker([lastClick.lat, lastClick.lon], {
+                icon: L.icon({
+                    iconUrl: "./assets/add.svg",
+                    iconSize: [50,50],
+                    iconAnchor: [25,50],
+                    popupAnchor: [0,-45]
+                })
+            });
             const uiElement = uiToShow();
             const popup = L.popup().setContent(uiElement.Render());
             uiElement.Update();

UI/Base/Button.ts

@@ -1,14 +1,15 @@
 import {UIElement} from "../UIElement";
 import Locale from "../i18n/Locale";
+import Translations from "../i18n/Translations";
 
 export class Button extends UIElement {
     private _text: UIElement;
     private _onclick: () => void;
     private _clss: string;
 
-    constructor(text: UIElement, onclick: (() => void), clss: string = "") {
+    constructor(text: string | UIElement, onclick: (() => void), clss: string = "") {
         super(Locale.language);
-        this._text = text;
+        this._text = Translations.W(text);
         this._onclick = onclick;
         if (clss !== "") {
 

UI/FullScreenMessageBoxHandler.ts

@@ -16,21 +16,22 @@ export class FullScreenMessageBoxHandler {
         this.listenTo(uielement);
         this.update();
 
-        window.onhashchange = function () {
+        if (window !== undefined) {
-            if (location.hash === "") {
+            window.onhashchange = function () {
-                // No more element: back to the map!
+                if (location.hash === "") {
-                uielement.setData(undefined);
+                    // No more element: back to the map!
-                onClear();
+                    uielement.setData(undefined);
+                    onClear();
+                }
             }
         }
 
         Translations.t.general.returnToTheMap
             .onClick(() => {
-                console.log("Clicked 'return to the map'")
                 uielement.setData(undefined);
                 onClear();
             })
-            .AttachTo("to-the-map-h2");
+            .AttachTo("to-the-map");
 
 
     }

UI/ImageUploadFlow.ts

@@ -125,7 +125,7 @@ export class ImageUploadFlow extends UIElement {
                     },
                     function(failReason) {
                     
-                    }
+                    },0
                 )
             }
         }

UI/Input/DropDown.ts

@@ -67,7 +67,7 @@ export class DropDown<T> extends InputElement<T> {
         }
         
         return "<form>" +
-            "<label for='dropdown-" + this.id + "'>" + this._label.Render() + "</label>" +
+            "<label for='dropdown-" + this.id + "'>" + this._label.Render() + " </label>" +
             "<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" +
             options +
             "</select>" +

UI/UIElement.ts

@@ -37,6 +37,9 @@ export abstract class UIElement {
     }
     
     Update(): void {
+        if(document === undefined){
+            return ; // Running from console
+        }
         let element = document.getElementById(this.id);
         if (element === undefined || element === null) {
             // The element is not painted

UI/i18n/Locale.ts

@@ -1,7 +1,20 @@
 import {UIEventSource} from "../UIEventSource";
 import {LocalStorageSource} from "../../Logic/LocalStorageSource";
+import {DropDown} from "../Input/DropDown";
+import {Layout} from "../../Customizations/Layout";
+import {UIElement} from "../UIElement";
 
 
 export default class Locale {
     public static language: UIEventSource<string> = LocalStorageSource.Get('language', "en");
+
+    public static CreateLanguagePicker(layoutToUse: Layout, label: string | UIElement = "") {
+
+        return new DropDown(label, layoutToUse.supportedLanguages.map(lang => {
+                return {value: lang, shown: lang}
+            }
+        ), Locale.language);
+    }
 }
+
+

UI/i18n/Translations.ts

@@ -420,7 +420,11 @@ export default class Translations {
                     en: "The data is still loading. Please wait a bit before you add a new point",
                     nl: "De data wordt nog geladen. Nog even geduld en dan kan je een punt toevoegen."
                 })
-            }
+            },
+            pickLanguage: new T({
+                en: "Choose a language",
+                nl: "Kies je taal"
+            })
         }   
     }
 

createLayouts.ts

@@ -0,0 +1,12 @@
+/*
+*/
+import {Bookcases} from "./Customizations/Layers/Bookcases";
+
+console.log("Building routers")
+
+new Bookcases()
+/*
+for(const layout in AllKnownLayouts.allSets){
+    console.log(layout)
+}
+*/

deploy.sh

@@ -1,5 +1,7 @@
 #! /bin/bash
 
+npx ts-node createLayout.ts
+
 npm run build
 rm -rf /home/pietervdvn/git/pietervdvn.github.io/MapComplete/*
 cp -r dist/* /home/pietervdvn/git/pietervdvn.github.io/MapComplete/

index.css

@@ -16,24 +16,35 @@ form {
     box-shadow: 0 0 10px #ff5353;
 }
 
+.shadow {
+    box-shadow: 0 0 10px #00000066;
+}
+
+
+
+
 #leafletDiv {
     height: 100%;
 }
 
 #geolocate-button {
     position: absolute;
-    bottom: 27px;
+    bottom: 25px;
-    right: 65px;
+    right: 50px;
     z-index: 999; /*Just below leaflets zoom*/
     background-color: white;
     border-radius: 5px;
-    border: solid 2px rgba(0, 0, 0, 0.2);
+    border: solid 2px #0005;
     cursor: pointer;
     width: 43px;
     height: 43px;
     display: none; /*Hidden by default, only visible on mobile*/
 }
 
+#help-button-mobile {
+    display: none;
+}
+
 #geolocate-button img{
     width: 31px;
     height:31px;
@@ -154,7 +165,7 @@ form {
     pointer-events: all;
     border-radius: 1.3em;
     margin: 0;
-    margin-bottom: 1em;
+    margin-bottom: 0.5em;
     width: 100%;
 }
 
@@ -207,29 +218,12 @@ form {
     padding-bottom: 0.2em;
 }
 
-@media only screen and (max-width: 600px) {
-    /* Portrait */
-    #userbadge-and-search {
-        display: inline-block;
-        width: auto;
-        max-width: 100vw;
-    }
 
-    #topleft-tools {
+@media only screen and (max-height: 600px)and (not (max-width: 700px))  {
-        margin: 0.2em !important;
-        margin-top: 0.3em !important;;
-    }
-
-    #userbadge {
-        margin-bottom: 0.3em;
-    }
-
-}
-
-@media only screen and (max-height: 600px) {
     /* Landscape */
     #topleft-tools {
-        margin: 0.3em !important;
+        padding: 0.1em;
+        padding-left: unset;
     }
 
     #userbadge-and-search {
@@ -249,8 +243,24 @@ form {
         padding: 0;
     }
 
+}
+
+
+@media only screen and (max-width: 600px) {
+    /* Portrait */
+    #userbadge-and-search {
+        display: inline-block;
+        width: auto;
+        max-width: 100vw;
+    }
+
     #topleft-tools {
-        margin: 0.5em;
+        padding: 0.2em !important;
+        padding-top: 0.3em !important;
+    }
+
+    #userbadge {
+        margin-bottom: 0.3em;
     }
 
 }
@@ -262,13 +272,14 @@ form {
 #topleft-tools {
     display: block;
     position: absolute;
-    margin: 1em;
-    margin-bottom: 0;
     padding: 0;
+    padding-top: 0.5em;
+    padding-left:0.5em;
     z-index: 5000;
     transition: all 500ms linear;
     overflow: hidden;
     pointer-events: none;
+    padding-right: 10px; /* Shadow offset */
 }
 
 #messagesboxmobilewrapper {
@@ -283,6 +294,7 @@ form {
     border-bottom-left-radius: 2em;
     display: inline-block;
     height:100%;
+    box-shadow: -10px 0 10px -10px #0006;
 }
 
 .collapse-button .collapse-button-img{
@@ -293,6 +305,16 @@ form {
     width: 2em;
     border-top-left-radius: 2em;
     border-bottom-left-radius: 2em;
+    margin-bottom: 10px;
+}
+
+.open-button .collapse-button-img {
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: inline-block;
+    padding: 1em;
+    background-color: white; 
+    box-shadow: 0 0 10px #0006;
 }
 
 .collapse-button-img {
@@ -301,6 +323,9 @@ form {
     display: inline-block;
     padding: 1em;
     background-color: white;
+    box-shadow: none;
+    margin: 0;
+    
 }
 
 .collapse-button-img img{
@@ -324,6 +349,7 @@ form {
     max-width: calc(max(35vw, 30em));
     max-height: calc(100vh - 15em);
     overflow-y: auto;
+    box-shadow: 0 0 10px #00000066;
 }
 
 #messagesbox {
@@ -382,6 +408,7 @@ form {
     font-weight: 600;
 }
 
+
 #filter__selection select {
     outline: none;
     background-color: #F0EFEF;
@@ -400,6 +427,8 @@ form {
     margin: 0;
     font-weight: 600;
     transform: translateY(75px);
+    max-height: calc(50vh - 10em);
+    overflow-y: auto;
 }
 
 #filter__selection ul li span > span {
@@ -465,6 +494,15 @@ form {
         display: none;
     }
     
+    #help-button-mobile{
+        display: unset;
+    }
+    
+    #help-button-mobile div {
+        box-shadow: 0 0 10px #0006;
+        margin-bottom: 10px;
+    }
+
     #geolocate-button {
         display: block;
     }
@@ -497,11 +535,11 @@ form {
 
     #messagesboxmobile-scroll {
         display: block;
-        overflow-y: auto;
         width: 100vw;
+        overflow-y: auto;
         padding: 0;
         margin: 0;
-        height: calc(100% - 5em); /*Height of to-the-map is 2em, padding is 2 * 0.5em*/
+        height: calc(100% - 5em); /*Height of to-the-map is 5em*/
     }
 
     #messagesboxmobile {
@@ -519,7 +557,11 @@ form {
         width: 100%;
         max-width: 100%;
         margin: 0;
+        padding: 0;
         box-sizing: border-box;
+        max-height: max-content;
+        box-shadow: unset;
+        overflow-y: unset;
     }
     
 
@@ -530,34 +572,36 @@ form {
     position: relative;
 }
 
-#to-the-map h2{
+#to-the-map > span{
     
     position: absolute;
-    height: 4em;
+    box-sizing: border-box;
+    height: 3em;
     
     padding: 0.5em;
     margin: 0;
 
-    padding-right: 2em;
+    padding-top: 0.75em;
-    padding-top: 1em;
     text-align: center;
     width: 100%;
     color: white;
     background-color: #7ebc6f;
     cursor: pointer;
+    font-size: xx-large;
+    font-weight: bold;
 
 }
 
 
 @media only screen and (max-height: 400px) {
-    /* Portait: small 'to the map' */
+    /* Landscape: small 'to the map' */
     #to-the-map {
         position: relative;
         height: 100%;
         width: 100%
     }
 
-    #to-the-map h2 {
+    #to-the-map span {
         width: auto;
         border-top-left-radius: 1.5em;
         position: absolute;
@@ -568,22 +612,25 @@ form {
         margin:0;
         padding: 1em;
         padding-bottom: 0.75em;
-    }
+        height: 3em;
-
+        font-size: x-large;
-    #to-the-map h2 span{
-        height: 100%;
-        
     }
 
     #messagesboxmobile {
-        padding-bottom: 4em;
+        padding-bottom: 5em;
     }
 
     #messagesboxmobile-scroll {
         position: absolute;
         z-index: 2;
+        width: 100vw;
         height: 100vh;
-        overflow-y: auto;
+        box-sizing: border-box;
+    }
+    
+    #welcomeMessage{
+        box-shadow: unset;
+        max-height: 100vh;
     }
 
 }

index.html

@@ -5,24 +5,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MapComplete</title>
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+    <link rel="stylesheet" href="./vendor/leaflet.css"/>
-          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
-          crossorigin=""/>
     <link rel="stylesheet" href="./index.css"/>
     <link rel="manifest" href="./manifest.webmanifest">
 
-          <!--
+    
+    <!-- $$$OG-META -->
+    
+    <!--
     <meta property="og:image" content="https://buurtnatuur.be/assets/BuurtnatuurFront.jpg">
     <meta property="og:type" content="website">
     <meta property="og:title" content="Buurtnatuur.be - samen natuur in kaart brengen">
     <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:image" content="/assets/bike/cyclofix.jpeg"/>
-    <meta property="og:image" content="/assets/bike/cyclofix.jpeg"/>
+<meta property="og:type" content="website"/>
-    <meta property="og:type" content="website"/>
+<meta property="og:title" content="Cyclofix - a map for and by cyclists"/>
-    <meta property="og:title" content="Cyclofix - a map for and by cyclists"/>
+<meta property="og:description"
-    <meta property="og:description"
+    content="With this tool, cyclists can contribute to a map of cycling infrastructure"/>
-          content="With this tool, cyclists can contribute to a map of cycling infrastructure"/>
+-->
 </head>
 <body>
 <div id="messagesboxmobilewrapper">
@@ -30,23 +31,22 @@
         <div id="messagesboxmobile"></div>
     </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">
     <div id="userbadge-and-search">
-        <div id="userbadge">
+        <div id="userbadge" class="shadow">
             Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is
             blocking it.
         </div>
-        <div id="searchbox"></div>
+        <div id="searchbox" class="shadow"></div>
     </div>
-    <br/>
     <div id="messagesbox"></div>
+    <br/>
+    <div id="help-button-mobile"></div>
 </div>
 
 <div id="filter__popup" class="filter__popup">

index.ts

@@ -31,6 +31,7 @@ import {Img} from "./UI/Img";
 import {QueryParameters} from "./Logic/QueryParameters";
 import {Utils} from "./Utils";
 import {LocalStorageSource} from "./Logic/LocalStorageSource";
+import {Button} from "./UI/Base/Button";
 
 
 // --------------------- Special actions based on the parameters -----------------
@@ -206,7 +207,7 @@ const layerUpdater = new LayerUpdater(bm, minZoom, flayers);
 
 // --------------- Setting up layer selection ui --------
 
-const closedFilterButton = `<button id="filter__button" class="filter__button filter__button--shadow">${Img.closedFilterButton}</button>`;
+const closedFilterButton = `<button id="filter__button" class="filter__button shadow">${Img.closedFilterButton}</button>`;
 
 const openFilterButton = `
 <button id="filter__button" class="filter__button">${Img.openFilterButton}</button>`;
@@ -229,10 +230,6 @@ document.title = layoutToUse.title.InnerRender();
 Locale.language.addCallback(e => {
     document.title = layoutToUse.title.InnerRender();
 })
-let languagePicker = new DropDown("", layoutToUse.supportedLanguages.map(lang => {
-        return {value: lang, shown: lang}
-    }
-), Locale.language);
 
 
 new StrayClickHandler(bm, selectedElement, fullScreenMessage, () => {
@@ -280,13 +277,16 @@ const pendingChanges = new PendingChanges(changes, secondsTillChangesAreSaved,);
 
 new UserBadge(osmConnection.userDetails,
     pendingChanges,
-    languagePicker,
+    Locale.CreateLanguagePicker(layoutToUse),
     bm)
     .AttachTo('userbadge');
 
 new SearchAndGo(bm).AttachTo("searchbox");
 
-const welcome = new WelcomeMessage(layoutToUse, osmConnection).onClick(() => {});
+const welcome = new WelcomeMessage(layoutToUse, 
+    Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage),
+    osmConnection).onClick(() => {
+});
 
 const help = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/help.svg'  alt='help'></div>`);
 const close = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/close.svg'  alt='close'></div>`);
@@ -296,14 +296,19 @@ new CheckBox(
         welcome]),
     new Combine(["<span class='open-button'>", help, "</span>"])
     , true
-).AttachTo("messagesbox")
+).AttachTo("messagesbox");
 
 
 new FullScreenMessageBoxHandler(fullScreenMessage, () => {
     selectedElement.setData(undefined)
 }).update();
-fullScreenMessage.setData(new WelcomeMessage(layoutToUse, osmConnection))
 
+const welcome2 = new WelcomeMessage(layoutToUse, Locale.CreateLanguagePicker(layoutToUse, Translations.t.general.pickLanguage), osmConnection)
+fullScreenMessage.setData(welcome2)
+new FixedUiElement(`<div class='collapse-button-img' class="shadow"><img src='assets/help.svg'  alt='help'></div>`).onClick(() => {
+    fullScreenMessage.setData(welcome2)
+})
+    .AttachTo("help-button-mobile")
 
 new CenterMessageBox(
     minZoom,

manifest.webmanifest

@@ -5,6 +5,7 @@
   "display": "standalone",
   "background_color": "#fff",
   "description": "Easily edit OpenStreetMap",
+  "orientation": "portrait-primary, landscape-primary",
   "icons": [
     {
       "src": "assets/logos/logo192.png",

package-lock.json

@@ -998,6 +998,12 @@
       "integrity": "sha512-Xqg/lIZMrUd0VRmSRbCAewtwGZiAk3mEUDvV4op1tGl+LvyPcb/MIOSxTl9z+9+J+R4/vpjiCAT4xeKzH9ji1w==",
       "optional": true
     },
+    "@types/node": {
+      "version": "7.10.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-7.10.11.tgz",
+      "integrity": "sha512-uEqP1HlJFhsgD8DOBFdC72/5selvor0mzdQY97zlyo8Q6qPl849cFBWkNpgTXw3jIvb7iNyWsId51/A8HYKzbQ==",
+      "dev": true
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
@@ -2886,7 +2892,8 @@
     "fs": {
       "version": "0.0.1-security",
       "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
-      "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ="
+      "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ=",
+      "dev": true
     },
     "fs.realpath": {
       "version": "1.0.0",
@@ -5173,6 +5180,12 @@
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
     },
+    "read-file": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/read-file/-/read-file-0.2.0.tgz",
+      "integrity": "sha1-cMa6+IQux9FUD5gf0Oau1Mgb1UU=",
+      "dev": true
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -7069,6 +7082,16 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
+    "write-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/write-file/-/write-file-1.0.0.tgz",
+      "integrity": "sha1-Xi2sf9QMYxZIkfoN8GC4EEsFgGk=",
+      "dev": true,
+      "requires": {
+        "is-buffer": "^1.1.4",
+        "mkdirp": "^0.5.1"
+      }
+    },
     "ws": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",

package.json

@@ -4,8 +4,8 @@
   "description": "A small website to edit OSM easily",
   "main": "index.js",
   "scripts": {
-    "start": "parcel index.html land.html test.html assets/test.json assets/**/* UI/* Logic/** vendor/*",
+    "start": "parcel index.html land.html test.html UI/** Logic/** assets/**/* vendor/* vendor/*/*",
-    "build": "rm -rf dist/ && parcel build --public-url ./ index.html land.html assets/* assets/*/*",
+    "build": "rm -rf dist/ && parcel build --public-url ./ index.html land.html assets/* assets/*/* vendor/* vendor/*/*",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -15,7 +15,6 @@
   "author": "pietervdvn",
   "license": "MIT",
   "dependencies": {
-    "fs": "0.0.1-security",
     "jquery": "latest",
     "leaflet": "^1.6.0",
     "osm-auth": "^1.0.2",
@@ -24,6 +23,10 @@
     "turf": "^3.0.14"
   },
   "devDependencies": {
-    "typescript": "^3.9.3"
+    "fs": "0.0.1-security",
+    "@types/node": "^7.0.5",
+    "read-file": "^0.2.0",
+    "typescript": "^3.9.3",
+    "write-file": "^1.0.0"
   }
 }