[GIS] JSAPI – how to add a graphic on top of another graphic in the same layer

arcgis-javascript-api

I have a graphics layer and I'd like to add a graphic behind the existing graphics. I've come up with this:

graphicsLayer.add(overlay.graphic);
graphicsLayer.graphics.unshift(graphicsLayer.graphics.pop());

But I have to pan the markers off the screen and then pan them back into view before the 'unshift'-ed graphics display correctly. I've tried calling refresh without any affect:

graphicsLayer.refresh();

How can this be done without introducing a second graphics layer?

Best Answer

Graphics in a GraphicsLayer (as well as in a FeatureLayer) are dojx.gfx objects. Each Graphic has a getDojoShape method. This is the key to changing the drawing order of your graphics.

I put up a working example on jsfiddle: http://jsfiddle.net/fKwRn/

Click the map to add a point. The newest point is always added underneath the existing points.

Related Solutions

[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/

[GIS] How to change a GraphicsLayer’s geometry in the ArcGIS API for Javascript 4.0

I was able to to get this to work with the following code.

var movePoint = function (lat, lon) {
  view.graphics.remove(pointGraphic);
  point.latitude = lat;
  point.longitude = lon;
  pointGraphic = new Graphic({
    geometry: point,
    symbol: markerSymbol
  });
  view.graphics.add(pointGraphic);
};

It seems like the trick here to get it to work is the creation of the new Graphic. As long as I was referencing the old Graphic object, even if I had changed all of the properties on it, the map view was not updating with those new properties.

I'm still interested in seeing if there are better solutions out there, but for now this looks like what needs to be done.

Best Answer

Related Solutions

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

[GIS] How to change a GraphicsLayer’s geometry in the ArcGIS API for Javascript 4.0

Related Question