primitive clustering, cache nominatim

webapp/src/components/DFMapMarker.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { LCircleMarker, LCircle, LPolygon, LPopup } from '@vue-leaflet/vue-leaflet';
+import { LCircleMarker, LPolygon, LPopup } from '@vue-leaflet/vue-leaflet';
 import DFMapPopup from '@/components/DFMapPopup.vue';
 import type { ALPR } from '@/types';
 import type { PropType } from 'vue';

webapp/src/components/DFMapPopup.vue

@@ -14,7 +14,7 @@
         <v-icon start>mdi-cctv</v-icon> <b>Directional {{ alpr.tags.direction ? `(${degreesToCardinal(parseInt(alpr.tags.direction))})` : '' }}</b>
       </v-list-item>
       <v-list-item>
-        <v-icon start>mdi-domain</v-icon> <b>{{ alpr.tags.brand ?? 'Unknown' }}</b>
+        <v-icon start>mdi-domain</v-icon> <b>{{ alpr.tags.brand ?? 'Unknown Brand' }}</b>
       </v-list-item>
     </v-list>
     <!-- <v-data-table density="compact" hide-default-header hide-default-footer disable-sort :items="kvTags" /> -->

webapp/src/components/DFMarkerCluster.vue

@@ -0,0 +1,21 @@
+<template>
+  <l-circle-marker
+    @click="$emit('click', props)"
+    :lat-lng="[props.lat, props.lon]"
+    :radius="26"
+    :center="[props.lat, props.lon]"
+    color="#3f54f3"
+  />
+</template>
+
+<script setup lang="ts">
+import { LCircleMarker } from '@vue-leaflet/vue-leaflet';
+import { defineProps, defineEmits } from 'vue';
+
+defineEmits(['click']);
+
+const props = defineProps({
+  lat: Number,
+  lon: Number,
+});
+</script>

webapp/src/services/apiService.ts

@@ -1,5 +1,11 @@
 import axios from "axios";
 
+export interface Cluster {
+  id: string;
+  lat: number;
+  lon: number;
+}
+
 export interface BoundingBoxLiteral {
   minLat: number;
   maxLat: number;
@@ -20,6 +26,10 @@ export class BoundingBox implements BoundingBoxLiteral {
     this.maxLng = maxLng;
   }
 
+  containsPoint(lat: number, lng: number) {
+    return lat >= this.minLat && lat <= this.maxLat && lng >= this.minLng && lng <= this.maxLng;
+  }
+
   updateFromOther(boundingBoxLiteral: BoundingBoxLiteral) {
     this.minLat = boundingBoxLiteral.minLat;
     this.maxLat = boundingBoxLiteral.maxLat;
@@ -55,6 +65,12 @@ export const getALPRs = async (boundingBox: BoundingBox) => {
   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 geocodeQuery = async (query: string, currentLocation: any) => {
   const encodedQuery = encodeURIComponent(query);
   const results = (await apiService.get(`/geocode?query=${encodedQuery}`)).data;

webapp/src/views/HomeView.vue

@@ -18,20 +18,23 @@
       :options="{ zoomControl: false, attributionControl: false }"
     >
       <l-control position="bottomleft">
-        <v-card>
-          <v-list density="compact">
-            <v-list-item>
-              <v-list-item-content>
-                <v-icon start color="#3f54f3">mdi-circle</v-icon> Directional ALPR
-              </v-list-item-content>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-icon start color="#ff5722">mdi-circle</v-icon> Omni w/ Face Recognition
-              </v-list-item-content>
-            </v-list-item>
-          </v-list>
-        </v-card>
+        <v-expansion-panels>
+          <v-expansion-panel>
+            <v-expansion-panel-title>Legend</v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <v-card flat>
+                <v-list density="compact">
+                  <v-list-item class="px-0">
+                    <v-icon start color="#3f54f3">mdi-circle</v-icon> Directional ALPR
+                  </v-list-item>
+                  <v-list-item class="px-0">
+                    <v-icon start color="#ff5722">mdi-circle</v-icon> Omnidirectional w/ Face Recognition
+                  </v-list-item>
+                </v-list>
+              </v-card>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
       </l-control>
       <l-control position="topleft">
         <form @submit.prevent="onSearch">
@@ -64,7 +67,9 @@
         name="OpenStreetMap"
       />
       <l-control-zoom position="bottomright" />
-      <DFMapMarker v-for="alpr in alprsInView" :key="alpr.id" :alpr :show-fov="zoom >= 16" />
+
+      <DFMarkerCluster v-if="showClusters" @click="zoomToCluster" 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>
       <span class="mb-4 text-grey">Loading Map</span>
@@ -76,17 +81,21 @@
 <script setup lang="ts">
 import 'leaflet/dist/leaflet.css';
 import { LMap, LTileLayer, LControlZoom, LControl } from '@vue-leaflet/vue-leaflet';
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import { useRouter } from 'vue-router'
 import type { Ref } from 'vue';
 import { BoundingBox } from '@/services/apiService';
-import { getALPRs, geocodeQuery } 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 DFMarkerCluster from '@/components/DFMarkerCluster.vue';
 import NewVisitor from '@/components/NewVisitor.vue';
 import type { ALPR } from '@/types';
 
 const DEFAULT_ZOOM = 12;
+const MIN_ZOOM_FOR_REFRESH = 4;
+const CLUSTER_ZOOM_THRESHOLD = 8;
 
 const theme = useTheme();
 const zoom: Ref<number> = ref(DEFAULT_ZOOM);
@@ -97,16 +106,28 @@ const searchQuery: Ref<string> = ref('');
 const router = useRouter();
 const { xs } = useDisplay();
 
-const canRefreshMarkers = computed(() => zoom.value >= 10);
+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://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png'
 );
 
-const alprsInView: Ref<ALPR[]> = ref([]);
+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);
+
+const visibleALPRs = computed(() => {
+  return alprs.value.filter(alpr => bounds.value?.containsPoint(alpr.lat, alpr.lon));
+});
+
+function zoomToCluster({ lat, lon }: { lat: number, lon: number }) {
+  center.value = { lat: lat, lng: lon };
+  zoom.value = CLUSTER_ZOOM_THRESHOLD + 1;
+}
+
 function handleKeyUp(event: KeyboardEvent) {
   if (event.key === '/' && searchField.value.value !== document.activeElement) {
     searchField.value.focus();
@@ -186,27 +207,38 @@ function updateURL() {
   });
 }
 
+watch(showClusters, (newValue, oldValue) => {
+  if (newValue && !oldValue) {
+    bboxForLastRequest.value = bounds.value;
+  }
+});
+
 function updateMarkers() {
   // Fetch ALPRs in the current view
   if (!bounds.value) {
     return;
   }
 
-  if (!canRefreshMarkers.value) {
+  if (showClusters.value || !canRefreshMarkers.value) {
     return;
   }
 
   getALPRs(bounds.value)
-    .then((alprs: any) => {
+    .then((result: any) => {
       // merge incoming with existing, so that moving the map doesn't remove markers
-      const existingIds = new Set(alprsInView.value.map(alpr => alpr.id));
-      const newAlprs = alprs.elements.filter((alpr: any) => !existingIds.has(alpr.id));
-      alprsInView.value = [...alprsInView.value, ...newAlprs];
+      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;
     });
 }
 
 onMounted(() => {
+  getClusters()
+    .then((result: any) => {
+      clusters.value = result.clusters;
+    });
+
   const hash = router.currentRoute.value.hash;
   if (hash) {
     const parts = hash.split('/');