[GIS] Uncaught TypeError: webMercatorUtils.webMercatorToGeographic is not a function

arcgis-javascript-apiarcgis-server

I have write the following code for displaying coordinates of a map.But coordinates are not displayed and getting error i.e "Uncaught TypeError: webMercatorUtils.webMercatorToGeographic is not a function". Please help me how to solve this issue.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <script src="http://js.arcgis.com/3.14/"></script>
    <style>
      html,body,#map{
      height:100%;
      width:100%
      }
    </style>
    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
      var map,overviewMapDijit;

      require(["esri/map",
               "esri/dijit/OverviewMap",
               "dojo/parser",
               "dijit/layout/BorderContainer",
               "dijit/layout/ContentPane",
               "esri/geometry/webMercatorUtils",
               "dojo/dom",
               "dojo/domReady!"], function(Map,OverviewMap,parser,webMercatorUtils,dom) {
        parser.parse();
        map = new Map("map", {
          basemap: "streets",  
          center: [82.45, 22.75],
          zoom: 5
        });
        overviewMapDijit = new OverviewMap({
          map: map,
          visible: true
        });
        overviewMapDijit.startup();

        map.on("load", function() {

          map.on("mouse-move", showCoordinates);
          map.on("mouse-drag", showCoordinates);
        });

        function showCoordinates(evt) {

          var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);

          dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);
        }
     });
    </script>
    </head>

    <body>  
     <div id="map" style="position:relative; width:100%; height:100%; border:3px solid #000;">
      <span id="info" style="position:absolute; left:15px; bottom:5px; color:#000; z-index:50;"></span> 
     </div>        
    </body>

</html>

Best Answer

The order of required modules and the function signature is not matching.

Move 

"esri/geometry/webMercatorUtils","dojo/dom"

right after

"dojo/parser"
Related Question