prevent mobile zoom, fix bug with scroll to hash, move zoom control

webapp/index.html

@@ -12,6 +12,7 @@
     <meta property="og:image" content="https://deflock.me/og-banner.png" />
     <meta property="og:url" content="https://deflock.me" />
     <meta property="og:type" content="website" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
     <title>DeFlock - ALPR Database</title>
     <script>
       // Analytics in prod

webapp/src/router/index.ts

@@ -4,7 +4,7 @@ import HomeView from '../views/HomeView.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   scrollBehavior(to, from, savedPosition) {
-    if (to.hash) {
+    if (to.hash && !to.hash.startsWith('#map')) {
       return {
         el: to.hash,
         behavior: 'smooth',

webapp/src/views/HomeView.vue

@@ -13,20 +13,24 @@
       :use-global-leaflet="false"
       @update:bounds="updateBounds"
       @ready="mapLoaded"
+      :options="{ zoomControl: false, attributionControl: false }"
     >
       <l-tile-layer
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         layer-type="base"
         name="OpenStreetMap"
       ></l-tile-layer>
+      <l-control-zoom position="bottomright" />
       <l-marker
         v-for="alpr in alprsInView"
         :key="alpr.id"
         :lat-lng="[alpr.lat, alpr.lon]"
-      ><l-popup>
-        <p class="mb-0 mt-2" v-if="alpr.tags.brand || alpr.tags.operator"><strong>Brand: </strong><a target="_blank" :href="`https://www.wikidata.org/wiki/${alpr.tags['brand:wikidata'] || alpr.tags['operator:wikidata']}`">{{ alpr.tags.brand || alpr.tags.operator || 'Unknown' }}</a></p>
-        <p class="my-0" v-if="alpr.tags.direction"><strong>Faces: {{ degreesToCardinal(alpr.tags.direction) }} {{ alpr.tags.direction }}&deg;</strong></p>
-      </l-popup></l-marker>
+      >
+        <l-popup>
+          <p class="mb-0 mt-2" v-if="alpr.tags.brand || alpr.tags.operator"><strong>Brand: </strong><a target="_blank" :href="`https://www.wikidata.org/wiki/${alpr.tags['brand:wikidata'] || alpr.tags['operator:wikidata']}`">{{ alpr.tags.brand || alpr.tags.operator || 'Unknown' }}</a></p>
+          <p class="my-0" v-if="alpr.tags.direction"><strong>Faces: {{ degreesToCardinal(alpr.tags.direction) }} {{ alpr.tags.direction }}&deg;</strong></p>
+        </l-popup>
+      </l-marker>
     </l-map>
     <div class="loader" v-else>
       <span class="mb-4 text-grey">Loading Map</span>
@@ -37,7 +41,7 @@
 
 <script setup lang="ts">
 import 'leaflet/dist/leaflet.css';
-import { LMap, LTileLayer, LMarker, LPopup } from '@vue-leaflet/vue-leaflet';
+import { LMap, LTileLayer, LMarker, LPopup, LControlZoom } from '@vue-leaflet/vue-leaflet';
 import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router'
 import type { Ref } from 'vue';