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

Hybrid Basemap Reference Layer overlaying operational layers.

jjgarrett0

It seems that the hybrid basemap always sets the hybrid-reference-layer on top of all layers on the map. Is this by design? My users are running into issues when using the hybrid basemap because they have features that sometimes are hidden under the reference layer. An example would be a polyline from a feature layer that is along a state border. They can't see the polyline without toggling off the hybrid basemap. I have tried to manually force the re-order of the hybrid reference layer but it never seems to work. Is it just not possible to do so with a basemap?

Thanks!

Find more posts tagged with

Accepted answers

mleahy_cl

Rereading your question, it seems this is a specific issue with the hybrid imagery layer. So maybe you can just switch to the non-hybrid Imagery Layer ?

Or if you want the Hybrid Imagery with labels etc, but under other features - refer to my sample above, but add both the base and reference layer styles to the `baseLayers` property of your custom basemap.

All comments

jjgarrett0

This idea worked out. Thank! For anyone that stumbles upon this later in life here is what I did.

    const imageryLayer = new TileLayer({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'})
    const imageryRefLayer = new VectorTileLayer({url: 'https://www.arcgis.com/sharing/rest/content/items/30d6b8271e1849cd9c3042060001f425/resources/styles/root.json'})

    const customHybrid = new Basemap({
        baseLayers: [imageryLayer, imageryRefLayer],
        thumbnailUrl: '/assets/images/hybrid.jpg',
        id: 'customHybrid'
    })

mleahy_cl

Rereading your question, it seems this is a specific issue with the hybrid imagery layer. So maybe you can just switch to the non-hybrid Imagery Layer ?

mleahy_cl

Perhaps you can create a custom basemap that uses just the base style without the reference:

        // Example, using URL to the Dark Gray Base style
        const mapBaseLayer = new VectorTileLayer({
          url: "https://www.arcgis.com/sharing/rest/content/items/5e9b3685f4c24d8781073dd928ebda50/resources/styles/root.json",
        });

        // Create a Basemap with the VectorTileLayer.
        const customBasemap = new Basemap({
          baseLayers: [mapBaseLayer],
        });
        
        // Create the Map with an initial basemap
        const map = new Map({
          basemap: customBasemap,
        });

You can find the URLs for the styles by finding the basemap you want (e.g., the Dark Gray Canvas), and in the list of layers, you'll see the reference and base styles listed separately. Follow the link to one of those, and in the details you should see a button to 'View Style' - clicking that will take you to the URL of the style. Swap out the URL to that JSON file in the sample above, and you'll get your chosen basemap without the reference.

There is likely a better or more automated way to do this, and the example above might be too simple. For example, if you need to be able to easily switch basemaps - then you'd have to do a bit more to set that up...for example, by creating a basemap toggle with two custom basemaps setup this way, or a basemap gallery configured with a local basemaps source that provides a collection of custom basemaps.

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.