Openlayers 3 select interaction unable to add event condition

Question

So I'm trying to add a select interaction into my maps when I hover over any feature it's clearly highlighted.

import Select from 'ol/interaction/select';
import pointerMove from 'ol/events/condition.js'

this.selectPointerMove = new Select({
   condition: pointerMove
});
this.coreMapComponent.map.addInteraction(this.selectPointerMove);

The condition field is throwing an error of -

 Type 'typeof events' is not assignable to type 'EventsConditionType'.
 Type 'typeof events' provides no match for the signature '(event: MapBrowserEvent): boolean'.

Without a condition it works fine on a mouse click.

Should mention this in an Angular 6 project using the "@types/ol": "^4.6.2", if that's of any relevance.

Smitty

try import {pointerMove} from 'ol/events/condition'; – Compurgation

Yeah sorry should have mentioned I already tried that, same result unfortunately. – Smitty

Try removing the .js after condition => import pointerMove from 'ol/events/condition' – Legislate

I've tried that as well no luck unfortunately. – Smitty

Answer 1

The current Openlayers version 5.x.x needs some typing updates. Since even you are using the Openlayers 5.x.x the types installed are from version 4.x.x.

This means that you need some workaround in on your code.

Since all typings on version 4.x.x are using DefaultExports method, you can't use NamedExports like:

import {pointerMove} from 'ol/events/condition';

Solution:

One option you can do is import all as a variable. With this, you will escape the TS error:

import Select from 'ol/interaction/select';
import * as condition from 'ol/events/condition';

this.selectPointerMove = new Select({
   condition: (condition as any).pointerMove
});
this.coreMapComponent.map.addInteraction(this.selectPointerMove);

One side effect of that is that you will remove the option to do tree-shacking, but well, you will survive without that.

Hope this helps!

Overcurious

Does remove the ts lint error and prevent anything from erroring in the console but doesn't highlight the feature on pointerMove unfortunately, only on a mouse click. – Smitty

As far as I know, adding interactions only says to the map that you can use (listen/subscribe) this interaction. I don't think on pointermove highlights the feature automatically. You should listen the event: this.coreMapComponent.on("pointermove", function() { /* highlight feature*/ }) And perform the hihglight on the callback function – Whop