Show tooltip on hover

[morethenlife]

i am trying to show tooltip on hover

<template>
    <vl-map
        ref="map"
        :load-tiles-while-animating="true"
        :load-tiles-while-interacting="true"
        @pointermove="onMapPointerMove"
        :style="{ height: this.height }"
    >
        <vl-view
            :projection="projection"
            :zoom.sync="zoom"
            :max-zoom.sync="maxZoom"
            :min-zoom.sync="minZoom"
            :center.sync="center"
            :rotation.sync="rotation"
        />
        <vl-layer-image id="xkcd">
            <vl-source-image-static
                :url="urlMap"
                :size="imgSize"
                :extent="imgExtent"
                :projection="projection"
            />
        </vl-layer-image>
        <vl-feature
            v-for="(point, index) in testCoords"
            :key="index">
            <vl-geom-point
                :coordinates="pointOnSurface(point.geometry)"
            />
        </vl-feature>
        <vl-overlay v-if="currentPosition" :position="currentPosition">
            <template>
                {{ currentName }}
            </template>
        </vl-overlay>
    </vl-map>
</template>
<script>
let size = [2482, 1755]
let extent = [0, 0, ...size]

let customProj = new Projection({
    code: 'xkcd-image',
    units: 'pixels',
    extent,
})

addProjection(customProj);

import {addProjection, Projection} from 'ol/proj';
import {ScaleLine, ZoomSlider} from 'ol/control';
import { findPointOnSurface } from 'vuelayers/dist/ol-ext';

export default {
    name: "mapDynamic",
    props: {
        userAdmin: {
            type: Boolean,
            default: true
        },
        urlMap: {
            type: String,
            default: ''
        },
        addressId: {
            type: [String, Number],
            default: 0
        },
        floor: {
            type: [String, Number],
            default: 0
        },
    },
    data: () => ({
        testCoords: [
            {
                "type": "Feature",
                "id": 2,
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        777,
                        900
                    ]
                }
            },
        ],
        currentPosition: undefined,
        currentName: undefined,
        mapCursor: 'default',
        height: '100%',
        zoom: 3,
        maxZoom: 6,
        minZoom: 2,
        center: [size[0] / 2, size[1] / 2],
        rotation: 0,
        projection: customProj.getCode(),
        imgSize: size,
        imgExtent: extent,
    }),
    methods: {
        pointOnSurface: findPointOnSurface,
        onMapPointerMove ({ pixel }) {
            let hitFeature = this.$refs.map.forEachFeatureAtPixel(pixel, feature => feature);
            console.log(hitFeature); // return promise ???

            if (hitFeature) {
                this.mapCursor = 'pointer';
                this.currentPosition = map.transform(hitFeature.getGeometry().getCoordinates())
                this.currentName = hitFeature.get('name')
            } else {
                this.mapCursor = 'default'
                this.currentPosition = this.currentName = undefined
            }
        },
        onMapCreated(vm) {
            vm.addControls([
                new ScaleLine(),
                new ZoomSlider(),
            ])
        },
    }
}
</script>

hitFeature always returns a promise, what could be the problem?

[ghettovoice]

Hello @morethenlife ,
it returns a promise because you actually call forEachFeatureAtPixel on the VueLayers map component this.$refs.map.
VueLayers components usually mimic OpenLayers methods but returns promises because underlying OpenLayers instances initialization is async.
So you have 2 options here:

1 . stay with async component method call and await promise

 async onMapPointerMove (...) {
    let hitFeature = await this.$refs.map.forEachFeatureAtPixel(....)
 }

2. call forEachFeatureAtPixel on the ol/Map instance.

 onMapPointerMove (...) {
    let hitFeature = this.$refs.map.$map.forEachFeatureAtPixel(....)
 }

[morethenlife]

@ghettovoice Thanks it helped me