use new api, minor map fixes

Author: frillweeman

webapp/src/components/LeafletMap.vue

@@ -624,7 +624,7 @@ function registerMapEvents() {
   }
 
   .topright {
-    top: 60px;
+    top: 75px;
   }
 }
 </style>

webapp/src/services/apiService.ts

@@ -48,7 +48,7 @@ export class BoundingBox implements BoundingBoxLiteral {
 }
 
 const apiService = axios.create({
-  baseURL: window.location.hostname === "localhost" ? "http://localhost:8080/api" : "/api",
+  baseURL: "https://api.deflock.me",
   headers: {
     "Content-Type": "application/json",
   },
@@ -76,12 +76,6 @@ export const getALPRCounts = async () => {
   return response.data;
 }
 
-export const getCities = async () => {
-  const s3Url = "https://cdn.deflock.me/flock_cameras_null.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/Map.vue

@@ -1,6 +1,6 @@
 <template>
   <NewVisitor />
-  <div class="map-container" @keyup="handleKeyUp">
+  <div class="map-container">
     <leaflet-map
       v-if="center"
       v-model:center="center"
@@ -12,24 +12,24 @@
     >
       <!-- SEARCH -->
       <template v-slot:topleft>
-        <form @submit.prevent="onSearch">
+        <form @submit.prevent="onSearch" @dblclick.stop @mousedown.stop @mousemove.stop>
           <v-text-field
-            :rounded="xs || undefined"
-            :density="xs ? 'compact' : 'default'"
             class="map-search"
             ref="searchField"
-            prepend-inner-icon="mdi-magnify"
-            placeholder="Search for a location"
+            placeholder="City or zip code"
             single-line
             variant="solo"
-            clearable
             hide-details
             v-model="searchInput"
             type="search"
+            @focus="isSearchFocused = true"
+            @blur="isSearchFocused = false"
           >
             <template v-slot:append-inner>
-              <v-btn :disabled="!searchInput" variant="text" flat color="#0080BC" @click="onSearch">
-                Go<v-icon end>mdi-chevron-right</v-icon>
+              <span v-if="!isMobile && !isSearchFocused" class="text-subtitle-2 text-grey-darken-1">{{ searchShortcut }}</span>
+
+              <v-btn icon tile :disabled="!searchInput" variant="text" flat color="#0080BC" @click="onSearch">
+                <v-icon>mdi-magnify</v-icon>
               </v-btn>
             </template>
           </v-text-field>
@@ -52,12 +52,12 @@
 
 <script setup lang="ts">
 import 'leaflet/dist/leaflet.css';
-import { ref, onMounted, computed, watch } from 'vue';
+import { ref, onMounted, computed, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router'
 import type { Ref } from 'vue';
 import { BoundingBox } from '@/services/apiService';
 import { geocodeQuery } from '@/services/apiService';
-import { useDisplay, useTheme } from 'vuetify';
+import { useDisplay } from 'vuetify';
 import { useGlobalStore } from '@/stores/global';
 import { useTilesStore } from '@/stores/tiles';
 import L from 'leaflet';
@@ -74,22 +74,28 @@ const bounds: Ref<BoundingBox|null> = ref(null);
 const searchField: Ref<any|null> = ref(null);
 const searchInput: Ref<string> = ref(''); // For the text input field
 const searchQuery: Ref<string> = ref(''); // For URL and boundaries (persistent)
+const isSearchFocused: Ref<boolean> = ref(false);
 const geojson: Ref<GeoJSON.GeoJsonObject | null> = ref(null);
 const tilesStore = useTilesStore();
 
 const { fetchVisibleTiles } = tilesStore;
 const alprs = computed(() => tilesStore.allNodes);
 
 const router = useRouter();
-const { xs } = useDisplay();
+const { xs: isMobile } = useDisplay();
 
 const globalStore = useGlobalStore();
 
 const setCurrentLocation = globalStore.setCurrentLocation;
 const currentLocation = computed(() => globalStore.currentLocation);
 
-function handleKeyUp(event: KeyboardEvent) {
-  if (event.key === '/' && searchField.value.value !== document.activeElement) {
+const searchShortcut = computed(() => {
+  const isMac = navigator.userAgent.toUpperCase().indexOf('MAC') >= 0;
+  return isMac ? '⌘K' : 'Ctrl+K';
+});
+
+function handleSearchShortcut(event: KeyboardEvent) {
+  if ((event.ctrlKey || event.metaKey) && event.key === 'k' && searchField.value.value !== document.activeElement) {
     searchField.value.focus();
     event.preventDefault();
   }
@@ -200,6 +206,8 @@ function updateMarkers() {
 }
 
 onMounted(() => {
+  document.addEventListener('keydown', handleSearchShortcut);
+
   // Expected hash format like #map=<ZOOM_LEVEL:int>/<LATITUDE:float>/<LONGITUDE:float>/<QUERY:text>
   const hash = router.currentRoute.value.hash;
   if (hash) {
@@ -224,6 +232,10 @@ onMounted(() => {
   }
 });
 
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleSearchShortcut);
+});
+
 </script>
 
 <style scoped>