Get map coordinates

Overview

You will learn: how to build an app to display the latitude and longitude, scale, and zoom level of the map.

The View provides a way to interact with the map and to retrieve information about the map location. Using properties and event handlers on the View you can find the current spatial reference information, latitude and longitude, scale, and zoom level for the map or any screen point location. Once you have this information you can display it on the map, use it to find other locations on the earth, or use it to set the initial extent of your application when it starts. The map coordinates can be displayed in the default coordinate system of the map or they can be displayed in latitude and longitude, if this is not the default. If necessary, you can also project coordinates to different coordinate system with the GeometryEngine and the Geometry Service.

In this tutorial, you will use the View to display the map coordinates in latitude and longitude, scale, and zoom level for the map.

Move your mouse and zoom in to the map below to see the coordinates and scale change.

Steps

Create a starter app

1. Open the JavaScript Starter App on CodePen.

2. In CodePen, click Fork and save the pen as ArcGIS JavaScript Tutorials: Get map coordinates.

Add a widget

In order to display the map coordinate information, create a simple HTML widget.

1. At the end of the code in the main function, create a div element and add it to the bottom right corner of the view. Assign it an id and apply some simple styling so the UI looks and behaves like other widgets. All widgets should use the esri-widget and esri-component css classes.

         var coordsWidget = document.createElement("div");
         coordsWidget.id = "coordsWidget";
         coordsWidget.className = "esri-widget esri-component";
         coordsWidget.style.padding = "7px 15px 5px";
   
         view.ui.add(coordsWidget, "bottom-right");
   

Display the map information

The View class contains the current coordinate information. Use the properties and events to show the map coordinates, scale, and zoom level.

1. In the main function, create a new function to update the innerHTML of the widget and display the current latitude and longitude, scale, and zoom level for the map. The function will take any given point and round the coordinates to a fixed set of decimal places.

         //*** ADD ***//
         function showCoordinates(pt) {
           var coords = "Lat/Lon " + pt.latitude.toFixed(3) + " " + pt.longitude.toFixed(3) +
               " | Scale 1:" + Math.round(view.scale * 1) / 1 +
               " | Zoom " + view.zoom;
           coordsWidget.innerHTML = coords;
         }
   

2. Add event and watch handlers to call the showCoordinates function when the view is stationary and when the pointer moves. When the view is stationary, it will show the center location. When the pointer moves, it will display the current pointer location. Use toMap to convert screen coordinates to map coordinates.

         view.watch("stationary", function(isStationary) {
           showCoordinates(view.center);
         });
   
         view.on("pointer-move", function(evt) {
           showCoordinates(view.toMap({ x: evt.x, y: evt.y }));
         });
   

Test the app

1. Run the app and move your cursor around the map. Watch the map coordinates change.

2. Zoom the map in and out and watch the scale and zoom level change.

Congratulations, you're done!

Your app should look something like this.

Challenge

Show the default x/y coordinates

       function showCoordinates(pt) {
         //*** UPDATE ***//
         var coords = "Lat/Lon " + pt.x.toFixed(3) + " " + pt.y.toFixed(3) +
             " | Scale 1:" + Math.round(view.scale * 1) / 1 +
             " | Zoom " + view.zoom;
         coordsWidget.innerHTML = coords;
       }

Use the CoordinateConversion widget

     require([
       "esri/Map",
       "esri/views/MapView",
       //*** ADD ***//
       "esri/widgets/CoordinateConversion"
     ], function(Map, MapView, CoordinateConversion) {

       ...

       var coordinateConversionWidget = new CoordinateConversion({
         view: view
       });

       view.ui.add(coordinateConversionWidget, "bottom-right");