Add layer icon to filter view

Logic/Osm/Actions/CreateNewWayAction.ts

@@ -39,6 +39,7 @@ export default class CreateNewWayAction extends OsmChangeAction {
             }
 
             const newPoint = new CreateNewNodeAction([], coordinate.lat, coordinate.lon, {
+                allowReuseOfPreviouslyCreatedPoints: true,
                 changeType: null,
                 theme: this._options.theme
             })

Logic/Tags/TagUtils.ts

@@ -19,16 +19,6 @@ export class TagUtils {
         [">", (a, b) => a > b],
     ]
 
-    static ApplyTemplate(template: string, tags: any): string {
-        for (const k in tags) {
-            while (template.indexOf("{" + k + "}") >= 0) {
-                const escaped = tags[k].replace(/</g, '&lt;').replace(/>/g, '&gt;');
-                template = template.replace("{" + k + "}", escaped);
-            }
-        }
-        return template;
-    }
-
     static KVtoProperties(tags: Tag[]): any {
         const properties = {};
         for (const tag of tags) {
@@ -37,6 +27,14 @@ export class TagUtils {
         return properties;
     }
 
+    static changeAsProperties(kvs : {k: string, v: string}[]): any {
+        const tags = {}
+        for (const kv of kvs) {
+            tags[kv.k] = kv.v
+        }
+        return tags
+    }
+    
     /**
      * Given two hashes of {key --> values[]}, makes sure that every neededTag is present in availableTags
      */

Models/ThemeConfig/PointRenderingConfig.ts

@@ -187,7 +187,10 @@ export default class PointRenderingConfig extends WithContextLoader {
 
     public GenerateLeafletStyle(
         tags: UIEventSource<any>,
-        clickable: boolean
+        clickable: boolean,
+        options?: {
+            noSize: false | boolean
+        }
     ):
         {
             html: BaseUIElement;
@@ -237,9 +240,13 @@ export default class PointRenderingConfig extends WithContextLoader {
 
 
         const iconAndBadges = new Combine([this.GetSimpleIcon(tags), this.GetBadges(tags)])
-            .SetStyle(`width: ${iconW}px; height: ${iconH}px`)
             .SetClass("block relative")
 
+        if(!options?.noSize){
+            iconAndBadges.SetStyle(`width: ${iconW}px; height: ${iconH}px`)
+        }else{
+            iconAndBadges.SetClass("w-full h-full")
+        }
 
         return {
             html: new Combine([iconAndBadges, this.GetLabel(tags)]).SetStyle("flex flex-col"),

UI/BigComponents/FilterView.ts

@@ -14,6 +14,7 @@ import FilteredLayer from "../../Models/FilteredLayer";
 import BackgroundSelector from "./BackgroundSelector";
 import FilterConfig from "../../Models/ThemeConfig/FilterConfig";
 import TilesourceConfig from "../../Models/ThemeConfig/TilesourceConfig";
+import {TagUtils} from "../../Logic/Tags/TagUtils";
 
 export default class FilterView extends VariableUiElement {
     constructor(filteredLayer: UIEventSource<FilteredLayer[]>, tileLayers: { config: TilesourceConfig, isDisplayed: UIEventSource<boolean> }[]) {
@@ -42,9 +43,8 @@ export default class FilterView extends VariableUiElement {
         );
         const name: Translation = config.config.name;
 
-        const styledNameChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem");
+        const styledNameChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-2");
-
+        const styledNameUnChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-2");
-        const styledNameUnChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem");
 
         const zoomStatus =
             new Toggle(
@@ -82,6 +82,8 @@ export default class FilterView extends VariableUiElement {
         const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem;flex-shrink: 0;";
 
         const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
+        const layer = filteredLayer.layerDef
+       
         const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
             iconStyle
         );
@@ -95,9 +97,9 @@ export default class FilterView extends VariableUiElement {
             filteredLayer.layerDef.name
         );
 
-        const styledNameChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem");
+        const styledNameChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-3");
 
-        const styledNameUnChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem");
+        const styledNameUnChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-3");
 
         const zoomStatus =
             new Toggle(
@@ -111,11 +113,24 @@ export default class FilterView extends VariableUiElement {
 
         const style =
             "display:flex;align-items:center;padding:0.5rem 0;";
-        const layerChecked = new Combine([icon, styledNameChecked, zoomStatus])
+        const mapRendering = layer.mapRendering.filter(r => r.location.has("point"))[0]
+        let layerIcon = undefined
+        let layerIconUnchecked = undefined
+        try {
+            if (mapRendering !== undefined) {
+                const defaultTags = new UIEventSource( TagUtils.changeAsProperties(layer.source.osmTags.asChange({id: "node/-1"})))
+                layerIcon = mapRendering.GenerateLeafletStyle(defaultTags, false, {noSize: true}).html.SetClass("w-8 h-8 ml-2")
+                layerIconUnchecked = mapRendering.GenerateLeafletStyle(defaultTags, false, {noSize: true}).html.SetClass("opacity-50  w-8 h-8 ml-2")
+            }
+        } catch (e) {
+            console.error(e)
+        }
+
+        const layerChecked = new Combine([icon, layerIcon, styledNameChecked, zoomStatus])
             .SetStyle(style)
             .onClick(() => filteredLayer.isDisplayed.setData(false));
 
-        const layerNotChecked = new Combine([iconUnselected, styledNameUnChecked])
+        const layerNotChecked = new Combine([iconUnselected, layerIconUnchecked, styledNameUnChecked])
             .SetStyle(style)
             .onClick(() => filteredLayer.isDisplayed.setData(true));
 

assets/themes/ghostbikes/ghostbikes.json

@@ -53,6 +53,9 @@
   "startLat": 0,
   "startLon": 0,
   "widenFactor": 5,
+  "clustering": {
+    "maxZoom": 0
+  },
   "layers": [
     "ghost_bike"
   ],

css/index-tailwind-output.css

@@ -868,6 +868,14 @@ video {
   margin-right: 1rem;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -892,18 +900,10 @@ video {
   margin-top: 0px;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
 
-.mt-4 {
-  margin-top: 1rem;
-}
-
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -1417,14 +1417,6 @@ video {
   padding-right: 0.25rem;
 }
 
-.pt-6 {
-  padding-top: 1.5rem;
-}
-
-.pb-3 {
-  padding-bottom: 0.75rem;
-}
-
 .pl-5 {
   padding-left: 1.25rem;
 }
@@ -1593,14 +1585,14 @@ video {
   text-decoration: underline;
 }
 
-.opacity-0 {
-  opacity: 0;
-}
-
 .opacity-50 {
   opacity: 0.5;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .opacity-40 {
   opacity: 0.4;
 }