topic Re: access scale-bar value in ArcGIS JavaScript Maps SDK Questions

access scale-bar value

LefterisKoumis — Tue, 21 Oct 2025 23:19:25 GMT

I used to get the value of the scale bar widget,

const scaleText = scaleBar.container.innerText.trim();

however, with the new scale-bar component, it seems that you cannot directly access its value.

I suppose you need to get the scale from the arcgis-map component but sometimes it doesn't sync with the display of the scale value. Is there way to access the scale bar value?

Re: access scale-bar value

fdeters — Wed, 22 Oct 2025 00:22:10 GMT

If you want to do something similar to your snippet above (just snagging the text from the DOM), this should work:

const map = document.querySelector('arcgis-map'); await map.viewOnReady(); const scaleBar = document.querySelector('arcgis-scale-bar'); await scaleBar.componentOnReady(); const scaleText = scaleBar.shadowRoot.querySelector('.esri-scale-bar').textContent.trim();

I'd recommend using the `view` property of the arcgis-scale-bar component to access the MapView and getting the scale that way instead, though.

Re: access scale-bar value

ReneRubalcava — Wed, 22 Oct 2025 16:54:33 GMT

Could you provide a use case for how you would use the value? I haven't seen this request before, but we can look at adding it if we know what the use case is.

Re: access scale-bar value

LefterisKoumis — Wed, 22 Oct 2025 17:14:07 GMT

I have a tool that I require the users to zoom in to the area of interest beyond a specific scale so they can click at the correct location. Yes, users could monitor the scale bar display to see what is the current scale, but there are those who do not. So, in the tool panel I have the display of the current scale.

Re: access scale-bar value

LefterisKoumis — Wed, 22 Oct 2025 18:28:56 GMT

Thank you for your response. I implemented your solution but the shadowRoot was null.

Then, I tried to access the view property of the arcgis-scale-bar and then sub-property viewpoint and I get the scale attribute. However, I noticed that displayed scale and the scalebar.view.viewpoint.scale do not match. For example, when the map scale on the map shows 20mi, the scale from the viewpoint is 2311162.2171545 which translates to 36.48 mil

Re: access scale-bar value

fdeters — Wed, 22 Oct 2025 19:47:02 GMT

Hmmm, that's unexpected. Just to check—did you do `await scaleBar.componentOnReady()` before attempting to access the shadowRoot? This is a method I use regularly for accessing Calcite and ArcGIS web components' shadow DOMs.

As for the mismatch between the view scale and the scale bar text: I think it's appropriate that they don't match. Here's my reasoning:

The MapView's scale is the actual precise map scale (e.g. 1:2,311,162.2171545 in your example).
The value displayed in the scale bar isn't really the map's scale, it's the length of the scale bar itself at the current map scale. So in your example, at the scale 1:2,311,162.2171545, the scale bar covers the equivalent of 20 miles on the map.
- You can see the scale bar change length as you scroll in and out of the map. This is why you always see nice round numbers in the scale bar—it dynamically adjusts its own length to give a useful visual reference for the current scale.

Re: access scale-bar value

LefterisKoumis — Wed, 22 Oct 2025 22:33:08 GMT

I did use `await scaleBar.componentOnReady()` but is not working.

Thank you for clarifying the reason behind the mismatch between the scale shown by the scale bar and the map view. It appears that I’ll need to find a way to access the value displayed on the scale bar, since that’s what users actually see.