Angular2 click listener for Mapboxgl function

Question

Angular2 click listener for Mapboxgl function

When working with a mapboxgl map click listener in an Angular2 component, I encountered an issue regarding accessing variables outside of the click function. Despite my efforts, using this.something did not work as expected. It seems to be a scope problem specific to mapboxgl. Here is a simplified version of the problem where the console prints out undefined...


public map: Map;
public test: string = 'test'; 

initialize() {
    this.map.on('click', clickListener);
}

clickListener() {
    console.log(this.test); // undefined
}

angular typescript mapbox-gl

Answer 1

Answer №1

In order to address the issue, it is important to pass the event to the function. My solution to the same problem was as follows:

this.map.on('click', (event: any) => {
    const markers = this.map.queryRenderedFeatures(event.point, {layers: ['markers']})
    if (markers.length) {
        console.log(markers)
    }
})

Answer 2

In order to address the issue, it is important to pass the event to the function. My solution to the same problem was as follows:

this.map.on('click', (event: any) => {
    const markers = this.map.queryRenderedFeatures(event.point, {layers: ['markers']})
    if (markers.length) {
        console.log(markers)
    }
})

Answer 3

Answer №2

Consider the following approach:

let myMap: Map;
let testValue: string = 'testing';

function initialize() {
    myMap.on('click', handleClick.bind(this));
}

function handleClick() {
    console.log(testValue); // will output 'testing'
}

Answer 4

Consider the following approach:

let myMap: Map;
let testValue: string = 'testing';

function initialize() {
    myMap.on('click', handleClick.bind(this));
}

function handleClick() {
    console.log(testValue); // will output 'testing'
}

Angular2 click listener for Mapboxgl function

Answer №1

Answer №2

Similar questions

The Primeng badge feature fails to detect changes in severity

In an array where the first 3 images have been filtered using an if statement, how can I show the image at the 3rd index (4th image) starting from the beginning?

The element 'mat-toolbar' is unrecognized

Troubleshooting Safari compatibility issues with Twitter Direct Messages in Angular

Uploading images using Angular and PHP: A comprehensive guide

Implement method functionality within TypeScript interfaces

What is the advantage of utilizing the "extends" keyword over directly stating the type?

Testing TypeScript using Jasmine and Chutzpah within Visual Studio 2015

Learning how to merge two observable streams in Angular2 by utilizing RxJS and the powerful .flatMap method

Structured similar to a map with typed elements

Encountering TS9006 error while working on a Vue2 Vite project with a combination of TypeScript and

401 error code for all CRUD operations in the .NET Framework API

Set up the user django with standard configuration values

Insert an HTML element or Angular component dynamically when a specific function is called in an Angular application

Show a notification to the user through a pop-up message when they either select or deselect the checkbox in an Angular application

Unable to fetch data from Array using an identifier in Angular 4

What is the best way to create a method that waits for a POST request to complete?

Is it possible to directly bind a JSON object from a typescript file to an input value in Angular 2?

Enumerated type alias in Typescript

How can one determine the source of change detection activation in Angular 2?