From e1b6e258b3b549a9f75a2e804549d29f95e10d66 Mon Sep 17 00:00:00 2001
From: Wouter van der Plas <2423856+wvanderp@users.noreply.github.com>
Date: Sat, 25 Nov 2023 20:04:47 +0100
Subject: [PATCH] final touches

---
 .vscode/settings.json |  1 +
 package-lock.json     | 10 +++++
 src/static/camera.svg | 98 ++++++++++++++++++++++++++++++++++++-------
 utils/collect.ts      | 13 +++---
 4 files changed, 101 insertions(+), 21 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 27609ebf..fbb6d56c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -12,6 +12,7 @@
         "paren",
         "plusplus",
         "popperjs",
+        "rotatedmarker",
         "sonarjs",
         "wvdp",
         "youtu.be",
diff --git a/package-lock.json b/package-lock.json
index 3194e08b..54a1b2e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
       "devDependencies": {
         "@parcel/transformer-sass": "^2.10.3",
         "@types/leaflet": "^1.9.8",
+        "@types/leaflet-rotatedmarker": "^0.2.5",
         "@types/lodash.chunk": "^4.2.9",
         "@types/lodash.set": "^4.3.9",
         "@types/node": "^20.9.0",
@@ -2448,6 +2449,15 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/leaflet-rotatedmarker": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@types/leaflet-rotatedmarker/-/leaflet-rotatedmarker-0.2.5.tgz",
+      "integrity": "sha512-GaKK1bdQ6NYGkVdZj2cHe8Eu1BVf40Jhtmd8pZj5gQSJcTy5iTog0hsMIhf6QQDKnaEgrRJzm4OES6B9vxi4dw==",
+      "dev": true,
+      "dependencies": {
+        "@types/leaflet": "*"
+      }
+    },
     "node_modules/@types/lodash": {
       "version": "4.14.200",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.200.tgz",
diff --git a/src/static/camera.svg b/src/static/camera.svg
index 79afdfd6..4e7589ec 100644
--- a/src/static/camera.svg
+++ b/src/static/camera.svg
@@ -1,28 +1,94 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg:svg
+<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"
    width="579.625"
    height="290.939"
    viewBox="0 0 579.62501 290.939"
+   id="svg2"
    version="1.1"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <svg:title>Camera Icon</svg:title>
-  <svg:g
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
+   sodipodi:docname="camera.svg">
+  <title
+     id="title4172">Camera Icon</title>
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="335.71089"
+     inkscape:cy="204.68132"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4147"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="2560"
+     inkscape:window-height="1361"
+     inkscape:window-x="-9"
+     inkscape:window-y="1271"
+     inkscape:window-maximized="1"
+     inkscape:document-rotation="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Camera Icon</dc:title>
+        <cc:license
+           rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
+        <dc:date>05/02/2019</dc:date>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Waffle552</dc:title>
+          </cc:Agent>
+        </dc:creator>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
      transform="translate(0,-761.42316)">
-    <svg:g
+    <g
+       id="g4147"
        transform="translate(-154.25129,619.5272)">
-      <svg:rect
+      <rect
          ry="45.488846"
          y="142.79245"
          x="154.68155"
          height="289.1395"
          width="382.58539"
-         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.86051887;stroke-opacity:1" />
-      <svg:path
-         d="m 554.25129,242.36795 178.94419,-99.31949 0,288.62748 -178.94419,-99.31949 z"
-         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.3624723;stroke-opacity:1" />
-    </svg:g>
-  </svg:g>
-</svg:svg>
+         id="rect4136"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.860519;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="ccccc"
+         inkscape:connector-curvature="0"
+         id="rect4142"
+         d="M 554.25129,242.36795 733.19548,143.04846 V 431.67594 L 554.25129,332.35645 Z"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.36247;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/utils/collect.ts b/utils/collect.ts
index a4bd7fd8..fe79b8e4 100644
--- a/utils/collect.ts
+++ b/utils/collect.ts
@@ -139,14 +139,17 @@ const queryNominatim = async (lat: number, lon: number): Promise<NominatimRespon
 
         const nominatim = await queryNominatim(r.lat, r.lon);
 
-        let direction = Number(r.tags['camera:direction']);
-        if (Number.isNaN(direction)) {
-            direction = Number(r.tags.direction);
-        }
+        const direction = [
+            r.tags['camera:direction'],
+            r.tags.direction
+        ]
+        .map((d) => Number(d))
+        .find((d) => !Number.isNaN(d));
+
         webcams.push({
             lat: r.lat,
             lon: r.lon,
-            direction: Number.isNaN(direction) ? undefined : direction,
+            direction: direction,
 
             osmID: r.id,
             user: r.user,