Merge branches, fix bugs with initial zoom and location, fix bug which starts loading right away, fix bug when overpass times out

InitUiElements.ts

@@ -355,11 +355,12 @@ export class InitUiElements {
         let baseLayerOptions = BaseLayers.baseLayers.map((layer) => {
             return {value: layer, shown: layer.name}
         });
-        let layerControlPanel = new Combine([new DropDown(Translations.t.general.backgroundMap, baseLayerOptions, State.state.bm.CurrentLayer)]);
+        let layerControlPanel = new Combine(
+            [new DropDown(Translations.t.general.backgroundMap, baseLayerOptions, State.state.bm.CurrentLayer)]);
         layerControlPanel.SetStyle("margin:1em");
         if (State.state.filteredLayers.data.length > 1) {
             const layerSelection = new LayerSelection();
-            layerControlPanel = new Combine([layerSelection, layerControlPanel]);
+            layerControlPanel = new Combine([layerSelection, "<br/>",layerControlPanel]);
         }
         return layerControlPanel;
     }
@@ -375,6 +376,7 @@ export class InitUiElements {
                 new Combine([
                     closeButton,
                     layerControlPanel]).SetStyle("display:flex;flex-direction:row;")
+                    .SetClass("hidden-on-mobile")
                 ,
                 new Combine([Img.closedFilterButton])
                     .SetStyle("display:block;border-radius:50%;background:white;padding:1em;"),

Logic/LayerUpdater.ts

@@ -30,6 +30,9 @@ export class LayerUpdater {
         const self = this;
 
         this.sufficentlyZoomed = State.state.locationControl.map(location => {
+                if(location?.zoom === undefined){
+                    return false;
+                }
                 let minzoom = Math.min(...state.layoutToUse.data.layers.map(layer => (layer as LayerDefinition).minzoom ?? 18));
                 return location.zoom >= minzoom;
             }, [state.layoutToUse]

Logic/Osm/Overpass.ts

@@ -44,6 +44,7 @@ export class Overpass {
 
                 if(json.elements === [] && json.remarks.indexOf("runtime error") > 0){
                     console.log("Timeout or other runtime error");
+                    onFail("Runtime error (timeout)")
                     return;
                 }
                 // @ts-ignore

State.ts

@@ -80,12 +80,9 @@ export class State {
      */
     public readonly selectedElement = new UIEventSource<{ feature: any }>(undefined);
 
-    public readonly zoom = QueryParameters.GetQueryParameter("z", undefined)
+    public readonly zoom: UIEventSource<number>;
-        .syncWith(LocalStorageSource.Get("zoom"));
+    public readonly lat: UIEventSource<number>;
-    public readonly lat = QueryParameters.GetQueryParameter("lat", undefined)
+    public readonly lon: UIEventSource<number>;
-        .syncWith(LocalStorageSource.Get("lat"));
-    public readonly lon = QueryParameters.GetQueryParameter("lon", undefined)
-        .syncWith(LocalStorageSource.Get("lon"));
 
 
     public readonly featureSwitchUserbadge: UIEventSource<boolean>;
@@ -123,15 +120,36 @@ export class State {
 
     constructor(layoutToUse: Layout) {
         const self = this;
-        this.layoutToUse.setData(layoutToUse)
+        this.layoutToUse.setData(layoutToUse);
+
+        function asFloat(source: UIEventSource<string>): UIEventSource<number> {
+            return source.map(str => {
+                let parsed = parseFloat(str);
+                return isNaN(parsed) ? undefined : parsed;
+            }, [], fl => {
+                if (fl === undefined || isNaN(fl)) {
+                    return undefined;
+                }
+                return ("" + fl).substr(0, 6);
+            })
+        }
+
+        this.zoom = asFloat(QueryParameters.GetQueryParameter("z", "" + layoutToUse.startzoom)
+            .syncWith(LocalStorageSource.Get("zoom")));
+        this.lat = asFloat(QueryParameters.GetQueryParameter("lat", "" + layoutToUse.startLat)
+            .syncWith(LocalStorageSource.Get("lat")));
+        this.lon = asFloat(QueryParameters.GetQueryParameter("lon", "" + layoutToUse.startLon)
+            .syncWith(LocalStorageSource.Get("lon")));
+
+
         this.locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
             zoom: Utils.asFloat(this.zoom.data),
             lat: Utils.asFloat(this.lat.data),
             lon: Utils.asFloat(this.lon.data),
         }).addCallback((latlonz) => {
-            this.zoom.setData(latlonz.zoom?.toString());
+            this.zoom.setData(latlonz.zoom);
-            this.lat.setData(latlonz.lat?.toString()?.substr(0, 6));
+            this.lat.setData(latlonz.lat);
-            this.lon.setData(latlonz.lon?.toString()?.substr(0, 6));
+            this.lon.setData(latlonz.lon);
         });
 
         this.layoutToUse.addCallback(layoutToUse => {

UI/FullScreenMessageBoxHandler.ts

@@ -23,11 +23,13 @@ export class FullScreenMessageBox extends UIElement {
             this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
                 "display:block;"+
                 "padding: 1em;"+
-                "padding-bottom:5em;"+
+                "padding-bottom:6em;"+
                 `margin-bottom:${FullScreenMessageBox._toTheMap_height};`+
                 "box-sizing:border-box;"+
                 `height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});`+
                 "overflow-y: auto;" +
+                "max-width:100vw;" +
+                "overflow-x:hidden;" +
                 "background:white;"
 
             );

UI/LayerSelection.ts

@@ -16,37 +16,34 @@ export class LayerSelection extends UIElement {
         this._checkboxes = [];
 
         for (const layer of State.state.filteredLayers.data) {
-            const checkbox = Img.checkmark;
+            let iconUrl = "./asets/checkbox.svg";
-            let icon : UIElement;
+            let iconUrlBlank = "";
             if (layer.layerDef.icon && layer.layerDef.icon !== "") {
-                icon = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
+                iconUrl = layer.layerDef.icon as string;
-            }else{
+                iconUrlBlank = layer.layerDef.icon as string;
-                icon = new FixedUiElement(Img.checkmark);
             }
+            const icon = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${iconUrl}">`);
 
-            let iconUnselected : UIElement;
+            let iconUnselected: UIElement;
-            if (layer.layerDef.icon && layer.layerDef.icon !== "") {
+                iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em; opacity:0.2;" src="${iconUrl}">`);
-                iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
-            }else{
-                iconUnselected = new FixedUiElement("");
-            }
-            iconUnselected.SetStyle("opacity:0.2");
             
             const name = Translations.WT(layer.layerDef.name).Clone()
                 .SetStyle("font-size:large;margin-left: 0.5em;");
 
-            
+
             const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => {
-                if(location.zoom < layer.layerDef.minzoom){
+                if (location.zoom < layer.layerDef.minzoom) {
                     return Translations.t.general.zoomInToSeeThisLayer
                         .SetClass("alert")
+                        .SetStyle("display: block ruby;width:min-content;")
                         .Render();
                 }
                 return ""
             }))
+            const style = "display:flex;align-items:center;"
             this._checkboxes.push(new CheckBox(
-                new Combine([icon, name, zoomStatus]),
+                new Combine([icon, name, zoomStatus]).SetStyle(style),
-                new Combine([iconUnselected, "<del>",name,"</del>", zoomStatus]),
+                new Combine([iconUnselected, "<del>", name, "</del>", zoomStatus]).SetStyle(style),
                 layer.isDisplayed)
                 .SetStyle("margin:0.3em;")
             );

UI/SimpleAddUI.ts

@@ -47,6 +47,9 @@ export class SimpleAddUI extends UIElement {
         
         const self = this;
         for (const layer of State.state.filteredLayers.data) {
+            
+            this.ListenTo(layer.isDisplayed);
+            
             for (const preset of layer.layerDef.presets) {
 
                 let icon: string = "./assets/bug.svg";
@@ -136,6 +139,16 @@ export class SimpleAddUI extends UIElement {
         const userDetails = State.state.osmConnection.userDetails;
 
         if (this._confirmPreset.data !== undefined) {
+            
+            if(!this._confirmPreset.data.layerToAddTo.isDisplayed.data){
+                return new Combine([
+                    Translations.t.general.add.layerNotEnabled.Subs({layer: this._confirmPreset.data.layerToAddTo.layerDef.name})
+                        .SetClass("alert"),
+                    this.openLayerControl,
+                    
+                    this.cancelButton
+                ]).Render();
+            }
 
             let tagInfo = "";
             const csCount = State.state.osmConnection.userDetails.data.csCount;

UI/TagRendering.ts

@@ -159,7 +159,8 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
         this._saveButton = new SaveButton(this._questionElement.GetValue())
             .onClick(save);
 
-        this._friendlyLogin = Translations.t.general.loginToStart
+        this._friendlyLogin = Translations.t.general.loginToStart.Clone()
+            .SetClass("login-button-friendly")
             .onClick(() => State.state.osmConnection.AttemptLogin())
 
         this._editButton = new FixedUiElement("");
@@ -463,12 +464,10 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
                 this.ApplyTemplate(this._question).SetClass('question-text');
             return "<div class='question'>" +
                 new Combine([
-                    question.Render(),
+                    question,
                     "<br/>",
                     this._questionElement,
-                    "<span class='login-button-friendly'>",
                     this._friendlyLogin,
-                    "</span>",
                 ]).Render() + "</div>";
         }
 

UI/i18n/Translations.ts

@@ -384,6 +384,11 @@ export default class Translations {
                     "en": "Open the layer control box",
                     "nl": "Open de laag-instellingen"
                 })
+                ,
+                layerNotEnabled: new T({
+                    "en": "The layer {layer} is not enabled. Enable this layer to add a point",
+                    "nl": "De laag {layer} is gedeactiveerd. Activeer deze om een punt toe te voegn"
+                })
             },
             pickLanguage: new T({
                 en: "Choose a language",

assets/layers/cycling_themed_object/cycling_themed_objects.json

@@ -5,7 +5,7 @@
     "nl": "Fietsgerelateerd object",
     "fr": "Objet cycliste"
   },
-  "minzoom": 14,
+  "minzoom": 13,
   "overpassTags": "theme~cycling|bicycle",
   "title": {
     "render": {

assets/themes/bookcases/Bookcases.json

@@ -18,7 +18,7 @@
   "socialImage": null,
   "startLat": 0,
   "startLon": 0,
-  "startZoom": 10,
+  "startZoom": 1,
   "widenFactor": 0.05,
   "roamingRenderings": [],
   "layers": [

index.css

@@ -65,7 +65,8 @@ body {
 }
 
     form {
-        display: inline;
+        display: inline-block;
+        max-width: 90vw;
     }
 
     .invalid {
@@ -187,8 +188,10 @@ body {
     }
 
     #hidden-on-mobile {
-        display: none; /*Only shown on small screens*/
+        display: none; /*Only shown on small screens - this is probably named wrongly*/
     }
+    
+    
 
     .add-popup-all-buttons {
         max-height: 50vh;
@@ -197,21 +200,20 @@ body {
         width: 100%;
     }
 
-    @media only screen and (max-height: 600px) and (not (max-width:
+@media only screen and (max-height: 600px) and (not (max-width:700px)) {
 
-    700px
+    /* Landscape and portrait */
+    #topleft-tools {
+        padding: 0.1em 0.1em 0.1em unset;
+    }
 
-    )) {
+    .hidden-on-mobile {
+        display: none !important;
+    }
 
-        /* Landscape and portrait */
+    #userbadge-and-search {
-        #topleft-tools {
+        position: relative;
-            padding: 0.1em 0.1em 0.1em unset;
+        display: inline-block;
-        }
-
-
-        #userbadge-and-search {
-            position: relative;
-            display: inline-block;
             width: auto;
             max-width: 50vw;
             margin: 0;
@@ -237,9 +239,12 @@ body {
             width: auto;
             max-width: 100vw;
         }
-        
 
 
+        .hidden-on-mobile {
+            display: none !important;
+        }
+
         #topleft-tools {
             padding: 0.2em !important;
             padding-top: 0.3em !important;
@@ -363,6 +368,11 @@ body {
     #hidden-on-mobile {
         display: block;
     }
+
+
+    .hidden-on-mobile {
+        display: none !important;
+    }
   
     #messagesbox-wrapper {
         display: none;
@@ -435,6 +445,11 @@ body {
             display: unset;
         }
 
+
+        .hidden-on-mobile {
+            display: none !important;
+        }
+
         #messagesboxmobile {
             position: absolute;
             display: block;