Various fixes

Customizations/JSON/CustomLayoutFromJSON.ts

@@ -39,6 +39,7 @@ export interface LayerConfigJson {
     minzoom: number,
     color: TagRenderingConfigJson;
     overpassTags: string | string[] | { k: string, v: string }[];
+    wayHandling: number,
     presets: [
         {
             // icon: optional. Uses the layer icon by default
@@ -231,7 +232,7 @@ export class CustomLayoutFromJSON {
             json.id,
             {
                 description: t(json.description),
-                name: t(json.title),
+                name: t(json.title.render),
                 icon: icon,
                 minzoom: json.minzoom,
                 title: tr(json.title),
@@ -241,7 +242,7 @@ export class CustomLayoutFromJSON {
                 elementsToShow:
                     [new ImageCarouselWithUploadConstructor()].concat(json.tagRenderings.map(tr)),
                 overpassFilter: new And(tags),
-                wayHandling: LayerDefinition.WAYHANDLING_CENTER_AND_WAY,
+                wayHandling: parseInt(json.wayHandling) ?? LayerDefinition.WAYHANDLING_CENTER_AND_WAY,
                 maxAllowedOverlapPercentage: 0,
                 style: CustomLayoutFromJSON.StyleFromJson(json, json.style)
             }

Logic/CustomLayersPanel.ts

@@ -59,9 +59,14 @@ export class CustomLayersPanel extends UIElement {
                 const image = (layer.icon ? `<img src='${layer.icon}'>` : Img.checkmark);
                 const noimage = (layer.icon ? `<img src='${layer.icon}'>` : Img.no_checkmark);
 
+                let name = layer.name;
+                if(typeof (name) !== "string"){
+                    name = name.InnerRender();
+                }
+                
                 const content = new Combine([
                     "<span>",
-                    "<b>", layer.name ?? "", "</b> ",
+                    "<b>", name ?? "", "</b> ",
                     layer.description !== undefined ? new Combine(["<br/>", layer.description]) : "",
                     "</span>"])
                 const cb = new CheckBox(

Logic/Osm/OsmConnection.ts

@@ -313,11 +313,12 @@ export class OsmConnection {
                 `<tag k="created_by" v="MapComplete ${State.vNumber}" />`,
                 `<tag k="comment" v="Adding data with #MapComplete"/>`,
                 `<tag k="theme" v="${layout.name}"/>`,
-                layout.maintainer !== undefined ? `<tag k="theme-creator" v="${layout.maintainer}">` : "",
+                layout.maintainer !== undefined ? `<tag k="theme-creator" v="${layout.maintainer}"/>` : "",
                 `</changeset></osm>`].join("")
         }, function (err, response) {
             if (response === undefined) {
                 console.log("err", err);
+                alert("Could not upload change (opening failed). Please file a bug report")
                 return;
             } else {
                 continuation(response);

State.ts

@@ -24,7 +24,7 @@ export class State {
     // The singleton of the global state
     public static state: State;
     
-    public static vNumber = "0.0.5";
+    public static vNumber = "0.0.5b";
 
     public static runningFromConsole: boolean = false; 
 

UI/CustomThemeGenerator/ThemeGenerator.ts

@@ -17,6 +17,7 @@ import {TextField, ValidatedTextField} from "../Input/TextField";
 import {Tag} from "../../Logic/TagsFilter";
 import {DropDown} from "../Input/DropDown";
 import {TagRendering} from "../../Customizations/TagRendering";
+import {LayerDefinition} from "../../Customizations/LayerDefinition";
 
 
 TagRendering.injectFunction();
@@ -267,9 +268,13 @@ class LayerGenerator extends UIElement {
             }),
             createFieldUI("The tags to load from overpass", "overpassTags", layerConfig, {
                 type: "tags",
-                description: "Tags to load from overpass. The format is <span class='literal-code'>key=value&key0=value0&key1=value1</span>, e.g. <span class='literal-code'>amenity=public_bookcase</span> or <span class='literal-code'>amenity=compressed_air&bicycle=yes</span>. Note that a wildcard is supported, e.g. <span class='literal-code'>key=*</span>"
+                description: "Tags to load from overpass. The format is <span class='literal-code'>key=value&key0=value0&key1=value1</span>, e.g. <span class='literal-code'>amenity=public_bookcase</span> or <span class='literal-code'>amenity=compressed_air&bicycle=yes</span>. Note that a wildcard is supported, e.g. <span class='literal-code'>key=*</span> to have everything. An missing tag can be expressed as <span class='literal-code'>key=</span>, not as <span class='literal-code'>key!=value</span>. E.g. something that is indoor and not private and has no name tag can be queried as <span class='literal-code'>indoor=yes&name=&access!=private</span>"
             }),
 
+            createFieldUI("Wayhandling","wayHandling", layerConfig, {
+                type:"wayhandling",
+                description: "Specifies how ways (lines and areas) are handled: either the way is shown, a center point is shown or both"
+            }),
 
             new TagRenderingGenerator(fullConfig, layerConfig, layerConfig.title ?? {
                 key: "",
@@ -415,6 +420,7 @@ class AllLayerComponent extends UIElement {
                     description: "",
                     minzoom: 12,
                     overpassTags: "",
+                    wayHandling: LayerDefinition.WAYHANDLING_CENTER_AND_WAY,
                     presets: [{}],
                     tagRenderings: []
                 });
@@ -490,6 +496,22 @@ export class ThemeGenerator extends UIElement {
                 textField = new DropDown<string>("",
                     options,
                     value)
+            } else if (options.type === "wayhandling") {
+                const options: { value: string, shown: string | UIElement }[] =
+                    [{value: "" + LayerDefinition.WAYHANDLING_DEFAULT, shown: "Show a line/area as line/area"},
+                        {
+                            value: "" + LayerDefinition.WAYHANDLING_CENTER_AND_WAY,
+                            shown: "Show a line/area as line/area AND show an icon at the center"
+                        },
+                        {
+                            value: "" + LayerDefinition.WAYHANDLING_CENTER_ONLY,
+                            shown: "Only show the centerpoint of a way"
+                        }];
+
+                textField = new DropDown<string>("",
+                    options,
+                    value)
+
             } else if (options.type === "tags") {
                 textField = ValidatedTextField.TagTextField(value.map(CustomLayoutFromJSON.TagsFromJson, [], tags => {
                     if (tags === undefined) {

UI/ImageUploadFlow.ts

@@ -58,7 +58,7 @@ export class ImageUploadFlow extends UIElement {
         }
 
         if (!State.state.osmConnection.userDetails.data.loggedIn) {
-            return `<div class='activate-osm-authentication'>${t.pleaseLogin.Render()}</div>`;
+            return t.pleaseLogin.Render();
         }
 
         let currentState: UIElement[] = [];
@@ -78,7 +78,7 @@ export class ImageUploadFlow extends UIElement {
 
         let currentStateHtml = "";
         if (currentState.length > 0) {
-            currentStateHtml = new VerticalCombine(currentState).Render();
+            currentStateHtml = new Combine(currentState).Render();
             if (!this._allDone.data) {
                 currentStateHtml = "<span class='alert'>" +
                     currentStateHtml +

UI/ShareScreen.ts

@@ -93,12 +93,12 @@ export class ShareScreen extends UIElement {
 
 
         const switches = [{urlName: "fs-userbadge", human: "Enable the login-button"},
-            {urlName: "fs-search", human: "Enable search bar"},
+            {urlName: "fs-search", human: "Enable the search bar"},
             {urlName: "fs-welcome-message", human: "Enable the welcome message"},
-            {urlName: "fs-layers", human: "Enable layer control"},
+            {urlName: "fs-layers", human: "Enable thelayer control"},
+            {urlName: "layer-control-toggle", human: "Start with the layer control expanded", reverse:true},
             {urlName: "fs-add-new", human: "Enable the 'add new POI' button"},
             {urlName: "fs-geolocation", human: "Enable the 'geolocate-me' button"},
-            {urlName: "layer-control-toggle", human: "Start with the layer control expanded", reverse:true}
         ]
 
 

assets/themes/cyclestreets/cyclestreets.json

@@ -0,0 +1,32 @@
+{
+  "layers": [
+    {
+      "id": "Fietsstraat",
+      "title": {
+        "render": "{name}",
+        "key": "name"
+      },
+      "icon": {
+        "key": ""
+      },
+      "color": {
+        "key": "",
+        "render": "#0000ff"
+      },
+      "description": "Een fietsstraat is een straat",
+      "minzoom": "13",
+      "presets": [],
+      "tagRenderings": [],
+      "overpassTags": "cyclestreet=yes"
+    }
+  ],
+  "language": "nl",
+  "startLat": "51.2095",
+  "startZoom": "14",
+  "maintainer": "Not logged in",
+  "name": "Fietsstraten",
+  "title": "Fietsstraten",
+  "startLon": "3.2228",
+  "icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Belgian_road_sign_F111.svg/400px-Belgian_road_sign_F111.svg.png",
+  "description": "Een fietsstraat is een straat waar automobilisten geen fietsers mogen inhalen en waar een maximumsnelheid van 30km/h geldt. "
+}

index.css

@@ -1155,8 +1155,10 @@ form {
 
 .tab-single-header img {
     height: 3em;
-    width: 3em;
+    max-width: 3em;
     padding: 0.5em;
+    display:block;
+    margin:auto;
 }
 
 
@@ -1181,6 +1183,7 @@ form {
     z-index: 5001;
     box-shadow: 0 0 10px black;
     border: 1px solid white;
+    min-width: 4em;
 }
 
 .tab-non-active {