Select to view content in your preferred language

Large detail in small map

426
3
03-20-2024 02:07 AM
ViktorSafar
Occasional Contributor II

We have a case from a customer where they are using the JS API map/view to show a preview of a map that is to be physically printed on paper. The user selects map scale and a size in centimeters, and the map/view then shows a preview of what is to be printed. 

What they basically do is create a map view with the number of pixels that would add up to let's say 100 cm printout at 96 DPI, resulting in some 3800 pixels. They then scale* this down so that it fits onto the screen of the device. 

* scaling using CSS

This stops working for larger sizes on devices with device pixel ratio (DPR) grater than 1 as the number of physical pixels that is to be rendered is higher than the number of physical pixels available on the device. Esri's webgl adapter then gives warnings like below and the map is then not showing the expected extent 

[esri.views.webgl.FramebufferObject] Resizing FBO attachment size 22677x22677 to device limit 16384

In the case of this particular error the map size is 200 cm with ca 7000 px in width and height, on a device wiuth DPR=3.


I think the core of the issue could be in the canvas that is used for rendering the map is getting its height and width set to (CSS pixels * DPR) 

 

 

<canvas style="width: 7559px; height: 7559px; display: block;" width="22677" height="22677"></canvas>

 

 

Is there any way to override this not to use the DPR?

Or do you see any other solution?

 

We thought one way around it would be to export the map into an image instead. I looked into the Export Webmap Task but it is, not surprisingly, timing out.

 

An example of a 50x50 cm map scaled down to fit 500px preview at the given map scale, using ArcGIS JS API

ViktorSafar_0-1710925375150.png

 
0 Kudos
3 Replies
ViktorSafar
Occasional Contributor II

It just occured to me that even if we manage to bypass DPR, iOS devices limit canvas to 4096 pixels, which at 38px per cm gives us max size of 107cm.

Which leads me to believe that a web map is not the answer.

 
0 Kudos
SamEngel
New Contributor II

Is there any way MapView.takeScreenshot() could be helpful here? As you say, the issue is that the canvas dimensions are coupled to the map view container client size * device pixel ratio, and if you are using the map view as the preview directly, it sounds like this can get very large. Would it be possible to put the map view in its own div, and create the preview by taking a smaller (4096?) screenshot and scaling it up?

Though this will be blurrier, and if it needs to be a live preview where you can pan around etc., it wouldn't really work at all!

0 Kudos
ViktorSafar
Occasional Contributor II

The problem lies with creating the MapView in the desired size and detail.

0 Kudos