Convert below dojo code to Jquery

venkatm3 · ‎01-22-2013

Hi

I would like to how to convert the below dojo code to Jquery.

<!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">
    
    <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.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script>
     dojo.require("esri.map");

      var map;

      function init() {
        map = new esri.Map("map", {
          basemap: "streets",
          center: [-47.109, 14.945],
          zoom: 2
        });
       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.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>

JeffPace · ‎01-22-2013

why?

There is no advantage in doing this. The api requires dojo so you are already loading it.

venkatm3 · ‎01-22-2013

I don't know dojo. so I would like apply Jquery instead of dojo.

I would like to know wherever i can use jquery code instead of using dojo.

Can anyone convert the above highlighted code to Jquery ?

StephenLead · ‎01-22-2013

There's a sample here which might give you some pointers as to what's possible:

http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/framework_jquery

Note that this sample still uses dojo.connect.

venkatm3 · ‎01-22-2013

There's a sample here which might give you some pointers as to what's possible:

http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/framework_jquery

Note that this sample still uses dojo.connect.

I accept.

But do u know the below code can write it on Jquery. Shall I have Jquery code for the same.

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);
});

I

StephenLead · ‎01-22-2013

But do u know the below code can write it on Jquery.

No idea, sorry.

JeffJacobson · ‎01-23-2013

I think you have to use dojo.connect for the map event handling.

JianHuang · ‎01-23-2013

though it's not recommended, if you really have to avoid dojo.connect, you can simply override the event with the function as events are functions essentially.
For example, you can replace
dojo.connect(map, "onExtentChange", showExtent);
as:
map.onExtentChange = showExtent;

I accept.

But do u know the below code can write it on Jquery. Shall I have Jquery code for the same.

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);
});

I

StephenLead · ‎01-27-2013

though it's not recommended, if you really have to avoid dojo.connect, you can simply override the event with the function as events are functions essentially.
For example, you can replace
dojo.connect(map, "onExtentChange", showExtent);
as:
map.onExtentChange = showExtent;

Hi Jian,

Is there any particular reason why this isn't recommended? It seems pretty succinct and straightforward.

Thanks,
Steve