Fixed small bugs, add documentation to query parameters, draft of surveillance cams

Logic/Web/QueryParameters.ts

@@ -59,7 +59,7 @@ export class QueryParameters {
 
     }
 
-    public static GetQueryParameter(key: string, deflt: string): UIEventSource<string> {
+    public static GetQueryParameter(key: string, deflt: string, documentation?: string): UIEventSource<string> {
         if(!this.initialized){
             this.init();
         }

State.ts

@@ -165,7 +165,7 @@ export default class State {
         });
 
 
-        function featSw(key: string, deflt: (layout: LayoutConfig) => boolean): UIEventSource<boolean> {
+        function featSw(key: string, deflt: (layout: LayoutConfig) => boolean, documentation?: string): UIEventSource<boolean> {
             const queryParameterSource = QueryParameters.GetQueryParameter(key, undefined);
             // I'm so sorry about someone trying to decipher this
 
@@ -173,13 +173,14 @@ export default class State {
             return UIEventSource.flatten(
                 self.layoutToUse.map((layout) => {
                     const defaultValue = deflt(layout);
-                    const queryParam = QueryParameters.GetQueryParameter(key, "" + defaultValue)
+                    const queryParam = QueryParameters.GetQueryParameter(key, "" + defaultValue, documentation)
                     return queryParam.map((str) => str === undefined ? defaultValue : (str !== "false"));
                 }), [queryParameterSource]);
         }
 
 
-        this.featureSwitchUserbadge = featSw("fs-userbadge", (layoutToUse) => layoutToUse?.enableUserBadge ?? true);
+        this.featureSwitchUserbadge = featSw("fs-userbadge", (layoutToUse) => layoutToUse?.enableUserBadge ?? true,
+            "Disables the userbadge (and thus disables login capabilities)");
         this.featureSwitchSearch = featSw("fs-search", (layoutToUse) => layoutToUse?.enableSearch ?? true);
         this.featureSwitchLayers = featSw("fs-layers", (layoutToUse) => layoutToUse?.enableLayers ?? true);
         this.featureSwitchAddNew = featSw("fs-add-new", (layoutToUse) => layoutToUse?.enableAddNewPoints ?? true);
@@ -213,8 +214,10 @@ export default class State {
                         continue;
                     }
                     try {
+                        const json = btoa(customLayout.data);
+                        console.log(json);
                         const layout = new LayoutConfig(
-                            JSON.parse(btoa(customLayout.data)));
+                            JSON.parse(json));
                         installedThemes.push({
                             layout: layout,
                             definition: customLayout.data

UI/Input/MultiInput.ts

@@ -71,7 +71,7 @@ export class MultiInput<T> extends InputElement<T[]> {
             input.IsSelected.addCallback(() => this.UpdateIsSelected());
 
             const moveUpBtn = Svg.up_ui()
-                .onClick(() => {
+                .SetClass('small-image').onClick(() => {
                     const v = self._value.data[i];
                     self._value.data[i] = self._value.data[i - 1];
                     self._value.data[i - 1] = v;
@@ -79,8 +79,8 @@ export class MultiInput<T> extends InputElement<T[]> {
                 });
 
             const moveDownBtn = 
-                Svg.down_ui().SetStyle('max-width: 1.5em; margin-left: 5px;display:block;')
+                Svg.down_ui()
-                .onClick(() => {
+                    .SetClass('small-image') .onClick(() => {
                     const v = self._value.data[i];
                     self._value.data[i] = self._value.data[i + 1];
                     self._value.data[i + 1] = v;
@@ -98,7 +98,7 @@ export class MultiInput<T> extends InputElement<T[]> {
 
 
             const deleteBtn =
-                Svg.delete_icon_ui().SetStyle('max-width: 1.5em;width:1.5em; margin-left: 5px;')
+                Svg.delete_icon_ui().SetClass('small-image')
                 .onClick(() => {
                     self._value.data.splice(i, 1);
                     self._value.ping();

UI/Popup/FeatureInfoBox.ts

@@ -5,6 +5,7 @@ import EditableTagRendering from "./EditableTagRendering";
 import QuestionBox from "./QuestionBox";
 import Combine from "../Base/Combine";
 import TagRenderingAnswer from "./TagRenderingAnswer";
+import State from "../../State";
 
 export class FeatureInfoBox extends UIElement {
     private _tags: UIEventSource<any>;
@@ -33,8 +34,6 @@ export class FeatureInfoBox extends UIElement {
             layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
             .SetClass("featureinfobox-icons");
         this._renderings = layerConfig.tagRenderings.map(tr => new EditableTagRendering(tags, tr));
-        this._questionBox = new QuestionBox(tags, layerConfig.tagRenderings);
-
     }
 
     InnerRender(): string {

assets/layers/surveillance_cameras.json

@@ -0,0 +1,228 @@
+{
+  "id": "surveillance",
+  "title": {
+    "en": "Surveillance under Surveillance",
+    "nl": "Surveillance under Surveillance"
+  },
+  "shortDescription": {
+    "en": "Surveillance cameras and other means of surveillance",
+    "nl": "Bewakingscameras en dergelijke"
+  },
+  "description": {
+    "en": "On this open map, you can find surveillance cameras.",
+    "nl": "Op deze open kaart kan je bewakingscamera's vinden."
+  },
+  "language": [
+    "en",
+    "nl"
+  ],
+  "maintainer": "",
+  "icon": "https://upload.wikimedia.org/wikipedia/commons/b/b7/Video_surveillance_logo.svg",
+  "version": "0",
+  "startLat": 0,
+  "startLon": 0,
+  "startZoom": 1,
+  "widenFactor": 0.05,
+  "socialImage": "",
+  "layers": [
+    {
+      "id": "cameras",
+      "name": {
+        "en": "Surveillance camera's",
+        "nl": "Bewakingscamera's"
+      },
+      "minzoom": 12,
+      "overpassTags": {
+        "and": [
+          "man_made=surveillance",
+          {
+            "or": [
+              "surveillance:type=camera",
+              "surveillance:type=ALPR",
+              "surveillance:type=ANPR"
+            ]
+          }
+        ]
+      },
+      "title": {
+        "render": {
+          "en": "Surveillance Camera",
+          "nl": "Bewakingscamera"
+        }
+      },
+      "description": {},
+      "tagRenderings": [
+        {
+          "question": {
+            "en": "What kind of camera is this?",
+            "nl": "Wat voor soort camera is dit?"
+          },
+          "mappings": [
+            {
+              "if": {
+                "and": [
+                  "camera:type=fixed"
+                ]
+              },
+              "then": {
+                "en": "A fixed (non-moving) camera",
+                "nl": "Een vaste camera"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "camera:type=dome"
+                ]
+              },
+              "then": {
+                "en": "A dome camera (which can turn)",
+                "nl": "Een dome (bolvormige camera die kan draaien)"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "camera:type=panning"
+                ]
+              },
+              "then": {
+                "en": "A panning camera",
+                "nl": "Een camera die (met een motor) van links naar rechts kan draaien"
+              }
+            }
+          ]
+        },
+        {
+          "freeform": {
+            "key": "operator"
+          },
+          "question": {
+            "en": "Who operates this CCTV?",
+            "nl": "Wie beheert deze bewakingscamera?"
+          },
+          "render": {
+            "en": "Operated by {operator}",
+            "nl": "Beheer door {operator}"
+          }
+        },
+        {
+          "question": {
+            "en": "What k ind of surveillance is this camera",
+            "nl": "Wat soort bewaking wordt hier uitgevoerd?"
+          },
+          "mappings": [
+            {
+              "if": {
+                "and": [
+                  "surveillance=public"
+                ]
+              },
+              "then": {
+                "en": "A public area is surveilled, such as a street, a bridge, a square, a park, a train station...",
+                "nl": "Bewaking van de publieke ruilmte, dus een straat, een brug, een park, een plein, een stationsgebouw..."
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "surveillance=outdoor"
+                ]
+              },
+              "then": {
+                "en": "An outdoor, yet private area is surveilled (e.g. a parking lot, a fuel station, courtyard, entrance, private driveway, ...)",
+                "nl": "Een buitenruimte met privaat karakter (zoals een privé-oprit, een parking, tankstation, ...)"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "surveillance=indoor"
+                ]
+              },
+              "then": {
+                "nl": "Een private binnenruimte wordt bewaakt, bv. een wiinkel, een parkeergarage, ...",
+                "en": "A private indoor area is surveilled, e.g. a shop, a private underground parking, ..."
+              }
+            }
+          ]
+        },
+        {
+          "question": {
+            "en": "What exactly is surveilled here?",
+            "nl": "Wat wordt hier precies bewaakt?"
+          },
+          "freeform": {
+            "key": "surveillance:type"
+          },
+          "render": {
+            "en": " Surveills a {surveillance:type}",
+            "nl": "Bewaakt een {surveillance:type}"
+          },
+          "mappings": [
+            {
+              "if": {
+                "and": [
+                  "surveillance:zone=parking"
+                ]
+              },
+              "then": {
+                "en": "Surveills a parking",
+                "nl": "Bewaakt een parking"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "surveillance:zone=traffic"
+                ]
+              },
+              "then": {
+                "en": "Surveills the traffic",
+                "nl": "Bewaakt het verkeer"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "surveillance:zone=entrance"
+                ]
+              },
+              "then": {
+                "en": "Surveills an entrance",
+                "nl": "Bewaakt een ingang"
+              }
+            },
+            {
+              "if": {
+                "and": [
+                  "surveillance:zone=shop"
+                ]
+              },
+              "then": {
+                "en": "Surveills a shop",
+                "nl": "Bewaakt een winkel"
+              }
+            }
+          ]
+        }
+      ],
+      "hideUnderlayingFeaturesMinPercentage": 0,
+      "icon": {
+        "render": "https://upload.wikimedia.org/wikipedia/commons/b/b7/Video_surveillance_logo.svg"
+      },
+      "width": {
+        "render": "8"
+      },
+      "iconSize": {
+        "render": "30,30,center"
+      },
+      "color": {
+        "render": "#00f"
+      },
+      "presets": [],
+      "wayHandling": 2
+    }
+  ],
+  "roamingRenderings": []
+}

index.css

@@ -416,3 +416,8 @@ body {
 }
 
 
+.small-image img {
+    height: 1em;
+    max-width: 1em;
+}
+