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);
Solved! Go to Solution.
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..
<!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>
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..
<!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>