While trying to add a layer on top of basemap the basemap labels are appearing on top of the custom layer.

[Raneemtest]

The client is trying to cover a specific area of the basemap with a customized shapefile and customized labels. The code works fine on the website, and the area is covered as expected. However, when he tries to run the code on an iOS or Android device, the labels overlap, and the basemap labels appear on top. Do you have any sample code that you can share with me to test it with the client?

[Ting]

Hi Raneem, see the attached project as a starting point. Please note that you'll need an ArcGIS Developers API key to run the app.

The observed behavior is expected. For the light gray basemap style, the light gray base layer tiles are in the basemap's baselayers array, while the labels are in the reference layers array. All the operational layers are inserted between the base layers and the reference layers, thus the labels in the reference layer is shown above the feature layer.

I'm currently asking our internal teams who created the content for basemap styles about why the labels are in a reference layer. Meanwhile, there are 3 possible solutions

- If the client can use the topographic basemap style, it has the labels in the base layer, so it will be covered by a feature layer (from shapefile)

- Or the client can create the basemap object themselves, i.e., 

let baseLayer = AGSArcGISVectorTiledLayer(url: URL(string: "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:LightGray:Base")!)
let labelsLayer = AGSArcGISVectorTiledLayer(url: URL(string: "https://basemaps-api.arcgis.com/arcgis/rest/services/styles/ArcGIS:LightGray:Labels")!)
let basemap = AGSBasemap(baseLayers: [baseLayer, labelsLayer], referenceLayers: nil)
map.basemap = basemap

 so they can control the order of the layers of the basemap more easily.

- Or they can manually move all the reference layers of a basemap into the base layers, such as

map.load { [weak self] error in
    guard let self else { return }
    let basemap = map.basemap
    for referenceLayer in basemap.referenceLayers {
        basemap.referenceLayers.remove(referenceLayer)
        basemap.baseLayers.add(referenceLayer)
    }
}

Please let me know if the client has follow up questions, or encourage them to ask on our forum directly! 🙂

[jswift]

As far as customizing popups and labels, I recommend Arcade now.  There are many online resources for learning Arcade, by Esri - documentation, videos, lessons, and good book by David Allen.  Unless there is a very compelling reason to stick with ahapefiles, Eri advised upgrading to using Geodatabases over shapefiles for web work starting about 12 years ago, and mobile as soon as mobile apps were invented. Because shp's are still ubiquitous, I still see people missing the fundamental move of the industry away from shp's to cloud-based storage solutions, even today. shps are a very, very old technology never designed to deliver data to the web. Big shp files, e.g. a few million records, probably won't even load to a web app - it will spin and never load - at least that was my experience back using ArcIMS (< 2010...), the precursor to AGOL. Simply importing the shp's into a Geodatabase (File or Enterprise) and publishing to AGOL will work like magic in web and mobile apps even for Big Data. Good luck!