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

Custom Scalebar

Aeseir

Hi all,

We currently use takeScreenshot to generate 4k images from maps. We then push those images to pipelines which enrich them with additional content.

One thing we are missing is a scalebar, specifically a custom one we tend to manually generate depending on finally processed image.

Since takescreenshot doesn't generate scalebar is there a way to determine the scale units per pixel when we execute takeScreenshot so that we can generate the custom scalebars separately.

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

Aeseir

we have tried that, but no matter what the scale bar we generate is off.

do you have example code you can share to show how you done it so we can see where our error is?

VenkataKondepati

Oh, Okay.

I think,takeSnapshot() captures just the rendered map image and not the widget layer (like scalebar), you’ll need to generate the scalebar manually using current map properties.

You can also try below steps.

Use view.scale or calculate resolution as:
resolution = view.extent.width / view.width
Convert map units per pixel to a known ground distance.
Draw your custom scalebar (Canvas/SVG) using that ratio.
Overlay it on the snapshot using Canvas merge or image composition.

You're basically replicating what the ScaleBar widget does but as a static image layer.

Aeseir

That is not my question, not asking about Scalebar widget.

We are building custom scalebar as image and adding to the already transformed image from takeSnapshot, which doesn't incorporate any Scalebars.

VenkataKondepati

Yes, you can customize the scalebar, but only in 2D (MapView). The built-in ScaleBar widget is the easiest option. It handles scale, units, and placement automatically. If you need something more custom, like a different design or fixed behavior, you can calculate scale using view.scale or resolution and build your own using HTML and CSS. But unless you have a specific reason, the widget usually does the job well.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.