Further theme tweaks, attempts to optimize

InitUiElements.ts

@@ -475,7 +475,7 @@ export class InitUiElements {
                 throw "Layer " + layer + " was not substituted";
             }
 
-            const generateInfo = (tagsES, feature) => {
+            const generateInfo = (tagsES) => {
 
                 return new FeatureInfoBox(
                     tagsES,

Logic/FilteredLayer.ts

@@ -124,12 +124,8 @@ export class FilteredLayer {
         })
     }
 
-    static fromDefinition(
+    static fromDefinition(definition, showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement): FilteredLayer {
-        definition, 
+        return new FilteredLayer(definition, showOnPopup);
-                 showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement):
-        FilteredLayer {
-        return new FilteredLayer(
-            definition, showOnPopup);
 
     }
 
@@ -239,7 +235,7 @@ export class FilteredLayer {
         }
 
 
-        // The data is split in two parts: the poinst and the rest
+        // The data is split in two parts: the point and the rest
         // The points get a special treatment in order to render them properly
         // Note that some features might get a point representation as well
 
@@ -326,20 +322,23 @@ export class FilteredLayer {
                 eventSource.addCallback(updateStyle);
 
                 function openPopup(e) {
-                    State.state.selectedElement.setData({feature: feature});
                     updateStyle()
+
+
                     if (feature.geometry.type === "Point") {
+                        State.state.selectedElement.setData({feature: feature});
                         return; // Points bind there own popups
                     }
 
                     const uiElement = self._showOnPopup(eventSource, feature);
-
                     L.popup({
                         autoPan: true,
                     }).setContent(uiElement.Render())
                         .setLatLng(e.latlng)
                         .openOn(State.state.bm.map);
                     uiElement.Update();
+                    State.state.selectedElement.setData({feature: feature});
+
                     if (e) {
                         L.DomEvent.stop(e); // Marks the event as consumed
                     }

UI/FullScreenMessageBoxHandler.ts

@@ -10,41 +10,19 @@ export class FullScreenMessageBox extends UIElement {
 
     private static readonly _toTheMap_height : string = "5em";
     
-    private _uielement: UIElement;
     private readonly returnToTheMap: UIElement;
 
     constructor(onClear: (() => void)) {
         super(State.state.fullScreenMessage);
-        const self = this;
-        State.state.fullScreenMessage.addCallbackAndRun(uiElement => {
-            this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
-                "display:block;"+
-                "padding: 1em;"+
-                "padding-bottom:6em;"+
-                `margin-bottom:${FullScreenMessageBox._toTheMap_height};`+
-                "box-sizing:border-box;"+
-                `height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});`+
-                "overflow-y: auto;" +
-                "max-width:100vw;" +
-                "overflow-x:hidden;" +
-                "background:var(--background-color);" +
-                "color: var(--foreground-color);"
-
-            );
-        });
-        
-        
         this.HideOnEmpty(true);
-
+        State.state.fullScreenMessage.addCallbackAndRun(uiElement => {
-        State.state.fullScreenMessage.addCallback(latestData => {
+            if (uiElement === undefined) {
-            if (latestData === undefined) {
                 location.hash = "";
             } else {
                 // The 'hash' makes sure a new piece of history is added. This makes the 'back-button' on android remove the popup
                 location.hash = "#element";
             }
-            this.Update();
+        });
-        })
 
         if (window !== undefined) {
             window.onhashchange = function () {
@@ -57,6 +35,7 @@ export class FullScreenMessageBox extends UIElement {
             }
         }
 
+        const self = this;
         this.returnToTheMap =
             new Combine([Translations.t.general.returnToTheMap.Clone().SetStyle("font-size:xx-large")])
                 .SetStyle("background:#7ebc6f;" +
@@ -88,7 +67,24 @@ export class FullScreenMessageBox extends UIElement {
         if (State.state.fullScreenMessage.data === undefined) {
             return "";
         }
-        return new Combine([this._uielement, this.returnToTheMap])
+        
+        const el = document.getElementById(this.id);
+        console.warn(el, el.style.display);
+
+        const uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
+            "display:block;" +
+            "padding: 1em;" +
+            "padding-bottom:6em;" +
+            `margin-bottom:${FullScreenMessageBox._toTheMap_height};` +
+            "box-sizing:border-box;" +
+            `height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});` +
+            "overflow-y: auto;" +
+            "max-width:100vw;" +
+            "overflow-x:hidden;" +
+            "background:var(--background-color);" +
+            "color: var(--foreground-color);"
+        );
+        return new Combine([uielement, this.returnToTheMap])
             .Render();
     }
 

UI/Popup/FeatureInfoBox.ts

@@ -40,6 +40,7 @@ export class FeatureInfoBox extends UIElement {
     }
 
     InnerRender(): string {
+        console.error("Inner rendering infobox for ", this._tags.data.id, this.id)
         return new Combine([
             new Combine([this._title, this._titleIcons])
                 .SetClass("featureinfobox-titlebar"),

Utils.ts

@@ -164,6 +164,7 @@ export class Utils {
         link.href = location;
         link.media = 'all';
         head.appendChild(link);
+        console.log("Added custom layout ",location)
     }
 
 }

assets/themes/surveillance_cameras/custom_theme.css

@@ -1,6 +1,6 @@
 html {
-    --subtle-detail-color: #070 !important;
+    --subtle-detail-color: #2c2 !important;
-    --subtle-detail-color-contrast: #white !important;
+    --subtle-detail-color-contrast: white !important;
     --popup-border: #00ff00 !important;
     --catch-detail-color: #00ff00 !important;
     --catch-detail-color-contrast: black !important;

assets/themes/surveillance_cameras/surveillance_cameras.json

@@ -111,7 +111,7 @@
         },
         {
           "question": {
-            "en": "What k ind of surveillance is this camera",
+            "en": "What kind of surveillance is this camera",
             "nl": "Wat soort bewaking wordt hier uitgevoerd?"
           },
           "mappings": [
@@ -245,7 +245,12 @@
       "color": {
         "render": "#00f"
       },
-      "presets": [],
+      "presets": [
+        {
+          "tags": ["man_made=surveillance","surveillance:type=camera"],
+          "title": "Surveillance camera"
+        }
+      ],
       "wayHandling": 2
     }
   ],

index.css

@@ -19,6 +19,9 @@ html, body {
     font-family: 'Helvetica Neue', Arial, sans-serif;
 }
 
+a {
+    color: var(--foreground-color)
+}
 
 svg {
     fill: var(--foreground-color) !important;
@@ -38,7 +41,6 @@ svg path {
 .leaflet-popup-content-wrapper {
     background-color: var(--background-color);
     color: var(--foreground-color);
-
     border: 2px solid var(--popup-border);
     box-shadow: 0 3px 14px var(--shadow-color) !important;
 }
@@ -47,6 +49,12 @@ svg path {
     background-color: var(--background-color) !important;
 }
 
+.leaflet-popup-tip {
+    background-color: var(--popup-border) !important;
+    color: var(--popup-border) !important;
+    box-shadow: 0 3px 14px var(--shadow-color) !important;
+}
+
 #geolocate-button {
     position: absolute;
     bottom: 25px;
@@ -92,7 +100,7 @@ svg path {
     display: block;
     width: 2em;
     height: 2em;
-    padding: 1em;
+    padding: 0.75em;
 }
 
 /**************** GENERIC ****************/
@@ -284,9 +292,9 @@ svg path {
     background: var(--subtle-detail-color);
     color: var(--foreground-color);
 
-    height: 4em;
+    height: 3.5em;
-    width: 4em;
+    width: 3.5em;
-    padding: 1em;
+    padding: 0.75em;
     border-radius: 1em;
 }