store current location in pinia

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>

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')

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,
+  };
+});

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>

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();
   

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' });
   }