New to Kendo UI for Angular? Start a free 30-day trial

Getting Map Coordinates of the Cursor Position

Environment

ProductProgress® 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.

    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.

    @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.

Example
View Source
Change Theme:

In this article

Not finding the help you need?