Add smoothness, add highlighting of a way

Logic/FilteredLayer.ts

@@ -28,7 +28,7 @@ export class FilteredLayer {
     private readonly _map: Basemap;
     private readonly _maxAllowedOverlap: number;
 
-    private readonly _style: (properties) => { color: string, icon: { iconUrl: string, iconSize? : number[], popupAnchor?: number[], iconAnchor?:number[] } };
+    private readonly _style: (properties) => { color: string, weight?: number, icon: { iconUrl: string, iconSize? : number[], popupAnchor?: number[], iconAnchor?:number[] } };
 
     private readonly _storage: ElementStorage;
 
@@ -239,19 +239,37 @@ export class FilteredLayer {
             },
 
             onEachFeature: function (feature, layer) {
-                let eventSource = self._storage.addOrGetElement(feature);
-                eventSource.addCallback(function () {
+
+                feature.updateStyle = () => {
                     if (layer.setIcon) {
                         layer.setIcon(L.icon(self._style(feature.properties).icon))
                     } else {
                         self._geolayer.setStyle(function (feature) {
-                            return self._style(feature.properties);
+                            const style = self._style(feature.properties);
+                            if (self._selectedElement.data?.feature === feature) {
+                                if (style.weight !== undefined) {
+                                    style.weight = style.weight * 2;
+                                }else{
+                                    style.weight = 20;
+                                }
+                            }
+                            return style;
                         });
                     }
-                });
+                }
+
+                let eventSource = self._storage.addOrGetElement(feature);
+
+
+                eventSource.addCallback(feature.updateStyle);
 
                 layer.on("click", function (e) {
+                    const previousFeature = self._selectedElement.data?.feature;
                     self._selectedElement.setData({feature: feature});
+                    feature.updateStyle();
+                    previousFeature?.updateStyle();
+
+
                     if (feature.geometry.type === "Point") {
                         return; // Points bind there own popups
                     }
@@ -267,7 +285,6 @@ export class FilteredLayer {
                     uiElement.Update();
                     uiElement.Activate();
                     L.DomEvent.stop(e); // Marks the event as consumed
-
                 });
             }
         });

Logic/LayerUpdater.ts

@@ -8,6 +8,7 @@ import {Basemap} from "./Leaflet/Basemap";
 export class LayerUpdater {
     private _map: Basemap;
     private _layers: FilteredLayer[];
+    private widenFactor: number;
 
     public readonly runningQuery: UIEventSource<boolean> = new UIEventSource<boolean>(false);
     public readonly retries: UIEventSource<number> = new UIEventSource<number>(0);
@@ -27,7 +28,9 @@ export class LayerUpdater {
      */
     constructor(map: Basemap,
                 minzoom: number,
+                widenFactor: number,
                 layers: FilteredLayer[]) {
+        this.widenFactor = widenFactor;
         this._map = map;
         this._layers = layers;
         this._minzoom = minzoom;
@@ -97,7 +100,7 @@ export class LayerUpdater {
         
         const bounds = this._map.map.getBounds();
 
-        const diff =0.07;
+        const diff = this.widenFactor;
 
         const n = bounds.getNorth() + diff;
         const e = bounds.getEast() +  diff;

Logic/Osm/OsmConnection.ts

@@ -91,6 +91,8 @@ export class OsmConnection {
             }
             
             self.UpdatePreferences();
+            self.CheckForMessagesContinuously();
+            
             // details is an XML DOM of user details
             let userInfo = details.getElementsByTagName("user")[0];
 
@@ -120,9 +122,21 @@ export class OsmConnection {
             data.unreadMessages = parseInt(messages.getAttribute("unread"));
             data.totalMessages = parseInt(messages.getAttribute("count"));
             self.userDetails.ping();
+          
         });
     }
 
+
+    private CheckForMessagesContinuously() {
+        const self = this;
+        window.setTimeout(() => {
+            if (self.userDetails.data.loggedIn) {
+                console.log("Checking for messages")
+                this.AttemptLogin();
+            }
+        },  5 * 60 * 1000);
+    }
+
     /**
      * All elements with class 'activate-osm-authentication' are loaded and get an 'onclick' to authenticate
      */