My Openlayers application can display tiled rasters from arbitrary online sources. It will parse capabilities from any user-specified URL for WMTS, TMS, OSM, XYZ or WMS services and present the user with a list of available layers which they can choose from.
Many of these layers are only available in standard resolution, but most of the users will be using Retina or high DPI screens. The result is that the map features are all too small, thin and spidery looking and text is very difficult to read for people with standard eye sight (impossible for anyone with aging eyes).
Is there some way to get Openlayers to display these standard resolution tiles at double the resolution (or x1.3 or x3 or whatever the screen scale is)?
Ie, To display the normal 256x256 tiles at 512x512 pixels?
I know this would make the rasters look a little blurry, but in theory no more so than if they were displayed on a standard resolution screen. At least they'd be big enough to view/read properly - and I can give the user the option of whether to use this feature or not. I've verified that the rasters look fine at double size by magnifying the view in which they are displayed by 2x, but of course this magnifies everything else in the web page too, which is undesirable Eg, widgets are double-sized, vector layer symbology gets blurry.
I can easily scale vector symbology, just my multiplying the various
size parameters by the screen scale factor (this is tested and working), but I cannot do anything similar for rasters. So I think the best work around would be to show them at double size. Eg, grab the tiles that would normally be used if zoomed out by 2x and display them at 2x their actual size.
It seems that this should be possible but I can't figure out how it would be done. Perhaps redefining all the layer's resolutions and setting
tilePixelRatio = 0.5 might be part of the solution, but my Openlayers knowledge is limited and I'm not sure if this is even on the right track.
I expected a lot of other people must be trying to deal with the same issue, but I've been unable to find any information that fits this scenario.
Is this possible? How can it be done?
JSFIDDLE UNSUITABLE TO DEMO THIS ISSUE:
ACTUAL DEMO OF THIS ISSUE:
However, this issue can be demonstrated using the WMTS example on the Openlayers examples page at: https://openlayers.org/en/latest/examples/wmts.html
I've loaded this up on both a standard resolution desktop PC and on a 'retina' (HiDPI) iPhone 6S and focused on the same location at the same zoom level on both devices. Below is what it looks like on both (note that the retina image is actually double the resolution shown here, but is the same size as shown here - and it is the size of the elements that is the problem for me).
Note that the elements in the HiDPI/'Retina' version are about half the size of the elements in the standard resolution version. For some people, this is too small to read, and on some maps the elements are rendered even smaller than this.
OpenStreetMap uses fairly large fonts when rendering its tiles. Some map services (such as that provided by my state government) use smaller fonts, and are completely unreadable in Openlayers on retina/HiDPI screens (ie, https://services.thelist.tas.gov.au/arcgis/rest/services/Basemaps/Topographic/ImageServer/WMTS/1.0.0/WMTSCapabilities.xml ).
'RETINA' (SCALED TO ACTUAL SIZE):