Small fixes, perf improvements, remove duplicate images of ghost bikes, add wall mount

InitUiElements.ts

@@ -153,10 +153,10 @@ export class InitUiElements {
          * This is given to the div which renders fullscreen on mobile devices
          */
         State.state.selectedElement.addCallback((feature) => {
-                if (feature?.feature?.properties === undefined) {
+                if (feature?.properties === undefined) {
                     return;
                 }
-                const data = feature.feature.properties;
+                const data = feature.properties;
                 // Which is the applicable set?
                 for (const layer of layoutToUse.layers) {
                     if (typeof layer === "string") {

Logic/FilteredLayer.ts

@@ -322,14 +322,9 @@ export class FilteredLayer {
                 eventSource.addCallback(updateStyle);
 
                 function openPopup(e) {
-                    updateStyle()
-
-
                     if (feature.geometry.type === "Point") {
-                        State.state.selectedElement.setData({feature: feature});
+                        return; // Points bind their own popups
-                        return; // Points bind there own popups
                     }
-
                     const uiElement = self._showOnPopup(eventSource, feature);
                     L.popup({
                         autoPan: true,
@@ -337,14 +332,17 @@ export class FilteredLayer {
                         .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
                     }
                 }
 
-                layer.on("click", openPopup);
+                layer.on("click", (e) => {
+                    updateStyle();
+                    openPopup(e);
+                    State.state.selectedElement.setData(feature);
+                    
+                });
             }
         });
 

State.ts

@@ -82,7 +82,7 @@ export default class State {
     /**
      The latest element that was selected - used to generate the right UI at the right place
      */
-    public readonly selectedElement = new UIEventSource<{ feature: any }>(undefined);
+    public readonly selectedElement = new UIEventSource<any>(undefined);
 
     public readonly zoom: UIEventSource<number>;
     public readonly lat: UIEventSource<number>;

Svg.ts

@@ -34,7 +34,7 @@ export default class Svg {
     public static bug_svg() { return new FixedUiElement(Svg.bug);}
     public static bug_ui() { return new FixedUiElement(Svg.bug_img);}
 
-    public static camera_plus = " <svg    xmlns:dc=\"http://purl.org/dc/elements/1.1/\"    xmlns:cc=\"http://creativecommons.org/ns#\"    xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"    xmlns:svg=\"http://www.w3.org/2000/svg\"    xmlns=\"http://www.w3.org/2000/svg\"    xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"    xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"    viewBox=\"0 -256 1950 1950\"    version=\"1.1\"    id=\"svg4\"    sodipodi:docname=\"camera.svg\"    inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\">   <metadata      id=\"metadata10\">     <rdf:RDF>       <cc:Work          rdf:about=\"\">         <dc:format>image/svg+xml</dc:format>         <dc:type            rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />       </cc:Work>     </rdf:RDF>   </metadata>   <defs      id=\"defs8\" />   <sodipodi:namedview      pagecolor=\"#ffffff\"      bordercolor=\"#666666\"      borderopacity=\"1\"      objecttolerance=\"10\"      gridtolerance=\"10\"      guidetolerance=\"10\"      inkscape:pageopacity=\"0\"      inkscape:pageshadow=\"2\"      inkscape:window-width=\"1680\"      inkscape:window-height=\"1013\"      id=\"namedview6\"      showgrid=\"false\"      inkscape:zoom=\"0.1711561\"      inkscape:cx=\"1154.0868\"      inkscape:cy=\"749.93142\"      inkscape:window-x=\"0\"      inkscape:window-y=\"0\"      inkscape:window-maximized=\"1\"      inkscape:current-layer=\"svg4\" />   <path      d=\"m 881.19,449.05 c 79.33333,0 147.1667,28.16667 203.5,84.5 56.3333,56.33333 84.5,124.16667 84.5,203.5 0,79.33333 -28.1667,147.16667 -84.5,203.5 -56.3333,56.3333 -124.16667,84.5 -203.5,84.5 -79.33333,0 -147.16667,-28.1667 -203.5,-84.5 -56.33333,-56.33333 -84.5,-124.16667 -84.5,-203.5 0,-79.33333 28.16667,-147.16667 84.5,-203.5 56.33333,-56.33333 124.16667,-84.5 203.5,-84.5 m 798,-316 c 70.6667,0 131,25 181,75 50,50 75,110.33333 75,181 v 896 c 0,70.6667 -25,131 -75,181 -50,50 -110.3333,75 -181,75 h -1408 c -70.66667,0 -131,-25 -181,-75 -50,-50 -75,-110.3333 -75,-181 v -896 c 0,-70.66667 25,-131 75,-181 50,-50 110.33333,-75 181,-75 h 130 l 51,-136 c 12.66667,-32.666667 35.83333,-60.833333 69.5,-84.5 33.66667,-23.66667 68.16667,-35.5 103.5,-35.5 h 512 c 35.3333,0 69.8333,11.83333 103.5,35.5 33.6667,23.666667 56.8333,51.833333 69.5,84.5 l 51,136 h 318 m -798,1052 c 123.3333,0 228.8333,-43.8333 316.5,-131.5 87.6667,-87.6667 131.5,-193.16667 131.5,-316.5 0,-123.33333 -43.8333,-228.83333 -131.5,-316.5 -87.6667,-87.66667 -193.1667,-131.5 -316.5,-131.5 -123.33333,0 -228.83333,43.83333 -316.5,131.5 -87.66667,87.66667 -131.5,193.16667 -131.5,316.5 0,123.33333 43.83333,228.8333 131.5,316.5 87.66667,87.6667 193.16667,131.5 316.5,131.5\"      id=\"path2\"      inkscape:connector-curvature=\"0\"      sodipodi:nodetypes=\"csssssssccsssssssssssccssssccccsssssssc\" />   <g      id=\"g854\"      transform=\"translate(259.86064,302.45965)\">     <g        id=\"g847\">       <circle          style=\"fill:#7ebc6f;fill-opacity:1;stroke:none;stroke-width:21.93531036;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1\"          id=\"path819\"          cx=\"1351.3682\"          cy=\"1044.5065\"          r=\"335.30353\" />     </g>     <g        id=\"g844\">       <path          style=\"fill: none !important;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"          d=\"m 1154.7797,1044.3443 h 389.1358\"          id=\"path821\"          inkscape:connector-curvature=\"0\" />       <path          style=\"fill: none !important;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"          d=\"M 1349.9206,849.36269 V 1238.4985\"          id=\"path821-3\"          inkscape:connector-curvature=\"0\" />     </g>   </g> </svg> "
+    public static camera_plus = " <svg    xmlns:dc=\"http://purl.org/dc/elements/1.1/\"    xmlns:cc=\"http://creativecommons.org/ns#\"    xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"    xmlns:svg=\"http://www.w3.org/2000/svg\"    xmlns=\"http://www.w3.org/2000/svg\"    xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"    xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"    viewBox=\"0 -256 1950 1950\"    version=\"1.1\"    id=\"svg4\"    sodipodi:docname=\"camera.svg\"    inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\">   <metadata      id=\"metadata10\">     <rdf:RDF>       <cc:Work          rdf:about=\"\">         <dc:format>image/svg+xml</dc:format>         <dc:type            rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />       </cc:Work>     </rdf:RDF>   </metadata>   <defs      id=\"defs8\" />   <sodipodi:namedview      pagecolor=\"#ffffff\"      bordercolor=\"#666666\"      borderopacity=\"1\"      objecttolerance=\"10\"      gridtolerance=\"10\"      guidetolerance=\"10\"      inkscape:pageopacity=\"0\"      inkscape:pageshadow=\"2\"      inkscape:window-width=\"1680\"      inkscape:window-height=\"1013\"      id=\"namedview6\"      showgrid=\"false\"      inkscape:zoom=\"0.1711561\"      inkscape:cx=\"1154.0868\"      inkscape:cy=\"749.93142\"      inkscape:window-x=\"0\"      inkscape:window-y=\"0\"      inkscape:window-maximized=\"1\"      inkscape:current-layer=\"svg4\" />   <path      d=\"m 881.19,449.05 c 79.33333,0 147.1667,28.16667 203.5,84.5 56.3333,56.33333 84.5,124.16667 84.5,203.5 0,79.33333 -28.1667,147.16667 -84.5,203.5 -56.3333,56.3333 -124.16667,84.5 -203.5,84.5 -79.33333,0 -147.16667,-28.1667 -203.5,-84.5 -56.33333,-56.33333 -84.5,-124.16667 -84.5,-203.5 0,-79.33333 28.16667,-147.16667 84.5,-203.5 56.33333,-56.33333 124.16667,-84.5 203.5,-84.5 m 798,-316 c 70.6667,0 131,25 181,75 50,50 75,110.33333 75,181 v 896 c 0,70.6667 -25,131 -75,181 -50,50 -110.3333,75 -181,75 h -1408 c -70.66667,0 -131,-25 -181,-75 -50,-50 -75,-110.3333 -75,-181 v -896 c 0,-70.66667 25,-131 75,-181 50,-50 110.33333,-75 181,-75 h 130 l 51,-136 c 12.66667,-32.666667 35.83333,-60.833333 69.5,-84.5 33.66667,-23.66667 68.16667,-35.5 103.5,-35.5 h 512 c 35.3333,0 69.8333,11.83333 103.5,35.5 33.6667,23.666667 56.8333,51.833333 69.5,84.5 l 51,136 h 318 m -798,1052 c 123.3333,0 228.8333,-43.8333 316.5,-131.5 87.6667,-87.6667 131.5,-193.16667 131.5,-316.5 0,-123.33333 -43.8333,-228.83333 -131.5,-316.5 -87.6667,-87.66667 -193.1667,-131.5 -316.5,-131.5 -123.33333,0 -228.83333,43.83333 -316.5,131.5 -87.66667,87.66667 -131.5,193.16667 -131.5,316.5 0,123.33333 43.83333,228.8333 131.5,316.5 87.66667,87.6667 193.16667,131.5 316.5,131.5\"      id=\"path2\"      inkscape:connector-curvature=\"0\"      sodipodi:nodetypes=\"csssssssccsssssssssssccssssccccsssssssc\" />   <g      id=\"g854\"      transform=\"translate(259.86064,302.45965)\">     <g        id=\"g847\">       <circle          style=\"fill:#7ebc6f;fill-opacity:1;stroke:none;stroke-width:21.93531036;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1\"          id=\"path819\"          cx=\"1351.3682\"          cy=\"1044.5065\"          r=\"335.30353\" />     </g>     <g        id=\"g844\">       <path          style=\"fill: none !important;stroke:#ffffff !important;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"          d=\"m 1154.7797,1044.3443 h 389.1358\"          id=\"path821\"          inkscape:connector-curvature=\"0\" />       <path          style=\"fill: none !important;stroke:#ffffff !important;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1\"          d=\"M 1349.9206,849.36269 V 1238.4985\"          id=\"path821-3\"          inkscape:connector-curvature=\"0\" />     </g>   </g> </svg> "
     public static camera_plus_img = Img.AsImageElement(Svg.camera_plus)
     public static camera_plus_svg() { return new FixedUiElement(Svg.camera_plus);}
     public static camera_plus_ui() { return new FixedUiElement(Svg.camera_plus_img);}

UI/FullScreenMessageBoxHandler.ts

@@ -13,9 +13,11 @@ export class FullScreenMessageBox extends UIElement {
     private readonly returnToTheMap: UIElement;
 
     constructor(onClear: (() => void)) {
-        super(State.state.fullScreenMessage);
+        super();
         this.HideOnEmpty(true);
+        const self = this;
         State.state.fullScreenMessage.addCallbackAndRun(uiElement => {
+            self.Update();
             if (uiElement === undefined) {
                 location.hash = "";
             } else {
@@ -28,14 +30,12 @@ export class FullScreenMessageBox extends UIElement {
             window.onhashchange = function () {
                 if (location.hash === "") {
                     // No more element: back to the map!
-                    console.log("Clearing full screen message");
                     State.state.fullScreenMessage.setData(undefined);
                     onClear();
                 }
             }
         }
 
-        const self = this;
         this.returnToTheMap =
             new Combine([Translations.t.general.returnToTheMap.Clone().SetStyle("font-size:xx-large")])
                 .SetStyle("background:#7ebc6f;" +
@@ -69,7 +69,6 @@ export class FullScreenMessageBox extends UIElement {
         }
         
         const el = document.getElementById(this.id);
-        console.warn(el, el.style.display);
 
         const uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
             "display:block;" +

UI/Image/ImageUploadFlow.ts

@@ -115,7 +115,7 @@ export class ImageUploadFlow extends UIElement {
             "cursor:pointer;" +
             "padding: 0.5em;" +
             "border-radius: 1em;" +
-            "border: 3px solid var(--popup-border);" +
+            "border: 3px solid var(--foreground-color);" +
             "box-sizing:border-box;")
 
         const actualInputElement =

UI/Popup/FeatureInfoBox.ts

@@ -40,7 +40,6 @@ 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"),

UI/Popup/TagRenderingAnswer.ts

@@ -9,6 +9,7 @@ import {SubstitutedTranslation} from "../SpecialVisualizations";
 export default class TagRenderingAnswer extends UIElement {
     private _tags: UIEventSource<any>;
     private _configuration: TagRenderingConfig;
+    private _content: UIElement;
 
     constructor(tags: UIEventSource<any>, configuration: TagRenderingConfig) {
         super(tags);
@@ -31,7 +32,9 @@ export default class TagRenderingAnswer extends UIElement {
         if (tr === undefined) {
             return "";
         }
-        return new SubstitutedTranslation(tr, this._tags).Render();
+        // Bit of a hack; remember that the fields are updated
+        this._content = new SubstitutedTranslation(tr, this._tags);
+        return this._content.Render();
     }
 
 }

UI/SimpleAddUI.ts

@@ -116,7 +116,7 @@ export class SimpleAddUI extends UIElement {
             const loc = State.state.bm.LastClickLocation.data;
             let feature = State.state.changes.createElement(tags, loc.lat, loc.lon);
             layerToAddTo.AddNewElement(feature);
-            State.state.selectedElement.setData({feature: feature});
+            State.state.selectedElement.setData(feature);
         }
     }
 

UI/WelcomeMessage.ts

@@ -24,9 +24,10 @@ export class WelcomeMessage extends UIElement {
         this.description = new Combine([
             "<h3>", layout.title, "</h3>",
             layout.description
-
         ])
         layout.descriptionTail
+        
+        
 
 
         this.plzLogIn =

assets/layers/ghost_bike/ghost_bike.json

@@ -43,8 +43,7 @@
     }
   ],
   "tagRenderings": [
-    "images",
+    { 
-    {
       "render": {
         "en": "A <b>ghost bike</b> is a memorial for a cyclist who died in a traffic accident, in the form of a white bicycle placed permanently near the accident location.",
         "nl": "Een Witte Fiets (of Spookfiets) is een aandenken aan een fietser die bij een verkeersongeval om het leven kwam. Het gaat over een witgeschilderde fiets die geplaatst werd in de buurt van het ongeval.",

assets/svg/camera-plus.svg

@@ -65,12 +65,12 @@
     <g
        id="g844">
       <path
-         style="fill:none;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         style="fill:none;stroke:#ffffff !important;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m 1154.7797,1044.3443 h 389.1358"
          id="path821"
          inkscape:connector-curvature="0" />
       <path
-         style="fill:none;stroke:#fffff0;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         style="fill:none;stroke:#ffffff !important;stroke-width:95.51803589;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="M 1349.9206,849.36269 V 1238.4985"
          id="path821-3"
          inkscape:connector-curvature="0" />

assets/themes/surveillance_cameras/surveillance_cameras.json

@@ -230,6 +230,38 @@
               }
             }
           ]
+        },
+        {
+          "question": {
+            "en": "How is this camera placed?",
+            "nl": "Hoe is deze camera geplaatst?"
+          },
+          "freeform": {
+            "key": "camera:mount"
+          },
+          "mappings": [
+            {
+              "if": "camera:mount=wall",
+              "then": {
+                "en": "This camera is placed against a wall",
+                "nl": "Deze camera hangt aan een muur"
+              }
+            },
+            {
+              "if": "camera:mount=pole",
+              "then": {
+                "en": "This camera is placed one a pole",
+                "nl": "Deze camera staat op een paal"
+              }
+            },
+            {
+              "if": "camera:mount=pole",
+              "then": {
+                "en": "This camera is placed one a pole",
+                "nl": "Deze camera staat op een paal"
+              }
+            }
+          ]
         }
       ],
       "hideUnderlayingFeaturesMinPercentage": 0,