How easy is it to add support for a 'hover' interaction?

[Infiniverse]

Hi there,

We have many many features on screen. The default selection interaction requires the user to be pixel perfect when selecting a feature. It's clear that OpenLayers can do better than that.

One example is outlined here:

http://plnkr.co/edit/zbqKeJ4lXQ8C60TC4fza?p=preview

They've defined an hover selection criteria which highlights features as the mouse passes over them, which makes it much easier for a user to select exactly the feature that they want to work on.

var hoverInteraction = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove,
    layers: [layerFeatures, layerFeatures2]
});
map.addInteraction(hoverInteraction);

var featureOverlay = new ol.FeatureOverlay({
    map: map,
    style: geometryStyle
});

hoverInteraction.on('select', function(evt){
    if(evt.selected.length > 0){
        console.info('selected: ' + evt.selected[0].getId());
    }
});

I'd like to introduce a similar method into v-ol3, but I'm struggling to see how it might be supported (given that my gwt foo is far from perfect).

Could you please offer me some suggestions, or pointers as to what might be the most appropriate way to extend v-ol3 to incorporate a similar method please?

Cheers,
Joe

[Infiniverse]

V-OL3's interaction listener appears quite simple:

public native final void addOnSelectInteractionListener(OnSelectInteractionListener onSelectInteractionListener) /*-{
    if (!this.__onSelectRegistered) {
        var that = this;
        var selectCallback = function(event) {
            var selectEvent = {deselected: event.deselected, selected: event.selected, nativeEvent: event.originalEvent};
            that.__notifySelectListeners(selectEvent);
        };
        this.on("select", $entry(selectCallback), this);            
        
        this.__onSelectRegistered=true;
        this.__selectListeners=[];
        this.__notifySelectListeners = function(selectEvent) {
            var length = this.__selectListeners.length;
            for(var i=0; i<length; i++){
                var listener = this.__selectListeners[i];
                listener.@org.vaadin.gwtol3.client.interaction.OnSelectInteractionListener::onSelectInteraction(Lorg/vaadin/gwtol3/client/interaction/SelectInteractionEvent;)(selectEvent);
            }
        };
    }
    this.__selectListeners.push(onSelectInteractionListener);
}-*/;

whereas the version in the example above is more sophisiticated:

map.on('pointermove', function(e) {
if (e.dragging) return;
   
var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);

map.getTarget().style.cursor = hit ? 'pointer' : '';

if(hit){
    var pointer_coord = map.getEventCoordinate(e.originalEvent);
    var closest = sourceFeatures.getClosestFeatureToCoordinate(pointer_coord);

    if(closest){
        var geometry = closest.getGeometry();
        var closest_coord = geometry.getClosestPoint(pointer_coord);
        
        var coefficient = compareCoordinates(pointer_coord, closest_coord);
        console.info('closest: ' + closest.getId(), ' coeff: ' + coefficient);
        
        if(between(coefficient, 0, 0.01)){
            featureOverlay.addFeature(closest);
            
        } else {
            featureOverlay.removeFeature(closest);
            featureOverlay.getFeatures().clear();
            hoverInteraction.getFeatures().clear();
        }
    }
}
});

It uses

 var pointer_coord = map.getEventCoordinate(e.originalEvent);
 var closest = sourceFeatures.getClosestFeatureToCoordinate(pointer_coord);

to find the closest feature to select.

I'm still trying to work out how to incorporate that kind of condition into the v-ol3 selection handler.

[Infiniverse]

Looks like the change needs to be made in the OLMapConnector:

private OnClickListener listener=new OnClickListener() {
    @Override
    public void onClick(ClickEvent event) {
        OLCoordinate olCoordinate = new OLCoordinate(event.getCoordinate().getX(), event.getCoordinate().getY());
        OLPixel pixel = new OLPixel(event.getPixel().getX().intValue(), event.getPixel().getY().intValue());
        String eventType = event.getType().name();
        String details = MouseEventDetailsBuilder.buildMouseEventDetails(event.getNativeEvent()).serialize();
        // check if there are WMS layer that need the feature info url to be send to the server
        List<String> featureInfoUrls=new ArrayList<String>();
        for (OLLayerConnector c : getLayers()) {
            if (c.getSourceConnector() instanceof HasFeatureInfoUrl) {
                HasFeatureInfoUrl wmsSource = (HasFeatureInfoUrl) c.getSourceConnector();
                View view = getWidget().getMap().getView();
                String featureInfoUrl = wmsSource.getGetFeatureInfoUrl(olCoordinate, view.getResolution(), view.getProjection());
                featureInfoUrls.add(featureInfoUrl);
            }
        }
        // check if there are features at the clicked point
        List<String> featureIds=new ArrayList<String>();
        Collection<Feature> features = getWidget().getMap().getFeaturesFromPixel(event.getPixel());
        for (int i = 0; i < features.getLength(); i++) {
            featureIds.add(features.item(i).getId());
        }
        getRpcProxy(OLOnClickListenerRpc.class).onClick(olCoordinate, pixel, eventType, featureInfoUrls, featureIds, details);
    }
};

[Infiniverse]

I suspect that in the first instance, increasing the hitTolerance value (which defaults to 0) in the call to getFeaturesFromPixel will perhaps improve the situation a little:

http://openlayers.org/en/master/apidoc/ol.Map.html#forEachFeatureAtPixel

[Infiniverse]

So, if we were to tweak the hitTolerance, it should make the user interface less pixel perfect.

However, we also have another issue, which is that if there are a number of small polygons, and a larger one contains them, quite often the larger polygon masks the smaller ones - that is, even when a smaller one is clicked on, it doesn't get selected - the larger one does.

Isn't that what this is supposed to help with?

http://openlayers.org/en/master/apidoc/ol.source.Vector.html#getClosestFeatureToCoordinate

Wouldn't it be expected that if a user clicks to select a feature, that the nearest feature to the click (within a tolerance) should be selected?

[jarrah42]

Does #105 help?

[Infiniverse]

Cool! Thanks for letting me know. We'll test it out when next convenient.

[rubendf]

So, if we were to tweak the hitTolerance, it should make the user interface less pixel perfect.

However, we also have another issue, which is that if there are a number of small polygons, and a larger one contains them, quite often the larger polygon masks the smaller ones - that is, even when a smaller one is clicked on, it doesn't get selected - the larger one does.

Isn't that what this is supposed to help with?

http://openlayers.org/en/master/apidoc/ol.source.Vector.html#getClosestFeatureToCoordinate

Wouldn't it be expected that if a user clicks to select a feature, that the nearest feature to the click (within a tolerance) should be selected?

I'm bumping into that issue precisely. The biggest polygons prevents the smaller ones to get selected as the first ones mask them. Is there a way of solving that problem? Many thanks in advance

[All4Gis]

Any updates on the pointerMove events?thanks