More UI tweaks, fix bugs with new icon handling

Customizations/JSON/LayerConfig.ts

@@ -256,7 +256,6 @@ export default class LayerConfig {
                     html = new Combine([
                         (Svg.All[key] as string).replace(/stop-color:#000000/g, 'stop-color:' + color)
                     ]).SetStyle(style)
-
                         .Render();
                 }
                 return html;

Customizations/JSON/LayerConfigJson.ts

@@ -57,6 +57,12 @@ export interface LayerConfigJson {
     /**
      * The icon for an element.
      * Note that this also doubles as the icon for this layer (rendered with the overpass-tags) ánd the icon in the presets.
+     * 
+     * The result of the icon is rendered as follows:
+     * the resulting string is interpreted as a _list_ of items, seperated by ";". The bottommost layer is the first layer.
+     * As a result, on could use a generic pin, then overlay it with a specific icon.
+     * To make things even more practical, one can use all svgs from the folder "assets/svg" and _substitute the color_ in it.
+     * E.g. to draw a red pin, use "pin:#f00", to have a green circle with your icon on top, use `circle:#0f0;<path to my icon.svg>`
      */
     icon?: string | TagRenderingConfigJson;
 
@@ -65,8 +71,10 @@ export interface LayerConfigJson {
      * The 'badge'-toggle changes their behaviour.
      * If badge is set, it will be added as a 25% height icon at the bottom right of the icon, with all the badges in a flex layout.
      * If badges is false, it'll be a simple overlay
+     * 
+     * Note: strings are interpreted as icons, so layering and substituting is supported
      */
-    iconOverlays?: {if: AndOrTagConfigJson, then: string, badge?: boolean}[]
+    iconOverlays?: {if: string | AndOrTagConfigJson, then: string, badge?: boolean}[]
 
     /**
      * A string containing "width,height" or "width,height,anchorpoint" where anchorpoint is any of 'center', 'top', 'bottom', 'left', 'right', 'bottomleft','topright', ... 

State.ts

@@ -23,7 +23,7 @@ export default class State {
     // The singleton of the global state
     public static state: State;
 
-    public static vNumber = "0.2.2g";
+    public static vNumber = "0.2.3-rc1";
 
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

UI/Popup/FeatureInfoBox.ts

@@ -36,6 +36,7 @@ export class FeatureInfoBox extends UIElement {
             layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
             .SetClass("featureinfobox-icons");
         this._renderings = layerConfig.tagRenderings.map(tr => new EditableTagRendering(tags, tr));
+        this._renderings[0]?.SetClass("first-rendering");
         if (State.state.featureSwitchUserbadge.data) {
             this._questionBox = new QuestionBox(tags, layerConfig.tagRenderings);
         }

UI/SimpleAddUI.ts

@@ -9,6 +9,7 @@ import State from "../State";
 
 import {UIEventSource} from "../Logic/UIEventSource";
 import Svg from "../Svg";
+import {FixedUiElement} from "./Base/FixedUiElement";
 
 /**
  * Asks to add a feature at the last clicked location, at least if zoom is sufficient
@@ -21,7 +22,7 @@ export class SimpleAddUI extends UIElement {
     private _confirmPreset: UIEventSource<{
         description: string | UIElement,
         name: string | UIElement,
-        icon: string,
+        icon: UIElement,
         tags: Tag[],
         layerToAddTo: FilteredLayer
     }>
@@ -52,8 +53,8 @@ export class SimpleAddUI extends UIElement {
 
             const presets = layer.layerDef.presets;
             for (const preset of presets) {
-                let icon: string = layer.layerDef.icon.GetRenderValue(
-                    TagUtils.KVtoProperties(preset.tags ?? [])).txt
+                const tags = TagUtils.KVtoProperties(preset.tags ?? []);
+                let icon: UIElement = new FixedUiElement(layer.layerDef.GenerateLeafletStyle(new UIEventSource<any>(tags), false).icon.html).SetClass("simple-add-ui-icon");
 
                 const csCount = State.state.osmConnection.userDetails.data.csCount;
                 let tagInfo = "";

UI/SpecialVisualizations.ts

@@ -58,7 +58,7 @@ export class SubstitutedTranslation extends UIElement {
 
         for (const knownSpecial of SpecialVisualizations.specialVisualizations) {
 
-            // NOte: the '.*?' in the regex reads as 'any character, but in a non-greedy way'
+            // Note: the '.*?' in the regex reads as 'any character, but in a non-greedy way'
             const matched = template.match(`(.*){${knownSpecial.funcName}\\((.*?)\\)}(.*)`);
             if (matched != null) {
 

css/mobile.css

@@ -98,4 +98,6 @@ Contains tweaks for small screens
     #userbadge {
         margin-bottom: 0.3em;
     }
-}
+}
+
+

css/tagrendering.css

@@ -42,6 +42,37 @@
     }
 }
 
+@media only screen and (max-height: 600px) {
+    /* landscape mode: the first tagrendering of the infobox gets a special treatment and is placed on the right*/
+    .featureinfobox-content {
+        position: relative;
+        width: 100% !important;
+        max-width: unset !important;
+        max-height: unset !important;
+        height: 100vh;
+    }
+    
+    .answer {
+        max-width: 48% !important;
+        padding-right: 0.3em;
+        box-sizing: border-box;
+    }
+
+    .question {
+        max-width: 48% !important;
+        padding-right: 0.3em;
+        box-sizing: border-box;
+    }
+    
+    .first-rendering{
+        position: absolute;
+        left: 50%;
+        width: 94%;
+        padding-right: 0.3em;
+        box-sizing: border-box;
+    }
+}
+
 
 .answer {
     display: flex;

index.css

@@ -98,17 +98,36 @@ a {
 
 .single-layer-selection-toggle{
     position: relative;
-    width: 2.5em;
-    height: 2.5em;
+    width:  2em;
+    height: 2em;
 }
 .single-layer-selection-toggle img{
-    max-height: 2.5em !important;
-    max-width: 2.5em !important;
+    max-height: 2em !important;
+    max-width:  2em !important;
 }
 
 .single-layer-selection-toggle svg{
-    max-height:2.5em !important;
-    max-width: 2.5em !important;
+    max-height:2em !important;
+    max-width: 2em !important;
+}
+
+.simple-add-ui-icon{
+    position: relative;
+    display: block;
+    width:  3.5em;
+    height: 3.5em;
+    padding-right: 0.3em;
+    padding-left: 0.3em;
+}
+
+.simple-add-ui-icon img{
+    max-height:3.5em !important;
+    max-width: 3.5em !important;
+}
+
+.simple-add-ui-icon svg{
+    max-height:3.5em !important;
+    max-width: 3.5em !important;
 }
 
 .layer-selection-toggle {