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"],