Show x,y coordinates in non-amd style

997
4
Jump to solution
05-22-2014 12:09 PM
GyeyoungChoi
New Contributor II
Hi,

I was trying to convert https://developers.arcgis.com/javascript/jssamples/map_xycoords.html to non-amd style
so far

http://jsfiddle.net/gv45L/

var dojoConfig = {                 parseOnLoad: true             } dojo.require("esri.map"); function init() {     var map;     center = [-97.345680, 39.612473];     zoom = 15;     map = new esri.Map("map", {         basemap: "topo",         center: center,         zoom: zoom,         sliderStyle: "large"     });          map.on("load", function() {           //after map loads, connect to listen to mouse move & drag events           map.on("mouse-move", showCoordinates);           map.on("mouse-drag", showCoordinates);         }); } function showCoordinates(evt) {           //the map is in web mercator but display coordinates in geographic (lat, long)           var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint);           //display mouse coordinates           dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);         } dojo.addOnLoad(init);


but seems like I missed something.

Can anyone help me with this? Thank you
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor
I should not be encouraging you to do this.  You really need to use AMD

however

map.on is still AMD

dojo.connect(map, "onLoad", function(layer) {
               //function
                });

etc..


Actually, since he is using v3.5 of the API, which introduced the AMD style to some classes, that shouldn't be a problem.

What you can do is download the older versions of the SDK here. The zip file contains all the old versions of the samples, such as this for showing the XY coordinate in legacy style.

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--The viewport meta tag is used to improve the presentation and behavior of the samples        on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Create Map Display Mouse Coordinates</title>      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">          <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>     <script>       dojo.require("esri.map");        var map;        function init() {         map = new esri.Map("map", {            basemap: "streets",           center: [-47.109, 14.945],           zoom: 2         });         map.on("load", function(){           //after map loads, connect to listen to mouse move & drag events           map.on("mouse-move", showCoordinates);           map.on("mouse-drag", showCoordinates);          });       }        function showCoordinates(evt) {         console.log("show");         //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.toFixed(3) + ", " + mp.y.toFixed(3);       }        dojo.ready(init);     </script>   </head>   <body class="claro">     <div id="map" style="position:relative; width:900px; height:600px; border:1px solid #000;">       <span id="info" style="position:absolute; left:15px; bottom:5px; color:#000; z-index:50;"></span>     </div>   </body> </html> 

View solution in original post

0 Kudos
4 Replies
JeffPace
MVP Alum
I should not be encouraging you to do this.  You really need to use AMD

however

map.on is still AMD

dojo.connect(map, "onLoad", function(layer) {
               //function
                });

etc..
0 Kudos
KenBuja
MVP Esteemed Contributor
I should not be encouraging you to do this.  You really need to use AMD

however

map.on is still AMD

dojo.connect(map, "onLoad", function(layer) {
               //function
                });

etc..


Actually, since he is using v3.5 of the API, which introduced the AMD style to some classes, that shouldn't be a problem.

What you can do is download the older versions of the SDK here. The zip file contains all the old versions of the samples, such as this for showing the XY coordinate in legacy style.

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--The viewport meta tag is used to improve the presentation and behavior of the samples        on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Create Map Display Mouse Coordinates</title>      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">          <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>     <script>       dojo.require("esri.map");        var map;        function init() {         map = new esri.Map("map", {            basemap: "streets",           center: [-47.109, 14.945],           zoom: 2         });         map.on("load", function(){           //after map loads, connect to listen to mouse move & drag events           map.on("mouse-move", showCoordinates);           map.on("mouse-drag", showCoordinates);          });       }        function showCoordinates(evt) {         console.log("show");         //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.toFixed(3) + ", " + mp.y.toFixed(3);       }        dojo.ready(init);     </script>   </head>   <body class="claro">     <div id="map" style="position:relative; width:900px; height:600px; border:1px solid #000;">       <span id="info" style="position:absolute; left:15px; bottom:5px; color:#000; z-index:50;"></span>     </div>   </body> </html> 
0 Kudos
JeffPace
MVP Alum
fair enough, still.. please use AMD
0 Kudos
GyeyoungChoi
New Contributor II
Yes, I would like to use AMD style but right now for this one I must use legacy unfortunately.

And I found out that older versions doesn't have same sample in legacy style.
-----------------
oops I found it.

forgot to say thanks to Ken and Jeff!
0 Kudos