Are there any events in Angular maps like ZoomShift or MoveToCenter?

Question

Are there any events in Angular maps like ZoomShift or MoveToCenter?

Greetings, I am currently involved in a project that utilizes Angular Maps, with Angular 6 for the frontend and Python for the backend.

My task at hand is to retrieve the coordinates of certain points within a defined range of kilometers from the API. The code for this has already been written, but what I require is the ability to detect real-time changes in zoom level and central coordinates.

I have attempted to identify these changes in the map.js file (a component of the Angular Maps library), however, I am unable to modify values in my main component from that particular file.

Is there a method to detect changes in zoom level and center coordinates?

The functionality I am seeking is akin to the following:

(mapClick)="MyFunction1($event)"

However, I am looking for a similar function in this format:

(zoomChange)="MyFunction2()"

angular typescript google-maps maps zooming

Answer 1

Answer №1

If you encounter an issue, don't forget to include the solution for others who may need it.

First Step: To your .html file, insert the following:

<agm-map [zoom]="mapa_cfg.zoom" [latitude]="mapa_cfg.latitud" [longitude]="mapa_cfg.longitud"(zoomChange)="zoomChange($event)" (centerChange)="centerChange($event)">

Second Step: In your .ts file, add the code below:

zoomChange(event){
    console.log(event);
}

centerChange(event){
    console.log(event);
}

Answer 2

If you encounter an issue, don't forget to include the solution for others who may need it.

First Step: To your .html file, insert the following:

<agm-map [zoom]="mapa_cfg.zoom" [latitude]="mapa_cfg.latitud" [longitude]="mapa_cfg.longitud"(zoomChange)="zoomChange($event)" (centerChange)="centerChange($event)">

Second Step: In your .ts file, add the code below:

zoomChange(event){
    console.log(event);
}

centerChange(event){
    console.log(event);
}

Are there any events in Angular maps like ZoomShift or MoveToCenter?

Answer №1

Similar questions

Using the angularjs-google-maps library to implement ng-click functionality within a marker

How to extract IDs from a URL in Angular

Accessing and sending only the body part of an HTTP response in Angular 7 test cases: A comprehensive guide

The loading of npm installed Firebase in Angular4 is not successful

The OnPrepareResponse method in StaticFileOptions does not trigger when serving the index.html file

What are the limitations of using concatMap for handling multiple requests simultaneously?

The issue of NestJS dependency injection not working within the MongooseModule.forFeatureAsync function call has been encountered

Is there a way to automatically establish a connection with a BLE device when it is within

Failed validation for Angular file upload

What is causing the element to disappear in this basic Angular Material Sidenav component when using css border-radius? Check out the demo to see the issue in action

How can you ensure in Typescript that a function parameter belongs to a specific set of enumerated values?

Prohibit using any as an argument in a function if a generic type is

Encountering an issue with the message: "Property 'ref' is not available on the type 'IntrinsicAttributes'."

Exporting a function for a custom pipe in Angular 2

Getting a public state variable value from a Solidity smart contract using TypeScript: The ultimate guide

What is the method to ensure that the option group is selectable?

Issues with loading Angular 9 application on Internet Explorer 11

Having trouble locating the asset at /home/runner/CDK_Test/frontend/frontendapp/build while executing CDK deploy with GitHub Action

The current issue I am facing is that the option disabled with value="null" selected is not being shown on the screen. Instead, it should display as "Choose User Types"

Learn how to easily reset the index value within the same template in Angular