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>