Scaling maps while preserving the same bounds and zoom level

[vanilla-lake]

Hello everyone,

We are trying to add a feature that allows users to print an in-app map. Since the page on which it is to be printed might have a different size than the on-screen map, we need a way to scale the map while keeping the displayed information identical to what we show in-app. As such, we need a way to render a map at a different size, but with the same bounds and zoom level.

Unfortunately, rendering the same bounds in a map with a different size changes the zoom level and thus the level of details. Rendering a map with the same center and zoom level at a different size causes the bounds to change. Scaling using CSS is also not an option, as the map becomes pixelated when scaling up.

Is there a way to scale a map while keeping the same bounds and zoom level?

[HarelM]

I had this functionally in my site a few years back, but very few people actually used the site for printing. So I removed it. No matter how much I tried it always looked bad :-)
70% of my users are using the site from mobile. I would say the printing had ran its course...
I think there's an issue about using transform scale on the site that might help in this case, not sure.
SetScale from an API point of view seems odd, I would expect a different style instead.
But since this can be valuable to others I'll be happy to review it.

[vanilla-lake]

Yeah, you're right... How about allowing users to set the pixel ratio manually then? It looks like maplibre-gl-export overwrites devicePixelRatio in order to set a custom DPI value: https://github.com/watergis/maplibre-gl-export/blob/3977f96e829bf589d9988270da26444fdab807d9/lib/map-generator.ts#L149-L151

We could add a pixelRatio property to the Map constructor's options along with a Map#setPixelRatio method.

[HarelM]

You might be able to override it globally? I.e. global.devicePixelRatio = something...?

[vanilla-lake]

That's what maplibre-gl-export is doing. It just doesn't seem ideal to overwrite a built-in global property, even temporarily. Some other code relying on devicePixelRatio might run asynchronously between the time it is overwritten and set back to its initial value in the idle event handler.

[vanilla-lake]

This has been addressed with the new Map#setPixelRatio method added as part of #772.

[sjoerdvanBommel]

I'm running into exactly the same issue as described, but changing Map#setPixelRatio only changes the quality of the map for me (especially of the text). Am I doing something wrong here? 🤔 I was expecting the boundaries to change as well

Default pixel ratio:

Pixel ratio of 10:

[sjoerdvanBommel]

@HarelM are you aware of any mistakes I'm making? Thanks in advance 🙏

[HarelM]

This is a discussion.
If you think there's an issue please open an issue with exact steps to reproduce, otherwise I can't help...

[sjoerdvanBommel]

Alright thanks, I created a codesandbox and opened up this issue :)