Getting mouse coordinates
One of the most important aspects of using maps is user interaction. Interacting with the map can be done in various ways, which also depends on the device used; for example, you can hover over a location using the mouse, but you can't do this using a touch-based device, such as a smartphone. In smartphones, you can use multitap or perform gestures, and these user interactions cannot be performed using the mouse.
In this recipe, you will learn how to use event listeners to trigger actions in order to implement user interaction in your map.
How to do it…
The condensed steps to be performed are as follows:
Create a map with
baseLayer
.Then create an event listener using
map.on('mousemove', mouseMovedCallback)
.In the callback method, get the latitude and longitude.
Now, construct an HTML file that shows the latitude and longitude and inject the HTML file into a div to display the mouse coordinates.
Let's perform these steps now:
Start by opening the starter project directory...