New Maps (#110)

* use new df map

* close button top-right, link to same position in new map, use localStorage for modal dismissal

* update map image, iframe detection ignores new map modal

* update embed instructions

* pretty banner

* privacy policy update - routing

* launch the map language

* header stuff

* change donate link

* remove new map notice bc 301 on cf

* use user agent for alpr_counts

* news -> footnote4a

* remove blog scraper

webapp/src/views/Donate.vue

@@ -3,11 +3,10 @@
   <template #header>
     <Hero
       title="Support DeFlock"
-      subtitle="Your contributions help us fight for privacy and raise awareness about ALPR technology."
       image-url="/donate.webp"
       background-position="0 25%"
       button-text="Donate Now"
-      button-href="https://github.com/sponsors/frillweeman"
+      button-href="https://buymeacoffee.com/deflock"
       :opacity="0.25"
     />
   </template>
@@ -16,9 +15,9 @@
     <!-- GitHub Sponsors Section -->
     <v-row justify="center" class="sponsors-section text-center">
       <v-col cols="12" md="10">
-        <h2 class="mb-2">Our Amazing Sponsors</h2>
+        <h2 class="mb-2">Founding Sponsors</h2>
         <p class="mb-8">
-          Want to see your name here? <a target="_blank" href="https://github.com/sponsors/frillweeman">Become a sponsor</a>, and your name will appear on this page!
+          <a target="_blank" href="https://buymeacoffee.com/deflock">We've made donating easier</a>, but if you want to see your name on this list, <a target="_blank" href="https://github.com/sponsors/frillweeman">sponsor us on GitHub!</a>
         </p>
 
         <v-row>
@@ -37,7 +36,7 @@
       </v-col>
     </v-row>
 
-    <!-- GitHub Sponsors Section -->
+    <!-- Special Thanks Section -->
     <v-row justify="center" class="sponsors-section text-center mt-4">
       <v-col cols="12" md="10">
         <h2 class="mb-2">Special Thanks</h2>

webapp/src/views/Landing.vue

@@ -48,8 +48,8 @@
             
             <ALPRCounter class="my-6" />
     
-            <v-btn size="large" color="rgb(18, 151, 195)" large @click="goToMap({ withCurrentLocation: true })">
-              Explore the Map
+            <v-btn size="large" color="rgb(18, 151, 195)" large href="https://maps.deflock.org">
+              Launch the Map
               <v-icon end>mdi-map</v-icon>
             </v-btn>
           </v-col>
@@ -151,8 +151,8 @@
   <!-- 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 })">
-      View the Map
+    <v-btn color="white" large href="https://maps.deflock.org">
+      Launch the Map
       <v-icon end>mdi-map</v-icon>
     </v-btn>
   </v-container>
@@ -259,14 +259,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;
@@ -294,22 +289,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,4 @@
 <template>
-  <NewVisitor v-if="!isIframe" />
   <ShareDialog v-model="shareDialogOpen" />
   
   <div class="map-container" @keyup="handleKeyUp">
@@ -61,6 +60,12 @@
 import 'leaflet/dist/leaflet.css';
 import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router'
+import { useHead } from '@unhead/vue'
+
+useHead({
+  link: [{ rel: 'canonical', href: 'https://maps.deflock.org' }],
+  meta: [{ name: 'robots', content: 'noindex, nofollow' }]
+})
 import type { Ref } from 'vue';
 import { BoundingBox } from '@/services/apiService';
 import { geocodeQuery } from '@/services/apiService';
@@ -72,7 +77,6 @@ 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 ShareDialog from '@/components/ShareDialog.vue';
 
 const DEFAULT_ZOOM = 12;

webapp/src/views/Press.vue

@@ -28,17 +28,7 @@
 
     <h2>Embedding our Map</h2>
     <p>
-      You are welcome to embed our map on your website. Use the following HTML snippet:
-    </p>
-
-    <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;
-      </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.
+      You are welcome to embed our map on your website. Simply <a href="https://maps.deflock.org" target="_blank">click the share button on our map</a>, and copy the embed code.
     </p>
 
     <h2>Contact Us</h2>
@@ -53,5 +43,4 @@
 <script setup lang="ts">
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import Hero from '@/components/layout/Hero.vue';
-import DFCode from "@/components/DFCode.vue";
 </script>

webapp/src/views/PrivacyPolicy.vue

@@ -13,6 +13,11 @@
       DeFlock does not collect, store, or process any personal information about our users. We use local storage in your browser to anonymously identify first-time visitors for the purpose of showing an introductory message as well as to persist application state, including your dark/light theme preference. This data cannot be used to identify you personally. We do not use cookies, analytics, or tracking technologies on our website.
     </p>
 
+    <h2>Route Calculation (maps.deflock.org)</h2>
+    <p>
+      On our maps page (<a href="https://maps.deflock.org">maps.deflock.org</a>), we offer a route planning feature that calculates routes designed to avoid ALPR cameras. When you request a route, your start and end coordinates are sent to our server solely for the purpose of computing the route. These coordinates are not logged or retained long-term.
+    </p>
+
     <h2>Third-Party Services</h2>
     <p>
       DeFlock relies on OpenStreetMap (OSM) for map data and functionality. If you choose to contribute Automatic License Plate Recognition (ALPR) data or other content to OSM, you will interact directly with their platform. OSM may request personal information, such as your email address and name, to facilitate your contributions. Please refer to the OpenStreetMap Privacy Policy for details on their data practices.