move new graphic layer to a higher index (move up)

171
4
Jump to solution
04-16-2020 11:44 AM
CamCode
New Contributor III

I have created a simple polyline line graphic layer, i.e. below:

        const polyline = {
            type: "polyline",
            paths: [
                [lineYlineX],
                [coordinatesBxcoordinatesBy]
            ]
        };
        const polylineGraphic = new Graphic({
            geometry: polyline,
            symbol: simpleLineSymbol,
            id: "drawLine"
        });

 

                graphicsLayer.add(polylineGraphic);

The problem is, it's going behind some elements... when it shouldn't be. It needs to be the second to top layer. For instance, I only want my modals to have a higher index then my new line here.

But if second to top is too low level; I could probably figure it out if I could simply know how make it the highest index (or on top of everything). I am having trouble toggling it's index position at all with the below two methods.

Most recently I have tried the below moveItem method. And did not see any effect... I have also tried the reorderLayer method, but anytime I use that I get 'reorderLayer' is not a function (perhaps because it is 3.x technique and I am on 4.x?).

          //Gets the item in the 0 index
          let drawLinegraphic = polylineGraphic.graphics.getItemAt(0);
          //moves it to the 5 index
          polylineGraphic.graphics.moveItem(drawLinegraphic5);
0 Kudos
1 Solution

Accepted Solutions
AnneFitz
Esri Contributor

If it's returning -1, that means that there is no match for the findIndex function.

Here's an example using a FeatureLayer and GraphicsLayer: https://codepen.io/annefitz/pen/ExVKzxV 

View solution in original post

4 Replies
AnneFitz
Esri Contributor

Hi Cam,

If you are trying to move the graphicsLayer above the other layers within the map, you could try using the map.reorder(layer, index) method.

If you are just trying to move that specific graphic within your graphicsLayer, you could try using graphicsLayer.graphics.reorder(graphic, index).

Let me know if this works for you!

Thanks,

Anne

CamCode
New Contributor III

Thanks so much for the response! Is there any demo to this usage? For some reason, no matter what I do, or which method I implement, I console log my line graphic's index via the below and it is always -1.

const drawlineLP = myAPP.mapview.map.layers.findIndex(layer => {
      return layer.id === 'drawLine';
});
console.log(drawlineLP);

0 Kudos
AnneFitz
Esri Contributor

If it's returning -1, that means that there is no match for the findIndex function.

Here's an example using a FeatureLayer and GraphicsLayer: https://codepen.io/annefitz/pen/ExVKzxV 

View solution in original post

CamCode
New Contributor III

Thank you so much for that! Very helpful!