Fix tooltip showing when panning/zooming on touch device

src/api/event.ts

@@ -361,6 +361,7 @@ enum DefEH {
     MAP_KEYUP_UPDATES_KEY_HANDLER = 'ramp_map_keyup_updates_key_handler',
     MAP_MOUSE_UPDATES_COORDS = 'ramp_map_mouse_updates_coords',
     MAP_MOUSE_UPDATES_MAPTIP = 'ramp_map_mouse_updates_maptip',
+    MAP_MOUSEDOWN_UPDATES_MAPTIP = 'ramp_map_mousedown_updates_maptip',
     MAP_MOUSELEAVE_REMOVES_MAPTIP = 'ramp_map_mouseleave_removes_maptip',
     MAP_RESIZE_UPDATES_SCALEBAR = 'ramp_map_resize_updates_scalebar',
     MAP_SCALE_UPDATES_SCALEBAR = 'ramp_map_scale_updates_scalebar',
@@ -944,6 +945,32 @@ export class EventAPI extends APIScope {
                     throttle(50, (mapMove: MapMove) => zeHandler(mapMove)),
                     handlerName
                 );
+
+                break;
+
+            case DefEH.MAP_MOUSEDOWN_UPDATES_MAPTIP:
+                // update any maptip state when the mouse moves over the map
+                zeHandler = (mapMove: MapMove) => {
+                    this.$iApi.geo.map.maptip.checkAtCoord({
+                        screenX: mapMove.screenX,
+                        screenY: mapMove.screenY
+                    });
+                };
+
+                this.$iApi.event.on(
+                    GlobalEvents.MAP_MOUSEDOWN,
+                    throttle(50, mapMove => {
+                        const downPoint = {
+                            screenX: mapMove.offsetX,
+                            screenY: mapMove.offsetY,
+                            button: mapMove.button,
+                            moveTime: 0
+                        };
+                        zeHandler(downPoint);
+                    }),
+                    handlerName
+                );
+
                 break;
 
             case DefEH.MAP_MOUSELEAVE_REMOVES_MAPTIP:

src/components/map/esri-map.vue

@@ -14,12 +14,14 @@
             duration: [200, 200]
         }"
         @mousedown="mouseFocus"
+        @touchstart="isTouch = true"
+        @touchend="isTouch = false"
         @keydown.up.down.left.right.prevent
     ></div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, reactive, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, reactive, watch, ref } from 'vue';
 import { useMaptipStore } from '@/stores/maptip';
 import type { InstanceAPI } from '@/api';
 import type { Point } from '@/geo/api';
@@ -32,6 +34,8 @@ const maptipInstance = computed(() => maptipStore.maptipInstance);
 const maptipContent = computed(() => maptipStore.content);
 const watchers = reactive<Array<() => void>>([]);
 
+const isTouch = ref(false);
+
 watchers.push(
     watch(maptipPoint, () => {
         if (maptipPoint.value) {
@@ -42,7 +46,8 @@ watchers.push(
             const offsetX = screenPointFromMapPoint.screenX - originX;
             const offsetY = originY - screenPointFromMapPoint.screenY;
             maptipInstance.value.setProps({
-                offset: [offsetX, offsetY]
+                // Offset more for touch devices so tooltip is visible above finger
+                offset: isTouch.value ? [offsetX, offsetY + 25] : [offsetX, offsetY]
             });
             if (maptipContent.value && maptipContent.value !== '') {
                 maptipInstance.value.show();
@@ -74,4 +79,15 @@ const mouseFocus = () => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+// Prevent hidden elements from being selected on mobile when long pressing
+.esri-view-surface {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+</style>

src/fixtures/details/components/result-item.vue

@@ -16,8 +16,14 @@
                 class="pl-3 text-left flex-grow itemName"
                 :content="itemName"
                 v-html="makeHtmlLink(itemName)"
+                @touchstart="isTouch = true"
+                @touchend="isTouch = false"
                 v-truncate="{
-                    options: { placement: 'right' }
+                    options: {
+                        placement: 'top-start',
+                        // Offset more for touch devices so tooltip is visible above finger
+                        offset: () => (isTouch ? [0, 25] : [0, 0])
+                    }
                 }"
                 :tabindex="inList ? -1 : 0"
             ></span>
@@ -111,6 +117,7 @@ const iApi = inject<InstanceAPI>('iApi')!;
 const watchers = ref<Array<() => void>>([]);
 const detailsStore = useDetailsStore();
 const { t } = useI18n();
+const isTouch = ref(false);
 
 /**
  * Icon string to display for this item

src/fixtures/panguard/map-panguard.vue

@@ -95,9 +95,6 @@ const setup = () => {
                 timeoutID.value = window.setTimeout(() => {
                     panGuard.value!.classList.remove('pg-active');
                 }, 2000);
-
-                // manually scroll the page since scrolling doesn't work when moving over the map
-                window.scrollBy(pointer.x - x, pointer.y - y);
             })
         );
     });
@@ -128,6 +125,8 @@ const setup = () => {
     &.pg-active {
         opacity: 1;
         transition-duration: 0.3s;
+        pointer-events: auto !important;
+        touch-action: auto;
     }
 
     .pg-label {

src/geo/map/maptip.ts

@@ -41,9 +41,11 @@ export class MaptipAPI extends APIScope {
 
         if (!graphicHit) {
             this.clear();
+            // If there is no graphic hit, disable the maptip. Otherwise vue-tippy will
+            // show the last maptip content for the previous graphic hit on touch devices when they pan/zoom.
+            this.maptipStore.maptipInstance.disable();
             return;
         }
-
         // Get the layer
         const layerInstance: LayerInstance | undefined = this.$iApi.geo.layer.getLayer(graphicHit.layerId);
 
@@ -84,6 +86,8 @@ export class MaptipAPI extends APIScope {
             getAttribs: true
         });
 
+        // At this point we have a graphic hit and a layer, so we can show the maptip
+        this.maptipStore.maptipInstance.enable();
         this.setPoint(this.$iApi.geo.map.screenPointToMapPoint(screenPoint));
 
         this.$iApi.event.emit(GlobalEvents.MAP_GRAPHICHIT, {