Community

How to make the getDojoShape() work in V3.5

996
0
07-02-2013 07:34 PM
YawHawang
by
New Contributor
‎07-02-2013 07:34 PM
Hi all,
I found a very useful code snippet @ http://forums.arcgis.com/threads/28553-Drag-Graphics-Point-and-Drop-at-New-Location

the code intends to make a dragable graphic on the map, it works on arcgis API 2.2 but not the latest 3.5.
Mainly because getDojoShape() returns null if only the version changed.
the reason could be perhaps explained as Jayant B Sai write HERE:

In v1.4, we changed the graphics layer behavior for better performance. As of v1.4, a graphic is only drawn if the extent of the graphic's geometry intersects the current map extent. In your case, I am guessing the graphic's geometry does not intersect, which causes this error.


I don't understand how to make the graphic intersects with the map extent and get the getDojoShape() work.

I know there are various ways to imitate the dojox mover object by using javascript, but they are not as good as this one, for me only, perhaps.

SO I was wondering if the following code works under arcgis API V 3.5?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
    <title>Moving a marker</title> 
    
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/tundra/tundra.css"> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> 
    
    <script type="text/javascript"> 
      dojo.require("esri.map");
      dojo.require("dojox.gfx.move");
 
      dojo.addOnLoad(init);
 
      var map;
      
      function init() {
        map = new esri.Map("map");
        dojo.connect(map, "onLoad", onMapLoad);
        
        var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
        map.addLayer(tiledMapServiceLayer);
      }
      
      function onMapLoad() {
        var geometry = map.extent.getCenter().offset(0, 15);
        var symbol = new esri.symbol.SimpleMarkerSymbol().setColor("red");
        var graphic = new esri.Graphic(geometry, symbol);
        
        // Add a graphic
        map.graphics.add(graphic);
 
        // Make the shape moveable
        var dojoShape = graphic.getDojoShape();
        var moveable = new dojox.gfx.Moveable(dojoShape);
        
        // Update the geometry at the end of move
        var moveStopToken = dojo.connect(moveable, "onMoveStop", function(mover) {
          // Get the transformation that was applied to 
          // the shape since the last move
          var tx = dojoShape.getTransform();
          
          var startPoint = graphic.geometry;
          var endPoint = map.toMap(map.toScreen(startPoint).offset(tx.dx, tx.dy));
          
          // clear out the transformation
          dojoShape.setTransform(null);
          
          // update the graphic geometry
          graphic.setGeometry(endPoint);
          
          // You can find quite a bit of information about
          // applying transformations to Dojo gfx shapes in this
          // document:
          // http://docs.dojocampus.org/dojox/gfx#coordinates-and-transformations
        });
      }
    </script> 
 
  </head> 
  <body class="tundra"> 
    <p> 
    </p> 
 
    <div id="map" style="width:700px; height:500px; border:1px solid #000;"></div> 
  </body> 
</html>
0 Kudos
0 Replies