Issue with OpenLayers 3 select interaction not permitting addition of event criteria

I am currently experimenting with integrating a select interaction feature into my maps to highlight any features when hovered over. 

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);

An issue arises with the condition field, displaying the following error -

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

Interestingly, the functionality works flawlessly without a condition specified on mouse click.

It's worth noting that this project is built using Angular 6 and relies on "@types/ol": "^4.6.2".

angulartypescriptopenlayersopenlayers-3

Answer №1

The latest version of Openlayers 5.x.x requires some typing adjustments. If you are currently using Openlayers 5.x.x, the installed types belong to version 4.x.x.

This indicates that you will need to make some changes in your code to work around this issue.

Since all typings in version 4.x.x utilize the DefaultExports method, you cannot employ NamedExports such as:

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

Solution:

One possible solution is to import everything as a variable. By doing so, you can avoid the TypeScript 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 drawback of this approach is that it will eliminate the ability to perform tree-shaking, but you should be able to manage without it.

I hope this information proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Angular 4 with Semantic-UI for Dropdown menus

Currently, I am in the process of implementing an Angular directive to handle Semantic UI dropdown. My setup includes Angular (4.3.3), jQuery (3.2.1), and Semantic UI (2.2.13) installed via npm. To make these libraries work together, I made modifications ...

jqueryangularsemantic-ui

Transitioning from node-sass to dart sass within my Angular CLI project

, I've encountered frustrating problems with node-sass during "npm install." This includes unexpected behaviors such as GNU c++ compiling itself, attempts to run Python 2.7 or any other version of Python, and even trying to connect to GitHub. In a co ...

angularsassdartnode-sass

Navigating deprecated CanActivate in Angular-15 with Auth Guard

Authentication Guard: import { Injectable, inject } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, CanActivateFn, Router, RouterStateSnapshot, UrlTree } from '@angular/router'; import { Observable } from 'rxjs& ...

javascriptangulartypescriptauthenticationlogin-page

Is it possible to reduce the number of calls to ngAfterContentChecked() and ngAfterViewChecked() instead of calling them repeatedly?

`ngAfterContentChecked() { console.log("Content has been checked"); } ngAfterViewChecked(){ console.log("View has been checked"); }` I am currently developing an Angular project where I need to execute a set of statements twice on a page - ...

angularangular-lifecycle-hooks

The type 'Pagination<UserEntity>' is lacking the following attributes from type 'UserEntity':

I have set up pagination using the library found at https://github.com/nestjsx/nestjs-typeorm-paginate. However, I am encountering an error with the code snippet below: return this.usersService.findAll({ page, limit }); Can anyone offer insight into wha ...

javascripttypescriptnestjs

What is a way to construct an object without resorting to casts or manually declaring variables for each field?

Click here for a hands-on example. Take a look at the code snippet below: export type BigType = { foo: number; bar?: number; baz: number; qux?: string[]; }; function BuildBigType(params: string[]) { // Here's what I'd like to do: ...

typescript

How can Node / Javascript import various modules depending on the intended platform?

Is there a way to specify which modules my app should import based on the target platform in TypeScript? I am interested in importing different implementations of the same interface for a browser and for Node.js. In C++, we have something like: #ifdef wi ...

javascriptnode.jstypescriptbrowserify

Ways to expand a generic tuple in TypeScript

I am attempting to develop a function that enhances objects within an array and then returns them. I want the returned type for each item to retain the literals from the generics used. Is there a method to achieve this goal? type Identified<Id extends s ...

typescripttuplestypescript-generics

Here's a unique rewritten version: "Achieving a looping carousel with autoplay in Angular 2+ using with

https://i.sstatic.net/MmmOg.jpg Could someone provide recommendations for an image carousel that is compatible with angular 8? I would also like to know how to customize the images inside the carousel specifically for small devices. Thank you in advance! ...

jqueryhtmlangularnpmnpm-package

Utilizing ng-class to apply separate conditions to an array of buttons in Angular

I am facing a straightforward issue. I need to create an array of 3 buttons, and upon clicking each button, the background color of the page should change. The catch is that I have to achieve this using pure Angular-TypeScript without the use of JavaScript ...

angulartypescript

Compatibility of Ng-bootstrap with Angular 9

Ever since the upgrade to Angular 9, I've been encountering a series of errors related to ng-bootstrap: ERROR in src/app/shared/Components/form-controls/dropdown-select/dropdown-select.component.ts:87:63 - error TS2304: Cannot find name 'NgbDrop ...

angularng-bootstrap

Varieties of data classifications for the information obtained from supabase

1 I'm encountering an issue while attempting to define the data types from Supabase. I received an error message stating: "type '{ id: string; title: string; capacity: number | null; start_date: Date | null; start_time: string | null; end_ ...

arraystypescriptnext.jstypessupabase

What is the best way to declare and initialize a global variable in a TypeScript Node application?

When using Webpack: const WebpackConfig = { // ... plugins: [ new Webpack.DefinePlugin({ __IS_DEVELOPMENT_BUILDING_MODE__: isDevelopmentBuildingMode, __IS_TESTING_BUILDING_MODE__: isTestingBuildingMode, __IS_PRODUCTION_BUILDING_MO ...

node.jstypescriptts-node

How come the type checker is not throwing an error for this indexable type?

I recently delved into the Microsoft Typescript Handbook and found myself intrigued by the indexable types chapter. To gain a deeper understanding, I decided to experiment with the code provided. Strangely enough, upon running this particular piece of code ...

typescript

Show information retrieved from one API request within another API request

Currently, I am in the process of retrieving data from the Youtube API by utilizing 2 separate requests. One request is used to fetch a list of videos, while the other request provides details for each individual video. The initial request successfully di ...

angulartypescript

Error occurs with Mat-table paginator when page index is restored causing ExpressionChangedAfterChecked

I've been struggling with a bug for the past few days and could really use some assistance. I'm trying to display a search result that may contain hundreds of items. To manage this, I am using a mat-table along with a mat-paginator to ensure ther ...

angularangular-materialmat-tablepaginator

Sharing properties between components

While this topic has been discussed extensively, I am still struggling with my specific example. In my setup, I have a react-select component nested within another component, which is then part of the larger App component. SubjectSelect.tsx export default ...

reactjstypescriptreact-select

In relation to the characteristics of an Angular Component (written in TypeScript) Class

I am attempting to create a circle on a canvas using Angular. I have followed the necessary steps and have a basic understanding of how everything works. Although my IDE is not showing any errors, when I run the code, the console displays an error stating ...

angulartypescriptcanvas

What is the best way to retrieve the input value from a moment object?

Upon receiving a date from the server, I noticed that the time is correct in the _i variable but rounded to 00:00 in the d variable below. How can I access the value in the _i variable? this.xxxxxStartDate = moment( data.xxxxxStartDate ).format("Do M ...

angularmomentjs

"Router-link in Vue is unresponsive and unclickable - seeking

After making changes to the vue.config.js file, updating the host parameter to web-dev.test.ru in order to work with a public network, we encountered an issue where external network links still led to localhost The routes stopped working and were no longe ...

typescriptvue.jsnpm