[GIS] Move/Drag multiple graphics in ArcGIS JavaScript API

arcgis-javascript-api

In ArcGIS JavaScript API, I want to click a GraphicsLayer object (Graphic) on the map and perform a dragging MOVE operation for it as well as some of its neighboring graphics. I am looking for the visual effect of several graphic objects moving together. The EDIT toolbar MOVE operation accepts a single graphic, not multiple, as far as I see.

editToolbar.activate(Edit.MOVE, evt.graphic);

Can I aggregate into a single Graphic for use with EDIT toolbar?

Activate a toolbar for each Graphic?

Best Answer

The way I would go about this is to, when you go into EDIT mode, convert your multiple point (I'm assuming) graphics that you want to drag at the same time into a single Graphic, using the Multipoint geometry, then enable the Draw toolbar on that single Graphic. When you're done moving (the user indicates they want to leave Edit mode), you can take the geometries in your Multipoint and convert them back out to individual point Graphics.

Related Solutions

[GIS] Polyline insertPoint issue using ArcGIS API for JavaScript

The best way to make this work is to update your geometry and then set the geometry for your graphic. After a graphic's setGeometry method is called, the graphic will update.

If everything worked as it should, you would call insertPoint on your polyline and then pass your polyline to your graphic's setGeometry method. That being said, your use case uncovered a bug in insertPoint. The current implementation(version 2.6 of the API) won't let you insert a point on the end of a path. The best workaround is to use addPath. The code would look like this:

// add a polyline, line and lineGraphic are global
var p1 = esri.geometry.geographicToWebMercator(new esri.geometry.Point(-100, 40, map.spatialReference));
var p2 = esri.geometry.geographicToWebMercator(new esri.geometry.Point(-90, 40, map.spatialReference));
line = new esri.geometry.Polyline();
line.addPath([p1, p2]);
lineGraphic = map.graphics.add(new esri.Graphic(
  line,
  new esri.symbol.SimpleLineSymbol()
));
dojo.connect(map, "onClick", addPt);

And the body of the addPt function:

line.addPath([
  line.paths[pathCount-1][line.paths[pathCount-1].length-1], 
  [e.mapPoint.x, e.mapPoint.y]
]);
lineGraphic.setGeometry(line);

Here's a working example: http://jsfiddle.net/swingley/SntsN/ Click the map to extend the line. We will (hopefully) fix this bug in the next release of the API, which is 2.7.

[GIS] ArcGIS JS API Edit Toolbar permits MOVE but not EDIT_VERTICES or ROTATE – JavaScript error thrown

Honestly, you're into a corner the API that not a lot of people are using so I'm not surprised there weren't many results from Google on this. Editing in a web app isn't yet an operation that a lot of people are using.

The issue is probably in the "tool" argument you're passing to editToolbar.activate. That argument isn't an array of constants but rather uses a bitmask. While clever, it is not intuitive or readable.

When you want to specify multiple operations, combine them with the | operator. This is documented in the activate method section of the edit toolbar docs. It's also shown in the edit toolbar sample. If that doesn't work, please post all of the code you're using to call editToolbar.activate.

Edit: here's a simplified version of the edit toolbar sample showing edit vertices + add vertices as well as rotate: http://jsfiddle.net/GKuhX/

Best Answer

Related Solutions

[GIS] Polyline insertPoint issue using ArcGIS API for JavaScript

[GIS] ArcGIS JS API Edit Toolbar permits MOVE but not EDIT_VERTICES or ROTATE – JavaScript error thrown

Related Question