How to change the order of how ListItems appear in the LayerList?

1616
4
Jump to solution
04-25-2019 08:23 AM
GregoryBologna
Occasional Contributor II

I have a LayerList with 3 ListItems. I want to order the ListItems differently than how they are added to the view.

Ex.

(my maps need to be added in this specific order so that layers can be toggled in the LayerList)

    var map = new Map({
      basemap: "streets"
    });

    // Item 0
    var latestYearAerial = new MapImageLayer({
      url: latestYearAerialUrl,
      title: "Latest Aerial",
    });
    map.add(latestYearAerial);

    // Item 1
    var priorYearAerials = new WMSLayer({
      url: priorYearAerialsUrl,
      imageTransparency: true,
      imageMaxWidth: 256,
      imageMaxHeight: 256,
      legendEnabled: false,
      visible: false,
      title: "Prior Year Aerials",
    });
    map.add(priorYearAerials);

    // Item 2
    var mapLayerAndLabels = new MapImageLayer({
      url: mapLayerAndLabelsUrl,
      title: "Map Layers & Labels",
    });
    map.add(mapLayerAndLabels);

I want to order my ListItems in the LayerList in this order

Item 0

Item 1

Item 2

but the result of the ListItems are reversed

Item 2

Item 1

Item 0

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Gregory,

   There is no event for when the LayerList widget is done/ready so you have to rely on a timeout.

setTimeout(function(){
  layerList.operationalItems.reverse();
}, 2000);

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Emeritus

Gregory,

   It is as simple as:

layerList.operationalItems.reverse();
0 Kudos
GregoryBologna
Occasional Contributor II

Thanks. I am guessing that this line needs to be hit after any work on layer list items. And since I am iterating the layer list to hide items in listItemCreatedFunction, I'm not sure where to place it. Here's a codepen of my dev. 

https://codepen.io/gregbolog/pen/vMbEMG

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Gregory,

   There is no event for when the LayerList widget is done/ready so you have to rely on a timeout.

setTimeout(function(){
  layerList.operationalItems.reverse();
}, 2000);
GregoryBologna
Occasional Contributor II

That works. Thanks.

0 Kudos