Add icons, add validation, add phone and email types, add css fixes

Customizations/AllKnownLayouts.ts

@@ -40,7 +40,6 @@ export class AllKnownLayouts {
                 if (knownKeys.indexOf(key) >= 0) {
                     continue;
                 }
-                console.log(key)
                 knownKeys.push(key);
                 all.layers.push(layer);
             }

Customizations/LayerDefinition.ts

@@ -70,7 +70,10 @@ export class LayerDefinition {
      */
     style: (tags: any) => {
         color: string,
-        icon: any,
+        icon: { 
+            iconUrl: string,
+            iconSize: number[],
+        },
     };
 
     /**
@@ -119,16 +122,6 @@ export class LayerDefinition {
         this.wayHandling = options.wayHandling ?? LayerDefinition.WAYHANDLING_DEFAULT;
     }
 
-    asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>,
+
-            selectedElement: UIEventSource<{feature: any}>,
-            showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement):
-        FilteredLayer {
-        return new FilteredLayer(
-            this,
-            basemap, allElements, changes,
-            selectedElement,
-            showOnPopup);
-
-    }
 
 }

Customizations/Layers/BikeParkings.ts

@@ -1,7 +1,6 @@
 import {LayerDefinition} from "../LayerDefinition";
 import {And, Or, Tag} from "../../Logic/TagsFilter";
 import {OperatorTag} from "../Questions/OperatorTag";
-import * as L from "leaflet";
 import FixedText from "../Questions/FixedText";
 import ParkingType from "../Questions/bike/ParkingType";
 import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
@@ -47,11 +46,11 @@ export default class BikeParkings extends LayerDefinition {
         return function (properties: any) {
             return {
                 color: "#00bb00",
-                icon: L.icon({
+                icon: {
                     iconUrl: self.icon,
                     iconSize: [50, 50],
                     iconAnchor: [25,50]
-                })
+                }
             };
         };
     }

Customizations/Layers/BikeShops.ts

@@ -3,7 +3,6 @@ import Translations from "../../UI/i18n/Translations";
 import {And, 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";
@@ -71,11 +70,11 @@ export default class BikeShops extends LayerDefinition {
 
             return {
                 color: "#00bb00",
-                icon: L.icon({
+                icon: {
                     iconUrl: icon,
                     iconSize: [50, 50],
                     iconAnchor: [25, 50]
-                })
+                }
             }
         }
     }

Customizations/Layers/BikeStations.ts

@@ -1,6 +1,5 @@
 import {LayerDefinition} from "../LayerDefinition";
 import {And, Tag, TagsFilter, Or} from "../../Logic/TagsFilter";
-import * as L from "leaflet";
 import BikeStationChain from "../Questions/bike/StationChain";
 import BikeStationPumpTools from "../Questions/bike/StationPumpTools";
 import BikeStationStand from "../Questions/bike/StationStand";
@@ -72,18 +71,18 @@ export default class BikeStations extends LayerDefinition {
                 if (isOperational) {
                     iconName = "pump.svg"
                 } else {
-                    iconName = "broken_pump.svg"
+                    iconName = "broken_pump_2.svg"
                 }
             }
 
             const iconUrl = `./assets/bike/${iconName}`
             return {
                 color: "#00bb00",
-                icon: L.icon({
+                icon: {
                     iconUrl: iconUrl,
                     iconSize: [50, 50],
                     iconAnchor: [25, 50]
-                })
+                }
             };
         };
     }

Customizations/Layers/Birdhide.ts

@@ -3,7 +3,6 @@ import {And, Or, Tag} from "../../Logic/TagsFilter";
 import {TagRenderingOptions} from "../TagRendering";
 import FixedText from "../Questions/FixedText";
 import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
-import L from "leaflet";
 
 export class Birdhide extends LayerDefinition {
 
@@ -13,8 +12,9 @@ export class Birdhide extends LayerDefinition {
     constructor() {
         super({
             name: "vogelkijkplaats",
+            description: "Een plaats om vogels te kijken, zoals een vogelkijkhut of kijkwand",
             overpassFilter: Birdhide.birdhide,
-            elementsToShow: [new FixedText("hi")],
+            elementsToShow: [],
             icon: "assets/nature/birdhide.svg",
             minzoom: 12,
             wayHandling: LayerDefinition.WAYHANDLING_CENTER_AND_WAY,
@@ -90,11 +90,11 @@ export class Birdhide extends LayerDefinition {
 
             return {
                 color: "#0000bb",
-                icon: L.icon({
+                icon: {
                     iconUrl: icon,
                     iconSize: [40,40],
                     iconAnchor: [20,20]
-                })
+                }
             }
         }
 

Customizations/Layers/Bookcases.ts

@@ -1,9 +1,9 @@
 import {LayerDefinition} from "../LayerDefinition";
-import L from "leaflet";
 import {And, Or, Tag} from "../../Logic/TagsFilter";
 import {TagRenderingOptions} from "../TagRendering";
 import {NameInline} from "../Questions/NameInline";
 import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
+import Translations from "../../UI/i18n/Translations";
 
 export class Bookcases extends LayerDefinition {
 
@@ -16,7 +16,7 @@ export class Bookcases extends LayerDefinition {
         this.overpassFilter = new Tag("amenity", "public_bookcase");
         this.minzoom = 11;
 
-        this.title = new NameInline("ruilboekenkastje");
+        this.title = new NameInline(Translations.t.bookcases.bookcase);
         this.elementsToShow = [
             new ImageCarouselWithUploadConstructor(),
             new TagRenderingOptions({
@@ -38,7 +38,7 @@ export class Bookcases extends LayerDefinition {
                     question: "Hoeveel boeken passen in dit boekenruilkastje?",
                     freeform: {
                         renderTemplate: "Er passen {capacity} boeken in dit boekenruilkastje",
-                        template:  "Er passen $$$ boeken in dit boekenruilkastje",
+                        template:  "Er passen $nat$ boeken in dit boekenruilkastje",
                         key: "capacity",
                         placeholder: "aantal"
                     },
@@ -159,10 +159,11 @@ export class Bookcases extends LayerDefinition {
 
         this.style = function (tags) {
             return {
-                icon: new L.icon({
+                icon: {
                     iconUrl: "assets/bookcase.svg",
-                    iconSize: [40, 40]
+                    iconSize: [40, 40],
-                }),
+                    iconAnchor: [20,20]
+                },
                 color: "#0000ff"
             };
         }

Customizations/Layers/DrinkingWater.ts

@@ -52,11 +52,11 @@ export class DrinkingWater extends LayerDefinition {
 
             return {
                 color: "#00bb00",
-                icon: new L.icon({
+                icon: {
                     iconUrl: self.icon,
                     iconSize: [50, 50],
                     iconAnchor: [25,50]
-                })
+                }
             };
         };
     }

Customizations/Layers/GrbToFix.ts

@@ -1,5 +1,4 @@
 import {LayerDefinition} from "../LayerDefinition";
-import L from "leaflet"
 import {And, Regex, Tag} from "../../Logic/TagsFilter";
 import {TagRenderingOptions} from "../TagRendering";
 
@@ -18,11 +17,10 @@ export class GrbToFix extends LayerDefinition {
 
         this.style = function (tags) {
             return {
-                icon: new L.icon({
+                icon: {
                     iconUrl: "assets/star.svg",
                     iconSize: [40, 40],
-                    text: "hi"
+                },
-                }),
                 color: "#ff0000"
             };
 

Customizations/Layers/InformationBoard.ts

@@ -3,12 +3,12 @@ import FixedText from "../Questions/FixedText";
 import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
 import {TagRenderingOptions} from "../TagRendering";
 import {And, Tag} from "../../Logic/TagsFilter";
-import L from "leaflet";
 
 export class InformationBoard extends LayerDefinition {
     constructor() {
         super({
             name: "Informatiebord",
+            description: "Een informatiebord of kaart",
             minzoom: 12,
             overpassFilter: new Tag("tourism", "information"),
             newElementTags: [new Tag("tourism", "information")],
@@ -44,12 +44,10 @@ export class InformationBoard extends LayerDefinition {
 
             return {
                 color: "#000000",
-                icon: L.icon(
+                icon: {
-                    {
                     iconUrl: icon,
                     iconSize: [50, 50]
                 }
-                )
             };
         }
 

Customizations/Layers/Map.ts

@@ -3,7 +3,6 @@ import FixedText from "../Questions/FixedText";
 import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
 import {TagRenderingOptions} from "../TagRendering";
 import {And, Tag} from "../../Logic/TagsFilter";
-import L from "leaflet";
 
 export class Map extends LayerDefinition {
     constructor() {
@@ -36,12 +35,10 @@ export class Map extends LayerDefinition {
             
             return {
                 color: "#000000",
-                icon: L.icon(
+                icon: {
-                    {
                     iconUrl: icon,
                     iconSize: [50, 50]
                 }
-                )
             };
         }
 

Customizations/Layers/NatureReserves.ts

@@ -72,7 +72,7 @@ export class NatureReserves extends LayerDefinition {
                     freeform: {
                         renderTemplate: "Bij problemen of vragen, de conservator kan bereikt worden via " +
                             "<a href='mailto:{email}'>{email}</a>",
-                        template: "$$$",
+                        template: "$email$",
                         key: "email"
                     }
                 }),
@@ -83,7 +83,7 @@ export class NatureReserves extends LayerDefinition {
                     freeform: {
                         renderTemplate: "Bij problemen of vragen, de {conservator} kan bereikt worden via " +
                             "<a href='tel:{phone}'>{phone}</a>",
-                        template: "$$$",
+                        template: "$phone$",
                         key: "phone"
                     }
 

Customizations/Layers/Viewpoint.ts

@@ -1,5 +1,4 @@
 import {LayerDefinition} from "../LayerDefinition";
-import L from "leaflet"
 import {FixedUiElement} from "../../UI/Base/FixedUiElement";
 import FixedText from "../Questions/FixedText";
 import {Tag} from "../../Logic/TagsFilter";
@@ -17,10 +16,10 @@ export class Viewpoint extends LayerDefinition {
             wayHandling: LayerDefinition.WAYHANDLING_CENTER_ONLY,
             style: tags => {
                 return {
-                    color: undefined, icon: new L.icon({
+                    color: undefined, icon:{
                         iconUrl: "assets/viewpoint.svg",
                         iconSize: [20, 20]
-                    })
+                    }
                 }
             },
             maxAllowedOverlapPercentage: 0,

Customizations/Layout.ts

@@ -14,8 +14,11 @@ import {UIEventSource} from "../UI/UIEventSource";
 export class Layout {
 
     public name: string;
-    public icon: string = "./assets/add.svg";
+    public icon: string = "./assets/logo.svg";
     public title: UIElement;
+    public description: string | UIElement = Translations.t.general.about;
+    public socialImage: string = ""
+    
     public layers: LayerDefinition[];
     public welcomeMessage: UIElement;
     public gettingStartedPlzLogin: UIElement;

Customizations/Layouts/Bookcases.ts

@@ -1,29 +1,20 @@
 import {Layout} from "../Layout";
 import * as Layer from "../Layers/Bookcases";
+import Translations from "../../UI/i18n/Translations";
+import Combine from "../../UI/Base/Combine";
 
 export class Bookcases extends Layout {
     constructor() {
         super("bookcases",
-            ["nl"],
+            ["nl", "en"],
-            "Open Bookcase Map",
+            Translations.t.bookcases.title,
             [new Layer.Bookcases()],
             14,
             51.2,
             3.2,
 
-
+            new Combine(["<h3>",Translations.t.bookcases.title,"</h3>", Translations.t.bookcases.description])
-            "        <h3>Open BoekenkastjesKaart</h3>\n" +
+        );
-            "\n" +
+        this.icon = "assets/bookcase.svg"
-            "<p>" +
-            "Help mee met het creëeren van een volledige kaart met alle boekenruilkastjes!" +
-            "Een boekenruilkastje is een vaste plaats in publieke ruimte waar iedereen een boek in kan zetten of uit kan meenemen." +
-            "Meestal een klein kastje of doosje dat op straat staat, maar ook een oude telefooncellen of een schap in een station valt hieronder."+
-            "</p>"
-            ,
-            "  <p>Begin met <a href=\"https://www.openstreetmap.org/user/new\" target=\"_blank\">het aanmaken van een account\n" +
-            "            </a> of door je " +
-            "            <span onclick=\"authOsm()\" class=\"activate-osm-authentication\">aan te melden</span>.</p>",
-            "Klik op een boekenruilkastje om vragen te beantwoorden");
-        this.locationContains= ["Bookcases.html", "Bookcase.html","bookcase"]
     }
 }

Customizations/Layouts/Cyclofix.ts

@@ -10,7 +10,7 @@ import Combine from "../../UI/Base/Combine";
 export default class Cyclofix extends Layout {
     constructor() {
         super(
-            "pomp",
+            "cyclofix",
             ["en", "nl", "fr"],
             Translations.t.cyclofix.title,
             [new BikeServices(), new BikeShops(), new DrinkingWater(), new BikeParkings()],
@@ -25,6 +25,8 @@ export default class Cyclofix extends Layout {
                 "</p>"
             ])
         );
-        this.icon = "./assets/bike/pump.svg"
+        this.icon = "./assets/bike/logo.svg"
+        this.description = "Easily search and contribute bicycle data nearby";
+        this.socialImage = "./assets/bike/cyclofix.jpeg"
     }
 }

Customizations/Layouts/Groen.ts

@@ -9,7 +9,7 @@ export class Groen extends Layout {
     constructor() {
         super("buurtnatuur",
             ["nl"],
-            "Buurtnatuur",
+            "Buurtnatuur.be",
             [new NatureReserves(), new Park(), new Bos(), new Viewpoint()],
             10,
             50.8435,
@@ -52,6 +52,9 @@ export class Groen extends Layout {
             "</small>"
         );
         
+        this.icon = "assets/groen.svg"
         this.locationContains = ["buurtnatuur.be"]
+        this.socialImage = "assets/BuurtnatuurFront.jpg"
+        this.description = "Met deze tool kan je natuur in je buurt in kaart brengen en meer informatie geven over je favoriete plekje"
     }
 }

Customizations/Layouts/MetaMap.ts

@@ -15,5 +15,6 @@ export class MetaMap extends Layout{
 
             "        <h3>Open Map Map</h3>\n" +
             "This map is a map of physical maps, as known by OpenStreetMap.");
+        this.icon = "assets/osm-logo-buggy-attr.svg"
     }
 }

Customizations/Layouts/Natuurpunt.ts

@@ -18,5 +18,6 @@ export class Natuurpunt extends Layout{
             "",
             ""
         );
+        this.icon = "./assets/nature/birdhide.svg"
     }
 }

Customizations/Layouts/Statues.ts

@@ -4,8 +4,8 @@ import {Artwork} from "../Layers/Artwork";
 export class Statues extends Layout{
     constructor() {
         super(    "statues",
-            "Open Artwork Map",
             ["en"],
+            "Open Artwork Map",
             [new Artwork()],
             10,
             50.8435,

Customizations/Layouts/StreetWidth.ts

@@ -85,8 +85,8 @@ export class StreetWidth extends Layout{
             "<li>Grotere auto's meer belasten - ze nemen immers meer parkeerruimte in.</li>" +
             "<li>Laat toeristen verplicht parkeren onder het zand; een (fiets)taxi kan hen naar hun hotel brengen</li>" +
             "<li>Voorzie in elke straat enkele parkeerplaatsen voor kortparkeren. Zo kunnen leveringen, iemand afzetten,... gebeuren zonder dat er een fietspad of een straat geblokkeerd wordt</li>" +
-            "</ul>",
+            "</ul>");
-            "",
+        this.icon = "assets/bug.svg";
-            "");
+
     }
 }

Customizations/Questions/NameInline.ts

@@ -1,28 +1,25 @@
 import {TagRenderingOptions} from "../TagRendering";
 import {And, Tag} from "../../Logic/TagsFilter";
 import {UIElement} from "../../UI/UIElement";
+import Translations from "../../UI/i18n/Translations";
 
 
 export class NameInline extends TagRenderingOptions{
     
-    static Upper(string){
+    constructor(category: string | UIElement ) {
-         return string.charAt(0).toUpperCase() + string.slice(1);
-    }
-    
-    constructor(category: string ) {
         super({
             question: "",
 
             freeform: {
                 renderTemplate: "{name}",
-                template: "De naam van dit "+category+" is $$$",
+                template: Translations.t.general.nameInlineQuestion.Subs({category: category}),
                 key: "name",
                 extraTags: new Tag("noname", "") // Remove 'noname=yes'
             },
 
             mappings: [
-                {k: new Tag("noname","yes"), txt: NameInline.Upper(category)+" zonder naam"},
+                {k: new Tag("noname","yes"), txt: Translations.t.general.noNameCategory.Subs({category: category})},
-                {k: null, txt: NameInline.Upper(category)}
+                {k: null, txt: category}
             ]
         });
     }

Customizations/TagRendering.ts

@@ -15,7 +15,8 @@ import {FixedInputElement} from "../UI/Input/FixedInputElement";
 import {RadioButton} from "../UI/Input/RadioButton";
 import Translations from "../UI/i18n/Translations";
 import Locale from "../UI/i18n/Locale";
-
+import * as EmailValidator from 'email-validator';
+import { parsePhoneNumberFromString } from 'libphonenumber-js'
 export class TagRenderingOptions implements TagDependantUIElementConstructor {
 
 
@@ -25,6 +26,12 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
         "int": (str) => str.indexOf(".") < 0 && !isNaN(Number(str)),
         "nat": (str) => str.indexOf(".") < 0 && !isNaN(Number(str)) && Number(str) > 0,
         "float": (str) => !isNaN(Number(str)),
+        "email": (str) => EmailValidator.validate(str),
+        "phone": (str) => parsePhoneNumberFromString(str).isValid()
+    }
+    
+    public static formatting = {
+        "phone": (str) => parsePhoneNumberFromString(str).formatInternational()
     }
 
     /**
@@ -345,7 +352,12 @@ class TagRendering extends UIElement implements TagDependantUIElement {
 
         const prepost = Translations.W(freeform.template).InnerRender().split("$");
         const type = prepost[1];
-        const isValid = TagRenderingOptions.inputValidation[type];
+        let isValid = TagRenderingOptions.inputValidation[type];
+        if(isValid === undefined){
+            console.log("Invalid type for field type", type)
+            isValid = (str) => true;
+        }
+        let formatter = TagRenderingOptions.formatting[type] ?? ((str) => str);
 
         const pickString =
             (string: any) => {
@@ -355,7 +367,7 @@ class TagRendering extends UIElement implements TagDependantUIElement {
                 if (!isValid(string)) {
                     return undefined;
                 }
-                const tag = new Tag(freeform.key, string);
+                const tag = new Tag(freeform.key, formatter(string));
                 
                 if (freeform.extraTags === undefined) {
                     return tag;

Helpers.ts

@@ -70,6 +70,21 @@ export class Helpers {
             return confirmationMessage;                            //Webkit, Safari, Chrome
         });
 
+
+        document.addEventListener('visibilitychange',() => {
+            if(document.visibilityState === "visible"){
+                return;
+            }
+            if (changes.pendingChangesES.data == 0) {
+                return;
+            }
+
+            console.log("Upmoading: loss of focus")
+            changes.uploadAll(function () {
+                window.close()
+            });
+        })
+
     }
     
 }

Logic/Basemap.ts

@@ -105,5 +105,4 @@ export class Basemap {
         });
     }
     
-
 }

Logic/FilteredLayer.ts

@@ -7,6 +7,7 @@ import L from "leaflet"
 import {GeoOperations} from "./GeoOperations";
 import {UIElement} from "../UI/UIElement";
 import {LayerDefinition} from "../Customizations/LayerDefinition";
+import {UserDetails} from "./OsmConnection";
 
 /***
  * A filtered layer is a layer which offers a 'set-data' function
@@ -26,7 +27,7 @@ export class FilteredLayer {
     private readonly _map: Basemap;
     private readonly _maxAllowedOverlap: number;
 
-    private readonly _style: (properties) => { color: string, icon: any };
+    private readonly _style: (properties) => { color: string, icon: { iconUrl: string } };
 
     private readonly _storage: ElementStorage;
 
@@ -59,7 +60,7 @@ export class FilteredLayer {
         this._style = layerDef.style;
         if (this._style === undefined) {
             this._style = function () {
-                return {icon: "", color: "#000000"};
+                return {icon: {iconUrl: "./assets/bug.svg"}, color: "#000000"};
             }
         }
         this.name = name;
@@ -79,6 +80,20 @@ export class FilteredLayer {
         })
     }
     
+    static fromDefinition(
+        definition,
+        basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>,
+                 selectedElement: UIEventSource<{feature: any}>,
+                 showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement):
+        FilteredLayer {
+        return new FilteredLayer(
+            definition,
+            basemap, allElements, changes,
+            selectedElement,
+            showOnPopup);
+
+    }
+
 
     /**
      * The main function to load data into this layer.
@@ -187,7 +202,7 @@ export class FilteredLayer {
 
                 } else {
                     marker = L.marker(latLng, {
-                        icon: style.icon
+                        icon: new L.icon(style.icon)
                     });
                 }
                 return marker;
@@ -197,7 +212,7 @@ export class FilteredLayer {
                 let eventSource = self._storage.addOrGetElement(feature);
                 eventSource.addCallback(function () {
                     if (layer.setIcon) {
-                        layer.setIcon(self._style(feature.properties).icon)
+                        layer.setIcon(L.icon(self._style(feature.properties).icon))
                     } else {
                         console.log("UPdating", layer);
 
@@ -212,7 +227,12 @@ export class FilteredLayer {
                     console.log("Selected ", feature)
                     self._selectedElement.setData({feature: feature});
                     const uiElement = self._showOnPopup(eventSource, feature);
-                    const popup = L.popup()
+                    
+                    const iconInfo = self._style(feature.properties).icon;
+                    
+                    const popup = L.popup({
+                        autoPan: true,
+                    })
                         .setContent(uiElement.Render())
                         .setLatLng(e.latlng)
                         .openOn(self._map.map);

Logic/GeoLocationHandler.ts

@@ -3,7 +3,6 @@ import {UIEventSource} from "../UI/UIEventSource";
 import {UIElement} from "../UI/UIElement";
 import L from "leaflet";
 import {Helpers} from "../Helpers";
-import {UserDetails} from "./OsmConnection";
 
 export class GeoLocationHandler extends UIElement {
 
@@ -81,7 +80,7 @@ export class GeoLocationHandler extends UIElement {
         this.HideOnEmpty(true);
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         if (this.currentLocation.data) {
             return "<img src='./assets/crosshair-blue.svg' alt='locate me'>";
         }
@@ -114,6 +113,12 @@ export class GeoLocationHandler extends UIElement {
         if (!self._isActive.data) {
             self._isActive.setData(true);
             Helpers.DoEvery(60000, () => {
+                
+                if(document.visibilityState !== "visible"){
+                    console.log("Not starting gps: document not visible")
+                    return;
+                }
+                
                 self._map.map.findAccuratePosition({
                     maxWait: 10000, // defaults to 10000
                     desiredAccuracy: 50 // defaults to 20

Logic/LocalStorageSource.ts

@@ -4,14 +4,18 @@ export class LocalStorageSource {
 
     static Get(key: string, defaultValue: string = undefined): UIEventSource<string> {
         
+        //*
+            // ignore when running from the console
+            return new UIEventSource<string>(defaultValue);
+            /*/
         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)
         });
         return source;
+        //*/
     }
 }

UI/Image/ImgurImage.ts

@@ -32,7 +32,7 @@ export class ImgurImage extends UIElement {
       
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         const image = "<img src='" + this._imageLocation + "' " + "alt='' >";
         
         if(this._imageMeta.data === null){

UI/Image/SimpleImageElement.ts

@@ -8,7 +8,7 @@ export class SimpleImageElement extends UIElement {
         super(source);
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         return "<img src='" + this._source.data + "' alt='img'>";
     }
 

UI/Image/WikimediaImage.ts

@@ -29,7 +29,7 @@ export class WikimediaImage extends UIElement {
       
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         let url = Wikimedia.ImageNameToUrl(this._imageLocation, 500, 400);
         url = url.replace(/'/g, '%27');
 

UI/Input/InputElementWrapper.ts

@@ -26,10 +26,6 @@ export class InputElementWrapper<T> extends InputElement<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();
     }

UI/SlideShow.ts

@@ -39,7 +39,7 @@ export class SlideShow extends UIElement {
 
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         if (this._embeddedElements.data.length == 0) {
             return this._noimages.Render();
         }

UI/UIElement.ts

@@ -9,6 +9,9 @@ export abstract class UIElement {
     
     private _hideIfEmpty = false;
     
+    // WOrkaround as document is not defined
+    public static runningFromConsole = false;
+
     protected constructor(source: UIEventSource<any>) {
         this.id = "ui-element-" + UIElement.nextId;
         this._source = source;
@@ -37,9 +40,10 @@ export abstract class UIElement {
     }
     
     Update(): void {
-        if(document === undefined){
+        if(UIElement.runningFromConsole){
-            return ; // Running from console
+            return;
         }
+        
         let element = document.getElementById(this.id);
         if (element === undefined || element === null) {
             // The element is not painted

UI/i18n/Translation.ts

@@ -18,13 +18,11 @@ export default class Translation extends UIElement {
                 const parts = template.split("{" + k + "}");
                 const el: string | UIElement = text[k];
                 let rtext: string = "";
-                console.log(parts)
                 if (typeof (el) === "string") {
                     rtext = el;
                 } else {
                     Translation.forcedLanguage = lang; // This is a very dirty hack - it'll bite me one day
                     rtext = el.InnerRender();
-                    console.log(rtext)
                 }
                 for (let i = 0; i < parts.length - 1; i++) {
                     combined.push(parts[i]);

UI/i18n/Translations.ts

@@ -14,14 +14,14 @@ export default class Translations {
     static t = {
         cyclofix: {
             title: new T({
-                en: 'Cyclofix bicycle infrastructure',
+                en: 'Cyclofix - an open map for cyclists',
-                nl: 'Cyclofix fietsinfrastructuur',
+                nl: 'Cyclofix - een open kaart voor fietsers',
                 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." +
+                en: "On this map we want to collect data about the whereabouts of bicycle pumps and public racks in Brussels and everywhere else." +
                     "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." +
+                nl: "Op deze kaart willen we gegevens verzamelen over de locatie van fietspompen en openbare stelplaatsen in Brussel en overal ter wereld." +
                     "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."
@@ -293,9 +293,21 @@ export default class Translations {
                     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'}),
+                    question: new T({
-                    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'}),
+                        en: 'Are there tools here to repair your own bike?',
-                    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'}),
+                        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'
+                    }),
                 }
             },
             drinking_water: {
@@ -305,6 +317,20 @@ export default class Translations {
                 })
             }
         },
+        bookcases: {
+            title: new T({en: "Open Bookcase Map", nl: "Open Boekenkastjes kaart"}),
+            description: new T({
+                    en: "Search a bookcase near you and add information about them in the biggest shared map of the world.",
+                    nl: "Help mee met het creëeren van een volledige kaart met alle boekenruilkastjes!" +
+                        "Een boekenruilkastje is een vaste plaats in publieke ruimte waar iedereen een boek in kan zetten of uit kan meenemen." +
+                        "Meestal een klein kastje of doosje dat op straat staat, maar ook een oude telefooncellen of een schap in een station valt hieronder."
+                }
+            ),
+            bookcase: new T({
+                nl: "Boekenruilkastje"
+            })
+        },
+
         image: {
             addPicture: new T({en: 'Add picture', nl: 'Voeg foto toe', fr: 'TODO: fr'}),
             uploadingPicture: new T({
@@ -424,6 +450,17 @@ export default class Translations {
             pickLanguage: new T({
                 en: "Choose a language",
                 nl: "Kies je taal"
+            }),
+            about: new T({
+                en: "Easily edit and add OpenStreetMap for a certain theme",
+                nl: "Easily edit and add OpenStreetMap for a certain theme"
+
+            }),
+            nameInlineQuestion: new T({
+              nl:  "De naam van dit {category} is $$$"
+            }),
+            noNameCategory: new T({
+                nl: "{category} zonder naam"
             })
         }
     }
@@ -435,4 +472,35 @@ export default class Translations {
         return new FixedUiElement(s);
     }
 
+    public static CountTranslations() {
+        const queue: any = [Translations.t];
+        const tr: Translation[] = [];
+        while (queue.length > 0) {
+            const item = queue.pop();
+            if (item instanceof Translation || item.translations !== undefined) {
+                tr.push(item);
+            } else {
+                for (const t in item) {
+                    const x = item[t];
+                    queue.push(x)
+                }
+            }
+        }
+
+        const langaugeCounts = {};
+        for (const translation of tr) {
+            for (const language in translation.translations) {
+                if (langaugeCounts[language] === undefined) {
+                    langaugeCounts[language] = 1
+                } else {
+                    langaugeCounts[language]++;
+                }
+            }
+        }
+        for (const language in langaugeCounts) {
+            console.log("Total translations in ", language, langaugeCounts[language], "/", tr.length)
+        }
+
+    }
+
 }

assets/add.svg

@@ -0,0 +1,289 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="98"
+   height="121"
+   viewBox="0 0 98 121"
+   fill="none"
+   version="1.1"
+   id="svg132"
+   sodipodi:docname="repair_station_pump.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata136">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1680"
+     inkscape:window-height="1013"
+     id="namedview134"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="5.5166017"
+     inkscape:cx="39.674211"
+     inkscape:cy="51.981151"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg132">
+    <sodipodi:guide
+       position="48.580633,-10.69499"
+       orientation="1,0"
+       id="guide959"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <path
+     d="M53.0072 111.614C51.1916 115.395 45.8084 115.395 43.9928 111.614L13.4024 47.9145C11.8084 44.5952 14.2275 40.75 17.9097 40.75L79.0903 40.75C82.7725 40.75 85.1916 44.5952 83.5976 47.9145L53.0072 111.614Z"
+     fill="#70C549"
+     id="path2" />
+  <circle
+     cx="49"
+     cy="49"
+     r="49"
+     fill="#70C549"
+     id="circle4" />
+  <defs
+     id="defs130">
+    <filter
+       id="filter0_d"
+       x="58.84"
+       y="52.704"
+       width="25.4126"
+       height="17.436"
+       filterUnits="userSpaceOnUse"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood52" />
+      <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"
+         id="feColorMatrix54" />
+      <feOffset
+         dy="4"
+         id="feOffset56" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur58" />
+      <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"
+         id="feColorMatrix60" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend62" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend64" />
+    </filter>
+    <filter
+       id="filter1_d"
+       x="14"
+       y="15"
+       width="38.0001"
+       height="38"
+       filterUnits="userSpaceOnUse"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood67" />
+      <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"
+         id="feColorMatrix69" />
+      <feOffset
+         dy="4"
+         id="feOffset71" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur73" />
+      <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"
+         id="feColorMatrix75" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend77" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend79" />
+    </filter>
+    <filter
+       id="filter2_d"
+       x="39.5"
+       y="7"
+       width="53"
+       height="53"
+       filterUnits="userSpaceOnUse"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood82" />
+      <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"
+         id="feColorMatrix84" />
+      <feOffset
+         dy="4"
+         id="feOffset86" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur88" />
+      <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"
+         id="feColorMatrix90" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend92" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend94" />
+    </filter>
+    <filter
+       id="filter3_d"
+       x="11"
+       y="54"
+       width="54.7667"
+       height="38.1429"
+       filterUnits="userSpaceOnUse"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood97" />
+      <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"
+         id="feColorMatrix99" />
+      <feOffset
+         dy="4"
+         id="feOffset101" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur103" />
+      <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"
+         id="feColorMatrix105" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend107" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend109" />
+    </filter>
+    <filter
+       id="filter4_d"
+       x="41"
+       y="64"
+       width="28"
+       height="29"
+       filterUnits="userSpaceOnUse"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood112" />
+      <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"
+         id="feColorMatrix114" />
+      <feOffset
+         dy="4"
+         id="feOffset116" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur118" />
+      <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"
+         id="feColorMatrix120" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend122" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend124" />
+    </filter>
+    <clipPath
+       id="clip0">
+      <rect
+         width="31.8198"
+         height="31.8198"
+         fill="white"
+         transform="translate(43.5 29.5) rotate(-45)"
+         id="rect127" />
+    </clipPath>
+  </defs>
+  <g
+     transform="matrix(1.5647038,-1.5647038,1.5647038,1.5647038,-416.27812,-373.25946)"
+     id="layer1"
+     inkscape:label="Layer 1">
+    <path
+       inkscape:connector-curvature="0"
+       id="path815"
+       d="M 22.100902,291.35894 5.785709,275.04375 v 0"
+       style="fill:none;stroke:#ffffff;stroke-width:7.51411438;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path815-3"
+       d="M 22.125504,274.96508 5.8103071,291.28027 v 0"
+       style="fill:none;stroke:#ffffff;stroke-width:7.51411438;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>

assets/bike/broken_pump_2.svg

@@ -0,0 +1,219 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="123"
+   height="123"
+   viewBox="0 0 123 123"
+   version="1.1"
+   id="svg42"
+   sodipodi:docname="pump_broken_2.svg"
+   style="fill:none"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata46">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview44"
+     showgrid="false"
+     inkscape:zoom="4"
+     inkscape:cx="-9.1188224"
+     inkscape:cy="70.34059"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs40">
+    <filter
+       id="filter0_d"
+       x="-3"
+       y="2"
+       width="102.479"
+       height="102.479"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood22" />
+      <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"
+         id="feColorMatrix24" />
+      <feOffset
+         dy="4"
+         id="feOffset26" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur28" />
+      <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"
+         id="feColorMatrix30" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend32" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend34" />
+    </filter>
+    <clipPath
+       id="clip0">
+      <rect
+         width="66.806396"
+         height="66.806396"
+         transform="rotate(-45,59.937093,23.412543)"
+         id="rect37"
+         x="0"
+         y="0"
+         style="fill:#ffffff" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="pin"
+     style="display:inline"
+     sodipodi:insensitive="true">
+    <path
+       d="m 66.510602,115.17875 c -1.7831,3.887 -7.3059,3.887 -9.089,0 l -30.7431,-67.009004 c -1.5196,-3.3121 0.9005,-7.085 4.5445,-7.085 h 61.4862 c 3.644,0 6.0641,3.7729 4.5445,7.085 z"
+       id="path2"
+       inkscape:connector-curvature="0"
+       style="display:inline;fill:#080000;fill-opacity:1" />
+    <circle
+       cx="61.466103"
+       cy="51.084747"
+       r="49"
+       id="circle4"
+       style="display:inline;fill:#080000;fill-opacity:1" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="re"
+     style="display:inline">
+    <g
+       id="g917"
+       transform="translate(5,1)">
+      <rect
+         transform="rotate(24.967846)"
+         y="1.1377027"
+         x="46.170929"
+         height="3.9908068"
+         width="23.963444"
+         id="rect834"
+         style="fill:#fffcff;fill-opacity:1;stroke:#ffffff;stroke-width:3.50900006;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <rect
+         y="29.897583"
+         x="48.267147"
+         height="8.9842997"
+         width="6.5160999"
+         id="rect839"
+         style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path842"
+         d="m 47.842047,77.142657 23.821625,0.209511"
+         style="fill:none;stroke:#ffffff;stroke-width:7.93900013;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         transform="rotate(-11.065474)"
+         y="47.422955"
+         x="39.907166"
+         height="36.044868"
+         width="7.4682202"
+         id="rect863"
+         style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.87199998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="cscscc"
+         inkscape:connector-curvature="0"
+         id="path868"
+         d="m 61.790577,70.321209 c 0,0 8.500256,1.104191 8.500256,-4.19911 V 34.921012 c 0,0 0.176777,-3.623922 4.154253,-3.623922 3.977475,0 4.065864,3.447145 4.065864,3.447145 l 0.08839,29.875262"
+         style="display:inline;fill:none;stroke:#ffffff;stroke-width:2.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="cccccccc"
+         inkscape:connector-curvature="0"
+         id="path871"
+         d="m 76.543734,62.21875 4.018766,-0.03125 0.125,4.640625 3,-0.0625 0.104018,4.221891 -3.783471,-0.02589 c -2.730516,-0.27045 -3.676466,-1.207877 -3.48639,-3.569907 z"
+         style="display:inline;fill:#fffeff;fill-opacity:1;stroke:#fffeff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.97014926" />
+    </g>
+    <g
+       id="g878"
+       transform="matrix(1.1553126,0,0,1.1553126,-58.117412,7.3034699)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path842-3"
+         d="M 80.687554,63.907833 97.680134,47.211548"
+         style="display:inline;fill:none;stroke:#ff002f;stroke-width:7.93900013;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path842-3-6"
+         d="m 80.747314,46.886624 16.696285,16.99258"
+         style="display:inline;fill:none;stroke:#ff002f;stroke-width:7.93900013;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+    <g
+       id="g909"
+       transform="matrix(-0.38653686,0.32992528,-0.32992528,-0.38653686,119.84287,39.565492)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path880"
+         d="m 42.637117,56.719759 -9.765872,2.861858"
+         style="fill:none;stroke:#fff2f7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         inkscape:transform-center-y="2.136631"
+         inkscape:transform-center-x="-1.214029"
+         inkscape:connector-curvature="0"
+         id="path880-7"
+         d="M 41.55678,54.847892 31.427487,53.868138"
+         style="display:inline;fill:none;stroke:#fff2f7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path880-5"
+         d="M 42.912865,53.009676 34.053139,48.002904"
+         style="display:inline;fill:none;stroke:#fff2f7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="cssccssc"
+         inkscape:connector-curvature="0"
+         id="path903"
+         d="m 31.025218,63.115222 c 2.042393,5.538224 -7.895783,7.538343 -5.768336,-0.572763 0.08074,-0.30781 0.478017,-0.607839 -0.03073,-0.05738 C 18.565706,69.691605 9.0670288,58.551456 21.409975,56.398425 9.3199367,58.345808 13.883296,42.574618 25.69105,49.979718 13.8068,42.900226 25.044041,35.820386 28.701754,45.469171 c 0.03312,0.08736 0.04545,0.156338 0.03744,0.06922 -0.583131,-6.345206 4.758872,-4.454168 5.580546,-0.457695"
+         style="fill:none;stroke:#feffff;stroke-width:1px;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1" />
+    </g>
+    <ellipse
+       style="fill:#080000;fill-opacity:1;stroke:#000100;stroke-width:0.56348264;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path964"
+       cx="83.75"
+       cy="33.734375"
+       rx="1.0120087"
+       ry="0.96513373" />
+  </g>
+</svg>

assets/bike/logo.svg

@@ -0,0 +1,165 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="123"
+   height="123"
+   viewBox="0 0 123 123"
+   version="1.1"
+   id="svg42"
+   sodipodi:docname="logo.svg"
+   style="fill:none"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata46">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1680"
+     inkscape:window-height="1013"
+     id="namedview44"
+     showgrid="false"
+     inkscape:zoom="4"
+     inkscape:cx="51.676089"
+     inkscape:cy="85.90359"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs40">
+    <filter
+       id="filter0_d"
+       x="-3"
+       y="2"
+       width="102.479"
+       height="102.479"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood22" />
+      <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"
+         id="feColorMatrix24" />
+      <feOffset
+         dy="4"
+         id="feOffset26" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur28" />
+      <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"
+         id="feColorMatrix30" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend32" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend34" />
+    </filter>
+    <clipPath
+       id="clip0">
+      <rect
+         width="66.806396"
+         height="66.806396"
+         transform="rotate(-45,59.937093,23.412543)"
+         id="rect37"
+         x="0"
+         y="0"
+         style="fill:#ffffff" />
+    </clipPath>
+  </defs>
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="pin"
+     style="display:inline"
+     sodipodi:insensitive="true">
+    <path
+       d="m 66.510602,115.17875 c -1.7831,3.887 -7.3059,3.887 -9.089,0 l -30.7431,-67.009004 c -1.5196,-3.3121 0.9005,-7.085 4.5445,-7.085 h 61.4862 c 3.644,0 6.0641,3.7729 4.5445,7.085 z"
+       id="path2"
+       inkscape:connector-curvature="0"
+       style="display:inline;fill:#e2783d" />
+    <circle
+       cx="61.466103"
+       cy="51.084747"
+       r="49"
+       id="circle4"
+       style="display:inline;fill:#e2783d" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="re"
+     style="display:inline">
+    <rect
+       style="fill:#fffcff;fill-opacity:1;stroke:#ffffff;stroke-width:3.50900006;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect834"
+       width="23.963444"
+       height="3.9908068"
+       x="47.66375"
+       y="21.641689" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect839"
+       width="6.5160999"
+       height="8.9842997"
+       x="56.447304"
+       y="27.271845" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:7.93900013;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 47.842047,77.142657 23.821625,0.209511"
+       id="path842"
+       inkscape:connector-curvature="0" />
+    <rect
+       style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.87199998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect863"
+       width="7.4682202"
+       height="36.044868"
+       x="55.90678"
+       y="37.580132" />
+    <path
+       style="display:inline;fill:none;stroke:#ffffff;stroke-width:2.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 64.040577,70.321209 c 0,0 6.250256,1.104191 6.250256,-4.19911 0,-5.303301 0,-31.201087 0,-31.201087 0,0 0.176777,-3.623922 4.154253,-3.623922 3.977475,0 4.065864,3.447145 4.065864,3.447145 l 0.08839,29.875262"
+       id="path868"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cscscc" />
+    <path
+       style="display:inline;fill:#fffeff;fill-opacity:1;stroke:#fffeff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.97014926"
+       d="m 76.543734,62.21875 4.018766,-0.03125 0.125,4.640625 3,-0.0625 0.104018,4.221891 -3.783471,-0.02589 c -2.730516,-0.27045 -3.676466,-1.207877 -3.48639,-3.569907 z"
+       id="path871"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccc" />
+  </g>
+</svg>

assets/logo.svg

@@ -0,0 +1,297 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="150"
+   height="150"
+   viewBox="0 0 150 150"
+   version="1.1"
+   id="svg132"
+   sodipodi:docname="logo.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   style="fill:none">
+  <metadata
+     id="metadata136">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     id="namedview134"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="3.9008265"
+     inkscape:cx="102.42572"
+     inkscape:cy="85.632784"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg132">
+    <sodipodi:guide
+       position="74.86493,117.10108"
+       orientation="1,0"
+       id="guide959"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs130">
+    <filter
+       id="filter0_d"
+       x="58.84"
+       y="52.703999"
+       width="25.4126"
+       height="17.436001"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood52" />
+      <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"
+         id="feColorMatrix54" />
+      <feOffset
+         dy="4"
+         id="feOffset56" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur58" />
+      <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"
+         id="feColorMatrix60" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend62" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend64" />
+    </filter>
+    <filter
+       id="filter1_d"
+       x="14"
+       y="15"
+       width="38.000099"
+       height="38"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood67" />
+      <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"
+         id="feColorMatrix69" />
+      <feOffset
+         dy="4"
+         id="feOffset71" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur73" />
+      <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"
+         id="feColorMatrix75" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend77" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend79" />
+    </filter>
+    <filter
+       id="filter2_d"
+       x="39.5"
+       y="7"
+       width="53"
+       height="53"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood82" />
+      <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"
+         id="feColorMatrix84" />
+      <feOffset
+         dy="4"
+         id="feOffset86" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur88" />
+      <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"
+         id="feColorMatrix90" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend92" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend94" />
+    </filter>
+    <filter
+       id="filter3_d"
+       x="11"
+       y="54"
+       width="54.766701"
+       height="38.142899"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood97" />
+      <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"
+         id="feColorMatrix99" />
+      <feOffset
+         dy="4"
+         id="feOffset101" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur103" />
+      <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"
+         id="feColorMatrix105" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend107" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend109" />
+    </filter>
+    <filter
+       id="filter4_d"
+       x="41"
+       y="64"
+       width="28"
+       height="29"
+       filterUnits="userSpaceOnUse"
+       style="color-interpolation-filters:sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood112" />
+      <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"
+         id="feColorMatrix114" />
+      <feOffset
+         dy="4"
+         id="feOffset116" />
+      <feGaussianBlur
+         stdDeviation="2"
+         id="feGaussianBlur118" />
+      <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"
+         id="feColorMatrix120" />
+      <feBlend
+         mode="normal"
+         in2="BackgroundImageFix"
+         result="effect1_dropShadow"
+         id="feBlend122" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="effect1_dropShadow"
+         result="shape"
+         id="feBlend124" />
+    </filter>
+    <clipPath
+       id="clip0">
+      <rect
+         width="31.819799"
+         height="31.819799"
+         transform="rotate(-45,57.35965,-37.759145)"
+         id="rect127"
+         x="0"
+         y="0"
+         style="fill:#ffffff" />
+    </clipPath>
+  </defs>
+  <g
+     id="g867"
+     transform="matrix(1.2580494,0,0,1.2580494,13.748078,-34.889483)">
+    <path
+       style="fill:#70c549"
+       inkscape:connector-curvature="0"
+       id="path2"
+       d="m 53.0072,140.614 c -1.8156,3.781 -7.1988,3.781 -9.0144,0 L 13.4024,76.9145 C 11.8084,73.5952 14.2275,69.75 17.9097,69.75 h 61.1806 c 3.6822,0 6.1013,3.8452 4.5073,7.1645 z" />
+    <circle
+       style="fill:#70c549"
+       id="circle4"
+       r="49"
+       cy="78"
+       cx="49" />
+    <g
+       inkscape:label="Layer 1"
+       id="layer1"
+       transform="matrix(1.5647038,-1.5647038,1.5647038,1.5647038,-416.27812,-344.25946)">
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:7.51411438;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 22.100902,291.35894 5.785709,275.04375 v 0"
+         id="path815"
+         inkscape:connector-curvature="0" />
+      <path
+         style="fill:none;stroke:#ffffff;stroke-width:7.51411438;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="M 22.125504,274.96508 5.8103071,291.28027 v 0"
+         id="path815-3"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

clean.sh

@@ -10,3 +10,16 @@ rm UI/*/*/*.js
 rm Customizations/*.js
 rm Customizations/*/*.js
 rm Customizations/*/*/*.js
+
+rm *.webmanifest
+rm q*.html
+rm assets/generated/*
+
+for f in ./*.html; do
+    if [[ "$f" == "./index.html" ]] || [[ "$f" == "./land.html" ]] || [[ "$f" == "./test.html" ]]
+    then
+        echo "Not removing $f"
+    else
+        rm $f
+    fi
+done

createLayouts.ts

@@ -1,12 +1,199 @@
-/*
+import {Groen} from "./Customizations/Layouts/Groen";
-*/
+import {Bookcases} from "./Customizations/Layouts/Bookcases";
-import {Bookcases} from "./Customizations/Layers/Bookcases";
+import {GRB} from "./Customizations/Layouts/GRB";
+import Cyclofix from "./Customizations/Layouts/Cyclofix";
+import {WalkByBrussels} from "./Customizations/Layouts/WalkByBrussels";
+import {MetaMap} from "./Customizations/Layouts/MetaMap";
+import {StreetWidth} from "./Customizations/Layouts/StreetWidth";
+import {Natuurpunt} from "./Customizations/Layouts/Natuurpunt";
+import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
+import {Layout} from "./Customizations/Layout";
+import {readFileSync, writeFile, writeFileSync} from "fs";
+import {Utils} from "./Utils";
+import svg2img from 'promise-svg2img';
+import Translation from "./UI/i18n/Translation";
+import Locale from "./UI/i18n/Locale";
+import Translations from "./UI/i18n/Translations";
+import {UIElement} from "./UI/UIElement";
+import {LayerDefinition} from "./Customizations/LayerDefinition";
 
 console.log("Building routers")
 
-new Bookcases()
+UIElement.runningFromConsole = true;
-/*
+
-for(const layout in AllKnownLayouts.allSets){
+function enc(str: string): string {
-    console.log(layout)
+    return encodeURIComponent(str.toLowerCase());
 }
-*/
+
+function validate(layout: Layout) {
+
+    const translations: Translation[] = [];
+    const queue: any[] = [layout]
+
+    while (queue.length > 0) {
+        const item = queue.pop();
+        for (const key in item) {
+            const v = item[key];
+            if (v === undefined) {
+                continue;
+            }
+            if (v instanceof Translation || v?.translations !== undefined) {
+                translations.push(v);
+            } else if (
+                ["string", "function", "boolean", "number"].indexOf(typeof (v)) < 0) {
+                queue.push(v)
+            }
+        }
+    }
+
+    const missing = {}
+    const present = {}
+    for (const ln of layout.supportedLanguages) {
+        missing[ln] = 0;
+        present[ln] = 0;
+        for (const translation of translations) {
+            const txt = translation.translations[ln];
+            const isMissing = txt === undefined || txt === "" || txt.toLowerCase().indexOf("todo") >= 0;
+            if (isMissing) {
+                console.log("Missing or suspicious translation for '", translation.txt, "'in", ln, ":", txt)
+                missing[ln]++
+            } else {
+                present[ln]++;
+            }
+        }
+    }
+
+    console.log("Translation completenes for", layout.name);
+    for (const ln of layout.supportedLanguages) {
+        const amiss = missing[ln];
+        const ok = present[ln];
+        const total = amiss + ok;
+        console.log(`${ln}: ${ok}/${total}`)
+    }
+
+}
+
+
+const alreadyWritten = []
+
+function createIcon(iconPath: string, size: number) {
+
+    let name = iconPath.split(".").slice(0, -1).join(".");
+    if(name.startsWith("./")){
+        name = name.substr(2)
+    }
+    const newname = `${name}${size}.png`
+        .replace(/\//g,"_")
+        .replace("assets_","assets/generated/");
+
+    if (alreadyWritten.indexOf(newname) >= 0) {
+        return newname;
+    }
+    alreadyWritten.push(newname);
+    try {
+        readFileSync(newname);
+        return newname; // File already exists - nothing to do
+    } catch (e) {
+
+    }
+
+    svg2img(iconPath,
+        // @ts-ignore
+        {width: size, height: size, preserveAspectRatio: true})
+        .then((buffer) => {
+            console.log("Writing icon", newname)
+            writeFileSync(newname, buffer);
+        }).catch((error) => {
+            console.log("ERROR", error)
+    });
+    return newname;
+}
+
+function createManifest(layout: Layout, relativePath: string) {
+    const name = Utils.Upper(layout.name);
+
+    const icons = [];
+
+    if (layout.icon.endsWith(".svg")) {
+        // This is an svg. Lets create the needed pngs!
+        const sizes = [72, 96, 120, 128, 144, 152, 180, 192, 384, 512];
+        for (const size of sizes) {
+            const name = createIcon(layout.icon, size);
+            icons.push({
+                src: name,
+                sizes: size + "x" + size,
+                type: "image/png"
+            })
+        }
+        icons.push({
+            src: layout.icon,
+            sizes: "513x513",
+            type: "image/svg"
+        })
+    } else {
+
+        throw "Icon is not an svg for " + layout.name
+    }
+    const ogTitle = Translations.W(layout.title).InnerRender();
+    const ogDescr = Translations.W(layout.description).InnerRender();
+
+    const manif = {
+        name: name,
+        short_name: ogTitle,
+        start_url: `${relativePath}/${layout.name.toLowerCase()}.html`,
+        display: "standalone",
+        background_color: "#fff",
+        description: ogDescr,
+        orientation: "portrait-primary, landscape-primary",
+        icons: icons
+    }
+    return manif;
+}
+
+const template = readFileSync("index.html", "utf8");
+
+function createLandingPage(layout: Layout) {
+
+    Locale.language.setData(layout.supportedLanguages[0]);
+
+    const ogTitle = Translations.W(layout.title).InnerRender();
+    const ogDescr = Translations.W(layout.description).InnerRender();
+    const ogImage = layout.socialImage;
+
+    const og = `
+     <meta property="og:image" content="${ogImage}">
+    <meta property="og:title" content="${ogTitle}">
+    <meta property="og:description" content="${ogDescr}">`
+
+    return template
+        .replace(`./manifest.manifest`, `./${enc(layout.name)}.webmanifest`)
+        .replace("<!-- $$$OG-META -->", og)
+        .replace(`<link rel="icon" href="assets/add.svg" sizes="any" type="image/svg+xml">`,
+            `<link rel="icon" href="${layout.icon}" sizes="any" type="image/svg+xml">`)
+}
+
+
+const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap"]
+const all = AllKnownLayouts.allSets;
+for (const layoutName in all) {
+    if (blacklist.indexOf(layoutName.toLowerCase()) >= 0) {
+        console.log(`Skipping a layout with name${layoutName}, it is on the blacklist`);
+        continue;
+    }
+    const err = err => {
+        if (err !== null) {
+            console.log("Could not write manifest for ", layoutName, " because ", err)
+        }
+    };
+    const layout = all[layoutName];
+    validate(layout)
+    const manif = JSON.stringify(createManifest(layout, "/MapComplete"));
+
+    const manifestLocation = encodeURIComponent(layout.name.toLowerCase()) + ".webmanifest";
+    writeFile(manifestLocation, manif, err);
+
+    const landing = createLandingPage(layout);
+    writeFile(enc(layout.name) + ".html", landing, err)
+}
+
+Translations.CountTranslations();

deploy.sh

@@ -1,10 +1,10 @@
 #! /bin/bash
 
-npx ts-node createLayout.ts
+ts-node createLayouts.ts
-
 npm run build
 rm -rf /home/pietervdvn/git/pietervdvn.github.io/MapComplete/*
 cp -r dist/* /home/pietervdvn/git/pietervdvn.github.io/MapComplete/
+./clean.sh
 cd /home/pietervdvn/git/pietervdvn.github.io/MapComplete/
 git add .
 git commit -m "New mapcomplete version"

index.css

@@ -855,6 +855,13 @@ form {
 }
 
 .featureinfobox {
+    max-height: 80vh;
+    overflow-y: auto;
+}
+
+.featureinfobox > div {
+    width: calc(100% - 2em);
+    padding-left: 1em;
 }
 
 .featureinfoboxtitle {

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>    
-
+<!-- WARNING: index.html serves as a template. If you want to change something, change it there -->
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -7,23 +7,12 @@
     <title>MapComplete</title>
     <link rel="stylesheet" href="./vendor/leaflet.css"/>
     <link rel="stylesheet" href="./index.css"/>
-    <link rel="manifest" href="./manifest.webmanifest">
+    <link rel="manifest" href="./manifest.manifest">
-
+    <link rel="icon" href="assets/add.svg" sizes="any" type="image/svg+xml">
     
+    <meta property="og:type" content="website">
     <!-- $$$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:type" content="website"/>
-<meta property="og:title" content="Cyclofix - a map for and by cyclists"/>
-<meta property="og:description"
-    content="With this tool, cyclists can contribute to a map of cycling infrastructure"/>
--->
 </head>
 <body>
 <div id="messagesboxmobilewrapper">

index.ts

@@ -56,6 +56,11 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
 
 let defaultLayout = "all"
 
+const path = window.location.pathname.split("/").slice(-1)[0];
+if (path !== "index.html") {
+    defaultLayout = path.substr(0, path.length - 5);
+    console.log("Using", defaultLayout)
+}
 
 // Run over all questsets. If a part of the URL matches a searched-for part in the layout, it'll take that as the default
 for (const k in AllKnownLayouts.allSets) {
@@ -75,6 +80,9 @@ defaultLayout = QueryParameters.GetQueryParameter("layout").data ?? defaultLayou
 
 const layoutToUse: Layout = AllKnownLayouts.allSets[defaultLayout] ?? AllKnownLayouts["all"];
 console.log("Using layout: ", layoutToUse.name);
+if(layoutToUse === undefined){
+    console.log("Incorrect layout")
+}
 
 
 // ----------------- Setup a few event sources -------------
@@ -190,7 +198,7 @@ for (const layer of layoutToUse.layers) {
 
     minZoom = Math.max(minZoom, layer.minzoom);
 
-    const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
+    const flayer = FilteredLayer.fromDefinition(layer, bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
 
     const addButton = {
         name: Translations.W(layer.name),

manifest.manifest

@@ -1,24 +1,24 @@
 {
   "name": "MapComplete",
   "short_name": "MapComplete",
-  "start_url": ".",
+  "start_url": "index.html",
   "display": "standalone",
   "background_color": "#fff",
   "description": "Easily edit OpenStreetMap",
   "orientation": "portrait-primary, landscape-primary",
   "icons": [
     {
-      "src": "assets/logos/logo192.png",
+      "src": "./assets/add.svg",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "assets/logos/logo512.png",
+      "src": "./assets/add.svg",
       "sizes": "512x512",
       "type": "image/png"
     },
     {
-      "src": "assets/logos/logo.svg",
+      "src": "./assets/add.svg",
       "sizes": "513x513",
       "type": "image/svg"
     }

package-lock.json

@@ -779,6 +779,16 @@
         "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
+    "@babel/polyfill": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.10.4.tgz",
+      "integrity": "sha512-8BYcnVqQ5kMD2HXoHInBH7H1b/uP3KdnwCYXOqFnXqguOyuu443WXusbIUbWEfY3Z0Txk0M1uG/8YuAMhNl6zg==",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.6.5",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/preset-env": {
       "version": "7.9.6",
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.9.6.tgz",
@@ -992,6 +1002,12 @@
         "physical-cpu-count": "^2.0.0"
       }
     },
+    "@types/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@types/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-8GAYQ1jDRUQkSpHzJUqXwAkYFOxuWAOGLhIR4aPd/Y/yL12Q/9m7LsKpHKlfKdNE/362Hc9wPI1Yh6opDfxVJg==",
+      "dev": true
+    },
     "@types/geojson": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-1.0.6.tgz",
@@ -1014,6 +1030,12 @@
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.3.tgz",
       "integrity": "sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg=="
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
+    },
     "acorn": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
@@ -1109,6 +1131,22 @@
         }
       }
     },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "dev": true
+    },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "dev": true,
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -1545,6 +1583,12 @@
         "pkg-up": "^2.0.0"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "dev": true
+    },
     "buffer": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
@@ -1638,6 +1682,120 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz",
       "integrity": "sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw=="
     },
+    "canvas": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.6.1.tgz",
+      "integrity": "sha512-S98rKsPcuhfTcYbtF53UIJhcbgIAK533d1kJKMwsMwAIFgfd58MOyxRud3kktlzWiEkFliaJtvyZCBtud/XVEA==",
+      "dev": true,
+      "requires": {
+        "nan": "^2.14.0",
+        "node-pre-gyp": "^0.11.0",
+        "simple-get": "^3.0.3"
+      }
+    },
+    "canvg": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-1.5.3.tgz",
+      "integrity": "sha512-7Gn2IuQzvUQWPIuZuFHrzsTM0gkPz2RRT9OcbdmA03jeKk8kltrD8gqUzNX15ghY/4PV5bbe5lmD6yDLDY6Ybg==",
+      "dev": true,
+      "requires": {
+        "jsdom": "^8.1.0",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^1.4.1",
+        "xmldom": "^0.1.22"
+      },
+      "dependencies": {
+        "abab": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
+          "integrity": "sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4=",
+          "dev": true
+        },
+        "acorn": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz",
+          "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc=",
+          "dev": true
+        },
+        "acorn-globals": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-1.0.9.tgz",
+          "integrity": "sha1-VbtemGkVB7dFedBRNBMhfDgMVM8=",
+          "dev": true,
+          "requires": {
+            "acorn": "^2.1.0"
+          }
+        },
+        "cssstyle": {
+          "version": "0.2.37",
+          "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.37.tgz",
+          "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=",
+          "dev": true,
+          "requires": {
+            "cssom": "0.3.x"
+          }
+        },
+        "jsdom": {
+          "version": "8.5.0",
+          "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-8.5.0.tgz",
+          "integrity": "sha1-1Nj12/J2hjW2KmKCO5R89wcevJg=",
+          "dev": true,
+          "requires": {
+            "abab": "^1.0.0",
+            "acorn": "^2.4.0",
+            "acorn-globals": "^1.0.4",
+            "array-equal": "^1.0.0",
+            "cssom": ">= 0.3.0 < 0.4.0",
+            "cssstyle": ">= 0.2.34 < 0.3.0",
+            "escodegen": "^1.6.1",
+            "iconv-lite": "^0.4.13",
+            "nwmatcher": ">= 1.3.7 < 2.0.0",
+            "parse5": "^1.5.1",
+            "request": "^2.55.0",
+            "sax": "^1.1.4",
+            "symbol-tree": ">= 3.1.0 < 4.0.0",
+            "tough-cookie": "^2.2.0",
+            "webidl-conversions": "^3.0.1",
+            "whatwg-url": "^2.0.1",
+            "xml-name-validator": ">= 2.0.1 < 3.0.0"
+          }
+        },
+        "parse5": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
+          "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=",
+          "dev": true
+        },
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
+          "dev": true
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
+          "dev": true
+        },
+        "whatwg-url": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-2.0.1.tgz",
+          "integrity": "sha1-U5ayBD8CDub3BNnEXqhRnnJN5lk=",
+          "dev": true,
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        },
+        "xml-name-validator": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz",
+          "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=",
+          "dev": true
+        }
+      }
+    },
     "cardinal": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-0.4.4.tgz",
@@ -1681,6 +1839,12 @@
         "upath": "^1.1.1"
       }
     },
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true
+    },
     "cipher-base": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
@@ -1754,6 +1918,11 @@
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
       "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
     },
+    "closure": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/closure/-/closure-1.0.3.tgz",
+      "integrity": "sha1-5BD7MJWJaIGHfTeLjhSV93S2HEk="
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -1764,6 +1933,12 @@
         "q": "^1.1.2"
       }
     },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+      "dev": true
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -1848,6 +2023,12 @@
       "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
       "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA=="
     },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "dev": true
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -2276,6 +2457,21 @@
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
+    "decompress-response": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
+      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+      "dev": true,
+      "requires": {
+        "mimic-response": "^2.0.0"
+      }
+    },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true
+    },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -2346,6 +2542,12 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "dev": true
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -2365,6 +2567,17 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
     },
+    "detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
+      "dev": true
+    },
+    "diff": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-1.4.0.tgz",
+      "integrity": "sha1-fyjS657nsVqX79ic5j3P2qPMur8="
+    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@@ -2509,6 +2722,11 @@
         }
       }
     },
+    "email-validator": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz",
+      "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ=="
+    },
     "emoji-regex": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
@@ -2895,6 +3113,15 @@
       "integrity": "sha1-invTcYa23d84E/I4WLV+yq9eQdQ=",
       "dev": true
     },
+    "fs-minipass": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
+      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
+      "dev": true,
+      "requires": {
+        "minipass": "^2.6.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2915,6 +3142,59 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "dev": true,
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        }
+      }
+    },
     "gensync": {
       "version": "1.0.0-beta.1",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz",
@@ -3096,6 +3376,12 @@
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
       "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
     },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "dev": true
+    },
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
@@ -3310,6 +3596,15 @@
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
       "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
     },
+    "ignore-walk": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
+      "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
+      "dev": true,
+      "requires": {
+        "minimatch": "^3.0.4"
+      }
+    },
     "import-fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
@@ -3347,6 +3642,12 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "ini": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+      "dev": true
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -3590,6 +3891,27 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
+    "jade": {
+      "version": "0.26.3",
+      "resolved": "https://registry.npmjs.org/jade/-/jade-0.26.3.tgz",
+      "integrity": "sha1-jxDXl32NefL2/4YqgbBRPMslaGw=",
+      "requires": {
+        "commander": "0.6.1",
+        "mkdirp": "0.3.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-0.6.1.tgz",
+          "integrity": "sha1-+mihT2qUXVTbvlDYzbMyDp47GgY="
+        },
+        "mkdirp": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz",
+          "integrity": "sha1-G79asbqCevI1dRQ0kEJkVfSB/h4="
+        }
+      }
+    },
     "jquery": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
@@ -3772,6 +4094,24 @@
         "type-check": "~0.3.2"
       }
     },
+    "libphonenumber": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/libphonenumber/-/libphonenumber-0.0.10.tgz",
+      "integrity": "sha1-54u/ZgGYnNCfpDUEdkaI1BeUFIw=",
+      "requires": {
+        "closure": "1.0.3",
+        "mocha": "^2.4.5"
+      }
+    },
+    "libphonenumber-js": {
+      "version": "1.7.55",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.7.55.tgz",
+      "integrity": "sha512-vYT83akP6uJq5QiMgzzVsWrGWJpQ4KgX2SmW0RBgLFD1UzICjVgp+7ajEep3oRcv2838kMTu1gj7KHPi0Y6Y6w==",
+      "requires": {
+        "minimist": "^1.2.5",
+        "xml2js": "^0.4.17"
+      }
+    },
     "locate-path": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
@@ -3822,6 +4162,11 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "lru-cache": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
+      "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI="
+    },
     "magic-string": {
       "version": "0.22.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
@@ -3937,6 +4282,12 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
     },
+    "mimic-response": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
+      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+      "dev": true
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -3960,6 +4311,25 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
+    "minipass": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
+      "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.0"
+      }
+    },
+    "minizlib": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
+      "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
+      "dev": true,
+      "requires": {
+        "minipass": "^2.9.0"
+      }
+    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -3987,6 +4357,89 @@
         "minimist": "^1.2.5"
       }
     },
+    "mocha": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-2.5.3.tgz",
+      "integrity": "sha1-FhvlvetJZ3HrmzV0UFC2IrWu/Fg=",
+      "requires": {
+        "commander": "2.3.0",
+        "debug": "2.2.0",
+        "diff": "1.4.0",
+        "escape-string-regexp": "1.0.2",
+        "glob": "3.2.11",
+        "growl": "1.9.2",
+        "jade": "0.26.3",
+        "mkdirp": "0.5.1",
+        "supports-color": "1.2.0",
+        "to-iso-string": "0.0.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.3.0.tgz",
+          "integrity": "sha1-/UMOiJgy7DU7ms0d4hfBHLPu+HM="
+        },
+        "debug": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
+          "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
+          "requires": {
+            "ms": "0.7.1"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.2.tgz",
+          "integrity": "sha1-Tbwv5nTnGUnK8/smlc5/LcHZqNE="
+        },
+        "glob": {
+          "version": "3.2.11",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
+          "integrity": "sha1-Spc/Y1uRkPcV0QmH1cAP0oFevj0=",
+          "requires": {
+            "inherits": "2",
+            "minimatch": "0.3"
+          }
+        },
+        "growl": {
+          "version": "1.9.2",
+          "resolved": "https://registry.npmjs.org/growl/-/growl-1.9.2.tgz",
+          "integrity": "sha1-Dqd0NxXbjY3ixe3hd14bRayFwC8="
+        },
+        "minimatch": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
+          "integrity": "sha1-J12O2qxPG7MyZHIInnlJyDlGmd0=",
+          "requires": {
+            "lru-cache": "2",
+            "sigmund": "~1.0.0"
+          }
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
+        "ms": {
+          "version": "0.7.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
+          "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg="
+        },
+        "supports-color": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.2.0.tgz",
+          "integrity": "sha1-/x7R5hFp0Gs88tWI4YixjYhH4X4="
+        }
+      }
+    },
     "monotone-convex-hull-2d": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/monotone-convex-hull-2d/-/monotone-convex-hull-2d-1.0.1.tgz",
@@ -4003,8 +4456,7 @@
     "nan": {
       "version": "2.14.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
-      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
+      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw=="
-      "optional": true
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -4024,6 +4476,28 @@
         "to-regex": "^3.0.1"
       }
     },
+    "needle": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.5.0.tgz",
+      "integrity": "sha512-o/qITSDR0JCyCKEQ1/1bnUXMmznxabbwi/Y4WwJElf+evwJNFNwIDMCCt5IigFVxgeGBJESLohGtIS9gEzo1fA==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -4076,11 +4550,39 @@
         }
       }
     },
+    "node-pre-gyp": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.11.0.tgz",
+      "integrity": "sha512-TwWAOZb0j7e9eGaf9esRx3ZcLaE5tQ2lvYy1pb5IAaG1a2e2Kv5Lms1Y4hpj+ciXJRofIxxlt5haeQ/2ANeE0Q==",
+      "dev": true,
+      "requires": {
+        "detect-libc": "^1.0.2",
+        "mkdirp": "^0.5.1",
+        "needle": "^2.2.1",
+        "nopt": "^4.0.1",
+        "npm-packlist": "^1.1.6",
+        "npmlog": "^4.0.2",
+        "rc": "^1.2.7",
+        "rimraf": "^2.6.1",
+        "semver": "^5.3.0",
+        "tar": "^4"
+      }
+    },
     "node-releases": {
       "version": "1.1.56",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.56.tgz",
       "integrity": "sha512-EVo605FhWLygH8a64TjgpjyHYOihkxECwX1bHHr8tETJKWEiWS2YJjPbvsX2jFjnjTNEgBCmk9mLjKG1Mf11cw=="
     },
+    "nopt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+      "dev": true,
+      "requires": {
+        "abbrev": "1",
+        "osenv": "^0.1.4"
+      }
+    },
     "normalize-html-whitespace": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/normalize-html-whitespace/-/normalize-html-whitespace-1.0.0.tgz",
@@ -4096,6 +4598,44 @@
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
     },
+    "npm-bundled": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz",
+      "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==",
+      "dev": true,
+      "requires": {
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
+    "npm-normalize-package-bin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
+      "dev": true
+    },
+    "npm-packlist": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
+      "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
+      "dev": true,
+      "requires": {
+        "ignore-walk": "^3.0.1",
+        "npm-bundled": "^1.0.1",
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "dev": true,
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
@@ -4104,6 +4644,18 @@
         "boolbase": "~1.0.0"
       }
     },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "dev": true
+    },
+    "nwmatcher": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz",
+      "integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==",
+      "dev": true
+    },
     "nwsapi": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
@@ -4284,6 +4836,28 @@
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
       "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
     },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "dev": true
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "dev": true
+    },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
     "osm-auth": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/osm-auth/-/osm-auth-1.0.2.tgz",
@@ -5082,6 +5656,19 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "promise-svg2img": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/promise-svg2img/-/promise-svg2img-0.2.0.tgz",
+      "integrity": "sha512-XkbyV+5pU/2iO+BIB06WG8M8iXh7ZjlL5ylukChk9Y8A8LueaFJ5cGf6m+ARib78HOh86nk6Q14nTkMviJXl8Q==",
+      "dev": true,
+      "requires": {
+        "@types/atob": "^2.1.2",
+        "atob": "^2.0.0",
+        "btoa": "^1.1.2",
+        "canvas": "^2.6.0",
+        "canvg": "^1.5.3"
+      }
+    },
     "protocol-buffers-schema": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.4.0.tgz",
@@ -5180,6 +5767,18 @@
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
     },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      }
+    },
     "read-file": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/read-file/-/read-file-0.2.0.tgz",
@@ -5414,6 +6013,12 @@
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0=",
+      "dev": true
+    },
     "rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -5635,11 +6240,33 @@
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
     },
+    "sigmund": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA="
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
       "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
     },
+    "simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "dev": true
+    },
+    "simple-get": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.0.tgz",
+      "integrity": "sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==",
+      "dev": true,
+      "requires": {
+        "decompress-response": "^4.2.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -5857,6 +6484,12 @@
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
     },
+    "stackblur-canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-1.4.1.tgz",
+      "integrity": "sha1-hJqm+UsnL/JvZHH6QTDtH35HlVs=",
+      "dev": true
+    },
     "static-eval": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.5.tgz",
@@ -6039,6 +6672,12 @@
         "ansi-regex": "^3.0.0"
       }
     },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "dev": true
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -6094,6 +6733,21 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "tar": {
+      "version": "4.4.13",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz",
+      "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==",
+      "dev": true,
+      "requires": {
+        "chownr": "^1.1.1",
+        "fs-minipass": "^1.2.5",
+        "minipass": "^2.8.6",
+        "minizlib": "^1.2.1",
+        "mkdirp": "^0.5.0",
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.3"
+      }
+    },
     "terser": {
       "version": "3.17.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-3.17.0.tgz",
@@ -6155,6 +6809,11 @@
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
     },
+    "to-iso-string": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/to-iso-string/-/to-iso-string-0.0.2.tgz",
+      "integrity": "sha1-TcGeZk38y+Jb2NtQiwDG2hWCVdE="
+    },
     "to-object-path": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
@@ -6737,9 +7396,9 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "typescript": {
-      "version": "3.9.3",
+      "version": "3.9.7",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.3.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz",
-      "integrity": "sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ==",
+      "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==",
       "dev": true
     },
     "uncss": {
@@ -7042,6 +7701,27 @@
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
     },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      },
+      "dependencies": {
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        }
+      }
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -7105,6 +7785,20 @@
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
       "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
     },
+    "xml2js": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+      "requires": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      }
+    },
+    "xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
+    },
     "xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
@@ -7125,6 +7819,12 @@
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
       "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
     },
+    "yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true
+    },
     "yargs": {
       "version": "14.2.3",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.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 UI/** Logic/** assets/**/* vendor/* vendor/*/*",
+    "start": "parcel *.html UI/** Logic/** assets/**/* vendor/* vendor/*/*",
-    "build": "rm -rf dist/ && parcel build --public-url ./ index.html land.html assets/* assets/*/* vendor/* vendor/*/*",
+    "build": "rm -rf dist/ && parcel build --public-url ./ *.html assets/* assets/*/* vendor/* vendor/*/*",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -15,18 +15,23 @@
   "author": "pietervdvn",
   "license": "MIT",
   "dependencies": {
+    "email-validator": "^2.0.4",
     "jquery": "latest",
     "leaflet": "^1.6.0",
+    "libphonenumber": "0.0.10",
+    "libphonenumber-js": "^1.7.55",
     "osm-auth": "^1.0.2",
     "osmtogeojson": "^3.0.0-beta.4",
     "parcel": "^1.12.4",
     "turf": "^3.0.14"
   },
   "devDependencies": {
-    "fs": "0.0.1-security",
+    "@babel/polyfill": "^7.10.4",
     "@types/node": "^7.0.5",
+    "fs": "0.0.1-security",
+    "promise-svg2img": "^0.2.0",
     "read-file": "^0.2.0",
-    "typescript": "^3.9.3",
+    "typescript": "^3.9.7",
     "write-file": "^1.0.0"
   }
 }

vendor/leaflet.css

@@ -0,0 +1,640 @@
+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Prevents IE11 from highlighting tiles in blue */
+.leaflet-tile::selection {
+	background: transparent;
+}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg,
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+	max-width: none !important;
+	max-height: none !important;
+	}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	/* Fallback for FF which doesn't support pinch-zoom */
+	touch-action: none;
+	touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-container {
+	-webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-tile {
+	will-change: opacity;
+	}
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	will-change: transform;
+	}
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	cursor:         grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	cursor:         grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive,
+svg.leaflet-image-layer.leaflet-interactive path {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline: 0;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-container a.leaflet-active {
+	outline: 2px solid orange;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a,
+.leaflet-bar a:hover {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+.leaflet-touch .leaflet-bar a:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	}
+.leaflet-touch .leaflet-bar a:last-child {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	}
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+	font-size: 22px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path {
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.7);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover {
+	text-decoration: underline;
+	}
+.leaflet-container .leaflet-control-attribution,
+.leaflet-container .leaflet-control-scale {
+	font-size: 11px;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	font-size: 11px;
+	white-space: nowrap;
+	overflow: hidden;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+
+	background: #fff;
+	background: rgba(255, 255, 255, 0.5);
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 19px;
+	line-height: 1.4;
+	}
+.leaflet-popup-content p {
+	margin: 18px 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 4px 4px 0 0;
+	border: none;
+	text-align: center;
+	width: 18px;
+	height: 14px;
+	font: 16px/14px Tahoma, Verdana, sans-serif;
+	color: #c3c3c3;
+	text-decoration: none;
+	font-weight: bold;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover {
+	color: #999;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	border-bottom: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+.leaflet-oldie .leaflet-popup-tip-container {
+	margin-top: -1px;
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-clickable {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}