Getting Map Coordinates of the Cursor Position

Environment

Product

Progress® Kendo UI for Angular Map

Description

How can I get the longitude (lng) and latitude (lat) coordinates of the cursor position using Kendo UI for Angular Map?

Solution

To get the lng and lat coordinates of the cursor position:

1. Add a custom mousemove event listener to the Map.

   ts

   ngAfterViewInit() {
       const map = document.querySelector('.k-map')
       map.addEventListener('mousemove', (args: MouseEvent) => {
           // ...
       });
   }

2. Use the built-in eventToLocation method of the Map component to retrieve the geographic location that corresponds to the incoming MouseEvent object.

   ts

   @ViewChild(MapComponent) public mapRef: MapComponent;
   
   ngAfterViewInit() {
       const map = document.querySelector('.k-map')
       map.addEventListener('mousemove', (args: MouseEvent) => {
           const point: any = this.mapRef.eventToLocation(args);
           const coords = { lat: point.lat, lng: point.lng };
       });
   }

The following example demonstrates how to retrieve the longitude and latitude coordinates of the cursor position.

Change Theme

Theme

Loading ...