Change index of a graphic in a GraphicsLayer

8777
14
11-20-2015 12:23 PM
TyroneBiggums
Occasional Contributor III

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.

Tags (2)
0 Kudos
14 Replies
ChrisSmith7
Frequent Contributor

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.

TyroneBiggums
Occasional Contributor III

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?

0 Kudos
ChrisSmith7
Frequent Contributor

Interestingly, it's in the Silverlight API:

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

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

0 Kudos
TyroneBiggums
Occasional Contributor III

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

0 Kudos
KristianEkenes
Esri Regular Contributor

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

0 Kudos
TyroneBiggums
Occasional Contributor III

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?

0 Kudos
KristianEkenes
Esri Regular Contributor

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

0 Kudos
TyroneBiggums
Occasional Contributor III

What about 3.x?

0 Kudos
GirishYadav
Occasional Contributor

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

Map | API Reference | ArcGIS API for JavaScript

-Girish

0 Kudos