use new df map

webapp/src/App.vue

@@ -35,7 +35,7 @@ onMounted(() => {
 
 const items = [
   { title: 'Home', icon: 'mdi-home', to: '/' },
-  { title: 'Map', icon: 'mdi-map', to: '/map' },
+  { title: 'Map', icon: 'mdi-map', href: 'https://maps.deflock.org' },
   { title: 'Learn', icon: 'mdi-school', to: '/what-is-an-alpr' },
   { title: 'News', icon: 'mdi-newspaper', to: '/blog' },
 ]
@@ -95,10 +95,11 @@ watch(() => theme.global.name.value, (newTheme) => {
         <div class="d-none d-md-flex ml-8 flex-grow-1">
           <!-- Main navigation items -->
           <div class="d-flex align-center">
-            <v-btn 
-              v-for="item in items.slice(1)" 
+            <v-btn
+              v-for="item in items.slice(1)"
               :key="item.title"
               :to="item.to"
+              :href="item.href"
               variant="text"
               class="mx-1"
               :prepend-icon="item.icon"
@@ -196,6 +197,7 @@ watch(() => theme.global.name.value, (newTheme) => {
             :key="item.title"
             link
             :to="item.to"
+            :href="item.href"
             role="option"
           >
             <v-icon start>{{ item.icon }}</v-icon>

webapp/src/components/NewMapNotice.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-dialog v-model="show" max-width="500" persistent>
+    <v-card>
+      <v-card-title class="text-center py-4 font-weight-bold">
+        <h3 class="headline">Try the New Map</h3>
+      </v-card-title>
+      <v-card-text>
+        <v-img src="/new-df-map.webp" alt="New Map" contain max-width="500" class="mx-auto mb-4 w-full rounded" />
+        The DeFlock map has moved to <b>maps.deflock.org</b>. The new map is faster and includes the latest features, such as avoidance routing.
+      </v-card-text>
+      <v-card-actions class="flex-column px-4 pb-4 gap-2">
+        <v-btn
+          block
+          size="large"
+          color="rgb(18, 151, 195)"
+          variant="elevated"
+          href="https://maps.deflock.org"
+        >
+          Go to the New Map
+          <v-icon end>mdi-arrow-right</v-icon>
+        </v-btn>
+        <v-btn
+          block
+          size="large"
+          variant="text"
+          @click="dismiss"
+        >
+          Keep Using Old Map
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const show = ref(true);
+
+function dismiss() {
+  show.value = false;
+}
+</script>
+
+<style scoped>
+.gap-2 {
+  gap: 8px;
+}
+</style>

webapp/src/components/NewVisitor.vue

@@ -1,63 +0,0 @@
-<template>
-  <v-dialog v-model="show" max-width="900">
-    <v-card>
-      <v-card-title class="text-center py-4 font-weight-bold">
-        <h3 class="headline">Welcome to DeFlock</h3>
-      </v-card-title>
-      <p class="mx-8 text-center">
-        DeFlock is powered by <b>crowdsourced data</b> from the OpenStreetMap community.
-      </p>
-
-      <v-divider class="mx-4 mt-4" />
-
-      <v-list class="text-center">
-        <v-list-item class="my-4">
-          <v-icon size="x-large" color="primary" class="mb-2">mdi-progress-pencil</v-icon>
-          <v-list-item-title class="font-weight-bold">The map is incomplete!</v-list-item-title>
-          <v-list-item-subtitle>
-            New locations are always being added.
-          </v-list-item-subtitle>
-        </v-list-item>
-        <v-list-item class="my-4">
-          <v-icon size="x-large" color="primary" class="mb-2">mdi-square-edit-outline</v-icon>
-          <v-list-item-title class="font-weight-bold">Add missing points!</v-list-item-title>
-          <v-list-item-subtitle>
-            Know of a missing ALPR? <router-link to="/report/id">Contribute</router-link> to the map.
-          </v-list-item-subtitle>
-        </v-list-item>
-      </v-list>
-
-      <div class="small text-grey-darken-2 text-center mx-4 mb-2">By using this site, you agree to our <router-link to="/terms">Terms of Service</router-link>.</div>
-      <v-card-actions>
-        <v-btn flat class="w-100" size="x-large" color="rgb(18, 151, 195)" variant="elevated" @click="acknowledge">Got it</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-
-const show = ref(false);
-
-onMounted(() => {
-  if (!localStorage.getItem('acknowledged')) {
-    show.value = true;
-  }
-});
-
-function acknowledge() {
-  show.value = false;
-  localStorage.setItem('acknowledged', 'true');
-}
-</script>
-
-<style scoped>
-.no-small {
-  min-width: 160px;
-}
-
-.small {
-  font-size: 0.8rem;
-}
-</style>

webapp/src/router/index.ts

@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Landing from '../views/Landing.vue'
-import Map from '../views/Map.vue'
 import { useHead } from '@unhead/vue'
 
 const router = createRouter({
@@ -27,7 +26,7 @@ const router = createRouter({
     {
       path: '/map',
       name: 'map',
-      component: Map,
+      component: () => import('../views/Map.vue'),
       meta: {
         title: 'ALPR Map | DeFlock'
       }

webapp/src/views/Landing.vue

@@ -28,7 +28,7 @@
             
             <ALPRCounter class="my-6" />
     
-            <v-btn size="large" color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
+            <v-btn size="large" color="rgb(18, 151, 195)" large href="https://maps.deflock.org">
               Explore the Map
               <v-icon end>mdi-map</v-icon>
             </v-btn>
@@ -131,7 +131,7 @@
   <!-- Map Section -->
   <v-container fluid class="map-section py-10 text-center">
     <h2 class="display-2 mb-4">Explore ALPR Locations Near You</h2>
-    <v-btn color="white" large @click="goToMap({ withCurrentLocation: true })">
+    <v-btn color="white" large href="https://maps.deflock.org">
       View the Map
       <v-icon end>mdi-map</v-icon>
     </v-btn>
@@ -239,14 +239,9 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
 import ALPRCounter from '@/components/ALPRCounter.vue';
-import { useGlobalStore } from '@/stores/global';
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 
-const router = useRouter();
-const { setCurrentLocation } = useGlobalStore();
-
 interface ServiceAlert {
   id: number;
   date_updated: string | null;
@@ -274,22 +269,4 @@ onMounted(() => {
   fetchServiceAlert();
 });
 
-interface GoToMapOptions {
-  withCurrentLocation?: boolean;
-}
-
-async function goToMap(options: GoToMapOptions = {}) {
-  if (options.withCurrentLocation) {
-    setCurrentLocation()
-    .then((currentLocation) => {
-      const [lat, lon] = currentLocation;
-      router.push({ path: '/map', hash: `#map=12/${lat.toFixed(6)}/${lon.toFixed(6)}` });
-    })
-    .catch(() => {
-      router.push({ path: '/map' });
-    });
-  } else {
-    router.push({ path: '/map' });
-  }
-}
 </script>

webapp/src/views/Map.vue

@@ -1,5 +1,5 @@
 <template>
-  <NewVisitor v-if="!isIframe" />
+  <NewMapNotice v-if="!isIframe" />
   <ShareDialog v-model="shareDialogOpen" />
   
   <div class="map-container" @keyup="handleKeyUp">
@@ -72,7 +72,7 @@ import L from 'leaflet';
 globalThis.L = L;
 import 'leaflet/dist/leaflet.css'
 import LeafletMap from '@/components/LeafletMap.vue';
-import NewVisitor from '@/components/NewVisitor.vue';
+import NewMapNotice from '@/components/NewMapNotice.vue';
 import ShareDialog from '@/components/ShareDialog.vue';
 
 const DEFAULT_ZOOM = 12;

webapp/src/views/Press.vue

@@ -33,14 +33,10 @@
 
     <p>
       <DFCode>
-        &lt;iframe src=&quot;https://deflock.org/map&quot; width=&quot;100%&quot; height=&quot;600&quot; style=&quot;border: none;&quot;&gt;&lt;/iframe&gt;
+        &lt;iframe src=&quot;https://maps.deflock.org&quot; width=&quot;100%&quot; height=&quot;600&quot; style=&quot;border: none;&quot;&gt;&lt;/iframe&gt;
       </DFCode>
     </p>
 
-    <p>
-      If you would like to <b>localize the URL</b> to a specific region, please zoom to the area at <router-link to="/map">https://deflock.org/map</router-link> and copy the URL from your browser's address bar.
-    </p>
-
     <h2>Contact Us</h2>
     <p>
       For media inquiries and interview requests, send us an email at <a href="mailto:media@deflock.org">media@deflock.org</a>.