fix: hide edge bubbles when inside any country

Author: onmax

app/app.vue

@@ -66,4 +66,24 @@ body {
 [data-vaul-drawer][data-vaul-drawer-direction='bottom']::after {
   background: transparent !important;
 }
+
+/* Handle styles with larger hit target */
+[data-vaul-handle] {
+  display: block;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 1rem;
+  touch-action: pan-y;
+}
+
+[data-vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 4rem);
+  height: max(100%, 3rem);
+  touch-action: inherit;
+}
 </style>

app/components/CountryBubbles.vue

@@ -45,17 +45,6 @@ const isFlying = ref(false)
 // This prevents race condition where queryRenderedFeatures returns 0 while tiles are loading on slow devices
 const MIN_ZOOM_FOR_PINS = 9
 
-// Show bubbles when: not flying, zoomed out enough, and nothing visible
-const showBubbles = computed(() => {
-  if (isFlying.value)
-    return false
-  // Primary gate: if zoomed in enough for pins to render, never show bubbles
-  if (zoom.value >= MIN_ZOOM_FOR_PINS)
-    return false
-  // Secondary check: at low zoom, only show if no clusters visible
-  return locationCount.value === 0 && clusterCount.value === 0
-})
-
 // Check if a point is within current map viewport
 function isPointInViewport(point: { lat: number, lng: number }): boolean {
   if (!mapInstance.value)
@@ -98,6 +87,21 @@ function isViewportWithinCountry(country: CountryHotspot): boolean {
   }
 }
 
+// Check if viewport is outside all country bounds
+function isViewportOutsideAllCountries(): boolean {
+  return COUNTRY_HOTSPOTS.every(country => !isViewportWithinCountry(country))
+}
+
+// Show bubbles when: not flying, and outside all countries (never show edge bubbles when inside a country)
+const showBubbles = computed(() => {
+  if (isFlying.value)
+    return false
+
+  // Only show bubbles when outside ALL country bounds
+  // When inside any country, don't show edge bubbles pointing to other countries
+  return isViewportOutsideAllCountries()
+})
+
 // Calculate rhumb line bearing (straight line on Mercator projection)
 function calculateMercatorBearing(from: { lat: number, lng: number }, to: { lat: number, lng: number }): number {
   const toRad = Math.PI / 180

app/components/LocationDrawer.vue

@@ -68,7 +68,7 @@ function handleClose() {
 </script>
 
 <template>
-  <DrawerRoot v-model:open="isOpen" v-model:active-snap-point="snap" :snap-points :should-scale-background="false" :modal="false">
+  <DrawerRoot v-model:open="isOpen" v-model:active-snap-point="snap" :snap-points :should-scale-background="false" :modal="false" handle-only>
     <DrawerPortal>
       <div
         v-if="showOverlay"
@@ -80,13 +80,18 @@ function handleClose() {
         @click="handleClose"
       />
       <DrawerContent flex="~ col" shadow="[0_-4px_24px_rgba(0,0,0,0.1)]" max-h="[calc(100dvh-env(safe-area-inset-top))]" outline-none rounded-t-10 bg-neutral-0 h-full w-full inset-x-0 bottom-0 fixed z-80>
-        <DrawerHandle left="1/2" translate-x="-1/2" m-0 bg-neutral-400 h-6 top-8 absolute z-30 />
+        <!-- Header with handle and close button -->
+        <div flex="~ items-center justify-center" pb-0 pt-8 relative>
+          <DrawerHandle bg-neutral-400 h-6 w-40 />
+          <button bg="neutral-500 hocus:neutral-600" stack rounded-full shrink-0 size-24 transition-colors right-16 absolute @click.stop="handleClose">
+            <Icon name="i-nimiq:cross-bold" text-neutral-0 size-10 />
+          </button>
+        </div>
         <div v-if="selectedLocation" flex-1 min-h-0 of-hidden>
           <LocationDrawerContent
             :key="selectedLocation.uuid"
             :location="selectedLocation as any"
             :snap
-            @close="handleClose"
           />
         </div>
         <div v-else p-8 flex flex-1 justify-center>

app/components/LocationDrawerContent.vue

@@ -6,10 +6,6 @@ const { location, snap } = defineProps<{
   snap: string | number | null
 }>()
 
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
-
 const { t, locale } = useI18n()
 
 // Simple derived values
@@ -97,17 +93,10 @@ const { addressRef, showCopiedTooltip } = useAddressCopy()
 </script>
 
 <template>
-  <div bg-neutral-0 h-full w-full relative of-hidden flex="~ col">
+  <div h-full w-full relative of-hidden flex="~ col">
     <!-- Scrollable content -->
-    <div flex-1 of-x-hidden of-y-auto :class="isCompact ? 'max-h-[calc(450px-32px)]' : ''">
-      <header pt-36 bg-neutral-0 relative f-px-md>
-        <!-- Close Button -->
-        <div flex="~ shrink-0 gap-8" right-16 top-4 absolute z-20>
-          <button bg="neutral-500 hocus:neutral-600" stack rounded-full shrink-0 size-24 transition-colors @click.stop="emit('close')">
-            <Icon name="i-nimiq:cross-bold" text-neutral-0 size-10 />
-          </button>
-        </div>
-
+    <div bg-neutral-0 flex-1 of-x-hidden of-y-auto :class="isCompact ? 'max-h-[calc(450px-32px)]' : ''">
+      <header pt-16 bg-neutral-0 relative f-px-md>
         <!-- Title -->
         <h2 leading-tight font-bold my-0 pr-40 line-clamp-2 text="f-xl neutral">
           {{ location.name }}
@@ -117,6 +106,9 @@ const { addressRef, showCopiedTooltip } = useAddressCopy()
         <div flex="~ col gap-6" text-14 lh-none>
           <div v-if="primaryCategory || hasRating" mt-4 flex="~ wrap items-center gap-x-8 gap-y-4">
             <span v-if="primaryCategory" text-neutral-700 font-semibold>{{ primaryCategory.name }}</span>
+            <template v-if="primaryCategory && hasRating">
+              <div aria-hidden rounded-full bg-neutral-600 size-3 />
+            </template>
             <div v-if="hasRating" flex="~ items-center gap-4">
               <Icon name="i-nimiq:star" :class="starColor" size-14 />
               <span font-medium :class="starColor">{{ location.rating!.toFixed(1) }}</span>

app/components/PhotoCarousel.vue

@@ -14,15 +14,15 @@ const availablePhotos = computed(() => Array.from({ length: MAX_PHOTOS }, (_, i)
 </script>
 
 <template>
-  <div v-if="availablePhotos.length > 0" flex="~ gap-8" scroll-pe-24 scroll-ps-24 of-x-auto nq-scrollbar-hide snap="x mandatory" empty="hidden !p-0 !m-0">
-    <div v-for="(photoIndex, i) in availablePhotos" :key="photoIndex" shrink-0 snap-start first:ps-24 last:pe-24>
-      <img
-        :src="`/blob/location/${uuid}/${photoIndex}`"
-        :alt="t('photo.alt', { number: photoIndex + 1 })"
-        :loading="i === 0 ? 'eager' : 'lazy'"
-        w-280 aspect-0.8 object-cover f-rounded-lg outline="1.5 offset--1.5 white/14"
-        @error="onError(photoIndex)"
-      >
-    </div>
+  <div v-if="availablePhotos.length > 0" flex="~ gap-8" pe-24 ps-24 of-x-auto nq-scrollbar-hide snap="x mandatory" empty="hidden !p-0 !m-0">
+    <img
+      v-for="(photoIndex, i) in availablePhotos"
+      :key="photoIndex"
+      :src="`/blob/location/${uuid}/${photoIndex}`"
+      :alt="t('photo.alt', { number: photoIndex + 1 })"
+      :loading="i === 0 ? 'eager' : 'lazy'"
+      shrink-0 w-280 aspect-1.2 object-cover snap-center f-rounded-lg outline="1.5 offset--1.5 white/14"
+      @error="onError(photoIndex)"
+    >
   </div>
 </template>

app/composables/useMapControls.ts

@@ -1,4 +1,4 @@
-import type { Map } from 'maplibre-gl'
+import type { Map, PaddingOptions } from 'maplibre-gl'
 import type { Point } from '~/types/geo'
 
 const MIN_ZOOM = 3
@@ -118,7 +118,7 @@ function useMapControlsBase() {
     mapInstance.value?.zoomOut()
   }
 
-  function flyTo(point: Point, options?: { zoom?: number, accuracyMeters?: number }) {
+  function flyTo(point: Point, options?: { zoom?: number, accuracyMeters?: number, padding?: PaddingOptions }) {
     const map = mapInstance.value
     if (!map)
       return
@@ -130,7 +130,7 @@ function useMapControlsBase() {
       zoomLevel = calculateZoomForAccuracy(point.lat, options.accuracyMeters, minViewportSize)
     }
 
-    map.flyTo({ center: [point.lng, point.lat], zoom: zoomLevel, duration: 1000 })
+    map.flyTo({ center: [point.lng, point.lat], zoom: zoomLevel, duration: 1000, ...(options?.padding && { padding: options.padding }) })
   }
 
   function resetNorth() {

app/composables/useMapIcons.ts

@@ -101,15 +101,15 @@ export function useMapIcons() {
         'maxzoom': 24,
         'layout': {
           'icon-image': iconExpression,
-          'icon-size': 0.057,
+          'icon-size': 0.07125,
           'icon-allow-overlap': false,
           'icon-anchor': 'bottom',
           'icon-offset': [0, 0],
           'symbol-sort-key': ['-', 0, ['coalesce', ['get', 'rating'], 0]],
           'text-field': ['get', 'name'],
           'text-font': ['Mulish Regular'],
           'text-anchor': 'left',
-          'text-offset': [0.9, -0.9],
+          'text-offset': [1.1, -1.1],
           'text-justify': 'left',
           'text-size': 14,
           'text-optional': true, // Hide text if it collides, but keep the icon
@@ -136,7 +136,7 @@ export function useMapIcons() {
         'maxzoom': 24,
         'layout': {
           'icon-image': 'active',
-          'icon-size': 0.0855,
+          'icon-size': 0.107,
           'icon-allow-overlap': true, // Always visible
           'icon-ignore-placement': false, // Block other icons from rendering here
           'icon-anchor': 'bottom',
@@ -145,7 +145,7 @@ export function useMapIcons() {
           'text-field': ['get', 'name'],
           'text-font': ['Mulish Regular'],
           'text-anchor': 'left',
-          'text-offset': [0.9, -0.9],
+          'text-offset': [1.1, -1.1],
           'text-justify': 'left',
           'text-size': 16,
           'text-allow-overlap': true, // Always show text
@@ -288,8 +288,8 @@ export function useMapIcons() {
       const iconSizeExpression = [
         'case',
         ['in', ['get', 'uuid'], ['literal', uuids]],
-        0.0855,
-        0.057,
+        0.107,
+        0.07125,
       ]
       map.setLayoutProperty('location-icon', 'icon-size', iconSizeExpression as any)
 
@@ -324,7 +324,7 @@ export function useMapIcons() {
     else {
       // Reset to normal styling
       map.setLayoutProperty('location-icon', 'icon-image', buildIconExpression() as any)
-      map.setLayoutProperty('location-icon', 'icon-size', 0.057)
+      map.setLayoutProperty('location-icon', 'icon-size', 0.07125)
       map.setLayoutProperty('location-icon', 'symbol-sort-key', ['-', 0, ['coalesce', ['get', 'rating'], 0]] as any)
       map.setLayoutProperty('location-icon', 'text-size', 14)
       map.setPaintProperty('location-icon', 'text-color', buildColorExpression() as any)

app/composables/useMapUrl.ts

@@ -1,8 +1,8 @@
 import { useDebounceFn } from '@vueuse/core'
 
-// Parse #@lat,lng,zoomz format from hash
+// Parse #lat,lng,zoomz format from hash
 function parseMapHash(hash: string): { lat?: number, lng?: number, zoom?: number, bearing?: number, pitch?: number } {
-  const match = hash.match(/^#@(-?\d+(?:\.\d*)?),(-?\d+(?:\.\d*)?),(\d+(?:\.\d*)?)z(?:,(\d+(?:\.\d*)?)b)?(?:,(\d+(?:\.\d*)?)p)?/)
+  const match = hash.match(/^#(-?\d+(?:\.\d*)?),(-?\d+(?:\.\d*)?),(\d+(?:\.\d*)?)z(?:,(\d+(?:\.\d*)?)b)?(?:,(\d+(?:\.\d*)?)p)?/)
   if (!match || !match[1] || !match[2] || !match[3])
     return {}
   return {
@@ -14,12 +14,12 @@ function parseMapHash(hash: string): { lat?: number, lng?: number, zoom?: number
   }
 }
 
-// Build hash in #@lat,lng,zoomz format
+// Build hash in #lat,lng,zoomz format
 function buildMapHash(lat: number, lng: number, zoom: number, bearing?: number, pitch?: number): string {
   const latStr = lat.toFixed(5)
   const lngStr = lng.toFixed(5)
   const zoomStr = zoom.toFixed(2).replace(/\.?0+$/, '')
-  let hash = `#@${latStr},${lngStr},${zoomStr}z`
+  let hash = `#${latStr},${lngStr},${zoomStr}z`
   if (bearing && bearing !== 0)
     hash += `,${bearing.toFixed(0)}b`
   if (pitch && pitch !== 0)

app/pages/index.vue

@@ -155,20 +155,15 @@ watch([searchResults, mapInstance], ([results, map]) => {
 
 function handleNavigate(uuid: string | undefined, latitude: number, longitude: number) {
   if (uuid) {
-    // Location result - open drawer
     selectedLocationUuid.value = uuid
     isDrawerOpen.value = true
 
     if (mapInstance.value) {
       setSelectedLocation(mapInstance.value as any, uuid)
-      const bounds = mapInstance.value.getBounds()
-      if (!bounds.contains([longitude, latitude])) {
-        flyTo({ lat: latitude, lng: longitude }, { zoom: 14 })
-      }
+      flyTo({ lat: latitude, lng: longitude }, { zoom: 14, padding: { bottom: 450 } })
     }
   }
   else {
-    // Geo result - just pan to location
     flyTo({ lat: latitude, lng: longitude }, { zoom: 12 })
   }
 }
@@ -179,6 +174,18 @@ function handleMarkerClick(uuid: string) {
   isDrawerOpen.value = true
   if (mapInstance.value) {
     setSelectedLocation(mapInstance.value as any, uuid)
+
+    // If marker is in bottom half, pan up so it's visible above drawer
+    const features = mapInstance.value.querySourceFeatures('locations', { filter: ['==', ['get', 'uuid'], uuid] })
+    const feature = features[0]
+    if (feature?.geometry?.type === 'Point') {
+      const coords = feature.geometry.coordinates as [number, number]
+      const point = mapInstance.value.project(coords)
+      const containerHeight = mapInstance.value.getContainer().clientHeight
+      if (point.y > containerHeight / 2) {
+        flyTo({ lat: coords[1], lng: coords[0] }, { zoom: mapInstance.value.getZoom(), padding: { bottom: 450 } })
+      }
+    }
   }
 }