Ordering index of markers displayed from search results

Fox71

Hello!

Using the search, if I get a result that is in the same position as a previous result, the icon of the new result is stacked below the icon of the first results and is not visible. Is there a way to make sure the latest result stacks on the top of previous results?

I also have markers that are displayed with toggle buttons. When some are already toggled on the map, the markers from a search result stack up below the toggled makers. Is there a way to make sure search results always stack on the top of any other markers on the map?

 

Thank you!

Ben

UndralBatsukh

Hi there, 

So I looked your test app. I'd suggest adding your search results to a different layer and order the features in that layer by their ObjectIds in descending order to ensure that the latest feature is always displayed over other features. You can order the features by setting orderBy property on the layer. 

I created this simple codepen app to show how this would work: https://codepen.io/U_B_U/pen/XWzbJbq

In this app, I am creating a client-side FeatureLayer as shown below. Notice that I am setting the orderBy parameter to order features by their ObjectIds in descending order.

let searchLayer;
view.whenLayerView(jsonLayer).then(() =>{
  searchLayer = new FeatureLayer({
    source: [], 
    copyright: "USU",
    popupTemplate: jsonLayertemplate,
    fields: jsonLayer.fields,
    renderer: jsonLayerRenderer,
    orderBy: {
      field: "OBJECTID",
      order: "descending"
    },
    objectIdField: "OBJECTID",
    geometryType: "point", 
  });
  map.add(searchLayer);
});

 

Then when the search is completed, you add the search result to this layer as shown below.

searchWidget.on('select-result',function(event){
  layer = event.result.feature.layer;
  const adds = {
    addFeatures: [event.result.feature]
  };
  searchLayer.applyEdits(adds);
});
          

 

I noticed that UniqueValueRenderer you are assigning to your GeoJSONLayer is incomplete. You need to make sure all unique values are included in the renderer. Otherwise, orderBy won't work properly. For example, I had to add general type in the renderer like the following: 

{
  value: "general",
  symbol: {
    type: "picture-marker",
    url: 'https://webdev.usu.edu/map2/images/icons/interest.png',
    width: '32px',
    height: '37px'
  }
},
{
  value: "general building",
  symbol: {
    type: "picture-marker",
    url: 'https://webdev.usu.edu/map2/images/icons/interest.png',
    width: '32px',
    height: '37px'
  }
},

 

Hope this helps,