access scale-bar value

[LefterisKoumis]

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?

[fdeters]

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.

[LefterisKoumis]

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

[fdeters]

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.

[LefterisKoumis]

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.

[ReneRubalcava]

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.

[LefterisKoumis]

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.