From a0f743b43232c3f6ae4675910b9500a5655cab93 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Thu, 12 Dec 2024 13:19:50 -0700
Subject: [PATCH 01/18] better map markers

---
 webapp/package-lock.json              | 50 +++++++++++++++++++++
 webapp/package.json                   |  2 +
 webapp/public/map-icon.svg            | 10 +++++
 webapp/src/components/DFMapMarker.vue | 63 ++++++---------------------
 webapp/src/components/DFMapPopup.vue  |  8 +++-
 5 files changed, 82 insertions(+), 51 deletions(-)
 create mode 100644 webapp/public/map-icon.svg

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 1b9e9de..71f74d1 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -17,6 +17,7 @@
       "devDependencies": {
         "@mdi/font": "^7.4.47",
         "@tsconfig/node20": "^20.1.4",
+        "@types/leaflet": "^1.9.15",
         "@types/node": "^20.14.5",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vue-leaflet/vue-leaflet": "^0.10.1",
@@ -25,6 +26,7 @@
         "npm-run-all2": "^6.2.0",
         "typescript": "~5.4.0",
         "vite": "^5.3.1",
+        "vue-leaflet-rotate-marker": "^0.1.0",
         "vue-tsc": "^2.0.21"
       }
     },
@@ -669,6 +671,21 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.15",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.15.tgz",
+      "integrity": "sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA==",
+      "dev": true
+    },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.15",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.15.tgz",
+      "integrity": "sha512-7UuggAuAs+mva66gtf2OTB1nEhzU/9JED93TIaOEgvFMvG/dIGQaukHE7izHo1Zd+Ko1L4ETUw7TBc8yUxevpg==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.16.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.6.tgz",
@@ -1472,6 +1489,15 @@
         }
       }
     },
+    "node_modules/vue-leaflet-rotate-marker": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vue-leaflet-rotate-marker/-/vue-leaflet-rotate-marker-0.1.0.tgz",
+      "integrity": "sha512-qBrb/ydvl+cuQSZ3cinH2G0nmFNglh5h9qVIFRAlrcjCNqZE1RIEHxwjvxA0CCxdlNFxGeeZy0RFrkdSqNToeg==",
+      "dev": true,
+      "dependencies": {
+        "vue": "^3.3.4"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
@@ -1872,6 +1898,21 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "@types/geojson": {
+      "version": "7946.0.15",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.15.tgz",
+      "integrity": "sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA==",
+      "dev": true
+    },
+    "@types/leaflet": {
+      "version": "1.9.15",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.15.tgz",
+      "integrity": "sha512-7UuggAuAs+mva66gtf2OTB1nEhzU/9JED93TIaOEgvFMvG/dIGQaukHE7izHo1Zd+Ko1L4ETUw7TBc8yUxevpg==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/node": {
       "version": "20.16.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.6.tgz",
@@ -2433,6 +2474,15 @@
         "@vue/shared": "3.5.8"
       }
     },
+    "vue-leaflet-rotate-marker": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vue-leaflet-rotate-marker/-/vue-leaflet-rotate-marker-0.1.0.tgz",
+      "integrity": "sha512-qBrb/ydvl+cuQSZ3cinH2G0nmFNglh5h9qVIFRAlrcjCNqZE1RIEHxwjvxA0CCxdlNFxGeeZy0RFrkdSqNToeg==",
+      "dev": true,
+      "requires": {
+        "vue": "^3.3.4"
+      }
+    },
     "vue-router": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index c48f62f..490777b 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -20,6 +20,7 @@
   "devDependencies": {
     "@mdi/font": "^7.4.47",
     "@tsconfig/node20": "^20.1.4",
+    "@types/leaflet": "^1.9.15",
     "@types/node": "^20.14.5",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
@@ -28,6 +29,7 @@
     "npm-run-all2": "^6.2.0",
     "typescript": "~5.4.0",
     "vite": "^5.3.1",
+    "vue-leaflet-rotate-marker": "^0.1.0",
     "vue-tsc": "^2.0.21"
   }
 }
diff --git a/webapp/public/map-icon.svg b/webapp/public/map-icon.svg
new file mode 100644
index 0000000..213d7b5
--- /dev/null
+++ b/webapp/public/map-icon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
+    <path d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461ZM217.92,200.242C228.694,192.652 241.831,188.195 256,188.195C270.169,188.195 283.306,192.652 294.08,200.242C294.08,200.242 392.803,48.4 392.803,48.4C352.363,26.364 305.694,13.806 256,13.806C206.306,13.806 159.637,26.364 119.197,48.4L217.92,200.242Z" style="fill:rgb(137,135,135);"/>
+    <g transform="matrix(0.906623,0,0,0.906623,23.9045,22.3271)">
+        <circle cx="256" cy="256" r="57.821" style="fill:rgb(63,84,243);fill-opacity:0.41;"/>
+        <path d="M256,174.25C301.119,174.25 337.75,210.881 337.75,256C337.75,301.119 301.119,337.75 256,337.75C210.881,337.75 174.25,301.119 174.25,256C174.25,210.881 210.881,174.25 256,174.25ZM256,198.179C224.088,198.179 198.179,224.088 198.179,256C198.179,287.912 224.088,313.821 256,313.821C287.912,313.821 313.821,287.912 313.821,256C313.821,224.088 287.912,198.179 256,198.179Z" style="fill:rgb(63,84,243);"/>
+    </g>
+</svg>
diff --git a/webapp/src/components/DFMapMarker.vue b/webapp/src/components/DFMapMarker.vue
index eb2f991..4d620b1 100644
--- a/webapp/src/components/DFMapMarker.vue
+++ b/webapp/src/components/DFMapMarker.vue
@@ -1,28 +1,25 @@
 <template>
-  <l-circle-marker :lat-lng="[alpr.lat, alpr.lon]" :radius="7" :color="markerColor">
+  <l-marker-rotate v-if="showFov && hasDirection" :lat-lng="[alpr.lat, alpr.lon]" rotationOrigin="center center" :rotationAngle>
+    <l-popup>
+      <DFMapPopup :alpr="alpr" />
+    </l-popup>
+    <l-icon :icon-url :icon-size :icon-anchor />
+  </l-marker-rotate>
+  <l-circle-marker v-else :lat-lng="[alpr.lat, alpr.lon]" :radius="7" color="#3f54f3">
     <l-popup>
       <DFMapPopup :alpr="alpr" />
     </l-popup>
   </l-circle-marker>
-  
-  <l-polygon
-    :lat-lngs="directionIndicatorPolygonCoordinates"
-    :options="{ color: 'red' }"
-    v-if="showFov && hasDirection"
-  >
-    <!-- TODO: use the same popup -->
-    <l-popup>
-      <DFMapPopup :alpr="alpr" />
-    </l-popup>
-  </l-polygon>
 </template>
 
 <script setup lang="ts">
-import { LCircleMarker, LPolygon, LPopup } from '@vue-leaflet/vue-leaflet';
+import { LIcon, LPopup, LCircleMarker } from '@vue-leaflet/vue-leaflet';
+import { LMarkerRotate } from 'vue-leaflet-rotate-marker';
 import DFMapPopup from '@/components/DFMapPopup.vue';
 import type { ALPR } from '@/types';
 import type { PropType } from 'vue';
 import { computed, defineProps } from 'vue';
+import { type PointExpression } from 'leaflet';
 
 const props = defineProps({
   alpr: {
@@ -35,41 +32,9 @@ const props = defineProps({
   }
 });
 
-const markerColor = computed(() => {
-  if (props.alpr.tags.brand === 'Avigilon') {
-    return '#ff5722';
-  }
-  return '#3f54f3';
-});
-
+const iconSize: PointExpression = [60, 60];
+const iconAnchor: PointExpression = [30, 30];
 const hasDirection = computed(() => props.alpr.tags.direction !== undefined);
-
-const directionIndicatorPolygonCoordinates = computed(() => {
-  if (!hasDirection.value) {
-    console.warn('ALPR does not have direction tag');
-    return [];
-  }
-  const { lat, lon } = props.alpr;
-  const direction = parseInt(props.alpr.tags.direction);
-  const fov = 30; // Field of view in degrees
-  const distance = 0.0004; // Distance for the triangle points
-
-  const toRadians = (degrees: number) => degrees * (Math.PI / 180);
-
-  const pointL = {
-    lat: lat + distance * Math.cos(toRadians(direction - fov / 2)),
-    lon: lon + distance * Math.sin(toRadians(direction - fov / 2))
-  };
-
-  const pointR = {
-    lat: lat + distance * Math.cos(toRadians(direction + fov / 2)),
-    lon: lon + distance * Math.sin(toRadians(direction + fov / 2))
-  };
-
-  return [
-    [lat, lon],
-    [pointL.lat, pointL.lon],
-    [pointR.lat, pointR.lon]
-  ];
-});
+const rotationAngle = computed(() => parseInt(props.alpr.tags.direction) || undefined);
+const iconUrl = computed(() => props.showFov ? `/map-icon.svg` : '/map-icon-simple.svg');
 </script>
diff --git a/webapp/src/components/DFMapPopup.vue b/webapp/src/components/DFMapPopup.vue
index aa98f60..0fbb382 100644
--- a/webapp/src/components/DFMapPopup.vue
+++ b/webapp/src/components/DFMapPopup.vue
@@ -5,13 +5,13 @@
         <v-icon start>mdi-face-recognition</v-icon> <b>Face Recognition</b>
       </v-list-item>
       <v-list-item>
-        <v-icon start>mdi-car</v-icon> <b>License Plate</b>
+        <v-icon start>mdi-cctv</v-icon> <b>License Plate Reader</b>
       </v-list-item>
       <v-list-item v-if="isFaceRecognition">
         <v-icon start>mdi-adjust</v-icon> <b>Omnidirectional</b>
       </v-list-item>
       <v-list-item v-else>
-        <v-icon start>mdi-cctv</v-icon> <b>Directional {{ alpr.tags.direction ? `(${degreesToCardinal(parseInt(alpr.tags.direction))})` : '' }}</b>
+        <v-icon start>mdi-compass-outline</v-icon> <b>{{ cardinalDirection }}</b>
       </v-list-item>
       <v-list-item>
         <v-icon start>mdi-domain</v-icon> <b>
@@ -75,6 +75,10 @@ const kvTags = computed(() => {
     .map(([key, value]) => ({ key, value: valueTransformations[key]?.(value) ?? value }));
 });
 
+const cardinalDirection = computed(() => 
+  props.alpr.tags.direction === undefined ? 'Unknown' : degreesToCardinal(parseInt(props.alpr.tags.direction))
+);
+
 function degreesToCardinal(degrees: number): string {
   const cardinals = ['North', 'Northeast', 'East', 'Southeast', 'South', 'Southwest', 'West', 'Northwest'];
   return cardinals[Math.round(degrees / 45) % 8];

From dfd8f397649b18aad720ee051047ad2815bf09a0 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Thu, 12 Dec 2024 14:28:40 -0700
Subject: [PATCH 02/18] remove analytics

---
 webapp/index.html | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/webapp/index.html b/webapp/index.html
index c80d13d..ca14df7 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -14,16 +14,6 @@
     <meta property="og:type" content="website" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
     <title>DeFlock - ALPR Database</title>
-    <script>
-      // Analytics in prod
-      if (window.location.hostname !== 'localhost') {
-        var plausibleScript = document.createElement('script');
-        plausibleScript.src = 'https://plausible.io/js/script.file-downloads.outbound-links.js';
-        plausibleScript.defer = true;
-        plausibleScript.setAttribute('data-domain', 'deflock.me');
-        document.head.appendChild(plausibleScript);
-      }
-    </script>
   </head>
   <body>
     <div id="app"></div>

From 572149e79782ceb70fe0f67c4a2aa2007f066d0c Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Sun, 22 Dec 2024 17:47:07 -0800
Subject: [PATCH 03/18] rotate icons, transparent area not clickable

---
 webapp/package-lock.json              |  93 +++++-------
 webapp/package.json                   |   4 +-
 webapp/src/components/DFMapMarker.vue |  40 -----
 webapp/src/components/DFMapPopup.vue  |   1 +
 webapp/src/components/LeafletMap.vue  | 211 ++++++++++++++++++++++++++
 webapp/src/views/Map.vue              |  67 ++------
 6 files changed, 260 insertions(+), 156 deletions(-)
 delete mode 100644 webapp/src/components/DFMapMarker.vue
 create mode 100644 webapp/src/components/LeafletMap.vue

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 71f74d1..4a20603 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -8,8 +8,10 @@
       "name": "deflock",
       "version": "0.0.0",
       "dependencies": {
+        "@types/leaflet.markercluster": "^1.5.5",
         "axios": "^1.7.7",
         "countup.js": "^2.8.0",
+        "leaflet.markercluster": "^1.5.3",
         "vue": "^3.4.29",
         "vue-router": "^4.3.3",
         "vuetify": "^3.7.2"
@@ -20,13 +22,11 @@
         "@types/leaflet": "^1.9.15",
         "@types/node": "^20.14.5",
         "@vitejs/plugin-vue": "^5.0.5",
-        "@vue-leaflet/vue-leaflet": "^0.10.1",
         "@vue/tsconfig": "^0.5.1",
         "leaflet": "^1.9.4",
         "npm-run-all2": "^6.2.0",
         "typescript": "~5.4.0",
         "vite": "^5.3.1",
-        "vue-leaflet-rotate-marker": "^0.1.0",
         "vue-tsc": "^2.0.21"
       }
     },
@@ -674,18 +674,24 @@
     "node_modules/@types/geojson": {
       "version": "7946.0.15",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.15.tgz",
-      "integrity": "sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA==",
-      "dev": true
+      "integrity": "sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA=="
     },
     "node_modules/@types/leaflet": {
       "version": "1.9.15",
       "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.15.tgz",
       "integrity": "sha512-7UuggAuAs+mva66gtf2OTB1nEhzU/9JED93TIaOEgvFMvG/dIGQaukHE7izHo1Zd+Ko1L4ETUw7TBc8yUxevpg==",
-      "dev": true,
       "dependencies": {
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/leaflet.markercluster": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.5.tgz",
+      "integrity": "sha512-TkWOhSHDM1ANxmLi+uK0PjsVcjIKBr8CLV2WoF16dIdeFmC0Cj5P5axkI3C1Xsi4+ht6EU8+BfEbbqEF9icPrg==",
+      "dependencies": {
+        "@types/leaflet": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.16.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.6.tgz",
@@ -734,24 +740,6 @@
         "vscode-uri": "^3.0.8"
       }
     },
-    "node_modules/@vue-leaflet/vue-leaflet": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz",
-      "integrity": "sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==",
-      "dev": true,
-      "dependencies": {
-        "vue": "^3.2.25"
-      },
-      "peerDependencies": {
-        "@types/leaflet": "^1.5.7",
-        "leaflet": "^1.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/leaflet": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.8",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.8.tgz",
@@ -1112,8 +1100,15 @@
     "node_modules/leaflet": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
-      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
-      "dev": true
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
+    "node_modules/leaflet.markercluster": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
+      "peerDependencies": {
+        "leaflet": "^1.3.1"
+      }
     },
     "node_modules/magic-string": {
       "version": "0.30.11",
@@ -1489,15 +1484,6 @@
         }
       }
     },
-    "node_modules/vue-leaflet-rotate-marker": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/vue-leaflet-rotate-marker/-/vue-leaflet-rotate-marker-0.1.0.tgz",
-      "integrity": "sha512-qBrb/ydvl+cuQSZ3cinH2G0nmFNglh5h9qVIFRAlrcjCNqZE1RIEHxwjvxA0CCxdlNFxGeeZy0RFrkdSqNToeg==",
-      "dev": true,
-      "dependencies": {
-        "vue": "^3.3.4"
-      }
-    },
     "node_modules/vue-router": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
@@ -1901,18 +1887,24 @@
     "@types/geojson": {
       "version": "7946.0.15",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.15.tgz",
-      "integrity": "sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA==",
-      "dev": true
+      "integrity": "sha512-9oSxFzDCT2Rj6DfcHF8G++jxBKS7mBqXl5xrRW+Kbvjry6Uduya2iiwqHPhVXpasAVMBYKkEPGgKhd3+/HZ6xA=="
     },
     "@types/leaflet": {
       "version": "1.9.15",
       "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.15.tgz",
       "integrity": "sha512-7UuggAuAs+mva66gtf2OTB1nEhzU/9JED93TIaOEgvFMvG/dIGQaukHE7izHo1Zd+Ko1L4ETUw7TBc8yUxevpg==",
-      "dev": true,
       "requires": {
         "@types/geojson": "*"
       }
     },
+    "@types/leaflet.markercluster": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.5.tgz",
+      "integrity": "sha512-TkWOhSHDM1ANxmLi+uK0PjsVcjIKBr8CLV2WoF16dIdeFmC0Cj5P5axkI3C1Xsi4+ht6EU8+BfEbbqEF9icPrg==",
+      "requires": {
+        "@types/leaflet": "*"
+      }
+    },
     "@types/node": {
       "version": "20.16.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.6.tgz",
@@ -1955,15 +1947,6 @@
         "vscode-uri": "^3.0.8"
       }
     },
-    "@vue-leaflet/vue-leaflet": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz",
-      "integrity": "sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==",
-      "dev": true,
-      "requires": {
-        "vue": "^3.2.25"
-      }
-    },
     "@vue/compiler-core": {
       "version": "3.5.8",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.8.tgz",
@@ -2255,8 +2238,13 @@
     "leaflet": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
-      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
-      "dev": true
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
+    "leaflet.markercluster": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
+      "requires": {}
     },
     "magic-string": {
       "version": "0.30.11",
@@ -2474,15 +2462,6 @@
         "@vue/shared": "3.5.8"
       }
     },
-    "vue-leaflet-rotate-marker": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/vue-leaflet-rotate-marker/-/vue-leaflet-rotate-marker-0.1.0.tgz",
-      "integrity": "sha512-qBrb/ydvl+cuQSZ3cinH2G0nmFNglh5h9qVIFRAlrcjCNqZE1RIEHxwjvxA0CCxdlNFxGeeZy0RFrkdSqNToeg==",
-      "dev": true,
-      "requires": {
-        "vue": "^3.3.4"
-      }
-    },
     "vue-router": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 490777b..cc7795e 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -11,8 +11,10 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "@types/leaflet.markercluster": "^1.5.5",
     "axios": "^1.7.7",
     "countup.js": "^2.8.0",
+    "leaflet.markercluster": "^1.5.3",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3",
     "vuetify": "^3.7.2"
@@ -23,13 +25,11 @@
     "@types/leaflet": "^1.9.15",
     "@types/node": "^20.14.5",
     "@vitejs/plugin-vue": "^5.0.5",
-    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vue/tsconfig": "^0.5.1",
     "leaflet": "^1.9.4",
     "npm-run-all2": "^6.2.0",
     "typescript": "~5.4.0",
     "vite": "^5.3.1",
-    "vue-leaflet-rotate-marker": "^0.1.0",
     "vue-tsc": "^2.0.21"
   }
 }
diff --git a/webapp/src/components/DFMapMarker.vue b/webapp/src/components/DFMapMarker.vue
deleted file mode 100644
index 4d620b1..0000000
--- a/webapp/src/components/DFMapMarker.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <l-marker-rotate v-if="showFov && hasDirection" :lat-lng="[alpr.lat, alpr.lon]" rotationOrigin="center center" :rotationAngle>
-    <l-popup>
-      <DFMapPopup :alpr="alpr" />
-    </l-popup>
-    <l-icon :icon-url :icon-size :icon-anchor />
-  </l-marker-rotate>
-  <l-circle-marker v-else :lat-lng="[alpr.lat, alpr.lon]" :radius="7" color="#3f54f3">
-    <l-popup>
-      <DFMapPopup :alpr="alpr" />
-    </l-popup>
-  </l-circle-marker>
-</template>
-
-<script setup lang="ts">
-import { LIcon, LPopup, LCircleMarker } from '@vue-leaflet/vue-leaflet';
-import { LMarkerRotate } from 'vue-leaflet-rotate-marker';
-import DFMapPopup from '@/components/DFMapPopup.vue';
-import type { ALPR } from '@/types';
-import type { PropType } from 'vue';
-import { computed, defineProps } from 'vue';
-import { type PointExpression } from 'leaflet';
-
-const props = defineProps({
-  alpr: {
-    type: Object as PropType<ALPR>,
-    required: true
-  },
-  showFov: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const iconSize: PointExpression = [60, 60];
-const iconAnchor: PointExpression = [30, 30];
-const hasDirection = computed(() => props.alpr.tags.direction !== undefined);
-const rotationAngle = computed(() => parseInt(props.alpr.tags.direction) || undefined);
-const iconUrl = computed(() => props.showFov ? `/map-icon.svg` : '/map-icon-simple.svg');
-</script>
diff --git a/webapp/src/components/DFMapPopup.vue b/webapp/src/components/DFMapPopup.vue
index 0fbb382..ae26bb5 100644
--- a/webapp/src/components/DFMapPopup.vue
+++ b/webapp/src/components/DFMapPopup.vue
@@ -52,6 +52,7 @@
 import { defineProps, computed } from 'vue';
 import type { PropType } from 'vue';
 import type { ALPR } from '@/types';
+import { VIcon, VList, VSheet, VListItem } from 'vuetify/components';
 
 const props = defineProps({
   alpr: {
diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
new file mode 100644
index 0000000..bbf15e3
--- /dev/null
+++ b/webapp/src/components/LeafletMap.vue
@@ -0,0 +1,211 @@
+<template>
+  <div id="map"></div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, h, createApp, watch, type PropType } from 'vue';
+import L from 'leaflet';
+
+import DFMapPopup from './DFMapPopup.vue';
+
+import 'leaflet/dist/leaflet.css';
+import 'leaflet.markercluster';
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+import 'leaflet.markercluster/dist/MarkerCluster.css';
+import { createVuetify } from 'vuetify'
+
+const props = defineProps({
+  center: {
+    required: true,
+  },
+  zoom: {
+    type: Number,
+    required: true,
+  },
+  alprs: Array
+});
+
+let map: L.Map;
+let circlesLayer: L.FeatureGroup;
+let clusterLayer: L.MarkerClusterGroup;
+
+onMounted(() => {
+  initializeMap();
+});
+
+function initializeMap() {
+  map = L.map('map', { zoomControl: false }).setView(props.center, props.zoom);
+
+  registerEvents();
+  registerWatchers();
+
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  }).addTo(map);
+
+  populateMap();
+}
+
+function populateMap() {
+  const showFov = props.zoom >= 16;
+
+  if (clusterLayer) {
+    map.removeLayer(clusterLayer);
+  }
+
+  clusterLayer = L.markerClusterGroup();
+  circlesLayer = L.featureGroup();
+
+  for (let i = 0; i < 200; i++) {
+    const lat = 51.505 + (Math.random() - 0.5) * 0.1;
+    const lng = -0.09 + (Math.random() - 0.5) * 0.1;
+    const orientationDegrees = Math.random() * 360;
+
+    let marker: L.CircleMarker | L.Marker;
+
+    // content of @/public/map-icon.svg; TODO: import it here if possible
+    const svgMarker = `
+      <svg style="transform:rotate(${orientationDegrees}deg)" class="svgMarker" width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+        <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
+        <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461ZM217.92,200.242C228.694,192.652 241.831,188.195 256,188.195C270.169,188.195 283.306,192.652 294.08,200.242C294.08,200.242 392.803,48.4 392.803,48.4C352.363,26.364 305.694,13.806 256,13.806C206.306,13.806 159.637,26.364 119.197,48.4L217.92,200.242Z" style="fill:rgb(137,135,135);"/>
+        <g transform="matrix(0.906623,0,0,0.906623,23.9045,22.3271)">
+          <circle class="someSVGpath" cx="256" cy="256" r="57.821" style="fill:rgb(63,84,243);fill-opacity:0.41;"/>
+          <path class="someSVGpath" d="M256,174.25C301.119,174.25 337.75,210.881 337.75,256C337.75,301.119 301.119,337.75 256,337.75C210.881,337.75 174.25,301.119 174.25,256C174.25,210.881 210.881,174.25 256,174.25ZM256,198.179C224.088,198.179 198.179,224.088 198.179,256C198.179,287.912 224.088,313.821 256,313.821C287.912,313.821 313.821,287.912 313.821,256C313.821,224.088 287.912,198.179 256,198.179Z" style="fill:rgb(63,84,243);"/>
+        </g>
+      </svg>
+      `;
+
+    const el = document.createElement('div');
+    el.innerHTML = svgMarker;
+    el.style.width = '50px';
+    el.style.height = '50px';
+
+    if (showFov) {
+      const icon = L.divIcon({
+        className: 'leaflet-data-marker',
+        html: svgMarker,
+        iconSize: [60, 60],
+        iconAnchor: [30, 30],
+        popupAnchor: [0, -5],
+      });
+
+      marker = L.marker([lat, lng], { icon: icon });
+    } else {
+      marker = L.circleMarker([lat, lng], {
+        fill: true,
+        fillColor: '#3f54f3',
+        fillOpacity: 0.6,
+        stroke: true,
+        color: '#3f54f3',
+        opacity: 1,
+        radius: 8,
+        weight: 3,
+      });
+    }
+    
+    // Bind an empty popup to the circle
+    marker.bindPopup('');
+
+    // Add an event listener to create the popup content on demand
+    marker.on('popupopen', (e: any) => {
+      const popupContent = document.createElement('div');
+      createApp({
+        render() {
+          return h(DFMapPopup, { alpr: {
+            id: `id-${i}`,
+            lat: lat,
+            lon: lng,
+            tags: { type: 'car' },
+            type: "node",
+          } });
+        }
+      }).use(createVuetify()).mount(popupContent);
+
+      // Set the popup content
+      e.popup.setContent(popupContent);
+    });
+
+    circlesLayer.addLayer(marker);
+  }
+
+  clusterLayer.addLayer(circlesLayer);
+  map.addLayer(clusterLayer);
+}
+
+const emit = defineEmits(['update:center', 'update:zoom', 'update:bounds']);
+
+function registerEvents() {
+  map.on('moveend', () => {
+    emit('update:center', map.getCenter());
+    emit('update:zoom', map.getZoom());
+    emit('update:bounds', map.getBounds());
+  });
+
+  map.on('load', () => {
+    emit('update:bounds', map.getBounds());
+  });
+}
+
+/**
+ * Returns true if the zoom level has crossed the threshold for switching map markers.
+ * Standard circles are shown until a zoom level of 16 is reached, at which point
+ * the map switches to showing the field of view for each camera.
+ * @param oldZoom old zoom level
+ * @param newZoom new zoom level
+ * @param threshold the zoom level threshold
+ */
+function hasCrossedZoomThreshold(oldZoom: number, newZoom: number, threshold: number) {
+  return (oldZoom < threshold && newZoom >= threshold) || (oldZoom >= threshold && newZoom < threshold);
+}
+
+function registerWatchers() {
+  watch(() => props.center, (newCenter) => {
+    if (newCenter !== props.center) // TODO: is this necessary?
+      map.setView(newCenter);
+  });
+
+  watch(() => props.zoom, (newZoom, oldZoom) => {
+    if (newZoom !== oldZoom) {
+      map.setZoom(newZoom);
+      if (hasCrossedZoomThreshold(oldZoom, newZoom, 16)) {
+        populateMap();
+      }
+    }
+  });
+}
+
+
+</script>
+
+<style scoped>
+@import 'leaflet/dist/leaflet.css';
+@import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+@import 'leaflet.markercluster/dist/MarkerCluster.css';
+
+#map {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+}
+</style>
+
+<style> /* (Global) */
+/* Disables clicks on the main wrappers */
+.leaflet-marker-icon.leaflet-interactive:not(.marker-cluster), .svgMarker {
+  pointer-events: none;
+  cursor: default;
+}
+.svgMarker {
+    pointer-events: none;
+    cursor: default;
+}
+
+/* Enables clicks only on actual SVG path */
+.someSVGpath {
+    pointer-events: all;
+    cursor: pointer;
+}
+</style>
diff --git a/webapp/src/views/Map.vue b/webapp/src/views/Map.vue
index b4b1d67..15912d5 100644
--- a/webapp/src/views/Map.vue
+++ b/webapp/src/views/Map.vue
@@ -7,59 +7,13 @@
     </v-card>
 
     <!-- use-global-leaflet=false is a workaround for a bug in current version of vue-leaflet -->
-    <l-map
+    <leaflet-map
       v-if="center"
-      ref="map"
-      v-model:zoom="zoom"
       v-model:center="center"
-      :use-global-leaflet="false"
+      v-model:zoom="zoom"
       @update:bounds="updateBounds"
-      @ready="mapLoaded"
-      :options="{ zoomControl: false }"
-    >
-      <l-control position="topleft">
-        <form @submit.prevent="onSearch">
-          <v-text-field
-            :rounded="xs || undefined"
-            :density="xs ? 'compact' : 'default'"
-            class="map-search"
-            ref="searchField"
-            prepend-inner-icon="mdi-magnify"
-            placeholder="Search for a location"
-            single-line
-            variant="solo"
-            clearable
-            hide-details
-            v-model="searchQuery"
-            type="search"
-          >
-            <template v-slot:append-inner>
-              <v-btn :disabled="!searchQuery" variant="text" flat color="#0080BC" @click="onSearch">
-                Go<v-icon end>mdi-chevron-right</v-icon>
-              </v-btn>
-            </template>
-          </v-text-field>
-        </form>
-      </l-control>
-      <!-- url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" -->
-
-      <l-tile-layer
-        :url="mapTileUrl"
-        layer-type="base"
-        name="OpenStreetMap"
-        attribution="&copy; <a target=&quot;_blank&quot; href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
-      />
-
-      <l-control position="bottomright">
-        <v-btn @click="goToUserLocation" icon class="mt-2">
-          <v-icon x-large>mdi-crosshairs-gps</v-icon>
-        </v-btn>
-      </l-control>
-
-      <DFMarkerCluster v-if="showClusters" v-for="cluster in clusters" :key="cluster.id" :lat="cluster.lat" :lon="cluster.lon" />
-      <DFMapMarker v-else v-for="alpr in visibleALPRs" :key="alpr.id" :alpr :show-fov="zoom >= 16" />
-    </l-map>
-    <div class="loader" v-else>
+    />
+    <div v-else class="loader">
       <span class="mb-4 text-grey">Loading Map</span>
       <v-progress-circular indeterminate color="primary" />
     </div>
@@ -77,9 +31,12 @@ import type { Cluster } from '@/services/apiService';
 import { getALPRs, geocodeQuery, getClusters } from '@/services/apiService';
 import { useDisplay, useTheme } from 'vuetify';
 import DFMapMarker from '@/components/DFMapMarker.vue';
-import DFMarkerCluster from '@/components/DFMarkerCluster.vue';
-import NewVisitor from '@/components/NewVisitor.vue';
 import type { ALPR } from '@/types';
+import L from 'leaflet';
+globalThis.L = L;
+import 'leaflet/dist/leaflet.css'
+import 'vue-leaflet-markercluster/dist/style.css'
+import LeafletMap from '@/components/LeafletMap.vue';
 
 const DEFAULT_ZOOM = 12;
 const MIN_ZOOM_FOR_REFRESH = 4;
@@ -167,10 +124,6 @@ function getUserLocation(): Promise<[number, number]> {
   });
 };
 
-function mapLoaded(map: any) {
-  updateBounds(map.getBounds());
-}
-
 function updateBounds(newBounds: any) {
   updateURL();
   
@@ -187,7 +140,7 @@ function updateBounds(newBounds: any) {
     return;
   }
 
-  updateMarkers();
+  // updateMarkers();
 }
 
 function updateURL() {

From 53db8673854b10211d8e1045ccb83db3bc37f421 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Sun, 22 Dec 2024 20:14:41 -0800
Subject: [PATCH 04/18] cleanup, restore buttons, show current location

---
 webapp/src/components/LeafletMap.vue | 81 ++++++++++++++++++++----
 webapp/src/components/NewVisitor.vue | 92 ----------------------------
 webapp/src/views/Map.vue             | 51 ++++++++++++---
 3 files changed, 110 insertions(+), 114 deletions(-)
 delete mode 100644 webapp/src/components/NewVisitor.vue

diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index bbf15e3..c7d4cf7 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -1,10 +1,18 @@
 <template>
-  <div id="map"></div>
+  <div id="map">
+    <div class="topleft">
+      <slot name="topleft"></slot>
+    </div>
+
+    <div class="bottomright">
+      <slot name="bottomright"></slot>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, h, createApp, watch, type PropType } from 'vue';
-import L from 'leaflet';
+import { onMounted, h, createApp, watch } from 'vue';
+import L, { type LatLngExpression } from 'leaflet';
 
 import DFMapPopup from './DFMapPopup.vue';
 
@@ -22,12 +30,17 @@ const props = defineProps({
     type: Number,
     required: true,
   },
-  alprs: Array
+  alprs: Array,
+  currentLocation: {
+    type: Object,
+    default: null,
+  },
 });
 
 let map: L.Map;
 let circlesLayer: L.FeatureGroup;
 let clusterLayer: L.MarkerClusterGroup;
+let currentLocationLayer: L.FeatureGroup;
 
 onMounted(() => {
   initializeMap();
@@ -46,9 +59,33 @@ function initializeMap() {
   populateMap();
 }
 
+function renderCurrentLocation() {
+  if (currentLocationLayer) {
+    map.removeLayer(currentLocationLayer);
+  }
+
+  currentLocationLayer = L.featureGroup();
+  const clMarker = L.circleMarker([props.currentLocation.lat, props.currentLocation.lng], {
+    radius: 10,
+    color: '#ffffff',
+    fillColor: '#007bff',
+    fillOpacity: 1,
+    weight: 4
+  });
+
+  clMarker.bindPopup('Current Location');
+
+  currentLocationLayer.addLayer(clMarker);
+  map.addLayer(currentLocationLayer);
+}
+
 function populateMap() {
   const showFov = props.zoom >= 16;
 
+  if (props.currentLocation) {
+    renderCurrentLocation();
+  }
+
   if (clusterLayer) {
     map.removeLayer(clusterLayer);
   }
@@ -159,9 +196,10 @@ function hasCrossedZoomThreshold(oldZoom: number, newZoom: number, threshold: nu
 }
 
 function registerWatchers() {
-  watch(() => props.center, (newCenter) => {
-    if (newCenter !== props.center) // TODO: is this necessary?
-      map.setView(newCenter);
+  watch(() => props.center, (newCenter: any, oldCenter: any) => {
+    if (newCenter.lat !== oldCenter.lat || newCenter.lng !== oldCenter.lng) {
+      map.setView(newCenter as LatLngExpression);
+    }
   });
 
   watch(() => props.zoom, (newZoom, oldZoom) => {
@@ -172,6 +210,10 @@ function registerWatchers() {
       }
     }
   });
+
+  watch(() => props.currentLocation, (newLocation, oldLocation) => {
+    renderCurrentLocation();
+  });
 }
 
 
@@ -183,13 +225,28 @@ function registerWatchers() {
 @import 'leaflet.markercluster/dist/MarkerCluster.css';
 
 #map {
-  height: 100%;
+  height: calc(100dvh - 64px);
+  margin-top: 64px;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
 }
+
+.topleft {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1000;
+}
+
+.bottomright {
+  position: absolute;
+  bottom: 50px;
+  right: 60px;
+  z-index: 1000;
+}
 </style>
 
 <style> /* (Global) */
@@ -199,13 +256,13 @@ function registerWatchers() {
   cursor: default;
 }
 .svgMarker {
-    pointer-events: none;
-    cursor: default;
+  pointer-events: none;
+  cursor: default;
 }
 
 /* Enables clicks only on actual SVG path */
 .someSVGpath {
-    pointer-events: all;
-    cursor: pointer;
+  pointer-events: all;
+  cursor: pointer;
 }
 </style>
diff --git a/webapp/src/components/NewVisitor.vue b/webapp/src/components/NewVisitor.vue
deleted file mode 100644
index 44bcfbc..0000000
--- a/webapp/src/components/NewVisitor.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <v-dialog :fullscreen="smAndDown" v-model="show" max-width="900">
-    <v-card>
-      <v-card-title class="text-center py-4 font-weight-bold">
-        <span class="headline">Welcome to DeFlock</span>
-      </v-card-title>
-        <p class="mx-8">
-          DeFlock is a tool to help you learn about Automated License Plate Readers (ALPRs) in your area. Here's how it works:
-        </p>
-      <v-container>
-        <v-row>
-
-          <v-col cols="12" sm="6">
-            <v-card flat class="pa-4">
-              <v-row class="align-center">
-                <v-col>
-                  <v-img width="140" src="/step1.png" />
-                </v-col>
-                <v-col>
-                  <h4 class="no-small">
-                    Each Circle represents an Automated License Plate Reader.
-                  </h4>
-                </v-col>
-              </v-row>
-            </v-card>
-          </v-col>
-          
-          <v-col cols="12" sm="6">
-            <v-card flat class="pa-4">
-                <v-row class="align-center">
-                <v-col>
-                  <v-img width="140" src="/step2.png" />
-                </v-col>
-                <v-col >
-                  <h4 class="no-small">
-                    Zoom in to see which direction each ALPR is facing.
-                  </h4>
-                </v-col>
-              </v-row>
-            </v-card>
-          </v-col>
-
-          <v-col cols="12" sm="6">
-            <v-card flat class="pa-4">
-                <v-row class="align-center">
-                <v-col>
-                  <v-img width="140" src="/step3.png" />
-                </v-col>
-                <v-col>
-                  <h4 class="no-small">
-                    Please check our list of <a href="/operators">Known Operators</a> and report missing ALPRs near you.
-                  </h4>
-                </v-col>
-              </v-row>
-            </v-card>
-          </v-col>
-
-        </v-row>
-      </v-container>
-      <div class="text-center mx-4 mb-2">Map data from <a href="https://openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>. By using this site, you agree to our <router-link to="/legal">Terms of Service</router-link>.</div>
-      <v-card-actions>
-        <v-btn class="w-100" size="x-large" color="primary" variant="elevated" @click="acknowledge">Got it</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { useDisplay } from 'vuetify';
-
-const { smAndDown } = useDisplay();
-
-const show = ref(false);
-
-onMounted(() => {
-  if (!localStorage.getItem('acknowledged')) {
-    show.value = true;
-  }
-});
-
-function acknowledge() {
-  show.value = false;
-  localStorage.setItem('acknowledged', 'true');
-}
-</script>
-
-<style scoped>
-.no-small {
-  min-width: 160px;
-}
-</style>
diff --git a/webapp/src/views/Map.vue b/webapp/src/views/Map.vue
index 15912d5..a753dac 100644
--- a/webapp/src/views/Map.vue
+++ b/webapp/src/views/Map.vue
@@ -1,18 +1,47 @@
 <template>
   <div class="map-container" @keyup="handleKeyUp">
-    <!-- <NewVisitor /> -->
-
     <v-card class="map-notif" v-show="isLoadingALPRs && !showClusters">
       <v-card-title><v-progress-circular indeterminate color="primary" /></v-card-title>
     </v-card>
 
-    <!-- use-global-leaflet=false is a workaround for a bug in current version of vue-leaflet -->
     <leaflet-map
       v-if="center"
       v-model:center="center"
       v-model:zoom="zoom"
+      :current-location="currentLocation"
       @update:bounds="updateBounds"
-    />
+    >
+      <!-- SEARCH -->
+      <template v-slot:topleft>
+        <form @submit.prevent="onSearch">
+          <v-text-field
+            :rounded="xs || undefined"
+            :density="xs ? 'compact' : 'default'"
+            class="map-search"
+            ref="searchField"
+            prepend-inner-icon="mdi-magnify"
+            placeholder="Search for a location"
+            single-line
+            variant="solo"
+            clearable
+            hide-details
+            v-model="searchQuery"
+            type="search"
+          >
+            <template v-slot:append-inner>
+              <v-btn :disabled="!searchQuery" variant="text" flat color="#0080BC" @click="onSearch">
+                Go<v-icon end>mdi-chevron-right</v-icon>
+              </v-btn>
+            </template>
+          </v-text-field>
+        </form>
+      </template>
+
+      <!-- CURRENT LOCATION -->
+      <template v-slot:bottomright>
+        <v-fab icon="mdi-crosshairs-gps" @click="goToUserLocation" />
+      </template>
+    </leaflet-map>
     <div v-else class="loader">
       <span class="mb-4 text-grey">Loading Map</span>
       <v-progress-circular indeterminate color="primary" />
@@ -22,7 +51,6 @@
 
 <script setup lang="ts">
 import 'leaflet/dist/leaflet.css';
-import { LMap, LTileLayer, LControl } from '@vue-leaflet/vue-leaflet';
 import { ref, onMounted, computed, watch } from 'vue';
 import { useRouter } from 'vue-router'
 import type { Ref } from 'vue';
@@ -30,12 +58,10 @@ import { BoundingBox } from '@/services/apiService';
 import type { Cluster } from '@/services/apiService';
 import { getALPRs, geocodeQuery, getClusters } from '@/services/apiService';
 import { useDisplay, useTheme } from 'vuetify';
-import DFMapMarker from '@/components/DFMapMarker.vue';
 import type { ALPR } from '@/types';
 import L from 'leaflet';
 globalThis.L = L;
 import 'leaflet/dist/leaflet.css'
-import 'vue-leaflet-markercluster/dist/style.css'
 import LeafletMap from '@/components/LeafletMap.vue';
 
 const DEFAULT_ZOOM = 12;
@@ -48,6 +74,8 @@ const center: Ref<any|null> = ref(null);
 const bounds: Ref<BoundingBox|null> = ref(null);
 const searchField: Ref<any|null> = ref(null);
 const searchQuery: Ref<string> = ref('');
+const currentLocation: Ref<any|null> = ref(null);
+
 const router = useRouter();
 const { xs } = useDisplay();
 
@@ -56,7 +84,7 @@ const mapTileUrl = computed(() =>
   theme.global.name.value === 'dark' ?
     'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png' :
     'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-);
+); // TODO: implement dark mode in LeafletMap.vue
 
 const alprs: Ref<ALPR[]> = ref([]);
 const clusters: Ref<Cluster[]> = ref([]);
@@ -96,6 +124,7 @@ function onSearch() {
 function goToUserLocation() {
   getUserLocation()
     .then(location => {
+      console.log('User location:', location);
       center.value = { lat: location[0], lng: location[1] };
       zoom.value = DEFAULT_ZOOM;
     }).catch(error => {
@@ -108,6 +137,7 @@ function getUserLocation(): Promise<[number, number]> {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(
         (position) => {
+          currentLocation.value = { lat: position.coords.latitude, lng: position.coords.longitude };
           resolve([position.coords.latitude, position.coords.longitude]);
         },
         (error) => {
@@ -223,13 +253,14 @@ onMounted(() => {
 
 .map-container {
   width: 100%;
-  height: calc(100dvh - 64px);
   overflow: auto;
 }
 
 .map-search {
   width: calc(100vw - 22px);
-  max-width: 400px;
+  @media (min-width: 600px) {
+    max-width: 320px;
+  }
   z-index: 1000;
 }
 

From 7844a66b63f37575ad100e1c5a2e02a6fc0992cc Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Sun, 22 Dec 2024 21:11:38 -0800
Subject: [PATCH 05/18] store current location in pinia

---
 webapp/package-lock.json             | 344 ++++++++++++++++-----------
 webapp/package.json                  |   1 +
 webapp/src/components/LeafletMap.vue |  20 +-
 webapp/src/main.ts                   |   3 +
 webapp/src/stores/global.ts          |  32 +++
 webapp/src/views/Landing.vue         | 255 +++++++++-----------
 webapp/src/views/Map.vue             |  39 +--
 webapp/src/views/QRLandingView.vue   |  47 +---
 8 files changed, 384 insertions(+), 357 deletions(-)
 create mode 100644 webapp/src/stores/global.ts

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 4a20603..6194b56 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -12,6 +12,7 @@
         "axios": "^1.7.7",
         "countup.js": "^2.8.0",
         "leaflet.markercluster": "^1.5.3",
+        "pinia": "^2.3.0",
         "vue": "^3.4.29",
         "vue-router": "^4.3.3",
         "vuetify": "^3.7.2"
@@ -47,11 +48,11 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.1.tgz",
-      "integrity": "sha512-reoQYNiAJreZNsJzyrDNzFQ+IQ5JFiIzAHJg9bn94S3l+4++J7RsIhNMoB+lgP/9tpmiAQqspv+xfdxTSzREOw==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
+      "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
       "dependencies": {
-        "@babel/types": "^7.26.0"
+        "@babel/types": "^7.26.3"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -61,9 +62,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
-      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
+      "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
         "@babel/helper-validator-identifier": "^7.25.9"
@@ -741,49 +742,49 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.8.tgz",
-      "integrity": "sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
       "dependencies": {
         "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.8",
+        "@vue/shared": "3.5.13",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.8.tgz",
-      "integrity": "sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
       "dependencies": {
-        "@vue/compiler-core": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.8.tgz",
-      "integrity": "sha512-taYpngQtSysrvO9GULaOSwcG5q821zCoIQBtQQSx7Uf7DxpR6CIHR90toPr9QfDD2mqHQPCSgoWBvJu0yV9zjg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
       "dependencies": {
         "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.8",
-        "@vue/compiler-dom": "3.5.8",
-        "@vue/compiler-ssr": "3.5.8",
-        "@vue/shared": "3.5.8",
+        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.11",
-        "postcss": "^8.4.47",
+        "postcss": "^8.4.48",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.8.tgz",
-      "integrity": "sha512-W96PtryNsNG9u0ZnN5Q5j27Z/feGrFV6zy9q5tzJVyJaLiwYxvC0ek4IXClZygyhjm+XKM7WD9pdKi/wIRVC/Q==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "node_modules/@vue/compiler-vue2": {
@@ -826,49 +827,49 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.8.tgz",
-      "integrity": "sha512-mlgUyFHLCUZcAYkqvzYnlBRCh0t5ZQfLYit7nukn1GR96gc48Bp4B7OIcSfVSvlG1k3BPfD+p22gi1t2n9tsXg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
       "dependencies": {
-        "@vue/shared": "3.5.8"
+        "@vue/shared": "3.5.13"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.8.tgz",
-      "integrity": "sha512-fJuPelh64agZ8vKkZgp5iCkPaEqFJsYzxLk9vSC0X3G8ppknclNDr61gDc45yBGTaN5Xqc1qZWU3/NoaBMHcjQ==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
       "dependencies": {
-        "@vue/reactivity": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vue/reactivity": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.8.tgz",
-      "integrity": "sha512-DpAUz+PKjTZPUOB6zJgkxVI3GuYc2iWZiNeeHQUw53kdrparSTG6HeXUrYDjaam8dVsCdvQxDz6ZWxnyjccUjQ==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
       "dependencies": {
-        "@vue/reactivity": "3.5.8",
-        "@vue/runtime-core": "3.5.8",
-        "@vue/shared": "3.5.8",
+        "@vue/reactivity": "3.5.13",
+        "@vue/runtime-core": "3.5.13",
+        "@vue/shared": "3.5.13",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.8.tgz",
-      "integrity": "sha512-7AmC9/mEeV9mmXNVyUIm1a1AjUhyeeGNbkLh39J00E7iPeGks8OGRB5blJiMmvqSh8SkaS7jkLWSpXtxUCeagA==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13"
       },
       "peerDependencies": {
-        "vue": "3.5.8"
+        "vue": "3.5.13"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.8.tgz",
-      "integrity": "sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A=="
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
     },
     "node_modules/@vue/tsconfig": {
       "version": "0.5.1",
@@ -1111,9 +1112,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
@@ -1234,9 +1235,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/pidtree": {
       "version": "0.6.0",
@@ -1250,10 +1251,31 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.0.tgz",
+      "integrity": "sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
-      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "funding": [
         {
           "type": "opencollective",
@@ -1270,7 +1292,7 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
+        "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
       "engines": {
@@ -1465,15 +1487,15 @@
       "dev": true
     },
     "node_modules/vue": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.8.tgz",
-      "integrity": "sha512-hvuvuCy51nP/1fSRvrrIqTLSvrSyz2Pq+KQ8S8SXCxTWVE0nMaOnSDnSOxV1eYmGfvK7mqiwvd1C59CEEz7dAQ==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.8",
-        "@vue/compiler-sfc": "3.5.8",
-        "@vue/runtime-dom": "3.5.8",
-        "@vue/server-renderer": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-sfc": "3.5.13",
+        "@vue/runtime-dom": "3.5.13",
+        "@vue/server-renderer": "3.5.13",
+        "@vue/shared": "3.5.13"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -1484,6 +1506,31 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
@@ -1572,17 +1619,17 @@
       "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ=="
     },
     "@babel/parser": {
-      "version": "7.26.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.1.tgz",
-      "integrity": "sha512-reoQYNiAJreZNsJzyrDNzFQ+IQ5JFiIzAHJg9bn94S3l+4++J7RsIhNMoB+lgP/9tpmiAQqspv+xfdxTSzREOw==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
+      "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
       "requires": {
-        "@babel/types": "^7.26.0"
+        "@babel/types": "^7.26.3"
       }
     },
     "@babel/types": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
-      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
+      "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
       "requires": {
         "@babel/helper-string-parser": "^7.25.9",
         "@babel/helper-validator-identifier": "^7.25.9"
@@ -1948,49 +1995,49 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.8.tgz",
-      "integrity": "sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
       "requires": {
         "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.8",
+        "@vue/shared": "3.5.13",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.8.tgz",
-      "integrity": "sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
       "requires": {
-        "@vue/compiler-core": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.8.tgz",
-      "integrity": "sha512-taYpngQtSysrvO9GULaOSwcG5q821zCoIQBtQQSx7Uf7DxpR6CIHR90toPr9QfDD2mqHQPCSgoWBvJu0yV9zjg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
       "requires": {
         "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.8",
-        "@vue/compiler-dom": "3.5.8",
-        "@vue/compiler-ssr": "3.5.8",
-        "@vue/shared": "3.5.8",
+        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.11",
-        "postcss": "^8.4.47",
+        "postcss": "^8.4.48",
         "source-map-js": "^1.2.0"
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.8.tgz",
-      "integrity": "sha512-W96PtryNsNG9u0ZnN5Q5j27Z/feGrFV6zy9q5tzJVyJaLiwYxvC0ek4IXClZygyhjm+XKM7WD9pdKi/wIRVC/Q==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
       "requires": {
-        "@vue/compiler-dom": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "@vue/compiler-vue2": {
@@ -2025,46 +2072,46 @@
       }
     },
     "@vue/reactivity": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.8.tgz",
-      "integrity": "sha512-mlgUyFHLCUZcAYkqvzYnlBRCh0t5ZQfLYit7nukn1GR96gc48Bp4B7OIcSfVSvlG1k3BPfD+p22gi1t2n9tsXg==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
       "requires": {
-        "@vue/shared": "3.5.8"
+        "@vue/shared": "3.5.13"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.8.tgz",
-      "integrity": "sha512-fJuPelh64agZ8vKkZgp5iCkPaEqFJsYzxLk9vSC0X3G8ppknclNDr61gDc45yBGTaN5Xqc1qZWU3/NoaBMHcjQ==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
       "requires": {
-        "@vue/reactivity": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vue/reactivity": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.8.tgz",
-      "integrity": "sha512-DpAUz+PKjTZPUOB6zJgkxVI3GuYc2iWZiNeeHQUw53kdrparSTG6HeXUrYDjaam8dVsCdvQxDz6ZWxnyjccUjQ==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
       "requires": {
-        "@vue/reactivity": "3.5.8",
-        "@vue/runtime-core": "3.5.8",
-        "@vue/shared": "3.5.8",
+        "@vue/reactivity": "3.5.13",
+        "@vue/runtime-core": "3.5.13",
+        "@vue/shared": "3.5.13",
         "csstype": "^3.1.3"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.8.tgz",
-      "integrity": "sha512-7AmC9/mEeV9mmXNVyUIm1a1AjUhyeeGNbkLh39J00E7iPeGks8OGRB5blJiMmvqSh8SkaS7jkLWSpXtxUCeagA==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
       "requires": {
-        "@vue/compiler-ssr": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
     "@vue/shared": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.8.tgz",
-      "integrity": "sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A=="
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ=="
     },
     "@vue/tsconfig": {
       "version": "0.5.1",
@@ -2247,9 +2294,9 @@
       "requires": {}
     },
     "magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
       "requires": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
@@ -2327,9 +2374,9 @@
       "dev": true
     },
     "picocolors": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "pidtree": {
       "version": "0.6.0",
@@ -2337,13 +2384,22 @@
       "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.0.tgz",
+      "integrity": "sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      }
+    },
     "postcss": {
-      "version": "8.4.47",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
-      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "requires": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.1.0",
+        "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       }
     },
@@ -2451,17 +2507,23 @@
       "dev": true
     },
     "vue": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.8.tgz",
-      "integrity": "sha512-hvuvuCy51nP/1fSRvrrIqTLSvrSyz2Pq+KQ8S8SXCxTWVE0nMaOnSDnSOxV1eYmGfvK7mqiwvd1C59CEEz7dAQ==",
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
       "requires": {
-        "@vue/compiler-dom": "3.5.8",
-        "@vue/compiler-sfc": "3.5.8",
-        "@vue/runtime-dom": "3.5.8",
-        "@vue/server-renderer": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-sfc": "3.5.13",
+        "@vue/runtime-dom": "3.5.13",
+        "@vue/server-renderer": "3.5.13",
+        "@vue/shared": "3.5.13"
       }
     },
+    "vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "requires": {}
+    },
     "vue-router": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.5.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index cc7795e..eb9738f 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -15,6 +15,7 @@
     "axios": "^1.7.7",
     "countup.js": "^2.8.0",
     "leaflet.markercluster": "^1.5.3",
+    "pinia": "^2.3.0",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3",
     "vuetify": "^3.7.2"
diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index c7d4cf7..1d37586 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, h, createApp, watch } from 'vue';
+import { onMounted, h, createApp, watch, type PropType } from 'vue';
 import L, { type LatLngExpression } from 'leaflet';
 
 import DFMapPopup from './DFMapPopup.vue';
@@ -32,7 +32,7 @@ const props = defineProps({
   },
   alprs: Array,
   currentLocation: {
-    type: Object,
+    type: Object as PropType<[number, number] | null>,
     default: null,
   },
 });
@@ -60,12 +60,17 @@ function initializeMap() {
 }
 
 function renderCurrentLocation() {
+  if (!props.currentLocation)
+    return;
+  else
+    console.log('Current location:', props.currentLocation);
+
   if (currentLocationLayer) {
     map.removeLayer(currentLocationLayer);
   }
 
   currentLocationLayer = L.featureGroup();
-  const clMarker = L.circleMarker([props.currentLocation.lat, props.currentLocation.lng], {
+  const clMarker = L.circleMarker([props.currentLocation[0], props.currentLocation[1]], {
     radius: 10,
     color: '#ffffff',
     fillColor: '#007bff',
@@ -82,9 +87,7 @@ function renderCurrentLocation() {
 function populateMap() {
   const showFov = props.zoom >= 16;
 
-  if (props.currentLocation) {
-    renderCurrentLocation();
-  }
+  renderCurrentLocation();
 
   if (clusterLayer) {
     map.removeLayer(clusterLayer);
@@ -212,6 +215,7 @@ function registerWatchers() {
   });
 
   watch(() => props.currentLocation, (newLocation, oldLocation) => {
+    console.log("current location watcher triggered!");
     renderCurrentLocation();
   });
 }
@@ -243,8 +247,8 @@ function registerWatchers() {
 
 .bottomright {
   position: absolute;
-  bottom: 50px;
-  right: 60px;
+  bottom: 50px; /* hack */
+  right: 60px; /* hack */
   z-index: 1000;
 }
 </style>
diff --git a/webapp/src/main.ts b/webapp/src/main.ts
index 76aa551..91dd39f 100644
--- a/webapp/src/main.ts
+++ b/webapp/src/main.ts
@@ -1,6 +1,7 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
@@ -18,9 +19,11 @@ const vuetify = createVuetify({
   }
 })
 
+const pinia = createPinia()
 const app = createApp(App)
 
 app.use(router)
 app.use(vuetify)
+app.use(pinia)
 
 app.mount('#app')
diff --git a/webapp/src/stores/global.ts b/webapp/src/stores/global.ts
new file mode 100644
index 0000000..21aa6a7
--- /dev/null
+++ b/webapp/src/stores/global.ts
@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia';
+import { ref, type Ref } from 'vue';
+
+export const useGlobalStore = defineStore('global', () => {
+  const currentLocation: Ref<[number, number] | null> = ref(null);
+
+  const setCurrentLocation = (): Promise<[number, number]> =>
+    new Promise((resolve, reject) => {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(
+          (position) => {
+            currentLocation.value = [position.coords.latitude, position.coords.longitude];
+            resolve([position.coords.latitude, position.coords.longitude]);
+          },
+          (error) => {
+            reject(error);
+          },
+          {
+            timeout: 10000,
+            enableHighAccuracy: true,
+          }
+        );
+      } else {
+        reject(new Error('Geolocation is not supported by this browser.'));
+      }
+    });
+
+  return {
+    currentLocation,
+    setCurrentLocation,
+  };
+});
diff --git a/webapp/src/views/Landing.vue b/webapp/src/views/Landing.vue
index ca004fe..5197537 100644
--- a/webapp/src/views/Landing.vue
+++ b/webapp/src/views/Landing.vue
@@ -1,76 +1,76 @@
 <template>
   <!-- Hero Section -->
   <v-container fluid class="hero-section">
-     <v-row justify="center">
-       <v-col cols="12" md="8" class="text-center">
-       <h1 class="display-1 px-8">You're Being Tracked by ALPRs!</h1>
-         <ALPRCounter class="mt-4" />
-         <p class="subtitle-1 px-8 mt-6 mb-12">
-           Automated License Plate Readers (ALPRs) are monitoring your every move. Learn more about how they work and how you can protect your privacy.
-         </p>
-         <v-btn color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
-           Find Nearby ALPRs
-           <v-icon end>mdi-map</v-icon>
-         </v-btn>
-       </v-col>
-     </v-row>
-   </v-container>
-
-   <!-- Information Section -->
-   <v-container class="info-section py-10">
-     <v-row class="align-center">
-       <v-col cols="12" md="4" class="text-center">
-         <v-card>
-           <v-card-title class="headline">
-             <v-icon x-large class="mr-2">mdi-shield-alert</v-icon>
-             Privacy Violations
-           </v-card-title>
-           <v-card-text>
-             ALPRs track your movements and store your data for long periods of time, creating a detailed record of your location history. They surveil mostly innocent people while claiming to target criminals.
-           </v-card-text>
-         </v-card>
-       </v-col>
-       <v-col cols="12" md="4" class="text-center">
-         <v-card>
-           <v-card-title class="headline">
-             <v-icon x-large class="mr-2">mdi-alert-circle</v-icon>
-             Risk of Misuse
-           </v-card-title>
-           <v-card-text>
-             Data from ALPRs has led to <a target="_blank" href="https://www.newsobserver.com/news/state/north-carolina/article287381160.html">wrongful arrests</a>, profiling, and <a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">stalking ex-partners</a> by police officers.
-           </v-card-text>
-         </v-card>
-       </v-col>
-       <v-col cols="12" md="4" class="text-center">
-         <v-card>
-           <v-card-title class="headline">
-             <v-icon x-large class="mr-2">mdi-handcuffs</v-icon>
-             Limited Benefits
-           </v-card-title>
-           <v-card-text>
-             There's no substantial evidence that ALPRs effectively prevent crime, despite <a target="_blank" href="https://www.404media.co/researcher-who-oversaw-flock-surveillance-study-now-has-concerns-about-it/">Flock's unethical attempts</a> to prove otherwise.
-           </v-card-text>
-         </v-card>
-       </v-col>
-     </v-row>
-   </v-container>
-
-   <!-- Map Section -->
-   <v-container class="map-section py-10 text-center">
-     <h2 class="display-2 mb-4">Explore ALPR Locations Near You</h2>
-     <v-btn color="white" large @click="goToMap">
-       View the Map
-       <v-icon end>mdi-map</v-icon>
-     </v-btn>
-   </v-container>
-
-   <v-container>
+    <v-row justify="center">
+      <v-col cols="12" md="8" class="text-center">
+        <h1 class="display-1 px-8">You're Being Tracked by ALPRs!</h1>
+        <ALPRCounter class="mt-4" />
+        <p class="subtitle-1 px-8 mt-6 mb-12">
+          Automated License Plate Readers (ALPRs) are monitoring your every move. Learn more about how they work and how you can protect your privacy.
+        </p>
+        <v-btn color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
+          Find Nearby ALPRs
+          <v-icon end>mdi-map</v-icon>
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+  
+  <!-- Information Section -->
+  <v-container class="info-section py-10">
+    <v-row class="align-center">
+      <v-col cols="12" md="4" class="text-center">
+        <v-card>
+          <v-card-title class="headline">
+            <v-icon x-large class="mr-2">mdi-shield-alert</v-icon>
+            Privacy Violations
+          </v-card-title>
+          <v-card-text>
+            ALPRs track your movements and store your data for long periods of time, creating a detailed record of your location history. They surveil mostly innocent people while claiming to target criminals.
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="4" class="text-center">
+        <v-card>
+          <v-card-title class="headline">
+            <v-icon x-large class="mr-2">mdi-alert-circle</v-icon>
+            Risk of Misuse
+          </v-card-title>
+          <v-card-text>
+            Data from ALPRs has led to <a target="_blank" href="https://www.newsobserver.com/news/state/north-carolina/article287381160.html">wrongful arrests</a>, profiling, and <a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">stalking ex-partners</a> by police officers.
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="4" class="text-center">
+        <v-card>
+          <v-card-title class="headline">
+            <v-icon x-large class="mr-2">mdi-handcuffs</v-icon>
+            Limited Benefits
+          </v-card-title>
+          <v-card-text>
+            There's no substantial evidence that ALPRs effectively prevent crime, despite <a target="_blank" href="https://www.404media.co/researcher-who-oversaw-flock-surveillance-study-now-has-concerns-about-it/">Flock's unethical attempts</a> to prove otherwise.
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+  
+  <!-- Map Section -->
+  <v-container class="map-section py-10 text-center">
+    <h2 class="display-2 mb-4">Explore ALPR Locations Near You</h2>
+    <v-btn color="white" large @click="goToMap">
+      View the Map
+      <v-icon end>mdi-map</v-icon>
+    </v-btn>
+  </v-container>
+  
+  <v-container>
     <v-footer class="text-center">
       <span class="attribution">
         Maps ©&nbsp;<a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>&nbsp;contributors.
       </span>
     </v-footer>
-   </v-container>
+  </v-container>
 </template>
 
 <style>
@@ -80,22 +80,22 @@
   color: white;
   padding: 100px 0 !important;
   position: relative;
-  }
+}
 
- .hero-section::before {
-   content: '';
-   position: absolute;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   background: rgba(0, 0, 0, 0.5);
-   z-index: 1;
- }
+.hero-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
 
- .hero-section > * {
-   position: relative;
-   z-index: 2;
+.hero-section > * {
+  position: relative;
+  z-index: 2;
 }
 
 .info-section {
@@ -103,83 +103,54 @@
 }
 
 .map-section {
- background: url('/deflock-screenshot.webp') no-repeat center center;
- background-size: cover;
- color: white;
- padding: 100px 0;
- position: relative;
- }
- .map-section::before {
-   content: '';
-   position: absolute;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   background: rgba(0, 0, 0, 0.4);
-   z-index: 1;
- }
+  background: url('/deflock-screenshot.webp') no-repeat center center;
+  background-size: cover;
+  color: white;
+  padding: 100px 0;
+  position: relative;
+}
+.map-section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 1;
+}
 
- .map-section > * {
-   position: relative;
-   z-index: 2;
+.map-section > * {
+  position: relative;
+  z-index: 2;
 }
 </style>
 
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import ALPRCounter from '@/components/ALPRCounter.vue';
+import { useGlobalStore } from '@/stores/global';
 
 const router = useRouter();
-const userLocation = ref<[number, number] | null>(null);
-
-async function fetchUserLocation(): Promise<[number, number]> {
- return new Promise((resolve, reject) => {
-   if (navigator.geolocation) {
-     navigator.geolocation.getCurrentPosition(
-       (position) => {
-         resolve([position.coords.latitude, position.coords.longitude]);
-       },
-       (error) => {
-         reject(error);
-       },
-       {
-         timeout: 10000,
-         enableHighAccuracy: true,
-       }
-     );
-   } else {
-     reject(new Error('Geolocation is not supported by this browser.'));
-   }
- });
-}
-
-async function getUserLocation() {
- try {
-   const [lat, lon] = await fetchUserLocation();
-   userLocation.value = [lat, lon];
- } catch (error) {
-   console.debug('Error fetching user location:', error);
- }
-}
+const { setCurrentLocation } = useGlobalStore();
 
 interface GoToMapOptions {
- withCurrentLocation?: boolean;
+  withCurrentLocation?: boolean;
 }
 
 async function goToMap(options: GoToMapOptions = {}) {
- if (options.withCurrentLocation) {
-   await getUserLocation();
-   if (userLocation.value) {
-     const [lat, lon] = userLocation.value;
-     router.push({ path: '/map', hash: `#map=14/${lat.toFixed(6)}/${lon.toFixed(6)}` });
-   } else {
-     router.push({ path: '/map', hash: '#map=14/40.0150/-105.2705' });
-   }
- } else {
-   router.push({ path: '/map' });
- }
+  if (options.withCurrentLocation) {
+    setCurrentLocation()
+    .then((currentLocation) => {
+      const [lat, lon] = currentLocation;
+      router.push({ path: '/map', hash: `#map=12/${lat.toFixed(6)}/${lon.toFixed(6)}` });
+    })
+    .catch(() => {
+      router.push({ path: '/map' });
+    });
+  } else {
+    router.push({ path: '/map' });
+  }
 }
 </script>
diff --git a/webapp/src/views/Map.vue b/webapp/src/views/Map.vue
index a753dac..670b92b 100644
--- a/webapp/src/views/Map.vue
+++ b/webapp/src/views/Map.vue
@@ -58,6 +58,7 @@ import { BoundingBox } from '@/services/apiService';
 import type { Cluster } from '@/services/apiService';
 import { getALPRs, geocodeQuery, getClusters } from '@/services/apiService';
 import { useDisplay, useTheme } from 'vuetify';
+import { useGlobalStore } from '@/stores/global';
 import type { ALPR } from '@/types';
 import L from 'leaflet';
 globalThis.L = L;
@@ -74,7 +75,6 @@ const center: Ref<any|null> = ref(null);
 const bounds: Ref<BoundingBox|null> = ref(null);
 const searchField: Ref<any|null> = ref(null);
 const searchQuery: Ref<string> = ref('');
-const currentLocation: Ref<any|null> = ref(null);
 
 const router = useRouter();
 const { xs } = useDisplay();
@@ -92,6 +92,11 @@ const bboxForLastRequest: Ref<BoundingBox|null> = ref(null);
 const showClusters = computed(() => zoom.value <= CLUSTER_ZOOM_THRESHOLD);
 const isLoadingALPRs = ref(false);
 
+const globalStore = useGlobalStore();
+
+const setCurrentLocation = globalStore.setCurrentLocation;
+const currentLocation = computed(() => globalStore.currentLocation);
+
 const visibleALPRs = computed(() => {
   return alprs.value.filter(alpr => bounds.value?.containsPoint(alpr.lat, alpr.lon));
 });
@@ -122,38 +127,16 @@ function onSearch() {
 }
 
 function goToUserLocation() {
-  getUserLocation()
-    .then(location => {
-      console.log('User location:', location);
-      center.value = { lat: location[0], lng: location[1] };
+  setCurrentLocation()
+    .then((cl) => {
+      center.value = cl;
       zoom.value = DEFAULT_ZOOM;
-    }).catch(error => {
+    })
+    .catch(error => {
       console.debug('Error getting user location.', error);
     });
 }
 
-function getUserLocation(): Promise<[number, number]> {
-  return new Promise((resolve, reject) => {
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(
-        (position) => {
-          currentLocation.value = { lat: position.coords.latitude, lng: position.coords.longitude };
-          resolve([position.coords.latitude, position.coords.longitude]);
-        },
-        (error) => {
-          reject(error);
-        },
-        {
-          timeout: 10000,
-          enableHighAccuracy: true,
-        }
-      );
-    } else {
-      reject(new Error('Geolocation is not supported by this browser.'));
-    }
-  });
-};
-
 function updateBounds(newBounds: any) {
   updateURL();
   
diff --git a/webapp/src/views/QRLandingView.vue b/webapp/src/views/QRLandingView.vue
index 7ba65c9..a787595 100644
--- a/webapp/src/views/QRLandingView.vue
+++ b/webapp/src/views/QRLandingView.vue
@@ -128,42 +128,12 @@
 
 
 <script setup lang="ts">
-import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import ALPRCounter from '@/components/ALPRCounter.vue';
+import { useGlobalStore } from '@/stores/global';
 
 const router = useRouter();
-const userLocation = ref<[number, number] | null>(null);
-
-async function fetchUserLocation(): Promise<[number, number]> {
-  return new Promise((resolve, reject) => {
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(
-        (position) => {
-          resolve([position.coords.latitude, position.coords.longitude]);
-        },
-        (error) => {
-          reject(error);
-        },
-        {
-          timeout: 10000,
-          enableHighAccuracy: true,
-        }
-      );
-    } else {
-      reject(new Error('Geolocation is not supported by this browser.'));
-    }
-  });
-}
-
-async function getUserLocation() {
-  try {
-    const [lat, lon] = await fetchUserLocation();
-    userLocation.value = [lat, lon];
-  } catch (error) {
-    console.debug('Error fetching user location:', error);
-  }
-}
+const { setCurrentLocation } = useGlobalStore();
 
 interface GoToMapOptions {
   withCurrentLocation?: boolean;
@@ -171,13 +141,14 @@ interface GoToMapOptions {
 
 async function goToMap(options: GoToMapOptions = {}) {
   if (options.withCurrentLocation) {
-    await getUserLocation();
-    if (userLocation.value) {
-      const [lat, lon] = userLocation.value;
+    setCurrentLocation()
+    .then((currentLocation) => {
+      const [lat, lon] = currentLocation;
       router.push({ path: '/map', hash: `#map=16/${lat.toFixed(6)}/${lon.toFixed(6)}` });
-    } else {
-      router.push({ path: '/map', hash: '#map=16/40.0150/-105.2705' });
-    }
+    })
+    .catch(() => {
+      router.push({ path: '/map' });
+    });
   } else {
     router.push({ path: '/map' });
   }

From bca27cce3995e2cb3b5b0c1daf745f909ba24c36 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Sun, 22 Dec 2024 21:26:41 -0800
Subject: [PATCH 06/18] use configurable marker color

---
 webapp/src/components/LeafletMap.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index 1d37586..70cc281 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -22,6 +22,9 @@ import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import { createVuetify } from 'vuetify'
 
+// Color of Marker Circle
+const MARKER_COLOR = 'rgb(63,84,243)';
+
 const props = defineProps({
   center: {
     required: true,
@@ -109,8 +112,8 @@ function populateMap() {
         <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
         <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461ZM217.92,200.242C228.694,192.652 241.831,188.195 256,188.195C270.169,188.195 283.306,192.652 294.08,200.242C294.08,200.242 392.803,48.4 392.803,48.4C352.363,26.364 305.694,13.806 256,13.806C206.306,13.806 159.637,26.364 119.197,48.4L217.92,200.242Z" style="fill:rgb(137,135,135);"/>
         <g transform="matrix(0.906623,0,0,0.906623,23.9045,22.3271)">
-          <circle class="someSVGpath" cx="256" cy="256" r="57.821" style="fill:rgb(63,84,243);fill-opacity:0.41;"/>
-          <path class="someSVGpath" d="M256,174.25C301.119,174.25 337.75,210.881 337.75,256C337.75,301.119 301.119,337.75 256,337.75C210.881,337.75 174.25,301.119 174.25,256C174.25,210.881 210.881,174.25 256,174.25ZM256,198.179C224.088,198.179 198.179,224.088 198.179,256C198.179,287.912 224.088,313.821 256,313.821C287.912,313.821 313.821,287.912 313.821,256C313.821,224.088 287.912,198.179 256,198.179Z" style="fill:rgb(63,84,243);"/>
+          <circle class="someSVGpath" cx="256" cy="256" r="57.821" style="fill:${MARKER_COLOR};fill-opacity:0.41;"/>
+          <path class="someSVGpath" d="M256,174.25C301.119,174.25 337.75,210.881 337.75,256C337.75,301.119 301.119,337.75 256,337.75C210.881,337.75 174.25,301.119 174.25,256C174.25,210.881 210.881,174.25 256,174.25ZM256,198.179C224.088,198.179 198.179,224.088 198.179,256C198.179,287.912 224.088,313.821 256,313.821C287.912,313.821 313.821,287.912 313.821,256C313.821,224.088 287.912,198.179 256,198.179Z" style="fill:${MARKER_COLOR};"/>
         </g>
       </svg>
       `;
@@ -133,10 +136,10 @@ function populateMap() {
     } else {
       marker = L.circleMarker([lat, lng], {
         fill: true,
-        fillColor: '#3f54f3',
+        fillColor: MARKER_COLOR,
         fillOpacity: 0.6,
         stroke: true,
-        color: '#3f54f3',
+        color: MARKER_COLOR,
         opacity: 1,
         radius: 8,
         weight: 3,

From dea50dbe80c8a7fb6824dedc1d6421c8d90efd9e Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Tue, 24 Dec 2024 12:12:23 -0800
Subject: [PATCH 07/18] works with segmenting, now adjust angle and whitelisted
 tags

---
 webapp/src/components/LeafletMap.vue | 25 +++++---
 webapp/src/stores/tiles.ts           | 85 ++++++++++++++++++++++++++++
 webapp/src/views/Map.vue             | 48 +++-------------
 3 files changed, 110 insertions(+), 48 deletions(-)
 create mode 100644 webapp/src/stores/tiles.ts

diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index 70cc281..ad94465 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -13,6 +13,7 @@
 <script setup lang="ts">
 import { onMounted, h, createApp, watch, type PropType } from 'vue';
 import L, { type LatLngExpression } from 'leaflet';
+import type { ALPR } from '@/types';
 
 import DFMapPopup from './DFMapPopup.vue';
 
@@ -33,7 +34,10 @@ const props = defineProps({
     type: Number,
     required: true,
   },
-  alprs: Array,
+  alprs: {
+    type: Array as PropType<ALPR[]>,
+    default: () => [],
+  },
   currentLocation: {
     type: Object as PropType<[number, number] | null>,
     default: null,
@@ -99,10 +103,9 @@ function populateMap() {
   clusterLayer = L.markerClusterGroup();
   circlesLayer = L.featureGroup();
 
-  for (let i = 0; i < 200; i++) {
-    const lat = 51.505 + (Math.random() - 0.5) * 0.1;
-    const lng = -0.09 + (Math.random() - 0.5) * 0.1;
-    const orientationDegrees = Math.random() * 360;
+  for (const alpr of props.alprs) {
+    const { lat, lon: lng } = alpr;
+    const orientationDegrees = alpr.tags?.direction || 0; // TODO: make sure this works with nodes w/o orientation
 
     let marker: L.CircleMarker | L.Marker;
 
@@ -129,7 +132,7 @@ function populateMap() {
         html: svgMarker,
         iconSize: [60, 60],
         iconAnchor: [30, 30],
-        popupAnchor: [0, -5],
+        popupAnchor: [0, -8],
       });
 
       marker = L.marker([lat, lng], { icon: icon });
@@ -155,11 +158,11 @@ function populateMap() {
       createApp({
         render() {
           return h(DFMapPopup, { alpr: {
-            id: `id-${i}`,
+            id: alpr.id,
             lat: lat,
             lon: lng,
-            tags: { type: 'car' },
-            type: "node",
+            tags: alpr.tags,
+            type: alpr.type,
           } });
         }
       }).use(createVuetify()).mount(popupContent);
@@ -221,6 +224,10 @@ function registerWatchers() {
     console.log("current location watcher triggered!");
     renderCurrentLocation();
   });
+
+  watch(() => props.alprs, (newAlprs, oldAlprs) => {
+    populateMap();
+  }); 
 }
 
 
diff --git a/webapp/src/stores/tiles.ts b/webapp/src/stores/tiles.ts
new file mode 100644
index 0000000..3434543
--- /dev/null
+++ b/webapp/src/stores/tiles.ts
@@ -0,0 +1,85 @@
+import { defineStore } from 'pinia';
+import { onBeforeMount, computed, ref, type Ref } from 'vue';
+import type { ALPR } from '@/types';
+import axios from 'axios';
+import type { BoundingBox } from '@/services/apiService'; // TODO: this is a strange place to hold this type
+
+const api = axios.create({
+  baseURL: 'https://cdn.deflock.me/regions',
+});
+
+export const useTilesStore = defineStore('tiles', () => {
+  // Key: "lat/lng", Value: ALPR[]
+  const tiles: Ref<Record<string, ALPR[]>> = ref({});
+  const availableTiles: Ref<string[]> = ref([]);
+  const expirationDateUtc: Ref<Date | null> = ref(null);
+  let tileUrlTemplate: string|undefined = undefined;
+  let tileSizeDegrees: number|undefined = undefined;
+
+  const fetchIndex = async (): Promise<void> => {
+    if (expirationDateUtc.value && expirationDateUtc.value > new Date()) {
+      console.debug('Index is not expired, using cached index');
+    } else {
+      console.debug('Index is expired or not set, fetching new index');
+      const response = await api.get('/index.json');
+      expirationDateUtc.value = new Date(response.data.expiration_utc);
+      availableTiles.value = response.data.regions;
+      tileUrlTemplate = response.data.tile_url;
+      tileSizeDegrees = response.data.tile_size_degrees;
+    }
+  }
+
+  const fetchAndAddTile = async (lat: number, lng: number): Promise<void> => {
+    const key = `${lat}/${lng}`;
+
+    if (tiles.value[key]) {
+      console.debug(`Tile ${key} is already cached, skipping fetch`);
+      return;
+    }
+
+    if (!tileUrlTemplate) {
+      console.warn('Tile URL template is not set, skipping fetch');
+      return;
+    }
+    const url = tileUrlTemplate.replace('{lat}/{lon}', key);
+    const tile = await api.get(url);
+
+    tiles.value[key] = tile.data;
+  }
+
+  const fetchVisibleTiles = async (boundingBox: BoundingBox): Promise<void> => {
+    if (!(tileUrlTemplate && tileSizeDegrees)) {
+      console.warn('Tile URL template is not set, skipping fetch');
+      return;
+    }
+
+    const { minLat: south, minLng: west, maxLat: north, maxLng: east } = boundingBox;
+
+    // Determine tiles in viewport
+    const visibleTiles = [];
+    for (let lat = Math.floor(south / tileSizeDegrees) * tileSizeDegrees; lat <= Math.ceil(north / tileSizeDegrees) * tileSizeDegrees; lat += tileSizeDegrees) {
+      for (let lng = Math.floor(west / tileSizeDegrees) * tileSizeDegrees; lng <= Math.ceil(east / tileSizeDegrees) * tileSizeDegrees; lng += tileSizeDegrees) {
+        const key = `${lat}/${lng}`;
+        if (!tiles.value[key] && availableTiles.value.includes(key)) {
+          visibleTiles.push({ lat, lng });
+        }
+      }
+    }
+
+    // Fetch missing tiles
+    const fetchPromises = visibleTiles.map(({ lat, lng }) =>
+      fetchAndAddTile(lat, lng)
+    );
+
+    await Promise.all(fetchPromises);
+  }
+
+  const allNodes = computed(() => Object.values(tiles.value).flat());
+
+  onBeforeMount(fetchIndex);
+
+  return {
+    fetchVisibleTiles,
+    allNodes,
+  };
+});
diff --git a/webapp/src/views/Map.vue b/webapp/src/views/Map.vue
index 670b92b..8939432 100644
--- a/webapp/src/views/Map.vue
+++ b/webapp/src/views/Map.vue
@@ -10,6 +10,7 @@
       v-model:zoom="zoom"
       :current-location="currentLocation"
       @update:bounds="updateBounds"
+      :alprs
     >
       <!-- SEARCH -->
       <template v-slot:topleft>
@@ -59,6 +60,7 @@ import type { Cluster } from '@/services/apiService';
 import { getALPRs, geocodeQuery, getClusters } from '@/services/apiService';
 import { useDisplay, useTheme } from 'vuetify';
 import { useGlobalStore } from '@/stores/global';
+import { useTilesStore } from '@/stores/tiles';
 import type { ALPR } from '@/types';
 import L from 'leaflet';
 globalThis.L = L;
@@ -75,6 +77,10 @@ const center: Ref<any|null> = ref(null);
 const bounds: Ref<BoundingBox|null> = ref(null);
 const searchField: Ref<any|null> = ref(null);
 const searchQuery: Ref<string> = ref('');
+const tilesStore = useTilesStore();
+
+const { fetchVisibleTiles } = tilesStore;
+const alprs = computed(() => tilesStore.allNodes);
 
 const router = useRouter();
 const { xs } = useDisplay();
@@ -85,8 +91,6 @@ const mapTileUrl = computed(() =>
     'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png' :
     'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
 ); // TODO: implement dark mode in LeafletMap.vue
-
-const alprs: Ref<ALPR[]> = ref([]);
 const clusters: Ref<Cluster[]> = ref([]);
 const bboxForLastRequest: Ref<BoundingBox|null> = ref(null);
 const showClusters = computed(() => zoom.value <= CLUSTER_ZOOM_THRESHOLD);
@@ -148,12 +152,7 @@ function updateBounds(newBounds: any) {
   });
   bounds.value = newBoundingBox;
 
-  if (bboxForLastRequest.value && newBoundingBox.isSubsetOf(bboxForLastRequest.value)) {
-    console.debug('new bounds are a subset of the last request, skipping');
-    return;
-  }
-
-  // updateMarkers();
+  updateMarkers();
 }
 
 function updateURL() {
@@ -166,46 +165,17 @@ function updateURL() {
   });
 }
 
-watch(zoom, (newZoom, oldZoom) => {
-
-  if (newZoom <= CLUSTER_ZOOM_THRESHOLD && oldZoom > CLUSTER_ZOOM_THRESHOLD) {
-    bboxForLastRequest.value = bounds.value; 
-  } else if (newZoom < CLUSTER_ZOOM_THRESHOLD) {
-    alprs.value = [];
-    bboxForLastRequest.value = null;
-  }
-});
-
 function updateMarkers() {
   // Fetch ALPRs in the current view
   if (!bounds.value) {
     return;
   }
 
-  if (showClusters.value || !canRefreshMarkers.value) {
-    return;
-  }
-
-  isLoadingALPRs.value = true;
-  getALPRs(bounds.value)
-    .then((result: any) => {
-      // merge incoming with existing, so that moving the map doesn't remove markers
-      const existingIds = new Set(alprs.value.map(alpr => alpr.id));
-      const newAlprs = result.elements.filter((alpr: any) => !existingIds.has(alpr.id));
-      alprs.value = [...alprs.value, ...newAlprs];
-      bboxForLastRequest.value = bounds.value;
-    })
-    .finally(() => {
-      isLoadingALPRs.value = false;
-    });
+  console.log('Fetching visible tiles');
+  fetchVisibleTiles(bounds.value);
 }
 
 onMounted(() => {
-  getClusters()
-    .then((result: any) => {
-      clusters.value = result.clusters;
-    });
-
   const hash = router.currentRoute.value.hash;
   if (hash) {
     const parts = hash.split('/');

From 4962e9a6e2c4f89d7336b2fc878e2c70a2ddfa41 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Tue, 24 Dec 2024 12:39:11 -0800
Subject: [PATCH 08/18] do not repeat fetch

---
 webapp/src/stores/tiles.ts | 19 ++++++++++++++++---
 webapp/src/views/Map.vue   |  1 -
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/webapp/src/stores/tiles.ts b/webapp/src/stores/tiles.ts
index 3434543..1941b2c 100644
--- a/webapp/src/stores/tiles.ts
+++ b/webapp/src/stores/tiles.ts
@@ -13,6 +13,7 @@ export const useTilesStore = defineStore('tiles', () => {
   const tiles: Ref<Record<string, ALPR[]>> = ref({});
   const availableTiles: Ref<string[]> = ref([]);
   const expirationDateUtc: Ref<Date | null> = ref(null);
+  const fetchingTiles = new Set<string>();
   let tileUrlTemplate: string|undefined = undefined;
   let tileSizeDegrees: number|undefined = undefined;
 
@@ -32,6 +33,11 @@ export const useTilesStore = defineStore('tiles', () => {
   const fetchAndAddTile = async (lat: number, lng: number): Promise<void> => {
     const key = `${lat}/${lng}`;
 
+    if (fetchingTiles.has(key)) {
+      console.debug(`Tile ${key} is already being fetched, skipping fetch`);
+      return;
+    }
+
     if (tiles.value[key]) {
       console.debug(`Tile ${key} is already cached, skipping fetch`);
       return;
@@ -42,9 +48,16 @@ export const useTilesStore = defineStore('tiles', () => {
       return;
     }
     const url = tileUrlTemplate.replace('{lat}/{lon}', key);
-    const tile = await api.get(url);
-
-    tiles.value[key] = tile.data;
+    
+    try {
+      fetchingTiles.add(key);
+      const tile = await api.get(url);
+      tiles.value[key] = tile.data;
+    } catch (error) {
+      console.error(`Failed to fetch tile ${key}:`, error);
+    } finally {
+      fetchingTiles.delete(key);
+    }
   }
 
   const fetchVisibleTiles = async (boundingBox: BoundingBox): Promise<void> => {
diff --git a/webapp/src/views/Map.vue b/webapp/src/views/Map.vue
index 8939432..57ea63b 100644
--- a/webapp/src/views/Map.vue
+++ b/webapp/src/views/Map.vue
@@ -171,7 +171,6 @@ function updateMarkers() {
     return;
   }
 
-  console.log('Fetching visible tiles');
   fetchVisibleTiles(bounds.value);
 }
 

From 3a52c22382911254e0254e21bf4709abba9be840 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Tue, 24 Dec 2024 12:51:37 -0800
Subject: [PATCH 09/18] marker clustering improvements

---
 webapp/src/components/LeafletMap.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index ad94465..2e45b63 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -100,20 +100,28 @@ function populateMap() {
     map.removeLayer(clusterLayer);
   }
 
-  clusterLayer = L.markerClusterGroup();
+  clusterLayer = L.markerClusterGroup({
+    chunkedLoading: true,
+    chunkProgress: () => {}, // update progress bar!
+    disableClusteringAtZoom: 16, // TODO: should probably match the ShowFOV threshold
+    removeOutsideVisibleBounds: true,
+  });
   circlesLayer = L.featureGroup();
 
   for (const alpr of props.alprs) {
     const { lat, lon: lng } = alpr;
-    const orientationDegrees = alpr.tags?.direction || 0; // TODO: make sure this works with nodes w/o orientation
+    const orientationDegrees = alpr.tags.direction; // TODO: make sure this works with nodes w/o orientation
 
     let marker: L.CircleMarker | L.Marker;
 
     // content of @/public/map-icon.svg; TODO: import it here if possible
+    const fovPath = `
+      <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
+      <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461ZM217.92,200.242C228.694,192.652 241.831,188.195 256,188.195C270.169,188.195 283.306,192.652 294.08,200.242C294.08,200.242 392.803,48.4 392.803,48.4C352.363,26.364 305.694,13.806 256,13.806C206.306,13.806 159.637,26.364 119.197,48.4L217.92,200.242Z" style="fill:rgb(137,135,135);"/>
+    `;
     const svgMarker = `
       <svg style="transform:rotate(${orientationDegrees}deg)" class="svgMarker" width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-        <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
-        <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461ZM217.92,200.242C228.694,192.652 241.831,188.195 256,188.195C270.169,188.195 283.306,192.652 294.08,200.242C294.08,200.242 392.803,48.4 392.803,48.4C352.363,26.364 305.694,13.806 256,13.806C206.306,13.806 159.637,26.364 119.197,48.4L217.92,200.242Z" style="fill:rgb(137,135,135);"/>
+        ${orientationDegrees ? fovPath : ''}
         <g transform="matrix(0.906623,0,0,0.906623,23.9045,22.3271)">
           <circle class="someSVGpath" cx="256" cy="256" r="57.821" style="fill:${MARKER_COLOR};fill-opacity:0.41;"/>
           <path class="someSVGpath" d="M256,174.25C301.119,174.25 337.75,210.881 337.75,256C337.75,301.119 301.119,337.75 256,337.75C210.881,337.75 174.25,301.119 174.25,256C174.25,210.881 210.881,174.25 256,174.25ZM256,198.179C224.088,198.179 198.179,224.088 198.179,256C198.179,287.912 224.088,313.821 256,313.821C287.912,313.821 313.821,287.912 313.821,256C313.821,224.088 287.912,198.179 256,198.179Z" style="fill:${MARKER_COLOR};"/>

From 94c1f655213a521027506a135d0d1deb6ae61a13 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Tue, 24 Dec 2024 14:47:18 -0800
Subject: [PATCH 10/18] update map on load

---
 webapp/src/components/LeafletMap.vue |  6 +-----
 webapp/src/stores/tiles.ts           | 11 +++++++----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index 2e45b63..7725822 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -63,7 +63,7 @@ function initializeMap() {
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   }).addTo(map);
 
-  populateMap();
+  emit('update:bounds', map.getBounds()); // XXX: this event populates the map
 }
 
 function renderCurrentLocation() {
@@ -194,10 +194,6 @@ function registerEvents() {
     emit('update:zoom', map.getZoom());
     emit('update:bounds', map.getBounds());
   });
-
-  map.on('load', () => {
-    emit('update:bounds', map.getBounds());
-  });
 }
 
 /**
diff --git a/webapp/src/stores/tiles.ts b/webapp/src/stores/tiles.ts
index 1941b2c..9110214 100644
--- a/webapp/src/stores/tiles.ts
+++ b/webapp/src/stores/tiles.ts
@@ -61,8 +61,13 @@ export const useTilesStore = defineStore('tiles', () => {
   }
 
   const fetchVisibleTiles = async (boundingBox: BoundingBox): Promise<void> => {
-    if (!(tileUrlTemplate && tileSizeDegrees)) {
-      console.warn('Tile URL template is not set, skipping fetch');
+    if (!tileUrlTemplate || !tileSizeDegrees) {
+      console.debug('Tile URL template or tile size is not set, fetching...');
+      await fetchIndex();
+    }
+  
+    if (!tileUrlTemplate || !tileSizeDegrees) {
+      console.warn('Tile URL template or tile size is still not set after fetching index');
       return;
     }
 
@@ -89,8 +94,6 @@ export const useTilesStore = defineStore('tiles', () => {
 
   const allNodes = computed(() => Object.values(tiles.value).flat());
 
-  onBeforeMount(fetchIndex);
-
   return {
     fetchVisibleTiles,
     allNodes,

From 03752a6ec6272e10399ec7c7f8675faf67592dd6 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Tue, 24 Dec 2024 16:05:45 -0800
Subject: [PATCH 11/18] cleanup

---
 webapp/src/components/DFMapPopup.vue |  22 +---
 webapp/src/components/LeafletMap.vue | 156 +++++++++++++++------------
 2 files changed, 90 insertions(+), 88 deletions(-)

diff --git a/webapp/src/components/DFMapPopup.vue b/webapp/src/components/DFMapPopup.vue
index ae26bb5..4d86058 100644
--- a/webapp/src/components/DFMapPopup.vue
+++ b/webapp/src/components/DFMapPopup.vue
@@ -20,9 +20,6 @@
           </span>
           <span v-else>
             Unknown Brand
-            <!-- <v-btn :href="osmNodeUrl" variant="text" flat size="x-small" color="warning" target="_blank">
-              <v-icon start size="small">mdi-pencil</v-icon>Fix
-            </v-btn> -->
           </span>
         </b>
       </v-list-item>
@@ -33,9 +30,6 @@
           </span>
           <span v-else>
             Unknown Operator
-            <!-- <v-btn :href="osmNodeUrl" variant="text" flat size="x-small" color="warning" target="_blank">
-              <v-icon start size="small">mdi-pencil</v-icon>Fix
-            </v-btn> -->
           </span>
         </b>
       </v-list-item>
@@ -44,7 +38,6 @@
     <div class="text-center text-grey-darken-1">
       node/{{ alpr.id }}
     </div>
-    <!-- <v-data-table density="compact" hide-default-header hide-default-footer disable-sort :items="kvTags" /> -->
   </v-sheet>
 </template>
 
@@ -52,7 +45,7 @@
 import { defineProps, computed } from 'vue';
 import type { PropType } from 'vue';
 import type { ALPR } from '@/types';
-import { VIcon, VList, VSheet, VListItem } from 'vuetify/components';
+import { VIcon, VList, VSheet, VListItem, VChip } from 'vuetify/components';
 
 const props = defineProps({
   alpr: {
@@ -61,20 +54,7 @@ const props = defineProps({
   }
 });
 
-const valueTransformations: { [key: string]: (value: string) => string } = {
-  direction: (value: string) => `${degreesToCardinal(parseInt(value))} ${value}º`
-};
-
-const whitelistedTags = ['brand', 'camera:mount', 'camera:type', 'direction', 'operator'];
-
 const isFaceRecognition = computed(() => props.alpr.tags.brand === 'Avigilon');
-const osmNodeUrl = computed(() => `/node/${props.alpr.id}`);
-
-const kvTags = computed(() => {
-  return Object.entries(props.alpr.tags)
-    .filter(([key]) => whitelistedTags.includes(key))
-    .map(([key, value]) => ({ key, value: valueTransformations[key]?.(value) ?? value }));
-});
 
 const cardinalDirection = computed(() => 
   props.alpr.tags.direction === undefined ? 'Unknown' : degreesToCardinal(parseInt(props.alpr.tags.direction))
diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index 7725822..2d9858e 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, h, createApp, watch, type PropType } from 'vue';
+import { onMounted, h, createApp, watch, ref, type PropType, type Ref } from 'vue';
 import L, { type LatLngExpression } from 'leaflet';
 import type { ALPR } from '@/types';
 
@@ -91,6 +91,89 @@ function renderCurrentLocation() {
   map.addLayer(currentLocationLayer);
 }
 
+function makeSVGMarker(alpr: ALPR): L.Marker {
+  const { lat, lon: lng } = alpr;
+  const orientationDegrees = alpr.tags.direction;
+  const fovPath = `
+      <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
+      <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461ZM217.92,200.242C228.694,192.652 241.831,188.195 256,188.195C270.169,188.195 283.306,192.652 294.08,200.242C294.08,200.242 392.803,48.4 392.803,48.4C352.363,26.364 305.694,13.806 256,13.806C206.306,13.806 159.637,26.364 119.197,48.4L217.92,200.242Z" style="fill:rgb(137,135,135);"/>
+    `;
+  const svgMarker = `
+    <svg style="transform:rotate(${orientationDegrees}deg)" class="svgMarker" width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+      ${orientationDegrees ? fovPath : ''}
+      <g transform="matrix(0.906623,0,0,0.906623,23.9045,22.3271)">
+        <circle class="someSVGpath" cx="256" cy="256" r="57.821" style="fill:${MARKER_COLOR};fill-opacity:0.41;"/>
+        <path class="someSVGpath" d="M256,174.25C301.119,174.25 337.75,210.881 337.75,256C337.75,301.119 301.119,337.75 256,337.75C210.881,337.75 174.25,301.119 174.25,256C174.25,210.881 210.881,174.25 256,174.25ZM256,198.179C224.088,198.179 198.179,224.088 198.179,256C198.179,287.912 224.088,313.821 256,313.821C287.912,313.821 313.821,287.912 313.821,256C313.821,224.088 287.912,198.179 256,198.179Z" style="fill:${MARKER_COLOR};"/>
+      </g>
+    </svg>
+    `;
+
+  const el = document.createElement('div');
+  el.innerHTML = svgMarker;
+  el.style.width = '50px';
+  el.style.height = '50px';
+
+  const icon = L.divIcon({
+    className: 'leaflet-data-marker',
+    html: svgMarker,
+    iconSize: [60, 60],
+    iconAnchor: [30, 30],
+    popupAnchor: [0, 0],
+  });
+
+  const marker = L.marker([lat, lng], { icon: icon });
+  const markerWithPopup = bindPopup(marker, alpr);
+
+  return markerWithPopup as L.Marker;
+}
+
+function makeCircleMarker(alpr: ALPR): L.CircleMarker {
+  const { lat, lon: lng } = alpr;
+  const orientationDegrees = alpr.tags.direction;
+
+  const marker = L.circleMarker([lat, lng], {
+    fill: true,
+    fillColor: MARKER_COLOR,
+    fillOpacity: 0.6,
+    stroke: true,
+    color: MARKER_COLOR,
+    opacity: 1,
+    radius: 8,
+    weight: 3,
+  });
+
+  const markerWithPopup = bindPopup(marker, alpr);
+  return markerWithPopup as L.CircleMarker;
+}
+
+function bindPopup(marker: L.CircleMarker | L.Marker, alpr: ALPR): L.CircleMarker | L.Marker {
+  marker.bindPopup('');
+
+  marker.on('popupopen', (e: any) => {
+    const popupContent = document.createElement('div');
+    createApp({
+      render() {
+        return h(DFMapPopup, { alpr: {
+          id: alpr.id,
+          lat: alpr.lat,
+          lon: alpr.lon,
+          tags: alpr.tags,
+          type: alpr.type,
+        } });
+      }
+    }).use(createVuetify()).mount(popupContent);
+
+    e.popup.setContent(popupContent);
+  });
+
+  return marker;
+}
+
+function hasPlottableOrientation(orientationDegrees: string) {
+  // OSM tags are strings, and some have multiple values (e.g. '0;90')
+  return orientationDegrees && !isNaN(parseInt(orientationDegrees));
+}
+
 function populateMap() {
   const showFov = props.zoom >= 16;
 
@@ -102,82 +185,21 @@ function populateMap() {
 
   clusterLayer = L.markerClusterGroup({
     chunkedLoading: true,
-    chunkProgress: () => {}, // update progress bar!
-    disableClusteringAtZoom: 16, // TODO: should probably match the ShowFOV threshold
+    disableClusteringAtZoom: 16, // showFov threshold
     removeOutsideVisibleBounds: true,
   });
   circlesLayer = L.featureGroup();
 
   for (const alpr of props.alprs) {
-    const { lat, lon: lng } = alpr;
-    const orientationDegrees = alpr.tags.direction; // TODO: make sure this works with nodes w/o orientation
+    const orientationDegrees = alpr.tags.direction;
 
     let marker: L.CircleMarker | L.Marker;
 
-    // content of @/public/map-icon.svg; TODO: import it here if possible
-    const fovPath = `
-      <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
-      <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461ZM217.92,200.242C228.694,192.652 241.831,188.195 256,188.195C270.169,188.195 283.306,192.652 294.08,200.242C294.08,200.242 392.803,48.4 392.803,48.4C352.363,26.364 305.694,13.806 256,13.806C206.306,13.806 159.637,26.364 119.197,48.4L217.92,200.242Z" style="fill:rgb(137,135,135);"/>
-    `;
-    const svgMarker = `
-      <svg style="transform:rotate(${orientationDegrees}deg)" class="svgMarker" width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-        ${orientationDegrees ? fovPath : ''}
-        <g transform="matrix(0.906623,0,0,0.906623,23.9045,22.3271)">
-          <circle class="someSVGpath" cx="256" cy="256" r="57.821" style="fill:${MARKER_COLOR};fill-opacity:0.41;"/>
-          <path class="someSVGpath" d="M256,174.25C301.119,174.25 337.75,210.881 337.75,256C337.75,301.119 301.119,337.75 256,337.75C210.881,337.75 174.25,301.119 174.25,256C174.25,210.881 210.881,174.25 256,174.25ZM256,198.179C224.088,198.179 198.179,224.088 198.179,256C198.179,287.912 224.088,313.821 256,313.821C287.912,313.821 313.821,287.912 313.821,256C313.821,224.088 287.912,198.179 256,198.179Z" style="fill:${MARKER_COLOR};"/>
-        </g>
-      </svg>
-      `;
-
-    const el = document.createElement('div');
-    el.innerHTML = svgMarker;
-    el.style.width = '50px';
-    el.style.height = '50px';
-
-    if (showFov) {
-      const icon = L.divIcon({
-        className: 'leaflet-data-marker',
-        html: svgMarker,
-        iconSize: [60, 60],
-        iconAnchor: [30, 30],
-        popupAnchor: [0, -8],
-      });
-
-      marker = L.marker([lat, lng], { icon: icon });
+    if (showFov && hasPlottableOrientation(orientationDegrees)) {
+      marker = makeSVGMarker(alpr);
     } else {
-      marker = L.circleMarker([lat, lng], {
-        fill: true,
-        fillColor: MARKER_COLOR,
-        fillOpacity: 0.6,
-        stroke: true,
-        color: MARKER_COLOR,
-        opacity: 1,
-        radius: 8,
-        weight: 3,
-      });
+      marker = makeCircleMarker(alpr);
     }
-    
-    // Bind an empty popup to the circle
-    marker.bindPopup('');
-
-    // Add an event listener to create the popup content on demand
-    marker.on('popupopen', (e: any) => {
-      const popupContent = document.createElement('div');
-      createApp({
-        render() {
-          return h(DFMapPopup, { alpr: {
-            id: alpr.id,
-            lat: lat,
-            lon: lng,
-            tags: alpr.tags,
-            type: alpr.type,
-          } });
-        }
-      }).use(createVuetify()).mount(popupContent);
-
-      // Set the popup content
-      e.popup.setContent(popupContent);
-    });
 
     circlesLayer.addLayer(marker);
   }

From 5e88647c540eda5e769b8f134dd9c9d17f7ef0d3 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Tue, 24 Dec 2024 17:06:49 -0800
Subject: [PATCH 12/18] update cluster radius, various cleanups

---
 webapp/src/components/DFMapPopup.vue |  4 ++--
 webapp/src/components/LeafletMap.vue |  1 +
 webapp/src/services/apiService.ts    |  6 ------
 webapp/src/stores/tiles.ts           |  2 +-
 webapp/src/views/Map.vue             | 26 ++------------------------
 5 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/webapp/src/components/DFMapPopup.vue b/webapp/src/components/DFMapPopup.vue
index 4d86058..478e5d8 100644
--- a/webapp/src/components/DFMapPopup.vue
+++ b/webapp/src/components/DFMapPopup.vue
@@ -14,12 +14,12 @@
         <v-icon start>mdi-compass-outline</v-icon> <b>{{ cardinalDirection }}</b>
       </v-list-item>
       <v-list-item>
-        <v-icon start>mdi-domain</v-icon> <b>
+        <v-icon start>mdi-factory</v-icon> <b>
           <span v-if="alpr.tags.brand">
             {{ alpr.tags.brand }}
           </span>
           <span v-else>
-            Unknown Brand
+            Unknown Manufacturer
           </span>
         </b>
       </v-list-item>
diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index 2d9858e..e72c701 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -187,6 +187,7 @@ function populateMap() {
     chunkedLoading: true,
     disableClusteringAtZoom: 16, // showFov threshold
     removeOutsideVisibleBounds: true,
+    maxClusterRadius: 60,
   });
   circlesLayer = L.featureGroup();
 
diff --git a/webapp/src/services/apiService.ts b/webapp/src/services/apiService.ts
index 88b45db..7374f23 100644
--- a/webapp/src/services/apiService.ts
+++ b/webapp/src/services/apiService.ts
@@ -71,12 +71,6 @@ export const getALPRCounts = async () => {
   return response.data;
 }
 
-export const getClusters = async () => {
-  const s3Url = "https://deflock-clusters.s3.us-east-1.amazonaws.com/alpr_clusters.json";
-  const response = await apiService.get(s3Url);
-  return response.data;
-}
-
 export const getCities = async () => {
   const s3Url = "https://deflock-clusters.s3.us-east-1.amazonaws.com/flock_cameras_null.json";
   const response = await apiService.get(s3Url);
diff --git a/webapp/src/stores/tiles.ts b/webapp/src/stores/tiles.ts
index 9110214..425040a 100644
--- a/webapp/src/stores/tiles.ts
+++ b/webapp/src/stores/tiles.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { onBeforeMount, computed, ref, type Ref } from 'vue';
+import { computed, ref, type Ref } from 'vue';
 import type { ALPR } from '@/types';
 import axios from 'axios';
 import type { BoundingBox } from '@/services/apiService'; // TODO: this is a strange place to hold this type
diff --git a/webapp/src/views/Map.vue b/webapp/src/views/Map.vue
index 57ea63b..351fc23 100644
--- a/webapp/src/views/Map.vue
+++ b/webapp/src/views/Map.vue
@@ -1,9 +1,5 @@
 <template>
   <div class="map-container" @keyup="handleKeyUp">
-    <v-card class="map-notif" v-show="isLoadingALPRs && !showClusters">
-      <v-card-title><v-progress-circular indeterminate color="primary" /></v-card-title>
-    </v-card>
-
     <leaflet-map
       v-if="center"
       v-model:center="center"
@@ -56,8 +52,7 @@ import { ref, onMounted, computed, watch } from 'vue';
 import { useRouter } from 'vue-router'
 import type { Ref } from 'vue';
 import { BoundingBox } from '@/services/apiService';
-import type { Cluster } from '@/services/apiService';
-import { getALPRs, geocodeQuery, getClusters } from '@/services/apiService';
+import { geocodeQuery } from '@/services/apiService';
 import { useDisplay, useTheme } from 'vuetify';
 import { useGlobalStore } from '@/stores/global';
 import { useTilesStore } from '@/stores/tiles';
@@ -68,8 +63,6 @@ import 'leaflet/dist/leaflet.css'
 import LeafletMap from '@/components/LeafletMap.vue';
 
 const DEFAULT_ZOOM = 12;
-const MIN_ZOOM_FOR_REFRESH = 4;
-const CLUSTER_ZOOM_THRESHOLD = 9;
 
 const theme = useTheme();
 const zoom: Ref<number> = ref(DEFAULT_ZOOM);
@@ -85,26 +78,11 @@ const alprs = computed(() => tilesStore.allNodes);
 const router = useRouter();
 const { xs } = useDisplay();
 
-const canRefreshMarkers = computed(() => zoom.value >= MIN_ZOOM_FOR_REFRESH);
-const mapTileUrl = computed(() =>
-  theme.global.name.value === 'dark' ?
-    'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png' :
-    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-); // TODO: implement dark mode in LeafletMap.vue
-const clusters: Ref<Cluster[]> = ref([]);
-const bboxForLastRequest: Ref<BoundingBox|null> = ref(null);
-const showClusters = computed(() => zoom.value <= CLUSTER_ZOOM_THRESHOLD);
-const isLoadingALPRs = ref(false);
-
 const globalStore = useGlobalStore();
 
 const setCurrentLocation = globalStore.setCurrentLocation;
 const currentLocation = computed(() => globalStore.currentLocation);
 
-const visibleALPRs = computed(() => {
-  return alprs.value.filter(alpr => bounds.value?.containsPoint(alpr.lat, alpr.lon));
-});
-
 function handleKeyUp(event: KeyboardEvent) {
   if (event.key === '/' && searchField.value.value !== document.activeElement) {
     searchField.value.focus();
@@ -188,7 +166,7 @@ onMounted(() => {
     }
   } else {
     // show US map by default
-    zoom.value = 4;
+    zoom.value = 5;
     center.value = { lat: 39.8283, lng: -98.5795 };
   }
 });

From 27487e2bf97e1c9e993af70c03c0da56477d4b67 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Tue, 24 Dec 2024 17:17:19 -0800
Subject: [PATCH 13/18] use FOV always if possible, since we're clustering now

---
 webapp/src/components/LeafletMap.vue | 28 +++++-----------------------
 1 file changed, 5 insertions(+), 23 deletions(-)

diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index e72c701..8ed854b 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -54,7 +54,7 @@ onMounted(() => {
 });
 
 function initializeMap() {
-  map = L.map('map', { zoomControl: false }).setView(props.center, props.zoom);
+  map = L.map('map', { zoomControl: false, maxZoom: 18 /* max for OSM tiles */ }).setView(props.center, props.zoom);
 
   registerEvents();
   registerWatchers();
@@ -188,6 +188,9 @@ function populateMap() {
     disableClusteringAtZoom: 16, // showFov threshold
     removeOutsideVisibleBounds: true,
     maxClusterRadius: 60,
+    zoomToBoundsOnClick: true,
+    spiderfyOnEveryZoom: false,
+    spiderfyOnMaxZoom: false,
   });
   circlesLayer = L.featureGroup();
 
@@ -196,7 +199,7 @@ function populateMap() {
 
     let marker: L.CircleMarker | L.Marker;
 
-    if (showFov && hasPlottableOrientation(orientationDegrees)) {
+    if (hasPlottableOrientation(orientationDegrees)) {
       marker = makeSVGMarker(alpr);
     } else {
       marker = makeCircleMarker(alpr);
@@ -219,18 +222,6 @@ function registerEvents() {
   });
 }
 
-/**
- * Returns true if the zoom level has crossed the threshold for switching map markers.
- * Standard circles are shown until a zoom level of 16 is reached, at which point
- * the map switches to showing the field of view for each camera.
- * @param oldZoom old zoom level
- * @param newZoom new zoom level
- * @param threshold the zoom level threshold
- */
-function hasCrossedZoomThreshold(oldZoom: number, newZoom: number, threshold: number) {
-  return (oldZoom < threshold && newZoom >= threshold) || (oldZoom >= threshold && newZoom < threshold);
-}
-
 function registerWatchers() {
   watch(() => props.center, (newCenter: any, oldCenter: any) => {
     if (newCenter.lat !== oldCenter.lat || newCenter.lng !== oldCenter.lng) {
@@ -238,15 +229,6 @@ function registerWatchers() {
     }
   });
 
-  watch(() => props.zoom, (newZoom, oldZoom) => {
-    if (newZoom !== oldZoom) {
-      map.setZoom(newZoom);
-      if (hasCrossedZoomThreshold(oldZoom, newZoom, 16)) {
-        populateMap();
-      }
-    }
-  });
-
   watch(() => props.currentLocation, (newLocation, oldLocation) => {
     console.log("current location watcher triggered!");
     renderCurrentLocation();

From 6b0a222cdc67bbef82b1d8ca4504c3047d5d4a3c Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Tue, 24 Dec 2024 17:20:27 -0800
Subject: [PATCH 14/18] no footer

---
 webapp/src/views/Landing.vue       | 8 --------
 webapp/src/views/QRLandingView.vue | 8 --------
 2 files changed, 16 deletions(-)

diff --git a/webapp/src/views/Landing.vue b/webapp/src/views/Landing.vue
index 5197537..c7a6299 100644
--- a/webapp/src/views/Landing.vue
+++ b/webapp/src/views/Landing.vue
@@ -63,14 +63,6 @@
       <v-icon end>mdi-map</v-icon>
     </v-btn>
   </v-container>
-  
-  <v-container>
-    <v-footer class="text-center">
-      <span class="attribution">
-        Maps ©&nbsp;<a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>&nbsp;contributors.
-      </span>
-    </v-footer>
-  </v-container>
 </template>
 
 <style>
diff --git a/webapp/src/views/QRLandingView.vue b/webapp/src/views/QRLandingView.vue
index a787595..62afb8f 100644
--- a/webapp/src/views/QRLandingView.vue
+++ b/webapp/src/views/QRLandingView.vue
@@ -63,14 +63,6 @@
         <v-icon end>mdi-map</v-icon>
       </v-btn>
     </v-container>
-
-    <v-container>
-    <v-footer class="text-center">
-      <span class="attribution">
-        Maps ©&nbsp;<a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>&nbsp;contributors.
-      </span>
-    </v-footer>
-   </v-container>
 </template>
 
 <style>

From 7904af0fb658c9ddc7b9fb17d4d608c4012f4aec Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Fri, 27 Dec 2024 12:06:39 -0700
Subject: [PATCH 15/18] major cleanup

---
 .../main/scala/services/GithubClient.scala    |   1 +
 webapp/public/404media.svg                    |   7 +
 webapp/public/deflock-logo-grey.svg           |  27 +++
 webapp/public/icon-discord-white.svg          |   1 +
 webapp/public/icon-discord.svg                |   1 +
 webapp/public/white-logos/404media.svg        |   7 +
 webapp/public/white-logos/forbes.svg          |   4 +
 webapp/public/white-logos/latimes.svg         |  93 +++++++++
 webapp/src/App.vue                            |  20 +-
 webapp/src/assets/main.css                    |   7 +-
 webapp/src/assets/typography.css              |  26 +++
 webapp/src/components/Dangers.vue             |  14 +-
 webapp/src/components/LeafletMap.vue          |   4 +-
 webapp/src/components/layout/Footer.vue       |  95 +++++++++
 webapp/src/main.ts                            |   7 +
 webapp/src/router/index.ts                    |  16 +-
 webapp/src/views/AboutView.vue                |  17 +-
 webapp/src/views/ContactView.vue              |  67 ++++++-
 webapp/src/views/Dangers.vue                  |  11 +-
 webapp/src/views/Donate.vue                   |  33 +++-
 webapp/src/views/Landing.vue                  | 186 ++++++++++--------
 webapp/src/views/LegalView.vue                |  84 --------
 webapp/src/views/OperatorsView.vue            |   7 +-
 webapp/src/views/PrivacyPolicy.vue            |  48 +++++
 webapp/src/views/ReportView.vue               |  40 ++--
 webapp/src/views/TermsOfService.vue           | 101 ++++++++++
 webapp/src/views/WhatIsAnALPRView.vue         |   7 +-
 27 files changed, 681 insertions(+), 250 deletions(-)
 create mode 100644 webapp/public/404media.svg
 create mode 100644 webapp/public/deflock-logo-grey.svg
 create mode 100644 webapp/public/icon-discord-white.svg
 create mode 100644 webapp/public/icon-discord.svg
 create mode 100644 webapp/public/white-logos/404media.svg
 create mode 100644 webapp/public/white-logos/forbes.svg
 create mode 100644 webapp/public/white-logos/latimes.svg
 create mode 100644 webapp/src/assets/typography.css
 create mode 100644 webapp/src/components/layout/Footer.vue
 delete mode 100644 webapp/src/views/LegalView.vue
 create mode 100644 webapp/src/views/PrivacyPolicy.vue
 create mode 100644 webapp/src/views/TermsOfService.vue

diff --git a/shotgun/src/main/scala/services/GithubClient.scala b/shotgun/src/main/scala/services/GithubClient.scala
index c867d1d..fbd7cb9 100644
--- a/shotgun/src/main/scala/services/GithubClient.scala
+++ b/shotgun/src/main/scala/services/GithubClient.scala
@@ -29,6 +29,7 @@ class GithubClient(implicit val system: ActorSystem, implicit val executionConte
     |          login
     |          name
     |          avatarUrl
+    |          url
     |        }
     |      }
     |    }
diff --git a/webapp/public/404media.svg b/webapp/public/404media.svg
new file mode 100644
index 0000000..8748ee2
--- /dev/null
+++ b/webapp/public/404media.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.89 37.86">
+	<path style="fill:#000000;" d="M25.6,.73h13.52l-5,22.98h4.68v6.55h-6.12l-1.49,6.86h-7.03l1.49-6.86H9.47v-9.67L25.6,.73ZM15.38,22.78v.94h11.71L31.35,4.16h-.96L15.38,22.78Z"></path>
+	<path style="fill:#000000;" d="M44.92,14.87c1.1-5.13,2.94-8.89,5.51-11.28s6.11-3.59,10.62-3.59c1.88,0,3.55,.29,5,.86,1.46,.57,2.68,1.37,3.67,2.39s1.75,2.23,2.26,3.61c.51,1.39,.77,2.88,.77,4.47,0,.59-.03,1.18-.08,1.77-.05,.59-.15,1.18-.29,1.77l-1.76,8.11c-1.1,5.13-2.94,8.89-5.51,11.28-2.57,2.39-6.11,3.59-10.62,3.59-1.88,0-3.55-.29-5-.86s-2.68-1.37-3.67-2.39c-.99-1.02-1.75-2.22-2.26-3.59-.51-1.37-.77-2.87-.77-4.5,0-.59,.03-1.18,.08-1.77,.05-.59,.15-1.18,.29-1.77l1.76-8.11Zm10.22,16.74c1.21,0,2.27-.22,3.19-.65,.92-.43,1.73-1.01,2.42-1.74,.69-.73,1.26-1.59,1.7-2.6,.44-1,.79-2.08,1.04-3.22l1.97-8.94c.11-.55,.19-1.03,.24-1.43,.05-.4,.08-.79,.08-1.17,0-1.77-.47-3.15-1.41-4.13-.94-.99-2.26-1.48-3.97-1.48-1.21,0-2.27,.22-3.19,.65-.92,.43-1.73,1.01-2.42,1.74-.69,.73-1.26,1.59-1.7,2.6-.44,1.01-.79,2.08-1.04,3.22l-1.97,8.94c-.21,.94-.32,1.8-.32,2.6,0,1.77,.47,3.15,1.41,4.13s2.26,1.48,3.97,1.48Z"></path>
+	<path style="fill:#000000;" d="M90.76,.73h13.52l-5,22.98h4.68v6.55h-6.12l-1.49,6.86h-7.03l1.49-6.86h-16.18v-9.67L90.76,.73Zm-10.22,22.05v.94h11.71l4.26-19.55h-.96l-15.01,18.62Z"></path>
+	<path style="fill:#91fc4e;" d="M1.07,31.42c-.58,.04-1.07-.41-1.07-.99v-.47c0-.23,.07-.46,.22-.64l1.07-1.31c.16-.19,.24-.43,.22-.68l-.27-5.39c0-.5,.36-.93,.86-1,9.83-1.36,104.88-12.17,115.62-13.39,.55-.06,1.03,.33,1.09,.88l.07,.68c.04,.42-.18,.82-.56,1.01l-1.51,.73c-.15,.07-.26,.21-.29,.37l-.8,4.31c-.08,.42-.41,.75-.84,.81C105.82,17.59,12.17,30.56,1.07,31.42Z"></path>
+	<path style="fill:#a8fd73;" d="M35.59,16.96c-2.48,.29-4.89,.57-7.21,.84l-1.29,5.92H15.38v-.94l3.08-3.82c-3.2,.38-6.05,.71-8.48,1.01l-.51,.63v9.67h1.88c7.04-.87,16.75-2.14,27.45-3.56v-2.99h-4.68l1.47-6.76Zm59.62-6.84l-2.01,9.22c2.58-.35,5.01-.69,7.24-1l1.97-9.04c-2.24,.25-4.65,.53-7.2,.82Zm-20.58,10.48v1.28c2.54-.35,5.04-.69,7.46-1.02l8.21-10.18c-2.69,.31-5.5,.63-8.39,.96l-7.27,8.96Zm-31.46,2.39c-.14,.59-.24,1.18-.29,1.77-.04,.47-.06,.95-.06,1.42,2.31-.31,4.65-.62,7.01-.94,.05-.58,.12-1.18,.27-1.83l1.83-8.33c-2.43,.28-4.84,.56-7.22,.83l-1.53,7.08Zm22.3-8.53l-1.97,8.93c2.44-.33,4.86-.66,7.26-.99l1.63-7.53c.14-.59,.24-1.18,.29-1.77,.01-.14,0-.28,.02-.42-2.33,.27-4.69,.54-7.06,.81-.05,.29-.1,.6-.17,.96Z"></path>
+</svg>
\ No newline at end of file
diff --git a/webapp/public/deflock-logo-grey.svg b/webapp/public/deflock-logo-grey.svg
new file mode 100644
index 0000000..a448b6e
--- /dev/null
+++ b/webapp/public/deflock-logo-grey.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1150 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect id="Artboard1" x="0" y="0" width="1150" height="300" style="fill:none;"/>
+    <g id="Artboard11" serif:id="Artboard1">
+        <g>
+            <g transform="matrix(344.475,0,0,344.475,30.1181,267.042)">
+                <path d="M0.377,-0.658L0.377,-0.655C0.421,-0.629 0.415,-0.593 0.415,-0.547L0.415,-0.415C0.373,-0.452 0.317,-0.473 0.261,-0.473C0.124,-0.473 0.024,-0.364 0.024,-0.229C0.024,-0.08 0.131,0.013 0.277,0.013C0.295,0.013 0.312,0.013 0.329,0.008L0.388,-0.082C0.361,-0.065 0.334,-0.053 0.302,-0.053C0.197,-0.053 0.125,-0.142 0.125,-0.243C0.125,-0.334 0.19,-0.407 0.27,-0.407C0.323,-0.407 0.374,-0.383 0.399,-0.335C0.418,-0.298 0.415,-0.254 0.415,-0.214L0.415,-0L0.544,-0L0.544,-0.003C0.5,-0.027 0.506,-0.064 0.506,-0.11L0.506,-0.674L0.503,-0.674C0.492,-0.658 0.468,-0.658 0.445,-0.658L0.377,-0.658Z" style="fill:rgb(104,104,104);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(344.475,0,0,344.475,229.914,267.042)">
+                <path d="M0.5,-0.246C0.504,-0.375 0.411,-0.473 0.275,-0.473C0.126,-0.473 0.025,-0.372 0.025,-0.233C0.025,-0.094 0.142,0.013 0.312,0.013C0.359,0.013 0.407,0.006 0.45,-0.012L0.5,-0.106L0.497,-0.106C0.451,-0.07 0.393,-0.053 0.333,-0.053C0.22,-0.053 0.135,-0.124 0.133,-0.246L0.5,-0.246ZM0.137,-0.304C0.149,-0.367 0.199,-0.407 0.266,-0.407C0.338,-0.407 0.384,-0.374 0.395,-0.304L0.137,-0.304Z" style="fill:rgb(104,104,104);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(344.475,0,0,344.475,409.04,267.042)">
+                <path d="M0.023,-0.394L0.071,-0.394L0.071,-0.11C0.071,-0.064 0.077,-0.027 0.033,-0.003L0.033,-0L0.2,-0L0.2,-0.003C0.156,-0.028 0.162,-0.064 0.162,-0.11L0.162,-0.394L0.264,-0.394C0.276,-0.394 0.291,-0.391 0.295,-0.38L0.298,-0.38L0.298,-0.46L0.162,-0.46C0.162,-0.56 0.157,-0.608 0.249,-0.608C0.278,-0.608 0.308,-0.603 0.333,-0.59L0.333,-0.11C0.333,-0.064 0.339,-0.027 0.295,-0.003L0.295,-0L0.462,-0L0.462,-0.003C0.418,-0.027 0.424,-0.064 0.424,-0.11L0.424,-0.674L0.421,-0.674C0.411,-0.663 0.394,-0.656 0.378,-0.656C0.347,-0.656 0.319,-0.674 0.266,-0.674C0.206,-0.674 0.148,-0.654 0.107,-0.608C0.068,-0.564 0.071,-0.525 0.071,-0.46L0.023,-0.394Z" style="fill:rgb(104,104,104);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(344.475,0,0,344.475,581.278,267.042)">
+                <path d="M0.276,0.013C0.417,0.013 0.537,-0.091 0.537,-0.235C0.537,-0.303 0.506,-0.369 0.455,-0.414C0.407,-0.456 0.352,-0.473 0.288,-0.473C0.144,-0.473 0.023,-0.376 0.023,-0.226C0.023,-0.084 0.139,0.013 0.276,0.013ZM0.281,-0.053C0.179,-0.053 0.124,-0.152 0.124,-0.244C0.124,-0.334 0.184,-0.407 0.277,-0.407C0.384,-0.407 0.436,-0.311 0.436,-0.214C0.436,-0.124 0.373,-0.053 0.281,-0.053Z" style="fill:rgb(104,104,104);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(344.475,0,0,344.475,774.184,267.042)">
+                <path d="M0.415,-0.461C0.38,-0.469 0.343,-0.473 0.307,-0.473C0.156,-0.473 0.022,-0.39 0.022,-0.218C0.022,-0.088 0.142,0.013 0.296,0.013C0.34,0.013 0.386,0.009 0.428,-0.007L0.48,-0.102L0.477,-0.102C0.438,-0.073 0.382,-0.053 0.331,-0.053C0.22,-0.053 0.123,-0.129 0.123,-0.244C0.123,-0.339 0.193,-0.407 0.29,-0.407C0.335,-0.407 0.383,-0.391 0.412,-0.358L0.415,-0.358L0.415,-0.461Z" style="fill:rgb(104,104,104);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(344.475,0,0,344.475,932.642,267.042)">
+                <path d="M0.029,-0.658L0.029,-0.655C0.072,-0.63 0.066,-0.593 0.066,-0.547L0.066,-0.111C0.066,-0.065 0.072,-0.028 0.029,-0.003L0.029,-0L0.196,-0L0.196,-0.003C0.151,-0.028 0.157,-0.065 0.157,-0.111L0.157,-0.674L0.154,-0.674C0.141,-0.659 0.117,-0.658 0.095,-0.658L0.029,-0.658ZM0.324,-0.056C0.343,-0.029 0.368,-0 0.426,-0L0.504,-0C0.459,-0.028 0.429,-0.071 0.398,-0.112L0.276,-0.267L0.443,-0.46L0.291,-0.46L0.291,-0.457C0.301,-0.451 0.31,-0.442 0.31,-0.428C0.31,-0.403 0.274,-0.365 0.259,-0.348L0.176,-0.257L0.324,-0.056Z" style="fill:rgb(104,104,104);fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/webapp/public/icon-discord-white.svg b/webapp/public/icon-discord-white.svg
new file mode 100644
index 0000000..1a47495
--- /dev/null
+++ b/webapp/public/icon-discord-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path fill="#ffffff" d="M 41.625 10.769531 C 37.644531 7.566406 31.347656 7.023438 31.078125 7.003906 C 30.660156 6.96875 30.261719 7.203125 30.089844 7.589844 C 30.074219 7.613281 29.9375 7.929688 29.785156 8.421875 C 32.417969 8.867188 35.652344 9.761719 38.578125 11.578125 C 39.046875 11.867188 39.191406 12.484375 38.902344 12.953125 C 38.710938 13.261719 38.386719 13.429688 38.050781 13.429688 C 37.871094 13.429688 37.6875 13.378906 37.523438 13.277344 C 32.492188 10.15625 26.210938 10 25 10 C 23.789063 10 17.503906 10.15625 12.476563 13.277344 C 12.007813 13.570313 11.390625 13.425781 11.101563 12.957031 C 10.808594 12.484375 10.953125 11.871094 11.421875 11.578125 C 14.347656 9.765625 17.582031 8.867188 20.214844 8.425781 C 20.0625 7.929688 19.925781 7.617188 19.914063 7.589844 C 19.738281 7.203125 19.34375 6.960938 18.921875 7.003906 C 18.652344 7.023438 12.355469 7.566406 8.320313 10.8125 C 6.214844 12.761719 2 24.152344 2 34 C 2 34.175781 2.046875 34.34375 2.132813 34.496094 C 5.039063 39.605469 12.972656 40.941406 14.78125 41 C 14.789063 41 14.800781 41 14.8125 41 C 15.132813 41 15.433594 40.847656 15.621094 40.589844 L 17.449219 38.074219 C 12.515625 36.800781 9.996094 34.636719 9.851563 34.507813 C 9.4375 34.144531 9.398438 33.511719 9.765625 33.097656 C 10.128906 32.683594 10.761719 32.644531 11.175781 33.007813 C 11.234375 33.0625 15.875 37 25 37 C 34.140625 37 38.78125 33.046875 38.828125 33.007813 C 39.242188 32.648438 39.871094 32.683594 40.238281 33.101563 C 40.601563 33.515625 40.5625 34.144531 40.148438 34.507813 C 40.003906 34.636719 37.484375 36.800781 32.550781 38.074219 L 34.378906 40.589844 C 34.566406 40.847656 34.867188 41 35.1875 41 C 35.199219 41 35.210938 41 35.21875 41 C 37.027344 40.941406 44.960938 39.605469 47.867188 34.496094 C 47.953125 34.34375 48 34.175781 48 34 C 48 24.152344 43.785156 12.761719 41.625 10.769531 Z M 18.5 30 C 16.566406 30 15 28.210938 15 26 C 15 23.789063 16.566406 22 18.5 22 C 20.433594 22 22 23.789063 22 26 C 22 28.210938 20.433594 30 18.5 30 Z M 31.5 30 C 29.566406 30 28 28.210938 28 26 C 28 23.789063 29.566406 22 31.5 22 C 33.433594 22 35 23.789063 35 26 C 35 28.210938 33.433594 30 31.5 30 Z"/></svg>
diff --git a/webapp/public/icon-discord.svg b/webapp/public/icon-discord.svg
new file mode 100644
index 0000000..d57ac7e
--- /dev/null
+++ b/webapp/public/icon-discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 41.625 10.769531 C 37.644531 7.566406 31.347656 7.023438 31.078125 7.003906 C 30.660156 6.96875 30.261719 7.203125 30.089844 7.589844 C 30.074219 7.613281 29.9375 7.929688 29.785156 8.421875 C 32.417969 8.867188 35.652344 9.761719 38.578125 11.578125 C 39.046875 11.867188 39.191406 12.484375 38.902344 12.953125 C 38.710938 13.261719 38.386719 13.429688 38.050781 13.429688 C 37.871094 13.429688 37.6875 13.378906 37.523438 13.277344 C 32.492188 10.15625 26.210938 10 25 10 C 23.789063 10 17.503906 10.15625 12.476563 13.277344 C 12.007813 13.570313 11.390625 13.425781 11.101563 12.957031 C 10.808594 12.484375 10.953125 11.871094 11.421875 11.578125 C 14.347656 9.765625 17.582031 8.867188 20.214844 8.425781 C 20.0625 7.929688 19.925781 7.617188 19.914063 7.589844 C 19.738281 7.203125 19.34375 6.960938 18.921875 7.003906 C 18.652344 7.023438 12.355469 7.566406 8.320313 10.8125 C 6.214844 12.761719 2 24.152344 2 34 C 2 34.175781 2.046875 34.34375 2.132813 34.496094 C 5.039063 39.605469 12.972656 40.941406 14.78125 41 C 14.789063 41 14.800781 41 14.8125 41 C 15.132813 41 15.433594 40.847656 15.621094 40.589844 L 17.449219 38.074219 C 12.515625 36.800781 9.996094 34.636719 9.851563 34.507813 C 9.4375 34.144531 9.398438 33.511719 9.765625 33.097656 C 10.128906 32.683594 10.761719 32.644531 11.175781 33.007813 C 11.234375 33.0625 15.875 37 25 37 C 34.140625 37 38.78125 33.046875 38.828125 33.007813 C 39.242188 32.648438 39.871094 32.683594 40.238281 33.101563 C 40.601563 33.515625 40.5625 34.144531 40.148438 34.507813 C 40.003906 34.636719 37.484375 36.800781 32.550781 38.074219 L 34.378906 40.589844 C 34.566406 40.847656 34.867188 41 35.1875 41 C 35.199219 41 35.210938 41 35.21875 41 C 37.027344 40.941406 44.960938 39.605469 47.867188 34.496094 C 47.953125 34.34375 48 34.175781 48 34 C 48 24.152344 43.785156 12.761719 41.625 10.769531 Z M 18.5 30 C 16.566406 30 15 28.210938 15 26 C 15 23.789063 16.566406 22 18.5 22 C 20.433594 22 22 23.789063 22 26 C 22 28.210938 20.433594 30 18.5 30 Z M 31.5 30 C 29.566406 30 28 28.210938 28 26 C 28 23.789063 29.566406 22 31.5 22 C 33.433594 22 35 23.789063 35 26 C 35 28.210938 33.433594 30 31.5 30 Z"/></svg>
diff --git a/webapp/public/white-logos/404media.svg b/webapp/public/white-logos/404media.svg
new file mode 100644
index 0000000..5b6f564
--- /dev/null
+++ b/webapp/public/white-logos/404media.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.89 37.86">
+	<path style="fill:#ffffff;" d="M25.6,.73h13.52l-5,22.98h4.68v6.55h-6.12l-1.49,6.86h-7.03l1.49-6.86H9.47v-9.67L25.6,.73ZM15.38,22.78v.94h11.71L31.35,4.16h-.96L15.38,22.78Z"></path>
+	<path style="fill:#ffffff;" d="M44.92,14.87c1.1-5.13,2.94-8.89,5.51-11.28s6.11-3.59,10.62-3.59c1.88,0,3.55,.29,5,.86,1.46,.57,2.68,1.37,3.67,2.39s1.75,2.23,2.26,3.61c.51,1.39,.77,2.88,.77,4.47,0,.59-.03,1.18-.08,1.77-.05,.59-.15,1.18-.29,1.77l-1.76,8.11c-1.1,5.13-2.94,8.89-5.51,11.28-2.57,2.39-6.11,3.59-10.62,3.59-1.88,0-3.55-.29-5-.86s-2.68-1.37-3.67-2.39c-.99-1.02-1.75-2.22-2.26-3.59-.51-1.37-.77-2.87-.77-4.5,0-.59,.03-1.18,.08-1.77,.05-.59,.15-1.18,.29-1.77l1.76-8.11Zm10.22,16.74c1.21,0,2.27-.22,3.19-.65,.92-.43,1.73-1.01,2.42-1.74,.69-.73,1.26-1.59,1.7-2.6,.44-1,.79-2.08,1.04-3.22l1.97-8.94c.11-.55,.19-1.03,.24-1.43,.05-.4,.08-.79,.08-1.17,0-1.77-.47-3.15-1.41-4.13-.94-.99-2.26-1.48-3.97-1.48-1.21,0-2.27,.22-3.19,.65-.92,.43-1.73,1.01-2.42,1.74-.69,.73-1.26,1.59-1.7,2.6-.44,1.01-.79,2.08-1.04,3.22l-1.97,8.94c-.21,.94-.32,1.8-.32,2.6,0,1.77,.47,3.15,1.41,4.13s2.26,1.48,3.97,1.48Z"></path>
+	<path style="fill:#ffffff;" d="M90.76,.73h13.52l-5,22.98h4.68v6.55h-6.12l-1.49,6.86h-7.03l1.49-6.86h-16.18v-9.67L90.76,.73Zm-10.22,22.05v.94h11.71l4.26-19.55h-.96l-15.01,18.62Z"></path>
+	<path style="fill:#ffffff;" d="M1.07,31.42c-.58,.04-1.07-.41-1.07-.99v-.47c0-.23,.07-.46,.22-.64l1.07-1.31c.16-.19,.24-.43,.22-.68l-.27-5.39c0-.5,.36-.93,.86-1,9.83-1.36,104.88-12.17,115.62-13.39,.55-.06,1.03,.33,1.09,.88l.07,.68c.04,.42-.18,.82-.56,1.01l-1.51,.73c-.15,.07-.26,.21-.29,.37l-.8,4.31c-.08,.42-.41,.75-.84,.81C105.82,17.59,12.17,30.56,1.07,31.42Z"></path>
+	<path style="fill:#ffffff;" d="M35.59,16.96c-2.48,.29-4.89,.57-7.21,.84l-1.29,5.92H15.38v-.94l3.08-3.82c-3.2,.38-6.05,.71-8.48,1.01l-.51,.63v9.67h1.88c7.04-.87,16.75-2.14,27.45-3.56v-2.99h-4.68l1.47-6.76Zm59.62-6.84l-2.01,9.22c2.58-.35,5.01-.69,7.24-1l1.97-9.04c-2.24,.25-4.65,.53-7.2,.82Zm-20.58,10.48v1.28c2.54-.35,5.04-.69,7.46-1.02l8.21-10.18c-2.69,.31-5.5,.63-8.39,.96l-7.27,8.96Zm-31.46,2.39c-.14,.59-.24,1.18-.29,1.77-.04,.47-.06,.95-.06,1.42,2.31-.31,4.65-.62,7.01-.94,.05-.58,.12-1.18,.27-1.83l1.83-8.33c-2.43,.28-4.84,.56-7.22,.83l-1.53,7.08Zm22.3-8.53l-1.97,8.93c2.44-.33,4.86-.66,7.26-.99l1.63-7.53c.14-.59,.24-1.18,.29-1.77,.01-.14,0-.28,.02-.42-2.33,.27-4.69,.54-7.06,.81-.05,.29-.1,.6-.17,.96Z"></path>
+</svg>
diff --git a/webapp/public/white-logos/forbes.svg b/webapp/public/white-logos/forbes.svg
new file mode 100644
index 0000000..a1a62de
--- /dev/null
+++ b/webapp/public/white-logos/forbes.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 54">
+  <path fill="#ffffff" d="M113.3 18.2c0-5.8.1-11.2.4-16.2L98.4 4.9v1.4l1.5.2c1.1.1 1.8.5 2.2 1.1.4.7.7 1.7.9 3.2.2 2.9.4 9.5.3 19.9 0 10.3-.1 16.8-.3 19.3 5.5 1.2 9.8 1.7 13 1.7 6 0 10.7-1.7 14.1-5.2 3.4-3.4 5.2-8.2 5.2-14.1 0-4.7-1.3-8.6-3.9-11.7-2.6-3.1-5.9-4.6-9.8-4.6-2.6 0-5.3.7-8.3 2.1zm.3 30.8c-.2-3.2-.4-12.8-.4-28.5.9-.3 2.1-.5 3.6-.5 2.4 0 4.3 1.2 5.7 3.7 1.4 2.5 2.1 5.5 2.1 9.3 0 4.7-.8 8.5-2.4 11.7-1.6 3.1-3.6 4.7-6.1 4.7-.8-.2-1.6-.3-2.5-.4zM41 3H1v2l2.1.2c1.6.3 2.7.9 3.4 1.8.7 1 1.1 2.6 1.2 4.8.8 10.8.8 20.9 0 30.2-.2 2.2-.6 3.8-1.2 4.8-.7 1-1.8 1.6-3.4 1.8l-2.1.3v2h25.8v-2l-2.7-.2a4.9 4.9 0 0 1-3.4-1.8c-.7-1-1.1-2.6-1.2-4.8-.3-4-.5-8.6-.5-13.7l5.4.1c2.9.1 4.9 2.3 5.9 6.7h2V18.9h-2c-1 4.3-2.9 6.5-5.9 6.6l-5.4.1c0-9 .2-15.4.5-19.3h7.9c5.6 0 9.4 3.6 11.6 10.8l2.4-.7L41 3zm-4.7 30.8c0 5.2 1.5 9.5 4.4 12.9 2.9 3.4 7.2 5 12.6 5s9.8-1.7 13-5.2c3.2-3.4 4.7-7.7 4.7-12.9s-1.5-9.5-4.4-12.9c-2.9-3.4-7.2-5-12.6-5s-9.8 1.7-13 5.2c-3.2 3.4-4.7 7.7-4.7 12.9zm22.3-11.4c1.2 2.9 1.7 6.7 1.7 11.3 0 10.6-2.2 15.8-6.5 15.8-2.2 0-3.9-1.5-5.1-4.5-1.2-3-1.7-6.8-1.7-11.3C47 23.2 49.2 18 53.5 18c2.2-.1 3.9 1.4 5.1 4.4zm84.5 24.3c3.3 3.3 7.5 5 12.5 5 3.1 0 5.8-.6 8.2-1.9 2.4-1.2 4.3-2.7 5.6-4.5l-1-1.2c-2.2 1.7-4.7 2.5-7.6 2.5-4 0-7.1-1.3-9.2-4-2.2-2.7-3.2-6.1-3-10.5H170c0-4.8-1.2-8.7-3.7-11.8-2.5-3-6-4.5-10.5-4.5-5.6 0-9.9 1.8-13 5.3-3.1 3.5-4.6 7.8-4.6 12.9 0 5.2 1.6 9.4 4.9 12.7zm7.4-25.1c1.1-2.4 2.5-3.6 4.4-3.6 3 0 4.5 3.8 4.5 11.5l-10.6.2c.1-3 .6-5.7 1.7-8.1zm46.4-4c-2.7-1.2-6.1-1.9-10.2-1.9-4.2 0-7.5 1.1-10 3.2s-3.8 4.7-3.8 7.8c0 2.7.8 4.8 2.3 6.3 1.5 1.5 3.9 2.8 7 3.9 2.8 1 4.8 2 5.8 2.9 1 1 1.6 2.1 1.6 3.6 0 1.4-.5 2.7-1.6 3.7-1 1.1-2.4 1.6-4.2 1.6-4.4 0-7.7-3.2-10-9.6l-1.7.5.4 10c3.6 1.4 7.6 2.1 12 2.1 4.6 0 8.1-1 10.7-3.1 2.6-2 3.9-4.9 3.9-8.5 0-2.4-.6-4.4-1.9-5.9-1.3-1.5-3.4-2.8-6.4-4-3.3-1.2-5.6-2.3-6.8-3.3-1.2-1-1.8-2.2-1.8-3.7s.4-2.7 1.3-3.7 2-1.4 3.4-1.4c4 0 6.9 2.9 8.7 8.6l1.7-.5-.4-8.6zm-96.2-.9c-1.4-.7-2.9-1-4.6-1-1.7 0-3.4.7-5.3 2.1-1.9 1.4-3.3 3.3-4.4 5.9l.1-8-15.2 3v1.4l1.5.1c1.9.2 3 1.7 3.2 4.4.6 6.2.6 12.8 0 19.8-.2 2.7-1.3 4.1-3.2 4.4l-1.5.2v1.9h21.2V49l-2.7-.2c-1.9-.2-3-1.7-3.2-4.4-.6-5.8-.7-12-.2-18.4.6-1 1.9-1.6 3.9-1.8 2-.2 4.3.4 6.7 1.8l3.7-9.3z"/>
+</svg>
diff --git a/webapp/public/white-logos/latimes.svg b/webapp/public/white-logos/latimes.svg
new file mode 100644
index 0000000..5de0dca
--- /dev/null
+++ b/webapp/public/white-logos/latimes.svg
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+   version="1.1"
+   width="892.91339"
+   height="112.32283"
+   id="svg5230">
+  <defs
+     id="defs5232">
+    <clipPath
+       id="clipPath3029">
+      <path
+         d="m 288.876,1559.828 205.226,0 0,24.412 -205.226,0 0,-24.412 z"
+         id="path3031" />
+    </clipPath>
+    <clipPath
+       id="clipPath3039">
+      <path
+         d="m 0.035,-869.52802 783.00101,0 0,1661.52802 -783.00101,0 0,-1661.52802 z"
+         id="path3041" />
+    </clipPath>
+    <clipPath
+       id="clipPath3047">
+      <path
+         d="m 288.876,714.677 205.226,0 0,-24.412 -205.226,0 0,24.412 z"
+         id="path3049" />
+    </clipPath>
+  </defs>
+  <metadata
+     id="metadata5235">
+    <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-46.019458,-272.45092)"
+     id="layer1">
+    <g
+       transform="matrix(4.3163477,0,0,-4.3163477,-1197.3265,7114.0577)"
+       id="g3025">
+      <g
+         clip-path="url(#clipPath3029)"
+         id="g3027">
+        <g
+           transform="translate(0,869.563)"
+           id="g3033">
+          <g
+             id="g3035">
+            <g
+               clip-path="url(#clipPath3039)"
+               id="g3037">
+              <g
+                 id="g3043">
+                <g
+                   clip-path="url(#clipPath3047)"
+                   id="g3045">
+                  <path
+                     d="m 472.612,697.348 c -0.802,-0.657 -2.627,-2.241 -3.379,-2.947 -0.702,0.609 -2.153,1.72 -3.055,2.352 l 0,0.108 c 0.261,0.086 0.433,0.32 0.433,0.893 l 0,6.758 c -0.727,0.511 -1.899,1.271 -2.677,1.757 l -0.784,-0.784 0,-8.056 1.217,-0.892 c 0,0 -1.708,-1.43 -2.46,-2.136 -0.676,0.633 -1.666,1.371 -2.568,2.028 l 0,0.081 c 0.261,0.085 0.432,0.346 0.432,0.919 l 0,7.083 c -0.726,0.511 -1.871,1.217 -2.649,1.703 l -0.945,-0.73 0,-8.056 1.216,-0.892 c 0,0 -1.66,-1.336 -2.46,-2.109 -0.752,0.657 -1.566,1.256 -2.568,2.001 l 0,0.054 c 0.282,0.111 0.459,0.45 0.459,0.838 l 0,8.137 -0.918,0.784 -1.001,-0.919 -0.459,0.46 c 0.751,0.608 2.355,2.003 3.433,3.001 l 2.298,-2.001 0,-0.568 3.108,2.569 c 0.977,-0.682 3.865,-2.461 3.865,-2.461 l 2.974,2.461 c 0.953,-0.73 3.123,-2.049 4.325,-2.731 l 0,-0.108 c -0.401,-0.104 -0.432,-0.597 -0.432,-0.865 l 0,-7.326 1.189,-0.838 0.946,0.838 0.46,-0.406 z M 450.5,711.433 c -0.802,-1.095 -1.455,-1.595 -2.757,-1.595 -0.878,0 -1.353,0.254 -2.055,1.081 l -0.973,-0.892 -0.433,0.514 3.379,2.947 c 0.878,-1.728 1.933,-1.971 2.785,-1.947 l 0.054,-0.108"
+                     id="path3051"
+                     style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+                  <path
+                     d="m 451.581,697.402 c -0.877,-0.73 -2.606,-2.228 -3.406,-3.001 -0.752,0.657 -2.026,1.608 -3.027,2.352 l 0,0.082 c 0.281,0.111 0.432,0.449 0.432,0.837 l 0,7.786 -0.892,0.757 -1.054,-0.919 -0.433,0.433 c 0.752,0.608 2.382,2.057 3.461,3.055 l 2.73,-2.352 0,-0.109 c -0.326,-0.096 -0.433,-0.3 -0.433,-1.027 l 0,-7.542 1.189,-0.784 0.973,0.865 0.46,-0.433 z m -54.901,0 c -0.878,-0.73 -2.634,-2.228 -3.434,-3.001 -0.752,0.657 -2.026,1.608 -3.027,2.352 l 0,0.082 c 0.281,0.111 0.432,0.449 0.432,0.837 l 0,12.626 -0.919,0.784 -1,-0.866 -0.433,0.433 c 0.752,0.608 2.194,1.949 3.271,2.947 l 2.893,-2.352 0,-0.108 c -0.326,-0.097 -0.46,-0.301 -0.46,-1.028 l 0,-12.354 1.244,-0.811 1,0.892 0.433,-0.433 z m -31.061,-0.054 c -0.801,-0.657 -2.654,-2.241 -3.405,-2.947 -0.702,0.609 -2.126,1.72 -3.028,2.352 l 0,0.108 c 0.261,0.086 0.46,0.32 0.46,0.893 l 0,6.758 c -0.727,0.511 -1.9,1.244 -2.677,1.73 -0.158,-0.114 -0.783,-0.56 -0.946,-0.703 l 0,-8.11 1.244,-0.892 c 0,0 -1.66,-1.336 -2.46,-2.109 -0.752,0.657 -1.593,1.256 -2.595,2.001 l 0,0.054 c 0.281,0.111 0.459,0.45 0.459,0.838 l 0,8.137 -0.946,0.784 -0.946,-0.784 -0.405,0.433 c 0.751,0.608 2.301,1.895 3.379,2.893 l 2.27,-2.001 0,-0.568 3.109,2.569 c 0.952,-0.73 3.122,-2.049 4.325,-2.731 l 0,-0.108 c -0.401,-0.104 -0.459,-0.597 -0.459,-0.865 l 0,-7.326 1.189,-0.811 0.973,0.838 0.459,-0.433 z m 124.618,-0.946 0,3.92 c -0.477,0.219 -1.016,0.523 -1.487,0.757 l -3.785,-3.893 0.136,-0.027 c 0.588,0.311 0.824,0.703 2.027,0.703 1.228,0 2.467,-0.864 3.055,-1.487 l 0.054,0.027 z m 3.865,12.03 c 0,-1.314 -1.536,-3.055 -3.568,-3.055 -1.338,0 -2.131,0.663 -2.758,1.514 l -0.053,-0.027 0,-3.271 1.838,-0.865 0.838,0.838 c 0.867,-0.533 2.664,-1.467 3.622,-1.865 l 0,-0.081 c -0.188,-0.077 -0.405,-0.287 -0.405,-0.676 l 0,-2.298 c 0,-0.33 0.23,-0.549 0.405,-0.622 l 0,-0.108 c -1.954,-0.828 -4.763,-2.322 -6.136,-3.515 -0.702,0.657 -1.647,1.271 -2.866,1.271 -1.142,0 -1.648,-0.407 -1.648,-0.784 0,-0.235 0.486,-0.203 0.486,-0.541 0,-0.155 -0.138,-0.324 -0.352,-0.324 -0.267,0 -0.756,0.37 -0.756,0.838 0,0.876 0.625,1.637 2.054,3.082 l 2.514,2.541 c -1.034,0.514 -2.539,1.16 -3.379,1.514 l 0,0.108 c 0.244,0.068 0.406,0.315 0.406,0.595 l 0,2.082 c 0,0.229 -0.105,0.578 -0.406,0.675 l 0,0.109 c 2.105,0.729 4.77,2.198 6.299,3.243 0.342,-0.369 1.251,-1.162 2.216,-1.162 0.813,0 1.001,0.4 1.001,0.676 0,0.157 -0.298,0.243 -0.298,0.486 0,0.209 0.109,0.298 0.271,0.298 0.239,0 0.675,-0.233 0.675,-0.676"
+                     id="path3053"
+                     style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+                </g>
+              </g>
+              <path
+                 d="m 479.532,703.133 c -0.702,0.949 -1.953,2.504 -2.73,3.623 l -0.081,-0.027 0,-5.326 2.811,1.73 z m 3.136,1.217 -5.947,-3.595 0,-2.46 c 0.752,-0.317 2.307,-1.004 3.108,-1.514 l 1.271,1.27 c 0.352,0.353 0.319,0.973 0.946,0.973 0.176,0 0.352,-0.265 0.352,-0.459 0,-0.207 -0.168,-0.306 -0.271,-0.406 l -3.866,-3.758 c -1.328,0.828 -4.024,2.033 -5.352,2.569 l 0,0.108 c 0.215,0.078 0.459,0.221 0.459,0.757 l 0,6.84 c 0,0.559 -0.215,0.739 -0.459,0.783 l 0,0.109 c 2.005,0.632 5.062,2.219 6.515,3.217 1.003,-1.46 2.291,-3.266 3.244,-4.434 z m -42.603,-7.245 0,12.408 c -0.15,-0.01 -0.413,-0.026 -0.567,-0.026 -0.862,0 -2.375,0.327 -3.352,0.594 -2.907,-0.51 -6.272,-2.9 -6.272,-7.38 0,-3.842 2.811,-6.299 6.812,-6.299 1.353,0 2.548,0.223 3.379,0.703 z m 3.461,15.707 c 0,-1.96 -1.341,-2.952 -2.92,-3.244 l 0,-12.166 c 2.03,1.095 2.325,2.217 2.325,2.785 0,0.123 -0.27,0.291 -0.27,0.513 0,0.173 0.221,0.325 0.378,0.325 0.229,0 0.324,-0.203 0.324,-0.568 0,-2.847 -2.794,-6.678 -8.758,-6.678 -4.475,0 -8.272,3.412 -8.272,7.814 0,6.277 5.405,8.459 9.164,8.678 -1.378,0.292 -3.573,0.757 -5.406,0.757 -2.13,0 -3.893,-1.231 -3.893,-2.326 0,-0.413 0.352,-0.491 0.352,-0.783 0,-0.161 -0.069,-0.352 -0.298,-0.352 -0.351,0 -0.649,0.356 -0.649,0.622 0,2.385 1.76,5.785 5.461,5.785 3.752,0 6.54,-1.324 9.461,-1.324 1.931,0 2.481,0.662 2.406,1.757 l 0.432,-0.135 c 0.075,-0.171 0.163,-0.729 0.163,-1.46 z m -29.006,-16.41 0,3.92 c -0.476,0.219 -1.015,0.523 -1.487,0.757 l -3.784,-3.893 0.135,-0.027 c 0.588,0.311 0.825,0.703 2.028,0.703 1.228,0 2.467,-0.864 3.054,-1.487 l 0.054,0.027 z m 3.866,12.03 c 0,-1.314 -1.536,-3.055 -3.568,-3.055 -1.338,0 -2.131,0.663 -2.758,1.514 l -0.054,-0.027 0,-3.271 1.839,-0.865 0.837,0.838 c 0.868,-0.533 2.665,-1.467 3.623,-1.865 l 0,-0.081 c -0.188,-0.077 -0.406,-0.287 -0.406,-0.676 l 0,-2.298 c 0,-0.33 0.23,-0.549 0.406,-0.622 l 0,-0.108 c -1.955,-0.828 -4.764,-2.322 -6.137,-3.515 -0.701,0.657 -1.646,1.271 -2.865,1.271 -1.143,0 -1.649,-0.407 -1.649,-0.784 0,-0.235 0.487,-0.203 0.487,-0.541 0,-0.155 -0.138,-0.324 -0.352,-0.324 -0.267,0 -0.757,0.37 -0.757,0.838 0,0.876 0.625,1.637 2.055,3.082 l 2.514,2.541 c -1.035,0.514 -2.54,1.16 -3.379,1.514 l 0,0.108 c 0.244,0.068 0.405,0.315 0.405,0.595 l 0,2.082 c 0,0.229 -0.105,0.578 -0.405,0.675 l 0,0.109 c 2.105,0.729 4.77,2.198 6.298,3.243 0.343,-0.369 1.251,-1.162 2.217,-1.162 0.813,0 1,0.4 1,0.676 0,0.157 -0.297,0.243 -0.297,0.486 0,0.209 0.109,0.298 0.27,0.298 0.24,0 0.676,-0.233 0.676,-0.676"
+                 id="path3055"
+                 style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+              <path
+                 d="m 403.897,703.133 c -0.702,0.949 -1.954,2.504 -2.73,3.623 l -0.082,-0.027 0,-5.326 2.812,1.73 z m 3.135,1.217 -5.947,-3.595 0,-2.46 c 0.752,-0.317 2.307,-1.004 3.109,-1.514 l 1.271,1.27 c 0.353,0.353 0.32,0.973 0.946,0.973 0.175,0 0.351,-0.265 0.351,-0.459 0,-0.207 -0.167,-0.306 -0.27,-0.406 l -3.866,-3.758 c -1.328,0.828 -4.024,2.033 -5.352,2.569 l 0,0.108 c 0.214,0.078 0.459,0.221 0.459,0.757 l 0,6.84 c 0,0.559 -0.215,0.739 -0.459,0.783 l 0,0.109 c 2.005,0.632 5.061,2.219 6.515,3.217 1.002,-1.46 2.291,-3.266 3.243,-4.434 z m -20.787,-1.217 c -0.702,0.949 -1.954,2.504 -2.73,3.623 l -0.081,-0.027 0,-5.326 2.811,1.73 z m 3.136,1.217 -5.947,-3.595 0,-2.46 c 0.752,-0.317 2.306,-1.004 3.108,-1.514 l 1.27,1.27 c 0.353,0.353 0.32,0.973 0.947,0.973 0.175,0 0.351,-0.265 0.351,-0.459 0,-0.207 -0.167,-0.306 -0.27,-0.406 l -3.866,-3.758 c -1.328,0.828 -4.024,2.033 -5.352,2.569 l 0,0.108 c 0.215,0.078 0.46,0.221 0.46,0.757 l 0,6.84 c 0,0.559 -0.216,0.739 -0.46,0.783 l 0,0.109 c 2.005,0.632 5.061,2.219 6.515,3.217 1.002,-1.46 2.291,-3.266 3.244,-4.434 z m -15.679,-7.597 0,7.651 c -0.977,0.535 -2.599,1.614 -3.676,2.514 l -0.054,-0.027 0,-8.543 c 0.977,-0.437 2.598,-1.356 3.325,-1.892 l 0.405,0.297 z m 4.704,-1.27 c -0.081,-3.09 -1.678,-5.218 -4.65,-5.218 -2.325,0 -4.024,1.162 -6.136,1.162 -1.23,0 -1.896,-0.367 -2.244,-0.783 l -0.162,0.081 c 0.125,2.238 1.753,3.487 3.839,3.487 2.298,0 3.973,-1.433 6.406,-1.433 1.554,0 2.364,0.793 2.514,1.595 l -0.027,0.054 c -0.326,-0.194 -0.752,-0.432 -1.378,-0.432 -1.254,0 -2.613,0.841 -2.839,2.325 -0.598,-0.405 -1.925,-1.419 -2.514,-1.92 -1.468,0.922 -3.849,2.071 -5.001,2.569 l 0,0.108 c 0.24,0.076 0.406,0.365 0.406,0.649 l 0,6.975 c 0,0.414 -0.139,0.704 -0.433,0.756 l 0,0.109 c 2.13,0.754 4.847,2.152 6.326,3.271 1.281,-0.985 3.629,-2.373 5.001,-3.136 l 0,-0.135 c -0.301,-0.122 -0.46,-0.317 -0.46,-0.973 l 0,-7.516 c 0,-0.965 0.092,-1.622 0.811,-1.622 0.114,0 0.251,0.095 0.351,0.216 l 0.19,-0.189 z m -34.358,6.921 -2.568,7.677 -2.838,-7.677 5.406,0 z m 7.65,-4.921 -3.406,-3.082 c -0.952,0.657 -1.771,1.19 -2.973,1.92 l 0,0.135 c 0.272,0.096 0.402,0.362 0.405,0.676 0.001,0.138 -0.034,0.287 -0.081,0.432 l -0.973,2.974 -6.731,0 -0.892,-2.487 c 1.392,0 2.106,-0.155 2.784,-0.432 l 0.676,1.189 0.541,-0.27 -2.325,-4.164 c -0.912,0.504 -1.943,0.893 -3.109,0.893 -1.374,0 -2.411,-0.348 -2.919,-0.812 -0.102,-0.093 -0.249,-0.068 -0.189,0.135 0.551,1.874 1.791,3.303 3.919,3.434 l 4.704,12.652 c -0.487,1.271 -0.958,1.784 -2.136,1.784 -1.103,0 -2.189,-0.497 -2.189,-1.811 0,-0.608 0.621,-0.556 0.621,-1 0,-0.156 -0.138,-0.325 -0.351,-0.325 -0.401,0 -0.811,0.519 -0.811,1.541 0,2.312 1.94,3.677 3.92,3.677 1.804,0 2.53,-0.676 3.081,-1.406 0.176,0.681 0.844,1.133 1.379,1.217 l 0.162,-0.27 c -0.334,-0.403 -0.514,-0.76 -0.514,-1.271 0,-0.266 0.114,-0.815 0.19,-1.028 l 5.055,-14.22 0.865,-0.513 0.919,0.838 0.378,-0.406 z m -28.329,-1.081 0,3.92 c -0.476,0.219 -1.016,0.523 -1.487,0.757 l -3.784,-3.893 0.135,-0.027 c 0.588,0.311 0.824,0.703 2.027,0.703 1.228,0 2.467,-0.864 3.055,-1.487 l 0.054,0.027 z m 3.865,12.03 c 0,-1.314 -1.536,-3.055 -3.568,-3.055 -1.337,0 -2.131,0.663 -2.757,1.514 l -0.054,-0.027 0,-3.271 1.838,-0.865 0.838,0.838 c 0.867,-0.533 2.664,-1.467 3.622,-1.865 l 0,-0.081 c -0.187,-0.077 -0.405,-0.287 -0.405,-0.676 l 0,-2.298 c 0,-0.33 0.23,-0.549 0.405,-0.622 l 0,-0.108 c -1.954,-0.828 -4.763,-2.322 -6.136,-3.515 -0.702,0.657 -1.646,1.271 -2.865,1.271 -1.143,0 -1.649,-0.407 -1.649,-0.784 0,-0.235 0.486,-0.203 0.486,-0.541 0,-0.155 -0.138,-0.324 -0.351,-0.324 -0.268,0 -0.757,0.37 -0.757,0.838 0,0.876 0.625,1.637 2.054,3.082 l 2.514,2.541 c -1.034,0.514 -2.539,1.16 -3.379,1.514 l 0,0.108 c 0.244,0.068 0.406,0.315 0.406,0.595 l 0,2.082 c 0,0.229 -0.105,0.578 -0.406,0.675 l 0,0.109 c 2.105,0.729 4.77,2.198 6.299,3.243 0.342,-0.369 1.251,-1.162 2.216,-1.162 0.813,0 1,0.4 1,0.676 0,0.157 -0.297,0.243 -0.297,0.486 0,0.209 0.11,0.298 0.27,0.298 0.24,0 0.676,-0.233 0.676,-0.676 z m -15.678,-12.057 0,8.029 c -1.153,0.608 -2.848,1.833 -3.65,2.514 l -0.054,-0.027 0,-8.191 c 1.103,-0.584 2.748,-1.598 3.65,-2.352 l 0.054,0.027 z m 3.811,1.541 c -1.676,-0.665 -4.922,-2.322 -6.325,-3.515 -1.479,1.047 -3.629,2.427 -5.001,3.191 l 0,0.08 c 0.351,0.122 0.432,0.371 0.432,0.785 l 0,6.137 c 0,0.564 -0.131,0.767 -0.432,0.864 l 0,0.109 c 2.305,0.827 4.471,2.003 6.325,3.243 1.278,-0.924 3.523,-2.284 5.001,-3.135 l 0,-0.108 c -0.267,-0.105 -0.459,-0.371 -0.459,-0.784 l 0,-6.083 c 0,-0.438 0.184,-0.603 0.459,-0.676 l 0,-0.108 z m -17.895,0.838 0,11.381 c -1.644,0.175 -2.367,1.234 -2.919,1.866 l -1.595,-1.244 c 0.008,-1.731 0.497,-3.134 1.108,-4.515 0.558,-1.262 1.19,-2.896 1.19,-4.027 0,-1.865 -1.065,-3.042 -3.596,-5.354 l 0.081,-0.08 c 1.504,1.094 3.711,1.94 5.731,1.973 z m 6.19,0.027 -2.459,-4.461 c -1.288,0.872 -3.356,1.406 -5.11,1.406 -3.458,0 -5.827,-0.597 -7.055,-1.352 l -0.162,0.162 c 1.097,0.933 2.947,2.43 2.947,5.84 0,1.437 -0.596,3.065 -1.028,4.136 -0.499,1.24 -0.892,1.892 -0.892,3.623 0,3.014 1.677,4.716 4.298,6.001 l 0.19,-0.243 c -0.905,-0.73 -1.326,-1.671 -1.46,-2.622 l 4.19,3.406 c 1.073,-1.463 2.084,-2.027 3.406,-2.027 1.084,0 1.405,0.467 1.405,0.838 0,0.268 -0.378,0.305 -0.378,0.567 0,0.249 0.175,0.325 0.324,0.325 0.333,0 0.649,-0.417 0.649,-0.73 0,-2.052 -1.905,-3.569 -3.784,-3.569 -0.326,0 -0.55,-0.035 -0.757,0 l 0,-11.327 c 1.629,0 3.178,-0.446 4.406,-1.055 l 0.757,1.298 0.513,-0.216 z m 135.295,9.651 c 0,-0.17 -0.198,-0.297 -0.324,-0.297 -0.216,0 -0.399,0.405 -1,0.405 -0.885,0 -1.623,-0.735 -1.623,-1.595 0,-2.263 2.299,-3.178 2.299,-5.758 0,-2.164 -2.18,-3.418 -4.434,-3.704 l -0.433,0.298 c 1.235,0.156 1.839,0.569 1.839,2.027 0,1.971 -2.109,3.575 -2.109,5.894 0,1.875 1.817,3.325 4.298,3.325 0.483,0 0.955,-0.144 1.216,-0.27 0.151,-0.073 0.271,-0.179 0.271,-0.325"
+                 id="path3057"
+                 style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 581de5c..c3fa834 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { RouterView, useRouter } from 'vue-router'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useTheme } from 'vuetify';
 
 const theme = useTheme();
 const router = useRouter();
+const isDark = computed(() => theme.name.value === 'dark');
 
 function toggleTheme() {
   const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark';
@@ -23,7 +24,7 @@ const items = [
 ]
 
 const metaItems = [
-  { title: 'Discord', icon: 'mdi-chat-processing-outline', href: 'https://discord.gg/aV7v4R3sKT'},
+  { title: 'Discord', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg', href: 'https://discord.gg/aV7v4R3sKT'},
   { title: 'Contact', icon: 'mdi-email-outline', to: '/contact' },
   { title: 'GitHub', icon: 'mdi-github', href: 'https://github.com/frillweeman/deflock'},
   { title: 'Donate', icon: 'mdi-heart', to: '/donate'},
@@ -34,11 +35,9 @@ watch(() => theme.global.name.value, (newTheme) => {
   const root = document.documentElement;
   if (newTheme === 'dark') {
     root.style.setProperty('--df-background-color', 'rgb(33, 33, 33)');
-    root.style.setProperty('--df-page-background-color', 'unset');
     root.style.setProperty('--df-text-color', '#ccc');
   } else {
     root.style.setProperty('--df-background-color', 'white');
-    root.style.setProperty('--df-page-background-color', '#f5f5f5');
     root.style.setProperty('--df-text-color', 'black');
   }
 });
@@ -86,7 +85,11 @@ watch(() => theme.global.name.value, (newTheme) => {
           :to="item.to"
           :href="item.href"
           :target="{ '_blank': item.href }"
-        ><v-icon start>{{ item.icon }}</v-icon>{{ item.title }}</v-list-item>
+        >
+          <v-icon v-if="item.icon" start>{{ item.icon }}</v-icon>
+            <v-img v-else-if="item.customIcon" class="mr-2 custom-icon" contain width="24" height="24" :src="isDark ? item.customIconDark : item.customIcon" style="vertical-align: middle;" />
+            <span style="vertical-align: middle;">{{ item.title }}</span>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
 
@@ -95,3 +98,10 @@ watch(() => theme.global.name.value, (newTheme) => {
     </v-main>
   </v-app>
 </template>
+
+<style lang="css" scoped>
+.custom-icon {
+  display: inline-block;
+  margin-right: 5px;
+}
+</style>
diff --git a/webapp/src/assets/main.css b/webapp/src/assets/main.css
index 1ccee5e..0b1a138 100644
--- a/webapp/src/assets/main.css
+++ b/webapp/src/assets/main.css
@@ -1,17 +1,18 @@
 a {
   font-weight: bold;
-  color: rgb(18, 151, 195);
+  color: var(--df-blue);
   text-decoration: none;
 }
 
-a:hover {
+/* underline only simple <a> elements */
+a:not([class]):hover {
   text-decoration: underline;
 }
 
 :root {
   --df-background-color: white;
   --df-text-color: #ccc;
-  --df-page-background-color: #f5f5f5;
+  --df-blue: rgb(18, 151, 195);
 }
 
 .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-bar a {
diff --git a/webapp/src/assets/typography.css b/webapp/src/assets/typography.css
new file mode 100644
index 0000000..4e21fee
--- /dev/null
+++ b/webapp/src/assets/typography.css
@@ -0,0 +1,26 @@
+/* Typography rules */
+
+body {
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: bold;
+}
+
+p {
+  margin: 0.5em 0;
+}
+
+ul, ol {
+  margin: 1em 0;
+  padding-left: 1.5em;
+}
+
+ul li, ol li {
+  margin: 0.5em 0;
+}
diff --git a/webapp/src/components/Dangers.vue b/webapp/src/components/Dangers.vue
index afa6a3c..861752f 100644
--- a/webapp/src/components/Dangers.vue
+++ b/webapp/src/components/Dangers.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-expansion-panels multiple>
+  <v-expansion-panels multiple :model-value :readonly="showAll">
     <v-expansion-panel>
       <v-expansion-panel-title class="font-weight-bold">
         ALPRs Do Not Reduce Crime
@@ -19,7 +19,7 @@
           What research does exist regarding the ability of ALPRs to reduce crime is inconclusive at best:
         </p>
 
-        <quoted-source source-url="https://example.com/study" attribution-text="Journal of Experimental Criminology">
+        <quoted-source source-url="https://link.springer.com/article/10.1007/s11292-011-9133-9" attribution-text="Journal of Experimental Criminology">
           Our findings indicate that, when small numbers of LPR patrols are used in crime hot spots in the way we have tested them here, they do not seem to generate either a general or offense-specific deterrent effect.
         </quoted-source>
 
@@ -156,6 +156,16 @@
 
 <script setup lang="ts">
 import QuotedSource from '@/components/QuotedSource.vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+  showAll: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+const modelValue = computed(() => props.showAll ? [0,1,2,3,4,5] : []);
 </script>
 
 <style scoped>
diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index 8ed854b..f81539e 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -60,7 +60,7 @@ function initializeMap() {
   registerWatchers();
 
   L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
   }).addTo(map);
 
   emit('update:bounds', map.getBounds()); // XXX: this event populates the map
@@ -69,8 +69,6 @@ function initializeMap() {
 function renderCurrentLocation() {
   if (!props.currentLocation)
     return;
-  else
-    console.log('Current location:', props.currentLocation);
 
   if (currentLocationLayer) {
     map.removeLayer(currentLocationLayer);
diff --git a/webapp/src/components/layout/Footer.vue b/webapp/src/components/layout/Footer.vue
new file mode 100644
index 0000000..dc38d70
--- /dev/null
+++ b/webapp/src/components/layout/Footer.vue
@@ -0,0 +1,95 @@
+<template>
+  <v-footer>
+    <v-container>
+      <v-row align-items="center" justify="center">
+
+        <v-col cols="12" class="mt-4">
+          <v-img height="30" contain src="/deflock-logo-grey.svg" />
+        </v-col>
+        
+        <!-- Internal Links -->
+        <v-col cols="7" sm="3">
+          <v-list density="compact">
+            <v-list-subheader>Info</v-list-subheader>
+            <v-list-item
+              v-for="link in internalLinks"
+              :key="link.title"
+              link
+              :to="link.to"
+              slim
+            >
+                <v-list-item-title class="d-flex align-center">
+                <v-icon class="custom-icon" start :icon="link.icon" />
+                {{ link.title }}
+                </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-col>
+
+        <!-- External Links -->
+        <v-col cols="5" sm="3">
+          <v-list density="compact">
+            <v-list-subheader>Get Involved</v-list-subheader>
+            <v-list-item
+              v-for="link in externalLinks"
+              :key="link.title"
+              link
+              slim
+              :href="link.href"
+              :to="link.to"
+              :target="link.href ? '_blank' : undefined"
+            >
+              <v-list-item-title class="d-flex align-center justify-start">
+                <v-icon start v-if="link.icon" class="custom-icon" :icon="link.icon"></v-icon>
+                <img v-else-if="link.customIcon" class="mr-2 custom-icon" width="24" height="24" :src="isDark ? link.customIconDark : link.customIcon" />
+                {{ link.title }}
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-col>
+
+        <!-- Copyright -->
+        <v-col
+          class="text-center serif copyright d-flex align-center justify-center text-grey-darken-1"
+          cols="12"
+          sm="6"
+        >
+        <div>
+          <p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
+          <p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
+        </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-footer>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+const theme = useTheme();
+const isDark = computed(() => theme.name.value === 'dark');
+const currentYear = new Date().getFullYear();
+
+const internalLinks = [
+  { title: 'About', to: '/about', icon: 'mdi-information' },
+  { title: 'Privacy Policy', to: '/privacy', icon: 'mdi-shield' },
+  { title: 'Terms of Service', to: '/terms', icon: 'mdi-file-document' },
+  { title: 'Contact', to: '/contact', icon: 'mdi-email' },
+];
+
+const externalLinks = [
+  { title: 'Discord', href: 'https://discord.gg/aV7v4R3sKT', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg' },
+  { title: 'Donate', to: '/donate', icon: 'mdi-heart' },
+  { title: 'GitHub', href: 'https://github.com/FoggedLens/deflock', icon: 'mdi-github' },
+]
+</script>
+
+<style scoped>
+.custom-icon {
+  opacity: var(--v-medium-emphasis-opacity);
+}
+.copyright {
+  font-size: 0.85rem;
+}
+</style>
diff --git a/webapp/src/main.ts b/webapp/src/main.ts
index 6f0f9c6..41f293f 100644
--- a/webapp/src/main.ts
+++ b/webapp/src/main.ts
@@ -17,6 +17,13 @@ const vuetify = createVuetify({
   directives,
   theme: {
     defaultTheme: 'light',
+    themes: {
+      light: {
+        colors: {
+          background: '#f5f5f5',
+        }
+      }
+    }
   }
 })
 
diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index 7c835f2..1a13e2f 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -83,11 +83,19 @@ const router = createRouter({
       }
     },
     {
-      path: '/legal',
-      name: 'legal',
-      component: () => import('../views/LegalView.vue'),
+      path: '/terms',
+      name: 'terms',
+      component: () => import('../views/TermsOfService.vue'),
       meta: {
-        title: 'Legal | DeFlock'
+        title: 'Terms of Service | DeFlock'
+      }
+    },
+    {
+      path: '/privacy',
+      name: 'privacy',
+      component: () => import('../views/PrivacyPolicy.vue'),
+      meta: {
+        title: 'Privacy Policy | DeFlock'
       }
     },
     {
diff --git a/webapp/src/views/AboutView.vue b/webapp/src/views/AboutView.vue
index 3f94594..b4dfa10 100644
--- a/webapp/src/views/AboutView.vue
+++ b/webapp/src/views/AboutView.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container max-width="1000">
+  <v-container max-width="1000" class="mb-16">
     <h2>About Us</h2>
     <p>
       Welcome to DeFlock, your go-to resource for understanding and addressing the growing presence of Automated License Plate Readers (ALPRs) in our communities.
@@ -48,22 +48,13 @@
         Share our site with your friends, family, and social networks to help raise awareness about the dangers of ALPRs.
       </p>
     </div>
-
-    <v-footer class="my-6">
-      <v-col cols="7" class="text-grey">
-        &copy; {{ thisYear }} DeFlock. All rights reserved.
-      </v-col>
-      <v-spacer></v-spacer>
-      <v-col cols="5">
-        <p><router-link class="text-grey" to="/legal">Legal</router-link></p>
-        <p><router-link class="text-grey" to="/contact">Contact Us</router-link></p>
-      </v-col>
-    </v-footer>
   </v-container>
+
+  <Footer />
 </template>
 
 <script setup lang="ts">
-const thisYear = new Date().getFullYear();
+import Footer from '@/components/layout/Footer.vue';
 </script>
 
 <style scoped>
diff --git a/webapp/src/views/ContactView.vue b/webapp/src/views/ContactView.vue
index 742008a..f5ce89c 100644
--- a/webapp/src/views/ContactView.vue
+++ b/webapp/src/views/ContactView.vue
@@ -1,14 +1,63 @@
 <template>
-  <v-container max-width="1000">
-    <h2>Contact Us</h2>
-    <p>
-      If you have any questions or concerns about the data on this site, please contact us at <a href="mailto:contact@deflock.me">contact@deflock.me</a>.
-    </p>
+  <v-container class="mb-16 text-center">
+    <h1>Contact Us</h1>
+
+    <div>
+      <p>
+        Have questions about DeFlock? Need help contributing to OpenStreetMap?
+      </p>
+      <p>
+        Reach out using the contact options below.
+      </p>
+    </div>
+
+    <v-row class="mt-12">
+      <v-col cols="12" sm="6">
+        <v-card
+          variant="outlined"
+          append-icon="mdi-open-in-new"
+          class="mx-auto my-2"
+          href="mailto:contact@deflock.me"
+          max-width="344"
+          prepend-icon="mdi-email"
+          subtitle="contact@deflock.me"
+          target="_blank"
+          title="Email Us"
+        ></v-card>
+      </v-col>
+
+      <v-col cols="12" sm="6">
+        <v-card
+          variant="outlined"
+          append-icon="mdi-open-in-new"
+          class="mx-auto my-2"
+          href="https://discord.gg/aV7v4R3sKT"
+          max-width="344"
+          subtitle="discord.gg/aV7v4R3sKT"
+          target="_blank"
+          title="Join our Discord"
+        >
+          <template v-slot:prepend>
+            <v-img class="mr-2" contain width="24" height="24" :src="isDark ? 'icon-discord-white.svg' : 'icon-discord.svg'" />
+          </template>
+        </v-card>
+      </v-col>
+    </v-row>
   </v-container>
+  
+  <Footer />
 </template>
 
-<style scoped>
-p {
-  margin-top: 0.5rem;
-}
+<script setup lang="ts">
+import Footer from '@/components/layout/Footer.vue';
+import { useTheme } from 'vuetify';
+import { computed } from 'vue';
+
+const theme = useTheme();
+const isDark = computed(() => theme.name.value === 'dark');
+</script>
+ 
+<style lang="css" scoped>
+@import url('@/assets/typography.css');
 </style>
+
diff --git a/webapp/src/views/Dangers.vue b/webapp/src/views/Dangers.vue
index 774e34b..a54f0b3 100644
--- a/webapp/src/views/Dangers.vue
+++ b/webapp/src/views/Dangers.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="info-section">
+  <v-container class="info-section mb-16">
     <!-- Hero Section -->
     <v-row justify="center" class="hero-section-harms text-center mb-4">
       <v-col cols="12" md="8">
@@ -21,12 +21,15 @@
       </v-col>
     </v-row>
     
-    <dangers />
+    <dangers showAll />
   </v-container>
+
+  <Footer />
 </template>
 
 <script setup lang="ts">
 import Dangers from '@/components/Dangers.vue';
+import Footer from '@/components/layout/Footer.vue';
 </script>
 
 <style scoped>
@@ -57,8 +60,4 @@ import Dangers from '@/components/Dangers.vue';
 p {
   margin-bottom: 16px;
 }
-
-.info-section {
-  background: var(--df-page-background-color);
-}
 </style>
diff --git a/webapp/src/views/Donate.vue b/webapp/src/views/Donate.vue
index ba6321a..d730860 100644
--- a/webapp/src/views/Donate.vue
+++ b/webapp/src/views/Donate.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="sponsor-page">
+  <v-container fluid class="sponsor-page">
     <!-- Hero Section -->
     <v-row justify="center" class="hero-section-sponsor text-center mb-4">
       <v-col cols="12" md="8">
@@ -14,10 +14,13 @@
     <!-- GitHub Sponsors Section -->
     <v-row justify="center" class="sponsors-section text-center">
       <v-col cols="12" md="10">
-        <h2 class="mb-4">Our Amazing Sponsors</h2>
+        <h2 class="mb-2">Our Amazing Sponsors</h2>
+        <p class="mb-8">
+          Want to see your name here? <a href="https://github.com/sponsors/frillweeman">Become a sponsor</a>, and your name will appear on this page!
+        </p>
         <v-row>
           <v-col v-for="sponsor in sponsors" :key="sponsor.login" cols="6" md="4" lg="3">
-            <v-card variant="flat" class="text-center py-2">
+            <v-card :href="sponsor.url" target="_blank" variant="flat" class="text-center py-2" color="transparent">
               <v-avatar size="64px" class="mb-3">
                 <v-img :src="sponsor.avatarUrl" :alt="sponsor.name" />
               </v-avatar>
@@ -27,26 +30,36 @@
         </v-row>
       </v-col>
     </v-row>
-  </v-container>
 
-  <!-- Footer Section -->
-  <v-footer class="text-center mt-8">
-    <v-row>
-      <v-col>
-        <p>&copy; {{ new Date().getFullYear() }} DeFlock. All rights reserved.</p>
+    <!-- GitHub Sponsors Section -->
+    <v-row justify="center" class="sponsors-section text-center mt-4">
+      <v-col cols="12" md="10">
+        <h2 class="mb-2">Special Thanks</h2>
+        
+        <v-card href="https://www.404media.co/" target="_blank" max-width="250" variant="flat" class="text-center py-2 mx-auto" color="transparent">
+          <v-img class="ma-4" src="/404media.svg" alt="404 Media Logo" contain />
+          <v-card-title class="mt-2 serif text-center font-weight-bold">404 Media</v-card-title>
+          <v-card-text>
+            <p>Special thanks to Jason Koebler at 404 Media for popularizing this project. Be sure to support them, as they are fellow privacy advocates.</p>
+          </v-card-text>
+        </v-card>
       </v-col>
     </v-row>
-  </v-footer>
+  </v-container>
+
+  <Footer />
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, type Ref } from "vue";
 import { getSponsors } from "@/services/apiService";
+import Footer from "@/components/layout/Footer.vue";
 
 interface Sponsor {
   login: string;
   name: string;
   avatarUrl: string;
+  url: string;
 }
 
 const sponsors: Ref<Sponsor[]> = ref([]);
diff --git a/webapp/src/views/Landing.vue b/webapp/src/views/Landing.vue
index 95a0ef4..ada307c 100644
--- a/webapp/src/views/Landing.vue
+++ b/webapp/src/views/Landing.vue
@@ -1,78 +1,90 @@
 <template>
   <!-- Hero Section -->
   <v-container fluid class="hero-section">
-     <v-row justify="center">
-       <v-col cols="12" md="8" class="text-center">
-       <h1 class="display-1 px-8">You're Being Tracked by ALPRs!</h1>
-         <ALPRCounter class="mt-4" />
-         <p class="subtitle-1 px-8 mt-6 mb-12 bigger">
-           Automated License Plate Readers (ALPRs) are monitoring your every move. Learn more about how they work and how you can protect your privacy.
-         </p>
-         <v-btn color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
-           Find Nearby ALPRs
-           <v-icon end>mdi-map</v-icon>
-         </v-btn>
-       </v-col>
-     </v-row>
-   </v-container>
-
-   <!-- Dangers Section -->
-   <v-container class="py-10 text-center info-section">
-      <h2 class="display-2 mb-4">The Dangers of ALPRs</h2>
-      <p class="subtitle-1 px-8">
-        ALPRs are a threat to your privacy and civil liberties. They can be used to track your movements, profile you, and even stalk you. Learn more about the dangers of ALPRs and how you can protect yourself.
-      </p>
-      
-     <v-row class="align-center mt-4">
-       <v-col cols="12" md="4" class="text-center">
-         <v-card>
-           <v-card-title class="headline">
-             <v-icon x-large class="mr-2">mdi-shield-alert</v-icon>
-             Privacy Violations
-           </v-card-title>
-           <v-card-text>
-             ALPRs track your movements and store your data for long periods of time, creating a detailed record of your location history. They surveil mostly innocent people while claiming to target criminals.
-           </v-card-text>
-         </v-card>
-       </v-col>
-       <v-col cols="12" md="4" class="text-center">
-         <v-card>
-           <v-card-title class="headline">
-             <v-icon x-large class="mr-2">mdi-alert-circle</v-icon>
-             Risk of Misuse
-           </v-card-title>
-           <v-card-text>
-             Data from ALPRs has led to <a target="_blank" href="https://www.newsobserver.com/news/state/north-carolina/article287381160.html">wrongful arrests</a>, profiling, and <a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">stalking ex-partners</a> by police officers.
-           </v-card-text>
-         </v-card>
-       </v-col>
-       <v-col cols="12" md="4" class="text-center">
-         <v-card>
-           <v-card-title class="headline">
-             <v-icon x-large class="mr-2">mdi-handcuffs</v-icon>
-             Limited Benefits
-           </v-card-title>
-           <v-card-text>
-             There's no substantial evidence that ALPRs effectively prevent crime, despite <a target="_blank" href="https://www.404media.co/researcher-who-oversaw-flock-surveillance-study-now-has-concerns-about-it/">Flock's unethical attempts</a> to prove otherwise.
-           </v-card-text>
-         </v-card>
-       </v-col>
-      </v-row>
-
-      <v-btn class="mt-8" color="rgb(18, 151, 195)" large to="/dangers">
-        See All Dangers
-        <v-icon end>mdi-shield-alert</v-icon>
-      </v-btn>
-    </v-container>
-
-   <!-- Map Section -->
-   <v-container class="map-section py-10 text-center">
-     <h2 class="display-2 mb-4">Explore ALPR Locations Near You</h2>
-     <v-btn color="white" large @click="goToMap">
-       View the Map
-       <v-icon end>mdi-map</v-icon>
-     </v-btn>
-   </v-container>
+    <v-row justify="center">
+      <v-col cols="12" md="8" class="text-center">
+        <h1 class="display-1 px-8">You're Being Tracked by ALPRs!</h1>
+        <ALPRCounter class="mt-4" />
+        <p class="subtitle-1 px-8 mt-6 mb-12 bigger">
+          Automated License Plate Readers (ALPRs) are monitoring your every move. Learn more about how they work and how you can protect your privacy.
+        </p>
+        <v-btn color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
+          Find Nearby ALPRs
+          <v-icon end>mdi-map</v-icon>
+        </v-btn>
+        
+        <!-- Featured On Section -->
+        <v-container class="featured-on-section mt-10">
+          <h4 class="mb-8" style="opacity: 0.8">Featured On</h4>
+          <v-row justify="center" align-items="center">
+            <v-card flat v-for="site in featuredOn" class="mx-4" :width="site.wide ? 200 : 100" height="50" :href="site.url" target="_blank" style="background: rgba(0,0,0,0)">
+              <v-img contain :src="site.logo" :alt="site.name" class="featured-logo" style="display: flex; align-items: center; height: 100%;" />
+            </v-card>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-container>
+  
+  <!-- Dangers Section -->
+  <v-container class="py-10 text-center info-section">
+    <h2 class="display-2 mb-4">The Dangers of ALPRs</h2>
+    <p class="subtitle-1 px-8">
+      ALPRs are a threat to your privacy and civil liberties. They can be used to track your movements and profile you, and even stalk you. Learn more about the dangers of ALPRs and how you can protect yourself.
+    </p>
+    
+    <v-row class="align-center mt-4">
+      <v-col cols="12" md="4" class="text-center">
+        <v-card>
+          <v-card-title class="headline">
+            <v-icon x-large class="mr-2">mdi-shield-alert</v-icon>
+            Privacy Violations
+          </v-card-title>
+          <v-card-text>
+            ALPRs track your movements and store your data for long periods of time, creating a detailed record of your location history. They surveil mostly innocent people while claiming to target criminals.
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="4" class="text-center">
+        <v-card>
+          <v-card-title class="headline">
+            <v-icon x-large class="mr-2">mdi-robber</v-icon>
+            Risk of Misuse
+          </v-card-title>
+          <v-card-text>
+            Data from ALPRs has led to <a target="_blank" href="https://www.newsobserver.com/news/state/north-carolina/article287381160.html">wrongful arrests</a>, profiling, and <a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">stalking ex-partners</a> by police officers.
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="4" class="text-center">
+        <v-card>
+          <v-card-title class="headline">
+            <v-icon x-large class="mr-2">mdi-handcuffs</v-icon>
+            Limited Benefits
+          </v-card-title>
+          <v-card-text>
+            There's no substantial evidence that ALPRs effectively prevent crime, despite <a target="_blank" href="https://www.404media.co/researcher-who-oversaw-flock-surveillance-study-now-has-concerns-about-it/">Flock's unethical attempts</a> to prove otherwise.
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+    
+    <v-btn class="mt-8" color="rgb(18, 151, 195)" large to="/dangers">
+      <v-icon start>mdi-book-open-page-variant</v-icon>
+      See All Dangers
+    </v-btn>
+  </v-container>
+  
+  <!-- Map Section -->
+  <v-container fluid class="map-section py-10 text-center">
+    <h2 class="display-2 mb-4">Explore ALPR Locations Near You</h2>
+    <v-btn color="white" large @click="goToMap">
+      View the Map
+      <v-icon end>mdi-map</v-icon>
+    </v-btn>
+  </v-container>
+  
+  <Footer />
 </template>
 
 <style>
@@ -80,7 +92,7 @@
   background: url('/flock-camera.jpeg') no-repeat center center;
   background-size: cover;
   color: white;
-  padding: 100px 0 !important;
+  padding: 100px 0 50px 0 !important;
   position: relative;
 }
 
@@ -100,10 +112,6 @@
   z-index: 2;
 }
 
-.info-section {
-  background: var(--df-page-background-color);
-}
-
 .map-section {
   background: url('/deflock-screenshot.webp') no-repeat center center;
   background-size: cover;
@@ -130,6 +138,10 @@
 .bigger {
   font-size: 1.1rem;
 }
+
+.featured-logo {
+  opacity: 0.7;
+}
 </style>
 
 
@@ -137,6 +149,7 @@
 import { useRouter } from 'vue-router';
 import ALPRCounter from '@/components/ALPRCounter.vue';
 import { useGlobalStore } from '@/stores/global';
+import Footer from '@/components/layout/Footer.vue';
 
 const router = useRouter();
 const { setCurrentLocation } = useGlobalStore();
@@ -145,6 +158,25 @@ interface GoToMapOptions {
   withCurrentLocation?: boolean;
 }
 
+const featuredOn = [
+{
+  name: 'Forbes',
+  logo: '/white-logos/forbes.svg',
+  url: 'https://www.forbes.com/sites/larsdaniel/2024/11/26/think-youre-not-being-watched-deflock-says-think-again/',
+},
+{
+  name: '404 Media',
+  logo: '/white-logos/404media.svg',
+  url: 'https://www.404media.co/the-open-source-project-deflock-is-mapping-license-plate-surveillance-cameras-all-over-the-world/',
+},
+{
+  name: 'LA Times',
+  logo: '/white-logos/latimes.svg',
+  url: 'https://www.latimes.com/california/story/2024-11-14/are-there-automated-license-plate-readers-in-your-city-theres-an-open-source-program-for-that',
+  wide: true,
+}
+];
+
 async function goToMap(options: GoToMapOptions = {}) {
   if (options.withCurrentLocation) {
     setCurrentLocation()
diff --git a/webapp/src/views/LegalView.vue b/webapp/src/views/LegalView.vue
deleted file mode 100644
index bbd62e3..0000000
--- a/webapp/src/views/LegalView.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <v-container max-width="1000">
-    <h1>Legal</h1>
-    <h2>Attribution</h2>
-    <p>
-      This website uses data from <a href="https://openstreetmap.org" target="_blank">OpenStreetMap</a>. OpenStreetMap is open data, licensed under the <a href="https://opendatacommons.org/licenses/odbl/" target="_blank">Open Data Commons Open Database License (ODbL)</a>.
-    </p>
-    <p>
-      Geocoding services are provided by <a href="https://nominatim.org/" target="_blank">Nominatim</a>, a project of OpenStreetMap.
-    </p>
-
-    <h2>Privacy Policy</h2>
-    <h3>Plausible Analytics</h3>
-
-    <p>
-      We use Plausible Analytics to track anonymous usage data. Plausible does not use cookies or collect personally identifiable information. The data collected is used solely to understand how people are using the site and to improve user experience.
-    </p>
-    <p>
-      No data is shared with third parties, and no personally identifiable information is stored or collected.
-    </p>
-
-    <h3>User Reports</h3>
-    <p>
-      At this time, DeFlock.me does not collect or store user-submitted reports. Users are directed to submit ALPR camera locations directly to OpenStreetMap via their editing platform, which has its own privacy policy and data practices.
-    </p>
-
-    <h2>Terms of Use</h2>
-
-    <h3>Use of the Website</h3>
-    <p>
-      DeFlock.me provides a service to help users locate and report Automated License Plate Reader (ALPR) cameras through external services like OpenStreetMap. By using this site, you agree to use the tools and resources in a lawful and ethical manner.
-    </p>
-
-    <h3>Liability Disclaimer</h3>
-    <p>
-      DeFlock.me provides information and directs users to third-party services for ALPR reporting. We do not guarantee the accuracy or completeness of the data presented on the map.
-    </p>
-    <p>
-      DeFlock.me and its operators are not liable for any direct or indirect damages arising from the use of the site, including reliance on third-party data or the submission of ALPR locations via OpenStreetMap.
-    </p>
-
-    <h2>User-Generated Content</h2>
-    <p>
-      DeFlock.me does not currently accept user-generated reports directly. All ALPR camera reports are directed to OpenStreetMap&apos;s editing platform. Users should follow OSM&apos;s guidelines and policies when submitting data.
-    </p>
-    <p>
-      In the future, we may add the ability to report ALPR cameras directly on this site. At that time, additional policies will be introduced regarding the use and storage of user-generated content.
-    </p>
-
-    <h2>Copyright Notice</h2>
-    <p>
-      All original content, design, and features of DeFlock.me are © {{ thisYear }} DeFlock.me. All rights reserved. Reproduction, distribution, or use of site content without permission is prohibited.
-    </p>
-    <p>
-      OpenStreetMap data is © OpenStreetMap contributors and is licensed under the Open Data Commons Open Database License (ODbL).
-    </p>
-
-  </v-container>
-</template>
-
-<script setup lang="ts">
-const thisYear = new Date().getFullYear();
-</script>
-
-<style scoped>
-/* TODO: put this all in one place, also in what-is view */
-h2 {
-  margin-top: 2rem;
-}
-
-h3 {
-  margin-top: 1.25rem;
-}
-
-p {
-  margin-top: 0.5rem;
-}
-
-/* as you can see, this one is the most updated */
-a {
-  color: var(green);
-  text-decoration: none;
-}
-</style>
diff --git a/webapp/src/views/OperatorsView.vue b/webapp/src/views/OperatorsView.vue
index a75a770..16b808a 100644
--- a/webapp/src/views/OperatorsView.vue
+++ b/webapp/src/views/OperatorsView.vue
@@ -51,12 +51,15 @@
       We are getting a lot of new datasets and trying to decide how to import them at a large scale, since they need to be verified and deduplicated. If you have any ideas or want to help, please reach out to us <router-link to="/contact">here</router-link> or join our <a href="https://discord.gg/aV7v4R3sKT" target="_blank">Discord</a>.
     </p>
   </v-container>
+
+  <Footer />
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref, computed, watch } from 'vue';
 import { getCities } from '@/services/apiService';
 import CommunityDatasets from '@/components/CommunityDatasets.vue';
+import Footer from '@/components/layout/Footer.vue';
 
 const page = ref(1);
 const selectedState = ref('');
@@ -125,8 +128,4 @@ code {
   border-radius: 0.25rem;
   font-weight: bold;
 }
-
-.info-section {
-  background: var(--df-page-background-color);
-}
 </style>
diff --git a/webapp/src/views/PrivacyPolicy.vue b/webapp/src/views/PrivacyPolicy.vue
new file mode 100644
index 0000000..b641906
--- /dev/null
+++ b/webapp/src/views/PrivacyPolicy.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-container class="mb-16">
+    <h1>Privacy Policy</h1>
+    <p>Effective Date: <b>12/26/2024</b></p>
+
+    <p>
+      At DeFlock, we respect your privacy. This privacy policy outlines our approach to user privacy and how information may be handled when using our platform.
+    </p>
+
+    <h2>Information We Collect</h2>
+    <p>
+      DeFlock does not collect, store, or process any personal information about our users. We do not use cookies, analytics, or tracking technologies on our website.
+    </p>
+
+    <h2>Third-Party Services</h2>
+    <p>
+      DeFlock relies on OpenStreetMap (OSM) for map data and functionality. If you choose to contribute Automatic License Plate Recognition (ALPR) data or other content to OSM, you will interact directly with their platform. OSM may request personal information, such as your email address and name, to facilitate your contributions. Please refer to the OpenStreetMap Privacy Policy for details on their data practices.
+    </p>
+
+    <h2>Your Choices</h2>
+    <p>
+      If you prefer not to share personal information, you are not required to contribute to OSM to use DeFlock. You can still enjoy the map data we source from OSM without uploading additional information.
+    </p>
+
+    <h2>Contact Us</h2>
+    <p>
+      If you have any questions or concerns about this privacy policy, please contact us at:
+    </p>
+    <p>
+      Email: <a href="mailto:contact@deflock.me">contact@deflock.me</a>
+    </p>
+
+    <h2>Policy Updates</h2>
+    <p>
+      We may update this privacy policy from time to time to reflect changes in our practices or for legal compliance. The "Effective Date" above will indicate when the latest changes were made.
+    </p>
+  </v-container>
+
+  <Footer />
+</template>
+
+<script setup lang="ts">
+import Footer from '@/components/layout/Footer.vue';
+</script>
+ 
+<style lang="css" scoped>
+@import url('@/assets/typography.css');
+</style>
diff --git a/webapp/src/views/ReportView.vue b/webapp/src/views/ReportView.vue
index c2d6737..c994bc5 100644
--- a/webapp/src/views/ReportView.vue
+++ b/webapp/src/views/ReportView.vue
@@ -1,31 +1,11 @@
 <template>
   <v-container class="info-section" max-width="1000">
-    <v-alert
-      variant="tonal"
-      type="info"
-      class="my-6"
-      title="Reporting Feature Coming Soon"
-    >
-      <p>
-        We're working on a feature that will allow you to report ALPRs directly on this site. In the meantime, you can follow the steps below to add the ALPR to OpenStreetMap.
-      </p>
-    </v-alert>
+
     <h2>How to Report an ALPR</h2>
     <p>
       If you've spotted an ALPR in your area, you can help us track it by reporting it to OpenStreetMap, where we source our information. Here's how you can do it:
     </p>
 
-    <v-alert
-      variant="tonal"
-      type="warning"
-      class="my-6"
-      title="Are you sure it's an ALPR?"
-    >
-      <p>
-        Before you report an ALPR, please read our <router-link style="color: unset !important" to="/what-is-an-alpr#not-alpr">guide on what ALPRs look like</router-link> to make sure you're reporting the right thing.
-      </p>
-    </v-alert>
-
     <div class="ml-4 mt-4">
       <h3>1. Create an OpenStreetMap Account</h3>
       <p>
@@ -69,6 +49,17 @@
         Once you've added the ALPR to the map, click the <strong>Save</strong> button in the top left corner of the editor. You'll be asked to provide a brief description of your changes. Once you've submitted your changes, the ALPR will be added to OpenStreetMap.
       </p>
 
+      <v-alert
+        variant="tonal"
+        type="info"
+        class="my-6"
+        title="How Long Will It Take?"
+      >
+        <p>
+          We pull data from OpenStreetMap <i>daily</i>, so it may take up to 24 hours for your changes to appear on this site. Rest assured that your changes will be reflected here soon. As we continue to scale, we hope to reduce this delay.
+        </p>
+      </v-alert>
+
       <h3>6. Hang a Sign</h3>
       <p>
         Download our <a href="/deflock-poster.pdf" target="_blank">ALPR sign</a> and hang it near the ALPR to help raise awareness about the device. Be sure to follow all local laws and regulations when hanging signs.
@@ -76,11 +67,12 @@
 
     </div>
   </v-container>
+  <Footer />
 </template>
 
 <script setup lang="ts">
-import DFCode from '@/components/DFCode.vue';
 import OSMTagSelector from '@/components/OSMTagSelector.vue';
+import Footer from '@/components/layout/Footer.vue';
 </script>
 
 <style scoped>
@@ -118,8 +110,4 @@ code {
   border-radius: 0.25rem;
   font-weight: bold;
 }
-
-.info-section {
-  background: var(--df-page-background-color);
-}
 </style>
diff --git a/webapp/src/views/TermsOfService.vue b/webapp/src/views/TermsOfService.vue
new file mode 100644
index 0000000..a643e10
--- /dev/null
+++ b/webapp/src/views/TermsOfService.vue
@@ -0,0 +1,101 @@
+<template>
+  <v-container class="mb-16">
+    <h1>Terms of Service for DeFlock</h1>
+    <p>Effective Date: <b>12/26/2024</b></p>
+    
+    <p>
+      Welcome to DeFlock. By accessing or using our site, you agree to these Terms of Service. If you do not agree, please refrain from using DeFlock.
+    </p>
+
+    <h2>
+      1. About DeFlock
+    </h2>
+    <p>
+      DeFlock provides access to map data sourced from OpenStreetMap (OSM). Our platform allows users to view maps and provides examples of OSM tags for contributing Automatic License Plate Recognition (ALPR) data or other information to OSM.
+    </p>
+
+    <h2>
+      2. User Responsibilities
+    </h2>
+    <h3>
+      2.1 Tagging Guidance
+    </h3>
+    <p>
+      While DeFlock provides examples of OSM tags that may be relevant for your contributions, it is the user’s responsibility to ensure the accuracy and appropriateness of the tags used when uploading to OSM. DeFlock is not liable for any consequences arising from incorrect or inappropriate tagging.
+    </p>
+
+    <h3>
+      2.2 Prohibited Uses
+    </h3>
+    <p>
+      DeFlock must not be used for any of the following purposes:
+    </p>
+
+    <ul class="serif">
+      <li>Locating specific nodes, ways, or relations on OpenStreetMap for the purpose of vandalism, including deleting accurate information or modifying it to be false or misleading.</li>
+      <li>Scraping, harvesting, or systematically collecting data from DeFlock or OpenStreetMap in violation of their terms or for unauthorized purposes.</li>
+      <li>Impersonating other contributors or providing false information when contributing to OpenStreetMap.</li>
+      <li>Using DeFlock or its guidance to create commercial products or services without proper attribution or compliance with OpenStreetMap's licensing terms.</li>
+      <li>Attempting to disrupt or interfere with the functionality of DeFlock, including through hacking, reverse engineering, or introducing malicious software.</li>
+      <li>Using DeFlock in ways that promote hate speech, harassment, or illegal activities.</li>
+    </ul>
+
+    <p>
+      By using DeFlock, you agree to comply with all applicable laws and regulations.
+    </p>
+
+    <h2>
+      3. Third-Party Services
+    </h2>
+    <p>
+      DeFlock integrates with OpenStreetMap, and any interactions with OSM are governed by their terms of use. DeFlock is not responsible for the collection, storage, or use of data by OSM or any third-party services. For more information, please review the OpenStreetMap Terms of Use.
+    </p>
+
+    <h2>4. Disclaimer of Liability</h2>
+    <p>
+      DeFlock is provided "as is" without warranties of any kind. We do not guarantee the accuracy, reliability, or completeness of any map data or tagging guidance provided. DeFlock is not liable for any issues arising from:
+    </p>
+
+    <ul class="serif">
+      <li>The accuracy or use of data sourced from OpenStreetMap.</li>
+      <li>Contributions made to OpenStreetMap, including tagging errors or disputes.</li>
+      <li>Any unauthorized or prohibited use of our platform.</li>
+    </ul>
+
+    <h2>5. Intellectual Property</h2>
+    <p>
+      All content provided by DeFlock, including design, text, and logos, is the intellectual property of DeFlock unless otherwise noted. Users may not copy, distribute, or modify this content without prior written permission.
+    </p>
+    <p>
+      DeFlock's source code is licensed under the MIT License. For details, please refer to the <a target="_blank" href="https://github.com/FoggedLens/deflock?tab=MIT-1-ov-file#readme">LICENSE file</a>.
+    </p>
+
+    <h2>6. Termination of Use</h2>
+    <p>
+      We reserve the right to suspend or terminate access to DeFlock at our sole discretion if we believe a user has violated these Terms of Service.
+    </p>
+
+    <h2>7. Changes to the Terms of Service</h2>
+    <p>
+      DeFlock reserves the right to update or modify these Terms of Service at any time. Changes will be effective upon posting to our website. Continued use of DeFlock constitutes acceptance of the updated terms.
+    </p>
+
+    <h2>8. Contact Us</h2>
+    <p>
+      If you have any questions or concerns regarding these Terms of Service, please contact us at:
+    </p>
+    <p>
+      Email: <a href="mailto:contact@deflock.me">contact@deflock.me</a>
+    </p>
+  </v-container>
+
+  <Footer />
+</template>
+
+<script setup lang="ts">
+import Footer from '@/components/layout/Footer.vue';
+</script>
+ 
+<style lang="css" scoped>
+@import url('@/assets/typography.css');
+</style>
diff --git a/webapp/src/views/WhatIsAnALPRView.vue b/webapp/src/views/WhatIsAnALPRView.vue
index a5b481b..6ec28e7 100644
--- a/webapp/src/views/WhatIsAnALPRView.vue
+++ b/webapp/src/views/WhatIsAnALPRView.vue
@@ -63,11 +63,14 @@
       </div>
     </div>
   </v-container>
+
+  <Footer />
 </template>
 
 <script setup lang="ts">
 import { useRoute } from 'vue-router';
 import Dangers from '@/components/Dangers.vue';
+import Footer from '@/components/layout/Footer.vue';
 const route = useRoute();
 
 const flockImageCount = 6;
@@ -115,8 +118,4 @@ li {
   padding: 0.5rem;
   border-radius: 0.25rem;
 }
-
-.info-section {
-  background: var(--df-page-background-color);
-}
 </style>

From 47f569640340bec7ac8769309facde866708f4df Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Fri, 27 Dec 2024 13:30:44 -0700
Subject: [PATCH 16/18] Report view uses vertical stepper

---
 webapp/src/components/DFCode.vue         |   1 +
 webapp/src/components/OSMTagSelector.vue | 113 +++++++-------
 webapp/src/views/ReportView.vue          | 182 ++++++++++++-----------
 3 files changed, 152 insertions(+), 144 deletions(-)

diff --git a/webapp/src/components/DFCode.vue b/webapp/src/components/DFCode.vue
index 47be6f4..82e97d0 100644
--- a/webapp/src/components/DFCode.vue
+++ b/webapp/src/components/DFCode.vue
@@ -43,6 +43,7 @@ code {
   border-radius: 0.25rem;
   display: block;
   margin-top: 0.5rem;
+  overflow-x: scroll;
 }
 
 .copy-button {
diff --git a/webapp/src/components/OSMTagSelector.vue b/webapp/src/components/OSMTagSelector.vue
index 3d009cd..c9f54f0 100644
--- a/webapp/src/components/OSMTagSelector.vue
+++ b/webapp/src/components/OSMTagSelector.vue
@@ -1,54 +1,56 @@
 <template>
-  <v-row style="align-items: center; margin-top: 1.25rem;">
-    <v-col cols="12" sm="6">
-      <h2 class="text-center mb-4">Choose Brand</h2>
-      <v-row>
-        <v-col v-for="brand in alprBrands" :key="brand.wikidata" cols="6">
-          <v-card
-            @click="selectedBrand = brand"
-            class="text-center"
-            :class="{ selected: selectedBrand.wikidata === brand.wikidata }"
-            :image="brand.exampleImage"
-            min-height="180"
-          >
-            <v-card-title class="overlay">{{ brand.nickname }}</v-card-title>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-col>
+  <v-row class="align-center justify-center my-4">
+      <v-col cols="12" sm="6">
+        <v-select
+          color="rgb(18, 151, 195)"
+          prepend-inner-icon="mdi-factory"
+          v-model="selectedBrand"
+          :items="alprBrands"
+          item-title="nickname"
+          return-object
+          label="Manufacturer"
+          variant="solo-filled"
+          flat
+          hide-details
+        ></v-select>
+        <v-img
+          v-if="selectedBrand"
+          :src="selectedBrand.exampleImage"
+          :alt="selectedBrand.nickname"
+          max-width="100%"
+          class="my-4"
+        ></v-img>
+      </v-col>
+    
+      <v-col cols="12" sm="6">
+        <h3 class="text-center serif">Tags to Copy</h3>
+        <DFCode>
+          man_made=surveillance<br>
+          surveillance:type=ALPR<br>
+          camera:mount=pole<br>
+          camera:type=fixed<br>
+          surveillance=public<br>
+          surveillance:zone=traffic<br>
+          manufacturer=<span class="highlight">{{ selectedBrand.name }}</span><br>
+          manufacturer:wikidata=<span class="highlight">{{ selectedBrand.wikidata }}</span><br>
+        </DFCode>
 
-    <v-col cols="12" sm="6">
-      <h3 class="text-center">{{ selectedBrand.nickname }}</h3>
-      <DFCode>
-        man_made=surveillance<br>
-        surveillance:type=ALPR<br>
-        camera:mount=pole<br>
-        camera:type=fixed<br>
-        surveillance=public<br>
-        surveillance:zone=traffic<br>
-        manufacturer=<span class="highlight">{{ selectedBrand.name }}</span><br>
-        manufacturer:wikidata=<span class="highlight">{{ selectedBrand.wikidata }}</span><br>
-      </DFCode>
+        <h5 class="text-center mt-4 serif">and if operator is known</h5>
+        <DFCode>
+          operator=<span class="highlight">(Police Dept/Owner)</span><br>
+          operator:wikidata=<span class="highlight">(WikiData ID)</span><br>
+        </DFCode>
 
-      <h5 class="text-center mt-4">and if operator is known</h5>
-      <DFCode>
-        operator=<span class="highlight">(Police Dept/Owner)</span><br>
-        operator:wikidata=<span class="highlight">(WikiData ID)</span><br>
-      </DFCode>
-
-      <v-alert
-        v-if="selectedBrand.nickname === 'Other'"
-        class="mt-4"
-        variant="tonal"
-        type="warning"
-        icon="mdi-information"
-        title="Missing a brand?"
-      >
-        Please let us know by <a href="/contact">contacting us</a> or by <a href="https://github.com/frillweeman/deflock" target="_blank">contributing</a> to the project.
-      </v-alert>
-    </v-col>
-
-  </v-row>
+        <v-alert
+          v-if="selectedBrand.nickname === 'Other'"
+          class="mt-4"
+          variant="tonal"
+          type="info"
+        >
+          Please provide additional details about the ALPR.
+        </v-alert>
+      </v-col>
+    </v-row>
 </template>
 
 <script setup lang="ts">
@@ -65,27 +67,26 @@ const alprBrands: WikidataItem[] = [
   },
   {
     name: 'Motorola Solutions',
-    nickname: 'Motorola',
+    nickname: 'Motorola/Vigilant',
     wikidata: 'Q634815',
     exampleImage: '/vigilant-1.jpg',
   },
+  {
+    name: 'Leonardo',
+    nickname: 'Leonardo/ELSAG',
+    wikidata: 'Q910379',
+    exampleImage: '/elsag.webp',
+  },
   {
     name: 'Neology, Inc.',
     nickname: 'Neology',
     wikidata: 'Q130958232',
     exampleImage: '/neology-1.jpg',
   },
-  {
-    name: 'Leonardo',
-    nickname: 'Leonardo',
-    wikidata: 'Q910379',
-    exampleImage: '/elsag.webp',
-  },
   {
     name: '(brand goes here)',
     nickname: 'Other',
     wikidata: '(wikidata goes here)',
-    exampleImage: '/other-1.jpeg',
   }
 ];
 const selectedBrand: Ref<WikidataItem> = ref(alprBrands[0]);
diff --git a/webapp/src/views/ReportView.vue b/webapp/src/views/ReportView.vue
index c994bc5..9e18e72 100644
--- a/webapp/src/views/ReportView.vue
+++ b/webapp/src/views/ReportView.vue
@@ -1,71 +1,106 @@
 <template>
-  <v-container class="info-section" max-width="1000">
+  <v-container>
+    <h1 class="text-center">Report an ALPR</h1>
 
-    <h2>How to Report an ALPR</h2>
     <p>
       If you've spotted an ALPR in your area, you can help us track it by reporting it to OpenStreetMap, where we source our information. Here's how you can do it:
     </p>
 
-    <div class="ml-4 mt-4">
-      <h3>1. Create an OpenStreetMap Account</h3>
-      <p>
-        <a href="https://www.openstreetmap.org/user/new" target="_blank">Sign up for an OpenStreetMap account</a> in order to submit changes.
-      </p>
+    <v-stepper-vertical color="rgb(18, 151, 195)" v-model="step" flat non-linear class="my-8" edit-icon="mdi-home">
+      <template v-slot:default="{ step }: { step: any }">
+        <v-stepper-vertical-item
+          :complete="step > 1"
+          title="Create an OpenStreetMap Account"
+          value="1"
+          editable
+        >
+          <p>
+            <a href="https://www.openstreetmap.org/user/new" target="_blank">Sign up for an OpenStreetMap account</a> in order to submit changes.
+          </p>
+        </v-stepper-vertical-item>
 
-      <h3>2. Find the ALPR's Location on OpenStreetMap</h3>
-      <p>
-        <a href="https://www.openstreetmap.org" target="_blank">Launch OpenStreetMap</a> and search for the location of the ALPR. You can use the search bar at the top of the page to find the location.
-      </p>
+        <v-stepper-vertical-item
+          :complete="step > 2"
+          title="Find the ALPR's Location"
+          value="2"
+          editable
+        >
+          <p>
+            <a href="https://www.openstreetmap.org" target="_blank">Launch OpenStreetMap</a> and search for the location of the ALPR. You can use the search bar at the top of the page to find the location.
+          </p>
+        </v-stepper-vertical-item>
 
-      <h3>3. Add the ALPR to OpenStreetMap</h3>
-      <p>
-        Once you've found the location of the ALPR, click the <strong>Edit</strong> button in the top left corner of the page. This will open the OpenStreetMap editor, where you can add the ALPR to the map.
-      </p>
+        <v-stepper-vertical-item
+          :complete="step > 3"
+          title="Add the ALPR to OpenStreetMap"
+          value="3"
+          editable
+        >
+          <p>
+            Once you've found the location of the ALPR, click the <strong>Edit</strong> button in the top left corner of the page. This will open the OpenStreetMap editor, where you can add the ALPR to the map.
+          </p>
+          <v-img max-width="450" src="/edit-map.png" class="my-8 mx-auto" />
+          <p class="mt-16 mb-8">
+            To add the ALPR, click the <strong>Point</strong> button in the top left corner of the editor, then click on the location of the ALPR on the map. In the popup that appears, paste one of the following sets of tags based on the brand of the ALPR:
+          </p>
 
-      <v-img max-width="450" src="/edit-map.png" class="my-8" />
+          <v-divider class="my-4"><span class="serif text-grey-darken-2">Choose a Manufacturer</span></v-divider>
 
-      <p>
-        To add the ALPR, click the <strong>Point</strong> button in the top left corner of the editor, then click on the location of the ALPR on the map. In the popup that appears, paste one of the following sets of tags based on the brand of the ALPR:
-      </p>
+          <OSMTagSelector />
 
-      <OSMTagSelector />
+          <v-divider class="mb-4 mt-8" />
+          
+          <p class="mt-8">
+            After copying the tags, paste them into the <strong>Tags</strong> field in the popup.
+          </p>
+          <v-img max-width="450" class="my-8 mx-auto" src="/paste-tags.png" />
+        </v-stepper-vertical-item>
 
-      <p class="mt-8">
-        After copying the tags, paste them into the <strong>Tags</strong> field in the popup.
-      </p>
+        <v-stepper-vertical-item
+          :complete="step > 4"
+          title="Adjust the Direction"
+          value="4"
+          editable
+        >
+          <v-img max-width="450" class="my-8" src="/adjust-angle.png" />
+          <p>
+            If you know the direction that the ALPR is facing, you can use the up and down arrows to set the direction it faces.
+          </p>
+        </v-stepper-vertical-item>
 
-      <v-img max-width="450" class="my-8" src="/paste-tags.png" />
+        <v-stepper-vertical-item
+          :complete="step > 5"
+          title="Submit Your Changes"
+          value="5"
+          editable
+        >
+          <p>
+            Once you've added the ALPR to the map, click the <strong>Save</strong> button in the top left corner of the editor. You'll be asked to provide a brief description of your changes. Once you've submitted your changes, the ALPR will be added to OpenStreetMap.
+          </p>
+          <v-alert
+            variant="tonal"
+            type="info"
+            class="my-6"
+            title="How Long Will It Take?"
+          >
+            <p>
+              We pull data from OpenStreetMap <i>daily</i>, so it may take up to 24 hours for your changes to appear on this site. Rest assured that your changes will be reflected here soon. As we continue to scale, we hope to reduce this delay.
+            </p>
+          </v-alert>
+        </v-stepper-vertical-item>
 
-      <h3>4. Adjust the Direction</h3>
-
-      <v-img max-width="450" class="my-8" src="/adjust-angle.png" />
-
-      <p>
-        If you know the direction that the ALPR is facing, you can use the up and down arrows to set the direction it faces.
-      </p>
-
-      <h3>5. Submit Your Changes</h3>
-      <p>
-        Once you've added the ALPR to the map, click the <strong>Save</strong> button in the top left corner of the editor. You'll be asked to provide a brief description of your changes. Once you've submitted your changes, the ALPR will be added to OpenStreetMap.
-      </p>
-
-      <v-alert
-        variant="tonal"
-        type="info"
-        class="my-6"
-        title="How Long Will It Take?"
-      >
-        <p>
-          We pull data from OpenStreetMap <i>daily</i>, so it may take up to 24 hours for your changes to appear on this site. Rest assured that your changes will be reflected here soon. As we continue to scale, we hope to reduce this delay.
-        </p>
-      </v-alert>
-
-      <h3>6. Hang a Sign</h3>
-      <p>
-        Download our <a href="/deflock-poster.pdf" target="_blank">ALPR sign</a> and hang it near the ALPR to help raise awareness about the device. Be sure to follow all local laws and regulations when hanging signs.
-      </p>
-
-    </div>
+        <v-stepper-vertical-item
+          :complete="step > 6"
+          title="Hang a Sign"
+          value="6"
+          editable
+        >
+          <p>
+            Download our <a href="/deflock-poster.pdf" target="_blank">ALPR sign</a> and hang it near the ALPR to help raise awareness about the device. Be sure to follow all local laws and regulations when hanging signs.
+          </p>
+        </v-stepper-vertical-item>
+      </template>
+    </v-stepper-vertical>
   </v-container>
   <Footer />
 </template>
@@ -73,41 +108,12 @@
 <script setup lang="ts">
 import OSMTagSelector from '@/components/OSMTagSelector.vue';
 import Footer from '@/components/layout/Footer.vue';
+import { ref } from 'vue';
+import { VStepperVertical, VStepperVerticalItem } from 'vuetify/labs/VStepperVertical';
+
+const step = ref(1);
 </script>
 
 <style scoped>
-/* TODO: put this all in one place, also in what-is view */
-h2 {
-  margin-top: 2rem;
-}
-
-h3 {
-  margin-top: 1.25rem;
-}
-
-p {
-  margin-top: 0.5rem;
-}
-
-.flex-image {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  margin-top: 0.5rem;
-}
-
-code {
-  background-color: #f4f4f4;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  display: block;
-  margin-top: 0.5rem;
-}
-
-.highlight {
-  background-color: #0081ac;
-  padding: 0.15rem;
-  border-radius: 0.25rem;
-  font-weight: bold;
-}
+@import url('@/assets/typography.css');
 </style>

From 75e12f43a4dfcdd3e14e95c2ab68cc4b8cb074f0 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Fri, 27 Dec 2024 15:13:30 -0700
Subject: [PATCH 17/18] more cleanup

---
 webapp/src/components/DFCode.vue         |   4 +
 webapp/src/components/OSMTagSelector.vue |  12 +-
 webapp/src/views/Donate.vue              |  10 +-
 webapp/src/views/Landing.vue             |  14 +-
 webapp/src/views/WhatIsAnALPRView.vue    | 190 ++++++++++++++---------
 5 files changed, 147 insertions(+), 83 deletions(-)

diff --git a/webapp/src/components/DFCode.vue b/webapp/src/components/DFCode.vue
index 82e97d0..c318e0e 100644
--- a/webapp/src/components/DFCode.vue
+++ b/webapp/src/components/DFCode.vue
@@ -46,6 +46,10 @@ code {
   overflow-x: scroll;
 }
 
+code {
+  white-space: nowrap;
+}
+
 .copy-button {
   position: absolute;
   right: 0;
diff --git a/webapp/src/components/OSMTagSelector.vue b/webapp/src/components/OSMTagSelector.vue
index c9f54f0..b9ba9b0 100644
--- a/webapp/src/components/OSMTagSelector.vue
+++ b/webapp/src/components/OSMTagSelector.vue
@@ -14,6 +14,8 @@
           hide-details
         ></v-select>
         <v-img
+          :aspect-ratio="3/2"
+          cover
           v-if="selectedBrand"
           :src="selectedBrand.exampleImage"
           :alt="selectedBrand.nickname"
@@ -40,15 +42,6 @@
           operator=<span class="highlight">(Police Dept/Owner)</span><br>
           operator:wikidata=<span class="highlight">(WikiData ID)</span><br>
         </DFCode>
-
-        <v-alert
-          v-if="selectedBrand.nickname === 'Other'"
-          class="mt-4"
-          variant="tonal"
-          type="info"
-        >
-          Please provide additional details about the ALPR.
-        </v-alert>
       </v-col>
     </v-row>
 </template>
@@ -87,6 +80,7 @@ const alprBrands: WikidataItem[] = [
     name: '(brand goes here)',
     nickname: 'Other',
     wikidata: '(wikidata goes here)',
+    exampleImage: '/other-1.jpeg',
   }
 ];
 const selectedBrand: Ref<WikidataItem> = ref(alprBrands[0]);
diff --git a/webapp/src/views/Donate.vue b/webapp/src/views/Donate.vue
index d730860..f4f9c89 100644
--- a/webapp/src/views/Donate.vue
+++ b/webapp/src/views/Donate.vue
@@ -18,8 +18,12 @@
         <p class="mb-8">
           Want to see your name here? <a href="https://github.com/sponsors/frillweeman">Become a sponsor</a>, and your name will appear on this page!
         </p>
+
         <v-row>
-          <v-col v-for="sponsor in sponsors" :key="sponsor.login" cols="6" md="4" lg="3">
+          <v-col v-if="isLoadingSponsors" v-for="n in 4" cols="6" md="4" lg="3">
+            <v-skeleton-loader type="image"></v-skeleton-loader>
+          </v-col>
+          <v-col v-else v-for="sponsor in sponsors" :key="sponsor.login" cols="6" md="4" lg="3">
             <v-card :href="sponsor.url" target="_blank" variant="flat" class="text-center py-2" color="transparent">
               <v-avatar size="64px" class="mb-3">
                 <v-img :src="sponsor.avatarUrl" :alt="sponsor.name" />
@@ -63,6 +67,7 @@ interface Sponsor {
 }
 
 const sponsors: Ref<Sponsor[]> = ref([]);
+const isLoadingSponsors = ref(true);
 
 onMounted(() => {
   getSponsors()
@@ -71,6 +76,9 @@ onMounted(() => {
     })
     .catch((error) => {
       console.error(error);
+    })
+    .finally(() => {
+      isLoadingSponsors.value = false;
     });
 });
 </script>
diff --git a/webapp/src/views/Landing.vue b/webapp/src/views/Landing.vue
index ada307c..f727a49 100644
--- a/webapp/src/views/Landing.vue
+++ b/webapp/src/views/Landing.vue
@@ -28,6 +28,14 @@
   
   <!-- Dangers Section -->
   <v-container class="py-10 text-center info-section">
+
+    <h2 class="mb-4">What is an ALPR</h2>
+    <p class="text-left">
+      Automated License Plate Readers (ALPRs) are cameras that capture images of all passing license plates, storing details like the car's location, date, and time. These cameras collect data on millions of vehicles—regardless of whether the driver is suspected of a crime. While these systems can be useful for tracking stolen cars or wanted individuals, they are mostly used to track the movements of innocent people.
+    </p>
+
+    <v-divider class="my-8" />
+
     <h2 class="display-2 mb-4">The Dangers of ALPRs</h2>
     <p class="subtitle-1 px-8">
       ALPRs are a threat to your privacy and civil liberties. They can be used to track your movements and profile you, and even stalk you. Learn more about the dangers of ALPRs and how you can protect yourself.
@@ -69,9 +77,9 @@
       </v-col>
     </v-row>
     
-    <v-btn class="mt-8" color="rgb(18, 151, 195)" large to="/dangers">
+    <v-btn class="mt-8" color="rgb(18, 151, 195)" large to="/what-is-an-alpr">
       <v-icon start>mdi-book-open-page-variant</v-icon>
-      See All Dangers
+      Read More
     </v-btn>
   </v-container>
   
@@ -113,7 +121,7 @@
 }
 
 .map-section {
-  background: url('/deflock-screenshot.webp') no-repeat center center;
+  background: url('/deflock-screenshot.webp') no-repeat right center;
   background-size: cover;
   color: white;
   padding: 100px 0;
diff --git a/webapp/src/views/WhatIsAnALPRView.vue b/webapp/src/views/WhatIsAnALPRView.vue
index 6ec28e7..5d88ff5 100644
--- a/webapp/src/views/WhatIsAnALPRView.vue
+++ b/webapp/src/views/WhatIsAnALPRView.vue
@@ -1,10 +1,11 @@
 <template>
-  <v-container class="info-section" max-width="1000">
-    <p>
-      <v-img max-height="450" width="100%" cover src="/flock-camera.jpeg" />
-    </p>
-
-    <h2>What is an ALPR</h2>
+  <v-container fluid>
+    <v-row justify="center" class="hero-section-whatis text-center mb-4">
+    </v-row>
+  </v-container>
+  
+  <v-container class="info-section">
+    <h1 class="mt-0">What is an ALPR?</h1>
     <p>
       Automated License Plate Readers (ALPRs) are cameras that capture images of all passing license plates, storing details like the car's location, date, and time. These cameras collect data on millions of vehicles—regardless of whether the driver is suspected of a crime. While these systems can be useful for tracking stolen cars or wanted individuals, they are mostly used to track the movements of innocent people.
     </p>
@@ -12,110 +13,159 @@
     <p>For a detailed explanation of how ALPRs are a threat to privacy, see this <a href="https://www.aclu.org/issues/privacy-technology/you-are-being-tracked" target="_blank">ACLU article</a> as well as this <a href="https://sls.eff.org/technologies/automated-license-plate-readers-alprs" target="_blank">EFF article</a> on ALPRs.</p>
 
     <h2>Why Should You Be Concerned</h2>
-    <p class="mb-4">
+    <p class="mb-8 text-center">
       ALPRs invade your privacy and violate your civil liberties. Here's how:
     </p>
 
     <dangers />
 
-    <h2 id="not-alpr" :class="{ highlighted: route.hash === '#not-alpr' }">What They Look Like</h2>
-    <v-carousel class="my-4" hide-delimiters>
-      <v-carousel-item
-        v-for="{ url, brand } in images"
-        :key="url"
-        aspect-ratio="1"
-        :src="url"
-        class="text-center"
-      >
-        <v-chip :rounded="false" color="warning" variant="elevated" size="x-large" style="position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);">
-          <span class="font-weight-bold">Brand: <span class="text-uppercase">{{ brand }}</span></span>
-        </v-chip>
-      </v-carousel-item>
-    </v-carousel>
-    
+    <h2>What They Look Like</h2>
 
-    <p>
-      While <a href="https://en.wikipedia.org/wiki/Flock_Safety" target="_blank">Flock Safety</a> is a common brand of ALPRs in the US, there are several others, including <a href="https://en.wikipedia.org/wiki/Vigilant_Solutions" target="_blank">Vigilant Solutions</a>, owned by Motorola Solutions. Flock Safety ALPRs are easy to spot as they almost all look the same, typically mounted on poles with a solar panel on top. In rural areas, they are likely to be on standalone black poles, while in cities, they are more likely to be on existing utility or traffic poles. The cameras are often placed near intersections or on main roads at the edge of a city or town. Vigilant Solutions ALPRs, on the other hand, are typically mounted on traffic poles at or near intersections, with a distinctive white box mounted nearby.
-    </p>
+    <v-alert
+      density="compact"
+      class="mb-6 text-center"
+      variant="tonal"
+      color="rgb(18, 151, 195)"
+    >
+      <p>
+        <v-icon v-if="isMobile" size="x-large">mdi-gesture-tap</v-icon>
+        <v-icon v-else size="x-large">mdi-button-cursor</v-icon>
+      </p>
+      <p>
+        <b>{{ isMobile ? 'Tap' : 'Hover over' }}</b> an image below to identify the make.
+        <span v-if="!isMobile"><b>Click</b> an image to enlarge.</span>
+      </p>
+    </v-alert>
 
-    <h2>Not All Cameras are Law Enforcement ALPRs</h2>
-    <p>
-      Not all cameras near roads are ALPRs operated by law enforcement. Many people mistakenly assume that every traffic camera or intersection camera is an ALPR, but the reality is more nuanced. Here are some common types of cameras you might see near roads:
-    </p>
+    <v-row>
+      <v-col v-for="image in images" cols="12" sm="6" md="4">
+        <v-hover>
+          <template v-slot:default="{ isHovering, props }">
+            <v-img style="cursor: pointer;" @click="openFullScreenImage(image)" v-bind="props" cover :aspect-ratio="3/2" :src="image.url">
+              <transition name="fade">
+                <div class="scrim" v-show="isHovering">
+                  <span class="scrim-text">{{ image.brand }}</span>
+                </div>
+              </transition>
+            </v-img>
+          </template>
+        </v-hover>
+      </v-col>
+    </v-row>
 
-    <div class="ml-4">
-      <h3>Traffic Cameras</h3>
-      <div class="flex-image">
-        <v-img rounded cover aspect-ratio="4/3" width="180" src="/traffic-camera.jpg" />
-        <p>Standard traffic cameras typically capture live video or images of intersections to monitor traffic flow and manage signals. They do not specifically focus on reading license plates or storing data long-term.</p>
-      </div>
-
-      <h3>Red Light Cameras/Speed Cameras</h3>
-      <div class="flex-image">
-        <v-img rounded cover aspect-ratio="4/3" width="180" src="/redlight-camera.jpg" />
-        <p>These cameras are set up to capture violations, such as running a red light or speeding. They may record plate numbers when a violation is detected, but they do not perform continuous surveillance or collect location data over time.</p>
-      </div>
-
-      <h3>Toll Cameras</h3>
-      <div class="flex-image">
-        <v-img rounded cover aspect-ratio="4/3" width="180" src="/toll-camera.jpg" />
-        <p>Cameras on toll roads are used to capture license plates for billing purposes. They are not designed to track vehicles or store data beyond the transaction.</p>
-      </div>
-    </div>
+    <h2>Common Brands of ALPRs</h2>
+    <ul class="serif mb-16">
+      <li>
+        <a href="https://www.flocksafety.com/devices/lpr" target="_blank">Flock Safety</a> - A leading provider of ALPR technology, known for their solar-powered cameras. This is the most common brand of ALPR in the US. Flock Safety cameras are used by police departments, HOAs, as well as private businesses such as hardware stores and hotels. One of the most appealing features of Flock cameras is the data sharing network, which allows law enforcement agencies to access data from other Flock cameras in the area. This means that even if your local police department doesn't have a Flock camera, they can still access data from other Flock cameras in the area.
+      </li>
+      <li>
+        <a href="https://www.motorolasolutions.com/en_us/video-security-access-control/license-plate-recognition-camera-systems.html" target="_blank">Vigilant Solutions</a> - Owned by Motorola Solutions, offering a range of ALPR products and services.
+      </li>
+      <li>
+        <a href="https://www.leonardocompany-us.com/lpr/elsag-fixed" target="_blank">ELSAG</a> - A subsidiary of Leonardo, specializing in ALPR technology.
+      </li>
+      <li>
+        <a href="https://neology.com/solutions/enforcement/" target="_blank">Neology</a> - Specializes in ALPR technology and tolling solutions.
+      </li>
+    </ul>
   </v-container>
 
+  <v-dialog class="full-screen-image" v-model="showFullScreenImage">
+    <v-card style="overflow: hidden;">
+      <v-btn size="x-large" class="image-close-btn" flat icon @click="showFullScreenImage = false" color="transparent">
+        <v-icon :color="fullScreenImage.useDarkCloseButton ? 'black' : 'white'">mdi-close</v-icon>
+      </v-btn>
+      <v-img v-if="fullScreenImage" cover :aspect-ratio="3/2" :src="fullScreenImage.url" />
+    </v-card>
+    
+  </v-dialog>
+
   <Footer />
 </template>
 
 <script setup lang="ts">
 import { useRoute } from 'vue-router';
+import { ref, type Ref } from 'vue';
+import { useDisplay } from 'vuetify';
 import Dangers from '@/components/Dangers.vue';
 import Footer from '@/components/layout/Footer.vue';
 const route = useRoute();
+const { xs: isMobile } = useDisplay();
 
 const flockImageCount = 6;
 const vigilantImageCount = 3;
 
+const showFullScreenImage = ref(false);
+const fullScreenImage: Ref<any|undefined> = ref(undefined);
+
+function openFullScreenImage(image: object) {
+  if (isMobile.value)
+    return;
+  fullScreenImage.value = image;
+  showFullScreenImage.value = true;
+}
+
 const images = [
   ...Array.from({ length: flockImageCount }, (_, i) => ({
     url: `/flock-${i + 1}.jpg`,
-    brand: 'flock'
+    brand: 'flock',
+    useDarkCloseButton: false,
   })),
   ...Array.from({ length: vigilantImageCount }, (_, i) => ({
     url: `/vigilant-${i + 1}.jpg`,
-    brand: 'motorola'
+    brand: 'motorola',
+    useDarkCloseButton: true,
   }))
 ];
 </script>
 
 <style scoped>
-h2 {
-  margin-top: 2rem;
+@import url('@/assets/typography.css');
+
+h1, h2 {
+  text-align: center;
 }
 
-h3 {
-  margin-top: 1.25rem;
-}
-
-p {
-  margin-top: 0.5rem;
-}
-
-.flex-image {
+.scrim {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
-  gap: 1rem;
+  justify-content: center;
   align-items: center;
-  margin-top: 0.5rem;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: bold;
 }
 
-li {
-  margin-top: 0.5rem;
-  margin-left: 1rem;
+.image-close-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: white;
+  z-index: 100;
 }
 
-.highlighted {
-  background-color: yellow;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
+.scrim-text {
+  text-transform: uppercase;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.25s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.hero-section-whatis {
+  background: url('/flock-camera.jpeg') no-repeat right center;
+  background-size: cover;
+  color: white;
+  position: relative;
+  height: 400px;
 }
 </style>

From 1ba3f9c3bbb125ca11a060a02ccd5a16212c7b79 Mon Sep 17 00:00:00 2001
From: Will Freeman <hohosanta@me.com>
Date: Fri, 27 Dec 2024 20:22:04 -0700
Subject: [PATCH 18/18] a lot of refactoring and cleaning up

---
 webapp/src/App.vue                       |   4 +-
 webapp/src/assets/main.css               |   5 +
 webapp/src/assets/typography.css         |   2 +-
 webapp/src/components/ALPRCounter.vue    |   9 +-
 webapp/src/components/DFMapPopup.vue     |  17 +-
 webapp/src/components/LeafletMap.vue     | 250 ++++++++++++-----------
 webapp/src/components/OSMTagSelector.vue |   4 +-
 webapp/src/components/layout/Footer.vue  |   1 +
 webapp/src/router/index.ts               |   2 +-
 webapp/src/views/Donate.vue              |   2 +-
 webapp/src/views/Landing.vue             |  35 ++--
 webapp/src/views/Map.vue                 |   4 +-
 webapp/src/views/QRLandingView.vue       | 162 ---------------
 webapp/src/views/ReportView.vue          |  35 +++-
 webapp/vite.config.ts                    |   4 +
 15 files changed, 216 insertions(+), 320 deletions(-)
 delete mode 100644 webapp/src/views/QRLandingView.vue

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index c3fa834..5ea27b7 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -57,9 +57,9 @@ watch(() => theme.global.name.value, (newTheme) => {
 
       <v-spacer></v-spacer>
 
-      <v-btn icon>
+      <!-- <v-btn icon>
         <v-icon @click="toggleTheme">mdi-theme-light-dark</v-icon>
-      </v-btn>
+      </v-btn> -->
     </v-app-bar>
 
     <v-navigation-drawer
diff --git a/webapp/src/assets/main.css b/webapp/src/assets/main.css
index 0b1a138..b03096b 100644
--- a/webapp/src/assets/main.css
+++ b/webapp/src/assets/main.css
@@ -31,3 +31,8 @@ p {
 .serif {
   font-family: "PT Serif", serif;
 }
+
+/* Prevent Scrolling Horizontally */
+html, body {
+  overflow-x: hidden;
+}
diff --git a/webapp/src/assets/typography.css b/webapp/src/assets/typography.css
index 4e21fee..146f5e3 100644
--- a/webapp/src/assets/typography.css
+++ b/webapp/src/assets/typography.css
@@ -13,7 +13,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 p {
-  margin: 0.5em 0;
+  margin: 0.8em 0;
 }
 
 ul, ol {
diff --git a/webapp/src/components/ALPRCounter.vue b/webapp/src/components/ALPRCounter.vue
index cbac5e1..1ec1f58 100644
--- a/webapp/src/components/ALPRCounter.vue
+++ b/webapp/src/components/ALPRCounter.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="counter">
-    <span ref="counterEl" class="font-weight-bold">0</span>
+    <span :class="{ mobile: isMobile }" ref="counterEl" class="font-weight-bold">0</span>
     <span class="caption">&nbsp;ALPRs Reported Worldwide</span>
     <div :class="{ 'fade-in': showFinalAnimation }" class="subheading fade-text">and rapidly growing!</div>
   </div>
@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref, watch, type Ref } from 'vue';
+import { useDisplay } from 'vuetify'
 import { getALPRCounts } from '@/services/apiService';
 import { CountUp } from 'countup.js';
 
@@ -30,6 +31,7 @@ const counts: Ref<Counts> = ref({
   worldwide: undefined,
 });
 const showFinalAnimation = ref(false);
+const { xs: isMobile } = useDisplay();
 
 onMounted(() => {
   getALPRCounts().then((response) => {
@@ -74,4 +76,9 @@ watch(counts, (newCounts: Counts) => {
 .fade-in {
   opacity: 1;
 }
+
+.mobile {
+  display: block;
+  font-size: 1.2em;
+}
 </style>
diff --git a/webapp/src/components/DFMapPopup.vue b/webapp/src/components/DFMapPopup.vue
index 413dc9e..19c0701 100644
--- a/webapp/src/components/DFMapPopup.vue
+++ b/webapp/src/components/DFMapPopup.vue
@@ -14,7 +14,7 @@
         <v-icon start>mdi-compass-outline</v-icon> <b>{{ cardinalDirection }}</b>
       </v-list-item>
       <v-list-item>
-        <v-icon start>mdi-factory</v-icon> <b>
+        <v-icon start>mdi-domain</v-icon> <b>
           <span v-if="alpr.tags.manufacturer">
             {{ alpr.tags.manufacturer }}
           </span>
@@ -27,7 +27,7 @@
         </b>
       </v-list-item>
       <v-list-item>
-        <v-icon start>mdi-police-badge</v-icon> <b>
+        <v-icon start>mdi-account-tie</v-icon> <b>
           <span v-if="alpr.tags.operator">
             {{ alpr.tags.operator }}
           </span>
@@ -39,7 +39,12 @@
     </v-list>
 
     <div class="text-center text-grey-darken-1">
-      node/{{ alpr.id }}
+      
+      <v-tooltip open-delay="500" text="OSM Node ID" location="bottom">
+        <template #activator="{ props }">
+          <span style="cursor: default" v-bind="props">node/{{ alpr.id }}</span>
+        </template>
+      </v-tooltip>
     </div>
   </v-sheet>
 </template>
@@ -48,7 +53,7 @@
 import { defineProps, computed } from 'vue';
 import type { PropType } from 'vue';
 import type { ALPR } from '@/types';
-import { VIcon, VList, VSheet, VListItem, VChip } from 'vuetify/components';
+import { VIcon, VList, VSheet, VListItem, VTooltip } from 'vuetify/components';
 
 const props = defineProps({
   alpr: {
@@ -60,11 +65,11 @@ const props = defineProps({
 const isFaceRecognition = computed(() => props.alpr.tags.brand === 'Avigilon');
 
 const cardinalDirection = computed(() => 
-  props.alpr.tags.direction === undefined ? 'Unknown' : degreesToCardinal(parseInt(props.alpr.tags.direction))
+  props.alpr.tags.direction === undefined ? 'Unknown Direction' : degreesToCardinal(parseInt(props.alpr.tags.direction))
 );
 
 function degreesToCardinal(degrees: number): string {
   const cardinals = ['North', 'Northeast', 'East', 'Southeast', 'South', 'Southwest', 'West', 'Northwest'];
-  return cardinals[Math.round(degrees / 45) % 8];
+  return 'Faces ' + cardinals[Math.round(degrees / 45) % 8];
 }
 </script>
diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue
index f81539e..efcf387 100644
--- a/webapp/src/components/LeafletMap.vue
+++ b/webapp/src/components/LeafletMap.vue
@@ -11,23 +11,25 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, h, createApp, watch, ref, type PropType, type Ref } from 'vue';
-import L, { type LatLngExpression } from 'leaflet';
+import { onBeforeUnmount, onMounted, h, createApp, watch, ref, type PropType, type Ref } from 'vue';
+import L, { type LatLngExpression, type FeatureGroup, type MarkerClusterGroup, type Marker, type CircleMarker } from 'leaflet';
 import type { ALPR } from '@/types';
-
 import DFMapPopup from './DFMapPopup.vue';
-
+import { createVuetify } from 'vuetify'
 import 'leaflet/dist/leaflet.css';
 import 'leaflet.markercluster';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
-import { createVuetify } from 'vuetify'
 
-// Color of Marker Circle
 const MARKER_COLOR = 'rgb(63,84,243)';
 
+// Internal State Management
+const markerMap = new Map<string, Marker | CircleMarker>();
+const isInternalUpdate = ref(false);
+
 const props = defineProps({
   center: {
+    type: Object,
     required: true,
   },
   zoom: {
@@ -44,59 +46,22 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['update:center', 'update:zoom', 'update:bounds']);
+
+// Map instance and layers
 let map: L.Map;
-let circlesLayer: L.FeatureGroup;
-let clusterLayer: L.MarkerClusterGroup;
-let currentLocationLayer: L.FeatureGroup;
+let circlesLayer: FeatureGroup;
+let clusterLayer: MarkerClusterGroup;
+let currentLocationLayer: FeatureGroup;
 
-onMounted(() => {
-  initializeMap();
-});
-
-function initializeMap() {
-  map = L.map('map', { zoomControl: false, maxZoom: 18 /* max for OSM tiles */ }).setView(props.center, props.zoom);
-
-  registerEvents();
-  registerWatchers();
-
-  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-  }).addTo(map);
-
-  emit('update:bounds', map.getBounds()); // XXX: this event populates the map
-}
-
-function renderCurrentLocation() {
-  if (!props.currentLocation)
-    return;
-
-  if (currentLocationLayer) {
-    map.removeLayer(currentLocationLayer);
-  }
-
-  currentLocationLayer = L.featureGroup();
-  const clMarker = L.circleMarker([props.currentLocation[0], props.currentLocation[1]], {
-    radius: 10,
-    color: '#ffffff',
-    fillColor: '#007bff',
-    fillOpacity: 1,
-    weight: 4
-  });
-
-  clMarker.bindPopup('Current Location');
-
-  currentLocationLayer.addLayer(clMarker);
-  map.addLayer(currentLocationLayer);
-}
-
-function makeSVGMarker(alpr: ALPR): L.Marker {
-  const { lat, lon: lng } = alpr;
+// Marker Creation Utilities
+function createSVGMarker(alpr: ALPR): string {
   const orientationDegrees = alpr.tags.direction;
   const fovPath = `
       <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461Z" style="fill:rgb(87,87,87);fill-opacity:0.46;"/>
       <path class="someSVGpath" d="M215.248,221.461L99.696,43.732C144.935,16.031 198.536,0 256,0C313.464,0 367.065,16.031 412.304,43.732L296.752,221.461C287.138,209.593 272.448,202.001 256,202.001C239.552,202.001 224.862,209.593 215.248,221.461ZM217.92,200.242C228.694,192.652 241.831,188.195 256,188.195C270.169,188.195 283.306,192.652 294.08,200.242C294.08,200.242 392.803,48.4 392.803,48.4C352.363,26.364 305.694,13.806 256,13.806C206.306,13.806 159.637,26.364 119.197,48.4L217.92,200.242Z" style="fill:rgb(137,135,135);"/>
     `;
-  const svgMarker = `
+  return `
     <svg style="transform:rotate(${orientationDegrees}deg)" class="svgMarker" width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
       ${orientationDegrees ? fovPath : ''}
       <g transform="matrix(0.906623,0,0,0.906623,23.9045,22.3271)">
@@ -105,31 +70,21 @@ function makeSVGMarker(alpr: ALPR): L.Marker {
       </g>
     </svg>
     `;
-
-  const el = document.createElement('div');
-  el.innerHTML = svgMarker;
-  el.style.width = '50px';
-  el.style.height = '50px';
-
-  const icon = L.divIcon({
-    className: 'leaflet-data-marker',
-    html: svgMarker,
-    iconSize: [60, 60],
-    iconAnchor: [30, 30],
-    popupAnchor: [0, 0],
-  });
-
-  const marker = L.marker([lat, lng], { icon: icon });
-  const markerWithPopup = bindPopup(marker, alpr);
-
-  return markerWithPopup as L.Marker;
 }
 
-function makeCircleMarker(alpr: ALPR): L.CircleMarker {
-  const { lat, lon: lng } = alpr;
-  const orientationDegrees = alpr.tags.direction;
+function createMarker(alpr: ALPR): Marker | CircleMarker {
+  if (hasPlottableOrientation(alpr.tags.direction)) {
+    const icon = L.divIcon({
+      className: 'leaflet-data-marker',
+      html: createSVGMarker(alpr),
+      iconSize: [60, 60],
+      iconAnchor: [30, 30],
+      popupAnchor: [0, 0],
+    });
+    return L.marker([alpr.lat, alpr.lon], { icon });
+  }
 
-  const marker = L.circleMarker([lat, lng], {
+  return L.circleMarker([alpr.lat, alpr.lon], {
     fill: true,
     fillColor: MARKER_COLOR,
     fillOpacity: 0.6,
@@ -139,9 +94,6 @@ function makeCircleMarker(alpr: ALPR): L.CircleMarker {
     radius: 8,
     weight: 3,
   });
-
-  const markerWithPopup = bindPopup(marker, alpr);
-  return markerWithPopup as L.CircleMarker;
 }
 
 function bindPopup(marker: L.CircleMarker | L.Marker, alpr: ALPR): L.CircleMarker | L.Marker {
@@ -151,13 +103,15 @@ function bindPopup(marker: L.CircleMarker | L.Marker, alpr: ALPR): L.CircleMarke
     const popupContent = document.createElement('div');
     createApp({
       render() {
-        return h(DFMapPopup, { alpr: {
-          id: alpr.id,
-          lat: alpr.lat,
-          lon: alpr.lon,
-          tags: alpr.tags,
-          type: alpr.type,
-        } });
+        return h(DFMapPopup, {
+          alpr: {
+            id: alpr.id,
+            lat: alpr.lat,
+            lon: alpr.lon,
+            tags: alpr.tags,
+            type: alpr.type,
+          }
+        });
       }
     }).use(createVuetify()).mount(popupContent);
 
@@ -172,72 +126,124 @@ function hasPlottableOrientation(orientationDegrees: string) {
   return orientationDegrees && !isNaN(parseInt(orientationDegrees));
 }
 
-function populateMap() {
-  const showFov = props.zoom >= 16;
+// Map State Management
+function initializeMap() {
+  map = L.map('map', {
+    zoomControl: false,
+    maxZoom: 18, // max for OSM tiles
+    minZoom: 3,  // don't overload the browser
+  }).setView(props.center, props.zoom);
 
-  renderCurrentLocation();
-
-  if (clusterLayer) {
-    map.removeLayer(clusterLayer);
-  }
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+  }).addTo(map);
 
   clusterLayer = L.markerClusterGroup({
     chunkedLoading: true,
-    disableClusteringAtZoom: 16, // showFov threshold
+    disableClusteringAtZoom: 16,
     removeOutsideVisibleBounds: true,
     maxClusterRadius: 60,
-    zoomToBoundsOnClick: true,
     spiderfyOnEveryZoom: false,
     spiderfyOnMaxZoom: false,
   });
+
   circlesLayer = L.featureGroup();
+  currentLocationLayer = L.featureGroup();
 
-  for (const alpr of props.alprs) {
-    const orientationDegrees = alpr.tags.direction;
+  map.addLayer(clusterLayer);
+  registerMapEvents();
 
-    let marker: L.CircleMarker | L.Marker;
+  if (props.alprs.length) {
+    updateMarkers(props.alprs);
+  } else {
+    emit('update:bounds', map.getBounds());
+  }
+}
 
-    if (hasPlottableOrientation(orientationDegrees)) {
-      marker = makeSVGMarker(alpr);
-    } else {
-      marker = makeCircleMarker(alpr);
+function updateMarkers(newAlprs: ALPR[]): void {
+  const currentIds = new Set(markerMap.keys());
+  const nonexistingAlprs = newAlprs.filter(alpr => !currentIds.has(alpr.id));
+
+  // Add markers
+  for (const alpr of nonexistingAlprs) {
+    if (!currentIds.has(alpr.id)) {
+      // Add new marker
+      const marker = createMarker(alpr);
+      bindPopup(marker, alpr);
+      markerMap.set(alpr.id, marker);
+      circlesLayer.addLayer(marker);
     }
-
-    circlesLayer.addLayer(marker);
   }
 
+  // Update cluster layer
+  clusterLayer.clearLayers();
   clusterLayer.addLayer(circlesLayer);
-  map.addLayer(clusterLayer);
 }
 
-const emit = defineEmits(['update:center', 'update:zoom', 'update:bounds']);
+function updateCurrentLocation(): void {
+  currentLocationLayer.clearLayers();
 
-function registerEvents() {
-  map.on('moveend', () => {
-    emit('update:center', map.getCenter());
-    emit('update:zoom', map.getZoom());
-    emit('update:bounds', map.getBounds());
-  });
+  if (props.currentLocation) {
+    const marker = L.circleMarker([props.currentLocation[0], props.currentLocation[1]], {
+      radius: 10,
+      color: '#ffffff',
+      fillColor: '#007bff',
+      fillOpacity: 1,
+      weight: 4
+    }).bindPopup('Current Location');
+
+    currentLocationLayer.addLayer(marker);
+    map.addLayer(currentLocationLayer);
+  }
 }
 
-function registerWatchers() {
-  watch(() => props.center, (newCenter: any, oldCenter: any) => {
-    if (newCenter.lat !== oldCenter.lat || newCenter.lng !== oldCenter.lng) {
-      map.setView(newCenter as LatLngExpression);
+// Lifecycle Hooks
+onMounted(() => {
+  initializeMap();
+
+  // Watch for prop changes
+  watch(() => props.center, (newCenter: any) => {
+    if (!isInternalUpdate.value) {
+      isInternalUpdate.value = true;
+      map.setView(newCenter, map.getZoom(), { animate: false });
+      setTimeout(() => {
+        isInternalUpdate.value = false;
+      }, 0);
     }
   });
 
-  watch(() => props.currentLocation, (newLocation, oldLocation) => {
-    console.log("current location watcher triggered!");
-    renderCurrentLocation();
+  watch(() => props.zoom, (newZoom: number) => {
+    if (!isInternalUpdate.value) {
+      isInternalUpdate.value = true;
+      map.setZoom(newZoom);
+      setTimeout(() => {
+        isInternalUpdate.value = false;
+      }, 0);
+    }
   });
 
-  watch(() => props.alprs, (newAlprs, oldAlprs) => {
-    populateMap();
-  }); 
+  watch(() => props.alprs, (newAlprs) => {
+    updateMarkers(newAlprs);
+  }, { deep: true });
+
+  watch(() => props.currentLocation, () => {
+    updateCurrentLocation();
+  });
+});
+
+onBeforeUnmount(() => {
+  map?.remove();
+});
+
+function registerMapEvents() {
+  map.on('moveend', () => {
+    if (!isInternalUpdate.value) {
+      emit('update:center', map.getCenter());
+      emit('update:zoom', map.getZoom());
+      emit('update:bounds', map.getBounds());
+    }
+  });
 }
-
-
 </script>
 
 <style scoped>
diff --git a/webapp/src/components/OSMTagSelector.vue b/webapp/src/components/OSMTagSelector.vue
index b9ba9b0..a434d07 100644
--- a/webapp/src/components/OSMTagSelector.vue
+++ b/webapp/src/components/OSMTagSelector.vue
@@ -8,8 +8,8 @@
           :items="alprBrands"
           item-title="nickname"
           return-object
-          label="Manufacturer"
-          variant="solo-filled"
+          label="Choose a Manufacturer"
+          variant="outlined"
           flat
           hide-details
         ></v-select>
diff --git a/webapp/src/components/layout/Footer.vue b/webapp/src/components/layout/Footer.vue
index dc38d70..ae44c02 100644
--- a/webapp/src/components/layout/Footer.vue
+++ b/webapp/src/components/layout/Footer.vue
@@ -57,6 +57,7 @@
         <div>
           <p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
           <p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
+          <p class="mt-4">v1.0</p>
         </div>
         </v-col>
       </v-row>
diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index 1a13e2f..2272bae 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -101,7 +101,7 @@ const router = createRouter({
     {
       path: '/qr',
       name: 'qr-landing',
-      component: () => import('../views/QRLandingView.vue'),
+      component: () => import('../views/Landing.vue'),
       meta: {
         title: 'You Found an ALPR | DeFlock'
       }
diff --git a/webapp/src/views/Donate.vue b/webapp/src/views/Donate.vue
index f4f9c89..590225a 100644
--- a/webapp/src/views/Donate.vue
+++ b/webapp/src/views/Donate.vue
@@ -16,7 +16,7 @@
       <v-col cols="12" md="10">
         <h2 class="mb-2">Our Amazing Sponsors</h2>
         <p class="mb-8">
-          Want to see your name here? <a href="https://github.com/sponsors/frillweeman">Become a sponsor</a>, and your name will appear on this page!
+          Want to see your name here? <a target="_blank" href="https://github.com/sponsors/frillweeman">Become a sponsor</a>, and your name will appear on this page!
         </p>
 
         <v-row>
diff --git a/webapp/src/views/Landing.vue b/webapp/src/views/Landing.vue
index f727a49..ca2ee84 100644
--- a/webapp/src/views/Landing.vue
+++ b/webapp/src/views/Landing.vue
@@ -3,25 +3,24 @@
   <v-container fluid class="hero-section">
     <v-row justify="center">
       <v-col cols="12" md="8" class="text-center">
-        <h1 class="display-1 px-8">You're Being Tracked by ALPRs!</h1>
-        <ALPRCounter class="mt-4" />
-        <p class="subtitle-1 px-8 mt-6 mb-12 bigger">
-          Automated License Plate Readers (ALPRs) are monitoring your every move. Learn more about how they work and how you can protect your privacy.
-        </p>
-        <v-btn color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
-          Find Nearby ALPRs
-          <v-icon end>mdi-map</v-icon>
-        </v-btn>
+        <h1 class="display-1 px-8">You're Being Tracked</h1>
+        
+        <ALPRCounter class="my-6" />
         
         <!-- Featured On Section -->
-        <v-container class="featured-on-section mt-10">
-          <h4 class="mb-8" style="opacity: 0.8">Featured On</h4>
+        <v-container class="featured-on-section my-8">
+          <h4 class="mb-4" style="opacity: 0.8">Featured On</h4>
           <v-row justify="center" align-items="center">
-            <v-card flat v-for="site in featuredOn" class="mx-4" :width="site.wide ? 200 : 100" height="50" :href="site.url" target="_blank" style="background: rgba(0,0,0,0)">
+            <v-card flat v-for="site in featuredOn" class="mx-4" :width="site.wide ? 200 : 100" height="50" style="background: rgba(0,0,0,0)">
               <v-img contain :src="site.logo" :alt="site.name" class="featured-logo" style="display: flex; align-items: center; height: 100%;" />
             </v-card>
           </v-row>
         </v-container>
+
+        <v-btn size="large" color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
+          Explore the Map
+          <v-icon end>mdi-map</v-icon>
+        </v-btn>
       </v-col>
     </v-row>
   </v-container>
@@ -30,14 +29,14 @@
   <v-container class="py-10 text-center info-section">
 
     <h2 class="mb-4">What is an ALPR</h2>
-    <p class="text-left">
+    <p class="text-left px-6">
       Automated License Plate Readers (ALPRs) are cameras that capture images of all passing license plates, storing details like the car's location, date, and time. These cameras collect data on millions of vehicles—regardless of whether the driver is suspected of a crime. While these systems can be useful for tracking stolen cars or wanted individuals, they are mostly used to track the movements of innocent people.
     </p>
 
     <v-divider class="my-8" />
 
     <h2 class="display-2 mb-4">The Dangers of ALPRs</h2>
-    <p class="subtitle-1 px-8">
+    <p class="px-6">
       ALPRs are a threat to your privacy and civil liberties. They can be used to track your movements and profile you, and even stalk you. Learn more about the dangers of ALPRs and how you can protect yourself.
     </p>
     
@@ -49,7 +48,7 @@
             Privacy Violations
           </v-card-title>
           <v-card-text>
-            ALPRs track your movements and store your data for long periods of time, creating a detailed record of your location history. They surveil mostly innocent people while claiming to target criminals.
+            ALPRs track your movements and store your data for long periods of time, creating a detailed record of your location history.
           </v-card-text>
         </v-card>
       </v-col>
@@ -100,7 +99,7 @@
   background: url('/flock-camera.jpeg') no-repeat center center;
   background-size: cover;
   color: white;
-  padding: 100px 0 50px 0 !important;
+  padding: 60px 0 50px 0 !important;
   position: relative;
 }
 
@@ -111,7 +110,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.55);
   z-index: 1;
 }
 
@@ -121,7 +120,7 @@
 }
 
 .map-section {
-  background: url('/deflock-screenshot.webp') no-repeat right center;
+  background: url('/deflock-screenshot.webp') no-repeat center center;
   background-size: cover;
   color: white;
   padding: 100px 0;
diff --git a/webapp/src/views/Map.vue b/webapp/src/views/Map.vue
index 351fc23..5a55356 100644
--- a/webapp/src/views/Map.vue
+++ b/webapp/src/views/Map.vue
@@ -112,7 +112,9 @@ function goToUserLocation() {
   setCurrentLocation()
     .then((cl) => {
       center.value = cl;
-      zoom.value = DEFAULT_ZOOM;
+      setTimeout(() => {
+        zoom.value = DEFAULT_ZOOM;
+      }, 10);
     })
     .catch(error => {
       console.debug('Error getting user location.', error);
diff --git a/webapp/src/views/QRLandingView.vue b/webapp/src/views/QRLandingView.vue
deleted file mode 100644
index fd46868..0000000
--- a/webapp/src/views/QRLandingView.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-   <!-- Hero Section -->
-   <v-container fluid class="hero-section">
-      <v-row justify="center">
-        <v-col cols="12" md="8" class="text-center">
-          <h1 class="display-1 px-8">You're Being Tracked by an ALPR!</h1>
-          <ALPRCounter class="mt-4" />
-          <p class="subtitle-1 px-8 mt-6 mb-12 bigger">
-            Automated License Plate Readers (ALPRs) are monitoring your every move. Learn more about how they work and how you can protect your privacy.
-          </p>
-          <v-btn color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
-            Find the Nearest ALPR
-            <v-icon end>mdi-map</v-icon>
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-container>
-
-    <!-- Dangers Section -->
-    <v-container class="py-10 text-center info-section">
-    <h2 class="display-2 mb-4">The Dangers of ALPRs</h2>
-    <p class="subtitle-1 px-8">
-      ALPRs are a threat to your privacy and civil liberties. They can be used to track your movements, profile you, and even stalk you. Learn more about the dangers of ALPRs and how you can protect yourself.
-    </p>
-      
-     <v-row class="align-center mt-4">
-       <v-col cols="12" md="4" class="text-center">
-         <v-card>
-           <v-card-title class="headline">
-             <v-icon x-large class="mr-2">mdi-shield-alert</v-icon>
-             Privacy Violations
-           </v-card-title>
-           <v-card-text>
-             ALPRs track your movements and store your data for long periods of time, creating a detailed record of your location history. They surveil mostly innocent people while claiming to target criminals.
-           </v-card-text>
-         </v-card>
-       </v-col>
-       <v-col cols="12" md="4" class="text-center">
-         <v-card>
-           <v-card-title class="headline">
-             <v-icon x-large class="mr-2">mdi-alert-circle</v-icon>
-             Risk of Misuse
-           </v-card-title>
-           <v-card-text>
-             Data from ALPRs has led to <a target="_blank" href="https://www.newsobserver.com/news/state/north-carolina/article287381160.html">wrongful arrests</a>, profiling, and <a target="_blank" href="https://www.kwch.com/2022/10/31/kechi-police-lieutenant-arrested-using-police-technology-stalk-wife/">stalking ex-partners</a> by police officers.
-           </v-card-text>
-         </v-card>
-       </v-col>
-       <v-col cols="12" md="4" class="text-center">
-         <v-card>
-           <v-card-title class="headline">
-             <v-icon x-large class="mr-2">mdi-handcuffs</v-icon>
-             Limited Benefits
-           </v-card-title>
-           <v-card-text>
-             There's no substantial evidence that ALPRs effectively prevent crime, despite <a target="_blank" href="https://www.404media.co/researcher-who-oversaw-flock-surveillance-study-now-has-concerns-about-it/">Flock's unethical attempts</a> to prove otherwise.
-           </v-card-text>
-         </v-card>
-       </v-col>
-      </v-row>
-
-      <v-btn class="mt-8" color="rgb(18, 151, 195)" large to="/dangers">
-        See All Dangers
-        <v-icon end>mdi-shield-alert</v-icon>
-      </v-btn>
-    </v-container>
-
-    <!-- Map Section -->
-    <v-container class="map-section py-10 text-center">
-      <h2 class="display-2 mb-4">Explore ALPR Locations Near You</h2>
-      <v-btn color="white" large @click="goToMap">
-        View the Map
-        <v-icon end>mdi-map</v-icon>
-      </v-btn>
-    </v-container>
-</template>
-
-<style>
-.hero-section {
-  background: url('/flock-camera.jpeg') no-repeat center center;
-  background-size: cover;
-  color: white;
-  padding: 100px 0 !important;
-  position: relative;
-  }
-
-  .hero-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 1;
-  }
-
-  .hero-section > * {
-    position: relative;
-    z-index: 2;
-}
-
-.info-section {
-  background: #f5f5f5;
-}
-
-.map-section {
-  background: url('/deflock-screenshot.webp') no-repeat center center;
-  background-size: cover;
-  color: white;
-  padding: 100px 0;
-  position: relative;
-  }
-  .map-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: 1;
-  }
-
-  .map-section > * {
-    position: relative;
-    z-index: 2;
-}
-
-.bigger {
-  font-size: 1.1rem;
-}
-</style>
-
-
-<script setup lang="ts">
-import { useRouter } from 'vue-router';
-import ALPRCounter from '@/components/ALPRCounter.vue';
-import { useGlobalStore } from '@/stores/global';
-
-const router = useRouter();
-const { setCurrentLocation } = useGlobalStore();
-
-interface GoToMapOptions {
-  withCurrentLocation?: boolean;
-}
-
-async function goToMap(options: GoToMapOptions = {}) {
-  if (options.withCurrentLocation) {
-    setCurrentLocation()
-    .then((currentLocation) => {
-      const [lat, lon] = currentLocation;
-      router.push({ path: '/map', hash: `#map=16/${lat.toFixed(6)}/${lon.toFixed(6)}` });
-    })
-    .catch(() => {
-      router.push({ path: '/map' });
-    });
-  } else {
-    router.push({ path: '/map' });
-  }
-}
-</script>
diff --git a/webapp/src/views/ReportView.vue b/webapp/src/views/ReportView.vue
index 9e18e72..e902988 100644
--- a/webapp/src/views/ReportView.vue
+++ b/webapp/src/views/ReportView.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <h1 class="text-center">Report an ALPR</h1>
+    <h1 class="text-center mt-4">Report a New ALPR</h1>
 
     <p>
       If you've spotted an ALPR in your area, you can help us track it by reporting it to OpenStreetMap, where we source our information. Here's how you can do it:
@@ -9,6 +9,7 @@
     <v-stepper-vertical color="rgb(18, 151, 195)" v-model="step" flat non-linear class="my-8" edit-icon="mdi-home">
       <template v-slot:default="{ step }: { step: any }">
         <v-stepper-vertical-item
+          class="transparent"
           :complete="step > 1"
           title="Create an OpenStreetMap Account"
           value="1"
@@ -20,6 +21,7 @@
         </v-stepper-vertical-item>
 
         <v-stepper-vertical-item
+          class="transparent"
           :complete="step > 2"
           title="Find the ALPR's Location"
           value="2"
@@ -31,6 +33,7 @@
         </v-stepper-vertical-item>
 
         <v-stepper-vertical-item
+          class="transparent"
           :complete="step > 3"
           title="Add the ALPR to OpenStreetMap"
           value="3"
@@ -39,7 +42,7 @@
           <p>
             Once you've found the location of the ALPR, click the <strong>Edit</strong> button in the top left corner of the page. This will open the OpenStreetMap editor, where you can add the ALPR to the map.
           </p>
-          <v-img max-width="450" src="/edit-map.png" class="my-8 mx-auto" />
+          <v-img max-width="450" src="/edit-map.png" class="my-8" />
           <p class="mt-16 mb-8">
             To add the ALPR, click the <strong>Point</strong> button in the top left corner of the editor, then click on the location of the ALPR on the map. In the popup that appears, paste one of the following sets of tags based on the brand of the ALPR:
           </p>
@@ -53,10 +56,11 @@
           <p class="mt-8">
             After copying the tags, paste them into the <strong>Tags</strong> field in the popup.
           </p>
-          <v-img max-width="450" class="my-8 mx-auto" src="/paste-tags.png" />
+          <v-img max-width="450" class="my-8" src="/paste-tags.png" />
         </v-stepper-vertical-item>
 
         <v-stepper-vertical-item
+          class="transparent"
           :complete="step > 4"
           title="Adjust the Direction"
           value="4"
@@ -69,6 +73,7 @@
         </v-stepper-vertical-item>
 
         <v-stepper-vertical-item
+          class="transparent"
           :complete="step > 5"
           title="Submit Your Changes"
           value="5"
@@ -90,6 +95,7 @@
         </v-stepper-vertical-item>
 
         <v-stepper-vertical-item
+          class="transparent"
           :complete="step > 6"
           title="Hang a Sign"
           value="6"
@@ -98,9 +104,28 @@
           <p>
             Download our <a href="/deflock-poster.pdf" target="_blank">ALPR sign</a> and hang it near the ALPR to help raise awareness about the device. Be sure to follow all local laws and regulations when hanging signs.
           </p>
+
+          <template v-slot:next>
+            <v-btn
+              color="primary"
+              disabled
+            >
+              Next
+            </v-btn>
+          </template>
         </v-stepper-vertical-item>
       </template>
     </v-stepper-vertical>
+
+    <h2 class="text-center mt-16">Edit an Existing ALPR</h2>
+    <p>
+      If you find an ALPR that's missing information and would like to update it, you can follow the same steps as above. Each ALPR on DeFlock has a Node ID that you can use to find it on OpenStreetMap.
+    </p>
+
+    <p class="mb-16">
+      Simply click on the ALPR with missing information, and find the Node ID (e.g. <code>node/1237489334</code>) at the bottom of the popup. In the OSM editor search field, paste the <i>numerical portion</i> of the Node ID to find the ALPR and make your changes.
+    </p>
+
   </v-container>
   <Footer />
 </template>
@@ -116,4 +141,8 @@ const step = ref(1);
 
 <style scoped>
 @import url('@/assets/typography.css');
+
+.transparent {
+  background-color: transparent !important;
+}
 </style>
diff --git a/webapp/vite.config.ts b/webapp/vite.config.ts
index 5c45e1d..7e3bf6f 100644
--- a/webapp/vite.config.ts
+++ b/webapp/vite.config.ts
@@ -12,5 +12,9 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
   }
 })