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 to remove Attribution from <arcgis-map> components (4.34)

JonathanDawe_BAS

I've been using map components for a while now and have had a workflow where in some cases I manually override the styling of some of the esri components. In my case I have overridden the styles of the attribution widget, always following the guidance as described here: https://developers.arcgis.com/documentation/esri-and-data-attribution/

Previously I have done the following:

1) Removed the Powered by Esri text - I hide it with css targetting ".esri-attribution__powered-by" selector. This has then been moved to a popup with all of the other parts of the applications key attribution.

2) Overridden the colours and styles specifically for the attribution widget. e.g. targetting the .esri-attribution selector.

The new updates have moved the attribution widget to the shadow-dom, meaning I can't target it with CSS overides anymore. I am hesitant to use css variable overrides as ideally I just want full control over the look and styling of the component.

I could reimplement this completely using the attribution viewmodel, however I can't see a way of removing the attribution from the arcgis-map in its initialisation. I end up having to hooking into the view ready event, and then removing it from the ui, which creates a frankly horrible flicker of content.

How can I achieve my desired override?

Find more posts tagged with

Accepted answers

RRubalcava

On the removing it question, right now that is via the "view.ui".

https://codepen.io/odoe/pen/ZYQoxLX?editors=1000

    const mapElement = document.querySelector("arcgis-map");
    // wait for view prop to be useable
    // map and view not ready yet
    await mapElement.componentOnReady();
    mapElement.view.ui.components = [];

On the styling part, we don't have any tokens for this yet. Trying to target calcite tokens will impact other ui parts like Popup widget which is still in same UI as attribution.

We have some plans for attribution in upcoming releases, to make this type of workflow easier. We didn't add a `hide-attribution` or `attribution-disabled` this release because those other pieces are not in place yet.

This is all great feedback for us to look at when planning this feature out, thanks!

All comments

JonathanDawe_BAS

@ReneRubalcava - one oddity I now see is that the Attribution styling means that its position is controlled by the map view padding not the new layout overlay space. This makes it very difficult to work with a mobile view where I want to push the map focus up to the top 2/3s of the display by adding some padding at the bottom of the interface.

See this example here: https://codepen.io/JDawe/pen/gbPzKGQ

JonathanDawe_BAS

Thanks, that makes sense - though in my application i do still see a flicker due to the attribution being there and then being removed after the view is instantiated. Its in React development, so i wonder if things are a bit slower than it would be in production.

My solution has ended up something like this:

    const mapElement = document.querySelector('arcgis-map');
    const adoptedStyleSheets = mapElement?.shadowRoot?.adoptedStyleSheets;
    const firstStyleSheet = adoptedStyleSheets?.[0];
    if (firstStyleSheet) {
      firstStyleSheet.insertRule(`
    .esri-attribution__powered-by{
      display: none !important;
    }`);

      firstStyleSheet.insertRule(`
    .esri-attribution.esri-widget{
      height: 20px !important;
      color: var(--attribution-color) !important;
      background-color: var(--attribution-background-color) !important;
    }
    `);
    }

RRubalcava

On the removing it question, right now that is via the "view.ui".

https://codepen.io/odoe/pen/ZYQoxLX?editors=1000

    const mapElement = document.querySelector("arcgis-map");
    // wait for view prop to be useable
    // map and view not ready yet
    await mapElement.componentOnReady();
    mapElement.view.ui.components = [];

On the styling part, we don't have any tokens for this yet. Trying to target calcite tokens will impact other ui parts like Popup widget which is still in same UI as attribution.

This is all great feedback for us to look at when planning this feature out, thanks!

VenkataKondepati

You can below code but not sure, I haven't tested it.

import AttributionViewModel from "@arcgis/core/widgets/Attribution/AttributionViewModel";

const vm = new AttributionViewModel({ view });
const btn = document.getElementById("attrBtn");
const panel = document.getElementById("attrPanel");

btn.addEventListener("click", async () => {
  await vm.load();
  panel.innerHTML = vm.attributionText;   // or build a richer list from vm.state/layer credits
  panel.hidden = false;
});

// place default attribution minimally, avoid flicker by setting UI up-front
view.ui.move("attribution", "bottom-right"); // keep visible but secondary

VenkataKondepati

Hi @JonathanDawe_BAS,

You’re right, the policy allows moving “Powered by Esri” into a UI that’s always accessible (e.g., a clearly labeled menu/button). The shadow-DOM change just blocks hard CSS hacks

It's my bad.

Regards,

Venkat

JonathanDawe_BAS

Hi @VenkataKondepati ,

I'm literally following the guidance exactly as written in the developer documentation: https://developers.arcgis.com/documentation/esri-and-data-attribution/ . It states that the attribution "powered by esri" can be moved into a menu that is easily accessible. In this case visible on the initial start up of the applcation and easily visible by a menu.

I literally quote: "The text must be clearly displayed on the map, application, or in a window that is accessible from a menu or button."

VenkataKondepati

Hi @JonathanDawe_BAS,

You cannot do this the old way anymore and you shouldn’t remove “Powered by Esri” at all. Attribution must remain visible and unmodified per Esri’s attribution policy. The move to shadow DOM intentionally prevents hard CSS overrides that hide/alter it.

You can use the supported theming hooks (CSS custom properties / exposed ::part(...) if available) to restyle within bounds.

If you need a richer panel, build one with AttributionViewModel for your own UI, but keep the default Attribution widget visible (e.g., small, in a corner).

To avoid flicker when re-positioning widgets, set UI at creation: in API use ui: { components: ['attribution','zoom',...] } and view.ui.move('attribution', 'bottom-left'). In Map Components, control with the ui-components attribute (don’t omit attribution).

Bottom line: don’t hide/remove the built-in attribution; style via supported variables/parts, and add your custom panel alongside if needed.

Regards,
Venkat

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.