Enhance map components and improve build processes

- Updated Makefile to include `--build` flag for `docker-compose.dev.yml` and `--no-cache` for `docker-compose.prod.yml` to ensure fresh builds.
- Added new CSS styles for Leaflet tooltips and popups to utilize theme colors, enhancing visual consistency.
- Enhanced MapView component with new props for markers and current zoom level, improving marker management and zoom functionality.
- Introduced new icons for copy and info actions to improve user interface clarity.
- Updated MapBookmarks and MapControls components to support new features and improve user experience with bookmarks and zoom controls.
- Refactored MapSearch to display coordinates and improve marker search functionality.

frontend-nuxt/lib/Marker.ts

@@ -1,5 +1,5 @@
 import type L from 'leaflet'
-import { HnHMaxZoom, ImageIcon } from '~/lib/LeafletCustomTypes'
+import { HnHMaxZoom, ImageIcon, TileSize } from '~/lib/LeafletCustomTypes'
 
 export interface MarkerData {
   id: number
@@ -104,7 +104,15 @@ export function createMarker(
         }
 
         const position = mapview.map.unproject([marker.position.x, marker.position.y], HnHMaxZoom)
-        leafletMarker = L.marker(position, { icon, title: marker.name })
+        leafletMarker = L.marker(position, { icon })
+        const gridX = Math.floor(marker.position.x / TileSize)
+        const gridY = Math.floor(marker.position.y / TileSize)
+        const tooltipContent = `${marker.name} · ${gridX}, ${gridY}`
+        leafletMarker.bindTooltip(tooltipContent, {
+          direction: 'top',
+          permanent: false,
+          offset: L.point(0, -14),
+        })
         leafletMarker.addTo(mapview.markerLayer)
         const markerEl = (leafletMarker as unknown as { getElement?: () => HTMLElement }).getElement?.()
         if (markerEl) markerEl.setAttribute('aria-label', marker.name)
@@ -125,6 +133,9 @@ export function createMarker(
       if (leafletMarker) {
         const position = mapview.map.unproject([updated.position.x, updated.position.y], HnHMaxZoom)
         leafletMarker.setLatLng(position)
+        const gridX = Math.floor(updated.position.x / TileSize)
+        const gridY = Math.floor(updated.position.y / TileSize)
+        leafletMarker.setTooltipContent(`${marker.name} · ${gridX}, ${gridY}`)
       }
     },