Choosing my own ordering of the layer options in a LayerList without affecting the order in which they are loaded

[andrewc213]

This screenshot shows just several of the many child layer options of the Reference layers GroupLayer object. The order in which the children appear in the Reference layer section of the layers menu is the reversed order of the array of Layers that I wrote in my code for the Reference layers GroupLayer. But I'm wondering if I can change the load order of the Gas Fields and the Gas Wells child layers while keeping the same displayed order in the LayerList object. The way those two child layers are ordered, Gas Fields loads after Gas Wells instead of before, and I want Fields to load before Wells. But I would like their ordering relative to each other to be the same in the LayerList.

[Sage_Wall]

Hi @andrewc213 ,

The layer list is designed to display the layers in the same order as the visual hierarchy of the layers on the map, which is determined by the order in the `Map.layers` collection. Otherwise, things like dragging and dropping layers into other positions wouldn't be possible. You can control where the layer is added by providing the optional index parameter in the `.add()` method, but by design the layer list reflects the order of the layers in the map and there isn't any supported way to change the order in the layer list that doesn't affect the order of the layers in the map.

[Sage_Wall]

@andrewc213 might I ask the reason why you'd like the order different? It might help justify an enhancement to the API to do something like this.

[andrewc213]

Ah, well, in my case, I'm making an improved version of an injectable Esri map TypeScript component to replace a map applet using some older API (not sure which one, though). My justification for wanting a customizable ordering of the child layers is the desire to maintain the same ordering of layers in the original map applet (which is not an alphabetical order, but rather an arbitrarily chosen order of layers in decreasing order of relevance for end users, e.g. a layer Supervisorial Units (not shown in the screenshot) on top, then Assessor Parcels after that, and so on). There's a particular order in which I want the sublayers displayed in the layers menu, but it doesn't correspond exactly to the order in which I want the sublayers actually loaded into the map view. Hence my desire to be able to create a custom ordering of the layer options in the LayerList menu, which should be independent of the load order of the visual layers of map data.

[MatthewDriscoll]

If you bring them in as a MapImageLayer you can use the sublayers to modify the order they will show in the LayerList.  They will be layered like a cake, for the example below the Lot Lines will be on the bottom and the Roads will be on the top.

const baseLayers = new MapImageLayer({
      url: "...server/rest/services/...",
      sublayers:[
        { id: 24, title: "Lot Lines"},
        { id: 23, title:"Address Annotation", visible: false},
        { id: 22, title: "Bridges"},{ id: 21, title: "Watershed and Drainage Districts", visible: false},
        { id: 20, title: "Sewer Districts",visible: false},{ id: 19, title: "School Districts",visible: false},
        { id: 18, title: "Rural Water Districts",visible: false},{ id: 17, title: "Gas Districts",visible: false},
        { id: 16, title: "Fire Districts",visible: false},{ id: 15, title: "Electric Districs",visible: false},
        { id: 14, title: "Cemetery Districts",visible: false},{ id: 13, title: "Commissioner Districts",visible: false},
        { id: 12, title: "Voting Districts",visible: false},{ id: 11, title: "Zoning",visible: false},
        { id: 10, title: "FEMA Floodplain",visible: false},{ id: 9, title: "Tax Units",visible: false},
        { id: 8, title: "Sections",visible: false},{ id: 7, title: "Subdivisions",visible: false},
        { id: 6, title: "River/Streams"},{ id: 4, title: "Lakes"},{ id: 5, title: "County Boundary"},
        { id: 3, title: "Parcels"},{ id: 2, title: "City Limits"},
        { id: 1, title: "Railroads"},{ id: 0, title: "Roads"},             
      ],     
    });

[andrewc213]

Okay, so the visual data for Railroads overlaps any Lot Lines; sorry if this sounds like a dumb question, but if you wanted to keep the relative visual ordering of those two layers the same (as they would appear in the map view), but reverse the order of their options in the LayerList (without affecting the actual load order of the visual map layer data), would you simply rearrange their respective items in the sublayers array? Like...

{ id: 0, title: "Roads"},
{ id: 23, title:"Address Annotation", visible: false},
{ id: 22, title: "Bridges"},{ id: 21, title: "Watershed and Drainage Districts", visible: false},
{ id: 20, title: "Sewer Districts",visible: false},{ id: 19, title: "School Districts",visible: false},
{ id: 18, title: "Rural Water Districts",visible: false},{ id: 17, title: "Gas Districts",visible: false},
{ id: 16, title: "Fire Districts",visible: false},{ id: 15, title: "Electric Districs",visible: false},
{ id: 14, title: "Cemetery Districts",visible: false},{ id: 13, title: "Commissioner Districts",visible: false},
{ id: 12, title: "Voting Districts",visible: false},{ id: 11, title: "Zoning",visible: false},
{ id: 10, title: "FEMA Floodplain",visible: false},{ id: 9, title: "Tax Units",visible: false},
{ id: 8, title: "Sections",visible: false},{ id: 7, title: "Subdivisions",visible: false},
{ id: 6, title: "River/Streams"},{ id: 4, title: "Lakes"},{ id: 5, title: "County Boundary"},
{ id: 3, title: "Parcels"},{ id: 2, title: "City Limits"},
{ id: 1, title: "Railroads"},{ id: 24, title: "Lot Lines"}

[MatthewDriscoll]

Correct, it won't mess with how the layers are stacked on the map, just how they appear in the layerlist.