<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
width:100%;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script type="text/javascript">
var map;
require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/string", "dojo/domReady!"],
function (Map, ArcGISTiledMapServiceLayer, string) {
map = new Map("mapDiv", {
logo: false
});
var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
map.addLayer(agoLayer);
map.on('mouse-move', showCoordinates);
map.on('mouse-drag', showCoordinates);
function showCoordinates(event) {
var level = map.getLevel();
var pres = Math.min(6, level);
var x = event.mapPoint.x.toFixed(pres);
var y = event.mapPoint.y.toFixed(pres);
document.getElementById('mapPosition').innerHTML = string.substitute('${0}, ${1}', [x, y]);
}
});
</script>
</head>
<body class="tundra">
<div id="mapDiv">
<div id="mapPosition" style="background-color:whitesmoke; font-weight:bolder; font-size:smaller; position:absolute; padding:3px;left:30px; bottom:6px; z-index:99;"></div>
</div>
</body>
</html>
