Add smoothness, add highlighting of a way

Customizations/AllKnownLayouts.ts

@@ -10,6 +10,7 @@ import {MetaMap} from "./Layouts/MetaMap";
 import {StreetWidth} from "./Layouts/StreetWidth";
 import {Natuurpunt} from "./Layouts/Natuurpunt";
 import {ClimbingTrees} from "./Layouts/ClimbingTrees";
+import {Smoothness} from "./Layouts/Smoothness";
 
 export class AllKnownLayouts {
     public static allSets = AllKnownLayouts.AllLayouts();
@@ -25,9 +26,9 @@ export class AllKnownLayouts {
             new StreetWidth(),
             new Natuurpunt(),
             new ClimbingTrees(),
-            new Artworks()
+            new Artworks(),
+            new Smoothness()
             /*new Toilets(),
-            new Statues(),
             */
         ];
 

Customizations/LayerDefinition.ts

@@ -69,6 +69,7 @@ export class LayerDefinition {
      */
     style: (tags: any) => {
         color: string,
+        weight?: number,
         icon: { 
             iconUrl: string,
             iconSize: number[],

Customizations/Layers/Widths.ts

@@ -171,7 +171,7 @@ export class Widths extends LayerDefinition {
             return {
                 icon: null,
                 color: c,
-                weight: 7,
+                weight: 10,
                 dashArray: dashArray
             }
         }

Customizations/Layout.ts

@@ -39,6 +39,12 @@ export class Layout {
     
     public hideFromOverview : boolean = false;
 
+    /**
+     * The BBOX of the currently visible map are widened by this factor, in order to make some panning possible.
+     * This number influences this
+     */
+    public widenFactor : number = 0.07;
+
     /**
      * 
      * @param name: The name used in the query string. If in the query "quests=<name>" is defined, it will select this layout
@@ -128,7 +134,7 @@ export class WelcomeMessage extends UIElement {
     }
 
     protected InnerUpdate(htmlElement: HTMLElement) {
-        this.osmConnection.registerActivateOsmAUthenticationClass()
+        this.osmConnection?.registerActivateOsmAUthenticationClass()
     }
 
 }

Customizations/Layouts/Smoothness.ts

@@ -0,0 +1,81 @@
+import {Layout} from "../Layout";
+import {LayerDefinition} from "../LayerDefinition";
+import {Or, Tag} from "../../Logic/TagsFilter";
+import {TagRenderingOptions} from "../TagRendering";
+
+
+export class SmoothnessLayer extends LayerDefinition {
+
+    constructor() {
+        super();
+        this.name = "smoothness";
+        this.minzoom = 17;
+        this.overpassFilter = new Or([
+            new Tag("highway", "residential"),
+            new Tag("highway", "cycleway"),
+            new Tag("highway", "footway"),
+            new Tag("highway", "path"),
+            new Tag("highway", "tertiary")
+        ]);
+        
+        this.elementsToShow = [
+            new TagRenderingOptions({
+                question: "How smooth is this road to rollerskate on",
+                mappings: [
+                    {k: new Tag("smoothness","bad"), txt: "It's horrible"},
+                    {k: new Tag("smoothness","intermediate"), txt: "It is passable by rollerscate, but only if you have to"},
+                    {k: new Tag("smoothness","good"), txt: "Good, but it has some friction or holes"},
+                    {k: new Tag("smoothness","very_good"), txt: "Quite good and enjoyable"},
+                    {k: new Tag("smoothness","excellent"), txt: "Excellent - this is where you'd want to drive 24/7"},
+                ]
+            })
+        ]
+        
+        this.style = (properties) => {
+            let color = "#000000";
+            if(new Tag("smoothness","bad").matchesProperties(properties)){
+                color = "#ff0000";
+            }
+            if(new Tag("smoothness","intermediate").matchesProperties(properties)){
+                color = "#ffaa00";
+            }
+            if(new Tag("smoothness","good").matchesProperties(properties)){
+                color = "#ccff00";
+            }
+            if(new Tag("smoothness","very_good").matchesProperties(properties)){
+                color = "#00aa00";
+            }
+            if(new Tag("smoothness","excellent").matchesProperties(properties)){
+                color = "#00ff00";
+            }
+            
+            return {
+                color: color,
+                icon: undefined,
+                weight: 8
+            }
+            
+        }
+
+
+    }
+
+}
+
+export class Smoothness extends Layout {
+    constructor() {
+        super(
+            "smoothness",
+            ["en"   ],
+            "Smoothness while rollerskating",
+            [new SmoothnessLayer()],
+            17,
+            51.2,
+            3.2,
+            "Give smoothness feedback for rollerskating"
+        );
+        this.widenFactor = 0.005
+        this.hideFromOverview = true;
+        this.enableAdd = false;
+    }
+}