Show coordinate position in tooltip while dragging

src/components/wms/SelectedCoordinateLayer.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { LngLat, MapMouseEvent, MapTouchEvent } from 'maplibre-gl'
+import { LngLat, MapMouseEvent, MapTouchEvent, Popup } from 'maplibre-gl'
 import { computed, ref, watch } from 'vue'
 import { MglGeoJsonSource, MglCircleLayer, useMap } from 'vue-maplibre-gl'
 
@@ -23,6 +23,28 @@ interface Props {
 const props = defineProps<Props>()
 const emit = defineEmits(['coordinate-moved'])
 
+const { map } = useMap()
+if (!map) throw new Error('Map is not available to show selected coordinate')
+const canvas = map.getCanvasContainer()
+
+const layerId = 'selected-coordinate-layer'
+const sourceId = 'selected-coordinate-source'
+
+const paintSpecification = {
+  'circle-radius': 8,
+  'circle-color': 'blue',
+  'circle-stroke-color': 'white',
+  'circle-stroke-width': 2.5,
+}
+
+const tooltipPopup = new Popup({
+  closeButton: false,
+  closeOnClick: false,
+  className: 'coordinate-info-popup',
+  maxWidth: 'none',
+  anchor: 'bottom',
+})
+
 const coordinate = ref<LngLat>()
 watch(
   () => props.coordinate,
@@ -32,6 +54,16 @@ watch(
   { immediate: true },
 )
 
+watch(coordinate, () => {
+  if (!coordinate.value) return
+
+  tooltipPopup
+    .setText(
+      `${coordinate.value.lat.toFixed(3)}, ${coordinate.value.lng.toFixed(3)}`,
+    )
+    .setLngLat(coordinate.value)
+})
+
 type DataType = InstanceType<typeof MglGeoJsonSource>['data']
 const geoJson = computed<DataType>(() => {
   if (!coordinate.value) {
@@ -51,33 +83,21 @@ const geoJson = computed<DataType>(() => {
   }
 })
 
-const { map } = useMap()
-if (!map) throw new Error('Map is not available to show selected coordinate')
-const canvas = map.getCanvasContainer()
-
-const layerId = 'selected-coordinate-layer'
-const sourceId = 'selected-coordinate-source'
-
-const paintSpecification = {
-  'circle-radius': 8,
-  'circle-color': 'blue',
-  'circle-stroke-color': 'white',
-  'circle-stroke-width': 2.5,
-}
 const onMove = (e: MapMouseEvent) => {
   coordinate.value = e.lngLat
   canvas.style.cursor = 'grabbing'
 }
 
-const onUp = (e: MapMouseEvent) => {
+const onUp = () => {
   map.off('mousemove', onMove)
   map.off('touchmove', onMove)
 
   canvas.style.cursor = ''
 
-  const coords = e.lngLat
+  tooltipPopup.remove()
 
-  emit('coordinate-moved', coords.lat, coords.lng)
+  if (!coordinate.value) return
+  emit('coordinate-moved', coordinate.value.lat, coordinate.value.lng)
 }
 
 const mouseenter = () => {
@@ -93,16 +113,62 @@ const mousedown = (e: MapMouseEvent) => {
 
   canvas.style.cursor = 'grab'
 
+  tooltipPopup.addTo(map)
   map.on('mousemove', onMove)
-  map.once('mouseup', onUp)
+  document.addEventListener('mouseup', onUp, { once: true })
 }
 
 const touchstart = (e: MapTouchEvent) => {
   if (e.points.length !== 1) return
 
   e.preventDefault()
 
+  tooltipPopup.addTo(map)
   map.on('touchmove', onMove)
-  map.once('touchend', onUp)
+  document.addEventListener('touchend', onUp, { once: true })
 }
 </script>
+
+<!-- Has to be unscoped since tooltip is placed in map canvas dom element -->
+<style>
+:root {
+  --coordinate-tooltip-color-primary: #000;
+  --coordinate-tooltip-color-secondary: #fff;
+}
+
+.dark {
+  --coordinate-tooltip-color-primary: #fff;
+  --coordinate-tooltip-color-secondary: #000;
+}
+
+.coordinate-info-popup {
+  font-family: var(--font-family);
+  display: flex;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  will-change: transform;
+  flex-direction: column-reverse;
+  font-size: 0.75rem;
+}
+
+.coordinate-info-popup .maplibregl-popup-tip {
+  border: 5px solid transparent;
+  height: 0;
+  width: 0;
+  z-index: 1;
+  align-self: center;
+  border-bottom: none;
+  border-top-color: var(--coordinate-tooltip-color-secondary);
+}
+
+.coordinate-info-popup .maplibregl-popup-content {
+  color: var(--coordinate-tooltip-color-primary);
+  background: var(--coordinate-tooltip-color-secondary);
+  border-radius: 3px;
+  padding: 2px 8px;
+  pointer-events: auto;
+  position: relative;
+}
+</style>