(Vaadin Map) Changing cursor when the user hovers the feature marker

Jihwan Lee 0
Viewed 71

I am currently using the Vaadin Map component to visualize the vessel's trajectory over the sea. I want to highlight some coordination points among the trajectory so that he/she can examine more information on that point.

I know the Vaadin Map component provides a feature marker with an event listener. My question is how to change the cursor shape when the user hovers the mouse over the marker. I cannot find a solution to it. Thanks in advance!

cursor hover vaadin dictionary
1 Answers

There is no Java API for mouse move or hover events yet. It is possible to do this by adding some JavaScript that listens for mouse move events on the map, and then sends a custom hover event when the cursor hovers over a feature, or leaves a feature.

Here is a quick prototype of a custom Map class that implements a feature hover event and switches the cursor when hovering over a feature:

public class MapWithHoverEvent extends Map {
    public MapWithHoverEvent() {
        ComponentUtil.addListener(this, MapHoverEvent.class, e -> {
            if (e.getFeatureId() != null) {
                // Set cursor to pointer when mouse hovers over a feature
                getElement().getStyle().set("cursor", "pointer");
            } else {
                // Reset cursor when mouse leaves a feature
                getElement().getStyle().set("cursor", "initial");
            }
        });
    }

    @Override
    protected void onAttach(AttachEvent attachEvent) {
        super.onAttach(attachEvent);
        // Setup mouse move listener on client-side, and send custom `map-hover` event
        // when the mouse cursor enters or leaves a feature. On enter the event will have
        // a feature id, on leave the feature id will be null
        getElement().executeJs(
                "const olMap = this.configuration;" +
                "olMap.on('pointermove', e => {" +
                "   const featuresAtPixel = olMap.getFeaturesAtPixel(e.pixel);" +
                "   const feature = featuresAtPixel[0];" +
                "   if (this.__lastHoveredFeature == feature) {" +
                "       return;" +
                "   }" +
                "   this.__lastHoveredFeature = feature;" +
                "   const hoverEvent = new CustomEvent('map-hover', {" +
                "       detail: { featureId: feature ? feature.id : null }" +
                "   });" +
                "   this.dispatchEvent(hoverEvent);" +
                "});");
    }

    @DomEvent("map-hover")
    public static class MapHoverEvent extends ComponentEvent<Map> {
        private final String featureId;

        public MapHoverEvent(Map source,
                             boolean fromClient,
                             @EventData("event.detail.featureId") String featureId) {
            super(source, fromClient);
            this.featureId = featureId;
        }

        public String getFeatureId() {
            return featureId;
        }
    }
}
Sascha Ißbrücker0
Related