Show coordinates in basic viewer template

[FilipBalák]

Hi, I just started using this api and I like basic viewer template but I can't find a way to show the coordinates in map. I found some examples where it is shown in footer or in a map when you drag your mouse cursor to some place by using onLoad function and that is what I want 🙂
Could anyone please write if there is an option to show it or how to save these xy coordinates to variables?
Thanks for response.

[StephenLead]

Hi Filda,

See this sample for an example of how to do this.

//Tell the map to "listen" for mouse movements, and run the showCoordinates function
        dojo.connect(map, "onLoad", function() {
          //after map loads, connect to listen to mouse move & drag events
          dojo.connect(map, "onMouseMove", showCoordinates);
          dojo.connect(map, "onMouseDrag", showCoordinates);
        });

     function showCoordinates(evt) {
        //get mapPoint from event
        //The map is in web mercator - modify the map point to display the results in geographic
        var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint);
        //display mouse coordinates
        dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
      }

mp.x and mp.y show the coordinates - you can assign these to other variables and do whatever you like with them. This example puts them into a <span> on the page.

Steve

[FilipBalák]

Thank you, Steve,

this is very helpful and it's working when i do the application from beginning but I'm trying to import it into template that is provided from Esri when you make a project on arcgis.com website. There is an option to share your map and you can choose to distribute it as application. There you can get the basic viewer template. I think that this template it works really nice so I would like to use it but it's difficult to edit it somehow (at least for me 😄 ). Could anyone please write where can I put these functions to make it work?

Filda

[KellyHutchins]

Did you download the Basic Viewer template as a zip file and set it up on your web server? If so you can add the code that Steve suggested to the layout.js file and everything should just work.

If you selected the Publish option and the application is being hosted by ArcGIS Online then you do not have access to the source code and you can't make the change.

[NakishaFouch]

Hey Kelly,

I also want to add this. I have the code in layout.js.  Am curious where to add

dojo.connect(map, "onMouseMove", showCoordinates);
dojo.connect(map, "onMouseDrag", showCoordinates);

in layout.js.  I have tried a handful of places with no luck.  My initial thought was under the createmap function in the if(map.loaded) statement...but no luck there.

[AndrewHayden1]

I 1) created a new showCoordinates() function in layout.js 2) add the 2 listeners to the "if (map.loaded)" section of the CreateMap() function and added the div to the bottom pane in the index.html.