add legend, add support for Avigilon, clean up map markers

webapp/src/components/DFMapMarker.vue

@@ -1,9 +1,10 @@
 <template>
-  <l-circle-marker :lat-lng="[alpr.lat, alpr.lon]" :radius="7" color="#3f54f3">
+  <l-circle-marker :lat-lng="[alpr.lat, alpr.lon]" :radius="7" :color="markerColor">
     <l-popup>
       <DFMapPopup :alpr="alpr" />
     </l-popup>
   </l-circle-marker>
+  
   <l-polygon
     :lat-lngs="directionIndicatorPolygonCoordinates"
     :options="{ color: 'red' }"
@@ -17,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { LCircleMarker, LPolygon, LPopup } from '@vue-leaflet/vue-leaflet';
+import { LCircleMarker, LCircle, LPolygon, LPopup } from '@vue-leaflet/vue-leaflet';
 import DFMapPopup from '@/components/DFMapPopup.vue';
 import type { ALPR } from '@/types';
 import type { PropType } from 'vue';
@@ -34,6 +35,13 @@ const props = defineProps({
   }
 });
 
+const markerColor = computed(() => {
+  if (props.alpr.tags.brand === 'Avigilon') {
+    return '#ff5722';
+  }
+  return '#3f54f3';
+});
+
 const hasDirection = computed(() => props.alpr.tags.direction !== undefined);
 
 const directionIndicatorPolygonCoordinates = computed(() => {

webapp/src/components/DFMapPopup.vue

@@ -1,6 +1,23 @@
 <template>
-  <v-sheet>
+  <v-sheet min-width="205">
-    <v-data-table density="compact" hide-default-header hide-default-footer disable-sort :items="kvTags" />
+    <v-list density="compact">
+      <v-list-item v-if="isFaceRecognition">
+        <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-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-list-item>
+      <v-list-item>
+        <v-icon start>mdi-domain</v-icon> <b>{{ alpr.tags.brand ?? 'Unknown' }}</b>
+      </v-list-item>
+    </v-list>
+    <!-- <v-data-table density="compact" hide-default-header hide-default-footer disable-sort :items="kvTags" /> -->
   </v-sheet>
 </template>
 
@@ -22,6 +39,8 @@ const valueTransformations: { [key: string]: (value: string) => string } = {
 
 const whitelistedTags = ['brand', 'camera:mount', 'camera:type', 'direction', 'operator'];
 
+const isFaceRecognition = computed(() => props.alpr.tags.brand === 'Avigilon');
+
 const kvTags = computed(() => {
   return Object.entries(props.alpr.tags)
     .filter(([key]) => whitelistedTags.includes(key))
@@ -29,7 +48,7 @@ const kvTags = computed(() => {
 });
 
 function degreesToCardinal(degrees: number): string {
-  const cardinals = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+  const cardinals = ['North', 'Northeast', 'East', 'Southeast', 'South', 'Southwest', 'West', 'Northwest'];
   return cardinals[Math.round(degrees / 45) % 8];
 }
 </script>

webapp/src/views/HomeView.vue

@@ -17,6 +17,22 @@
       @ready="mapLoaded"
       :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>
+      </l-control>
       <l-control position="topleft">
         <form @submit.prevent="onSearch">
           <v-text-field