nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

map.reorder(Layer, Index) does not reorder properly in TOC

DanielSmith

Hello,

I have developed little imagery slider widget for the SFV that allows users to select a band combination with a radio button then slide a HSlider to one of 4 dates listed. The problem i am having is that when i call map.reorder(tiledlayer2.id,1) the map ends up in the proper location on the map (right above the base layer) but the in the TOC it is always third from the bottom...
[LEFT][ATTACH=CONFIG]2829[/ATTACH][ATTACH=CONFIG]2830[/ATTACH]
[/LEFT]

Any help is greatly appreciated.

&#83.zip

77721&#83.zip

GUID-E207C3B7-8047-4335-A3E8-D63A84A04370-web.png

g7394401-esri-tutorials-gis-projects-1920x1080.jpg

Vind meer berichten getagd met

Accepted answers

All comments

Anonymous User

Original User: D.E.Smith99

Beginning of week Bump... Any thoughts???

SarthakDatt

Hey Daniel,

Looks like the bug is in the TOC component(TOC.as) on how it reacts to map.reorder(). The problem is the LayerListWidget/TOC deals with just the "operational layers", while the reorder takes into account all the layers on the map causing the mismatch in the order.

Try replacing the onLayerReorder() in TOC.as with:

private function onLayerReorder(event:MapEvent):void
{
        var layer:Layer = event.layer;
        var index:int = event.index;
        
        var i:int;
        var currentTOCIndex:int;
        var currentItem:Object;
        if (index <= (map.layerIds.length - _tocRoots.length)) // move this item to the bottom of toc
        {   
            // index of item to move
            currentTOCIndex = getCurrentTOCIndex();
            // item to move
            currentItem = _tocRoots.getItemAt(currentTOCIndex);
                    
            for (i = currentTOCIndex; i < _tocRoots.length; i++)
            {   
                if(i == _tocRoots.length - 1)
                {
                    _tocRoots.setItemAt(currentItem, _tocRoots.length - 1);
                }
                else
                {
                    _tocRoots.setItemAt(_tocRoots.getItemAt(i+1), i);
                }
            }  
        }
        else if ((map.layerIds.length - _tocRoots.length) < index < map.layerIds.length)
        {   
            // index of item to move
            currentTOCIndex = getCurrentTOCIndex();
            // item to move
            currentItem = _tocRoots.getItemAt(currentTOCIndex);
                                    
            var newTOCIndex:Number = map.layerIds.length - index - 1;
            if (newTOCIndex < currentTOCIndex)
            {
                for (i = currentTOCIndex; newTOCIndex <= i; i--)
                {
                    if(i == newTOCIndex)
                    {
                        _tocRoots.setItemAt(currentItem, newTOCIndex);
                    }
                    else
                    {
                        _tocRoots.setItemAt(_tocRoots.getItemAt(i-1), i);
                    }
                }
            }
            else
            {
                for (i = currentTOCIndex; i <= newTOCIndex; i++)
                {
                    if(i == newTOCIndex)
                    {
                        _tocRoots.setItemAt(currentItem, newTOCIndex);
                    }
                    else
                    {
                        _tocRoots.setItemAt(_tocRoots.getItemAt(i+1), i);
                    }
                }
            }
        }
        
        function getCurrentTOCIndex():int
        {   
            var result:int;
            for (i = 0; i < _tocRoots.length; i++)
            {
                if (_tocRoots.getItemAt(i) is TocMapLayerItem && TocMapLayerItem(_tocRoots.getItemAt(i)).layer === layer)
                {   
                    result = i;
                    break;
                }
            } 
            return result;
        }
 }

Hope that fixes the issue.

Anonymous User

Original User: D.E.Smith99

Sarthak,

Thank you so much. The augmented code for TOC.as you provided worked perfectly to reorder the added tiled service to the bottom of the TOC. You folks on the Flex Team rock!! Is his bug fixed in the newest release that is coupled with ArcGIS 10?

Daniel.

SarthakDatt

No, not the current release. Will put this fix in the next version.

Anonymous User

Original User: JohnElias

Is there a similiar solution using the javascript api?

eddiequinlan

I'm not sure if this is a better solution, but I've taken parts of previously mentioned code and adjusted it as below. It seems a bit simpler and seems to work 85% of the time. What i mean by that, is it will properly drag and drop the layer in the correct position in the TOC list and then draw 85% of the time correctly on the map. The other 15% of the time it doesn't seem to be drawing the map in the correct draw order. However, if you move the selected layer again it seems to then work correctly.

Maybe someone can expand on that and let me know what's happening.

code here:

private function DragStart(event:DragEvent):void
{
var openItems:Array = this.openItems as Array;
for each(var o:Object in openItems)
{
   this.expandItem(o,false);
}
}

private function DragEnter(event:DragEvent):void
{
   _tocRoots = this.dataProvider as ArrayCollection;
DragManager.acceptDragDrop(event.currentTarget as TOC);
if ((event.currentTarget as TOC)==null)
{
   DragManager.showFeedback(DragManager.NONE);
   event.preventDefault();
}
_draggedLayer = this.selectedItem as TocMapLayerItem;
}

eddiequinlan

I'm reposting the code from my last thread....... something happened when trying to insert it into the thread

private function DragStart(event:DragEvent):void
{
var openItems:Array = this.openItems as Array;
for each(var o:Object in openItems)
{
this.expandItem(o,false);
}
}

private function DragEnter(event:DragEvent):void
{
_tocRoots = this.dataProvider as ArrayCollection;
DragManager.acceptDragDrop(event.currentTarget as TOC);
if ((event.currentTarget as TOC)==null)
{
DragManager.showFeedback(DragManager.NONE);
event.preventDefault();
}
_draggedLayer = this.selectedItem as TocMapLayerItem;
}

private function DragFinished(event:DragEvent):void
{
if (event.action!="move")
return;
if (_draggedLayer==null)
return;
this.selectedItem = _draggedLayer.layer;

newTOCindex = getMoveToTOCindex();
var maxLayerint:int = _tocRoots.length - 1; // number of layers displayed
// gives the inverse ordered number since the list and map draw order are reversed......

var drawmapOrder:int = Math.abs(newTOCindex - maxLayerint);

function getMoveToTOCindex():int
{
var result:int;
var i:int;
for (i = 0; i < _tocRoots.length; i++)
{
   if (_tocRoots.getItemAt(i) is TocMapLayerItem &&
   TocMapLayerItem(_tocRoots.getItemAt(i)).layer === _draggedLayer.layer)
{
result = i;
break;
}
}
return result;
}
this.map.reorderLayer(_draggedLayer.layer.id, drawmapOrder);
}

private function onLayerReorder( event:MapEvent ):void
{
var layer:Layer = event.layer; //current layer being moved

for (var i:int = 0; i < _tocRoots.length; i++)
{
var item:Object = _tocRoots;
if (item is TocMapLayerItem && TocMapLayerItem(item).layer === layer)
   {
   _tocRoots.removeItemAt(i);
   _tocRoots.addItemAt(item, newTOCindex);
   break;
   }
}
layer.refresh();
}

Good Luck and Hope to hear some suggestions,

Eddie

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.