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