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.

[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.

[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]

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]

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?

[JonathanDawe_BAS]

The mapview should have a resolution property, but I'm not sure how this applies when you set a specific size for a screenshot. For example, if you set the dimensions for a 4K screenshot, how does that actually work? Does it still use the same visible map area and simply scale it up to the new dimensions you've specified?

Could you use the ratio of the mapview resolution property to the ratio of the map's dimensions to the screenshot's dimensions, and then use that to apply the correct scaling to get your scalebar right?

[VenkataKondepati]

Hi @Aeseir,

I haven't tried it myself.
If your custom scalebar is showing the wrong distance, it's likely an issue with resolution vs. scale conversion. Here's a clean example you can try. This generates a simple scalebar length (in meters) based on the current view.scale.

// Get the view scale and DPI
const scale = view.scale; // current map scale
const dpi = 96; // standard screen DPI
const inchesPerMeter = 39.37;

// Calculate meters per pixel
const metersPerPixel = scale / (dpi * inchesPerMeter);

// Decide how long (in pixels) your scalebar image should be
const scalebarPixelLength = 100; // e.g., 100px wide

// Ground distance in meters represented by 100 pixels
const groundLengthMeters = scalebarPixelLength * metersPerPixel;

console.log(`100px scalebar represents approximately ${Math.round(groundLengthMeters)} meters`);

• Label your scalebar correctly

• Draw a static image or Canvas line scaled to that value

• Add tick marks or text as needed

Please let me know if this helps.

Regards,

Venkat