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

How can I change the order of the layers information displayed in the popup window?. I have the popup window enabled in two layers, but I need one of them specifically to be shown first. How can I do that?, where in the code I need to change that?

MaribelValderrama

How can I change the order of the layers information displayed in the popup window?. I have the popup window enabled in two layers,
but I need one of them specifically to be shown first. How can I do that?, where in the code I need to change that?

Thanks,

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Maribel,

Then currently there is no way to configure the popups order.

All comments

RobertScheitlin__GISP

Maribel,

Does changing the layer order in the webmap not help this?

BrianBulla_0-1625067366517.png

MaribelValderrama

No, I tried that but it didn't changed the order in the popup window.

Thanks,

RobertScheitlin__GISP

Maribel,

Then currently there is no way to configure the popups order.

MaribelValderrama

Thanks Robert.

LarryStout

Maribel,

It is possible and I have done it. Here is a snippet of code that I use:

var layerOrder = ['layer1', 'layer2', 'layer3'];
if (layerOrder && layerOrder.length) {
  var ignore = false;
  on(this.map.infoWindow, 'dfd-complete', function(evt) {
    // The dfd-complete event is undocumented and may not work in future versions.
    if (evt.target.count > 1) {
      evt.target.setContent('');
    }
  });
  on(this.map.infoWindow, 'set-features', function(evt) {
    if (ignore || evt.target.count < 2) { 
      return; 
    }
    
    var features = evt.target.features;
    var layerNames = [];
    var newLayerIndexes;
    var index;
    var newFeatures = [];
    array.forEach(features, function(feature) {
      layerNames.push(feature.getLayer().name);
    });
   
    newLayerIndexes = Array(layerNames.length);
    array.forEach(layerNames, function(layerName, idx) {
      index = array.indexOf(layerOrder, layerName);
      if (index === -1) {
        newLayerIndexes.push(idx);
      } else {
        // In the case of multiple features from the same layer
        while (newLayerIndexes[index] !== undefined) {
          index++;
        }
        newLayerIndexes[index] = idx;  
      }
    });


    array.forEach(newLayerIndexes, function(index) {
      if (index !== undefined) {
        newFeatures.push(features[index]);
      }
    });
    
    ignore = true;
    evt.target.setFeatures(newFeatures);
    evt.target.show();
    ignore = false;
  });
}

This code should go into a "headless" widget (like my Anvil Widget). You can see it in action here: Hamilton County Map Viewer. My layerOrder is:

[
  "Cemetery", 
  "School", 
  "Railroads", 
  "Interstates and US Highways", 
  "State Highways", 
  "Major Roads", 
  "Minor Roads", 
  "Parcels", 
  "Subdivision", 
  "Corporate Limits", 
  "Political Township"
]

When I have some time, I'll put this into another variation of the Anvil Widget.

Larry

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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