topic Re: Change index of a graphic in a GraphicsLayer in ArcGIS JavaScript Maps SDK Questions

Change index of a graphic in a GraphicsLayer

TyroneBiggums — Fri, 20 Nov 2015 20:23:04 GMT

I have used the draw toolbar to create a collection of graphics on added those graphics to a graphicsLayer. Is there a way to change the order, or index, of the graphics within the layer once the graphics have been added?

For example, can I draw a rectangle, circle and triangle (in that order) and change map.getLayer('myLayer').graphics to reorder these graphics?

Is there an Esri way, or will I need to redraw all of the shapes in the order that I would like them?

Thanks.

Re: Change index of a graphic in a GraphicsLayer

ChrisSmith7 — Fri, 20 Nov 2015 20:42:27 GMT

Tyrone,

At least back in 2011, there wasn't a clean way to do this:

Change GraphicsLayer Z Index

The Esri way then was to remove and re-add.

Re: Change index of a graphic in a GraphicsLayer

TyroneBiggums — Fri, 20 Nov 2015 20:53:37 GMT

The setzindex of a graphic in a layer is what I'd be interested in but it looks like it's been removed in the latest version of the API (at least I don't see it anywhere in the API reference guide).

I did see another old post that used getDojoShape().moveToFront(). I suppose I could iterate through all the graphics and move them to front/back in the right order to reorder them. But, moveToFront only makes it look like that shape is the top graphic. The order of the graphics are still the same.

It's looking like remove all and add in the order that I want them in. I just don't want to see graphics flashing. Maybe it's going to be fast enough that the user doesn't see them redrawn?

Re: Change index of a graphic in a GraphicsLayer

ChrisSmith7 — Fri, 20 Nov 2015 21:00:21 GMT

Interestingly, it's in the Silverlight API:

http://help.arcgis.com/en/webapi/silverlight/apiref/ESRI.ArcGIS.Client~ESRI.ArcGIS.Client.Graphic~SetZIndex.html

It's clear in the documentation it's really adjusting the z-index.

Re: Change index of a graphic in a GraphicsLayer

TyroneBiggums — Fri, 20 Nov 2015 21:05:45 GMT

Yea, we're going from SL to rewriting in JS. We had that ability in SL.

Re: Change index of a graphic in a GraphicsLayer

KristianEkenes — Sat, 16 Jan 2016 01:21:13 GMT

You can move items to any index in the 4.0 version of the API using the Collection API - Collection | API Reference | ArcGIS API for JavaScript

Since GraphicsLayer.graphics is a Collection, you can use the moveItem() method to do this.

//Gets the item in the 0 index

var graphic = layer.graphics.getItemAt(0);

//moves it to the 5 index

layer.graphics.moveItem(graphic, 5);

Re: Change index of a graphic in a GraphicsLayer

TyroneBiggums — Tue, 19 Jan 2016 15:23:27 GMT

Would it also be best to wait on 4.0 for re-ordering the layers themselves? If I add LayerA and LayerB (in that order), LayerB will display on top of LayerA. If I want LayerA shown on top, in 3.x, is that also a remove then re-add as mentioned above for graphics?

Re: Change index of a graphic in a GraphicsLayer

KristianEkenes — Tue, 19 Jan 2016 17:09:32 GMT

Layers are treated the same way as graphics in 4.0 since they are also part of a collection in the map. Map | API Reference | ArcGIS API for JavaScript

So you can use the same moveItem() method to reorder:

//moves LayerA into index 1 (on top of LayerB)

map.layers.moveItem(LayerA, 1);

Re: Change index of a graphic in a GraphicsLayer

TyroneBiggums — Tue, 19 Jan 2016 17:19:44 GMT

What about 3.x?

Re: Change index of a graphic in a GraphicsLayer

GirishYadav — Tue, 19 Jan 2016 19:37:47 GMT

There is a method in Map class to change the layer order.

Map | API Reference | ArcGIS API for JavaScript

-Girish

Re: Change index of a graphic in a GraphicsLayer

TyroneBiggums — Tue, 19 Jan 2016 20:28:19 GMT

Is there a magic trick for graphics? Or is remove/add graphics the way to go still. Thanks for the pointer to reorderLayer. That worked great.

Re: Change index of a graphic in a GraphicsLayer

GirishYadav — Sun, 12 Dec 2021 06:52:08 GMT

There is no in-built method to reorder the graphics, But, as Layer.Graphics is an array, we can manipulate it with javascript array methods.

Sure, you can also use remove/add graphics, but the way I prefer is this:

Array.prototype.reorder = function (fromIndex, toIndex){
     this.splice(toIndex, 0, this.splice(fromIndex, 1)[0]);
}
//an example
var a = [1,2,3,4,5];
a.reorder(3, 0);
console.log(a)
//a is now [4,1,2,3,5]

This is added as an extension method, therefore it can be used with any array in your app. However, if you just want to use it in one place then simply use one line that is inside the function.

-Girish

Re: Change index of a graphic in a GraphicsLayer

TyroneBiggums — Wed, 20 Jan 2016 17:53:50 GMT

I haven't had a chance to test this out, yet. Do the graphics re-order on the map with this method, or are there further steps? In other words, if the graphics are all on top of each other with 100 opacity, does this bring a graphic to the top?

Re: Change index of a graphic in a GraphicsLayer

BrandonFlessner — Wed, 08 Nov 2017 17:25:58 GMT

the .moveItem() method does not appear to exist at 4.5. I tried using .reorder(graphic, 0). Using .indexOf(graphic) I see that indeed the graphic was moved to the 0 position in the graphics collection, but the graphicsLayer does not redraw. Any ideas?

Re: Change index of a graphic in a GraphicsLayer

RobertScheitlin__GISP — Wed, 08 Nov 2017 17:36:00 GMT

Brandon,

It sounds like a bug where the layer does not re-draw based on the reorder. You can force the view to refresh by setting the view.extent = view.extent.