Support retina/HiDPI raster tiles for non-Mapbox sources

[jonasmatthias]

If the tile server URL is a Maxbox URL (isMapboxURL) and the device has a HiDPI screen (Apple devices: "retina") then the image extension e.g. .png is replaced by @2x.png.

maplibre-gl-js/src/util/mapbox.js

Lines 109 to 120 in ba7bfbc

	if (tileURL && !isMapboxURL(tileURL)) return tileURL;
	const urlObject = parseUrl(tileURL);
	const imageExtensionRe = /(\.(png|jpg)\d*)(?=$)/;
	const tileURLAPIPrefixRe = /^.+\/v4\//;
	// The v4 mapbox tile API supports 512x512 image tiles only when @2x
	// is appended to the tile URL. If `tileSize: 512` is specified for
	// a Mapbox raster source force the @2x suffix even if a non hidpi device.
	const suffix = browser.devicePixelRatio >= 2 || tileSize === 512 ? '@2x' : '';
	const extension = webpSupported.supported ? '.webp' : '$1';
	urlObject.path = urlObject.path.replace(imageExtensionRe, `${suffix}${extension}`);

Adding @2x before the image extension seems to be the standard approach in Apple SDKs, map libraries and Web Mercator map tile services, see:

• https://leafletjs.com/reference-1.7.1.html#tilelayer
• https://www.thunderforest.com/docs/map-tiles-api/

It has been discussed to add this feature to the TileJSON spec in mapbox/tilejson-spec#16
However, development on the spec seems to have halted.

I would suggest to allow the above code path for tile servers other than Mapbox either by adding an option to the Map.setStyle() method or by adding a supports2x boolean to the TileJSON.

[kylebarron]

Why not prefix the request URL with @2x yourself and set tileSize: 512? Seems better than Maplibre changing the URL. Some servers might not support @2x in the URL

[jonasmatthias]

Why not prefix the request URL with @2x yourself

There is a check for the browser.devicePixelRatio >= 2 -- on normal computer screens the normal tiles without @2x will be requested. If I hardcode the @2x all devices will load the 2x tiles.

Seems better than Maplibre changing the URL.

But Maplibre is already changing the URL for a predefined list of domains (currently only Mapbox).

Some servers might not support @2x in the URL

This should not be the default and there should be a configuration option to enable this behaviour.

[HarelM]

I suggest to submit a PR to resolve this. I don't think url should be altered.
You can use the transfirmRequest I guess?
In any case, a PR to show what code changes you would like to introduce is the best approach...

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[xabbu42]

I think this would be a useful feature, moreover it makes sense to me to be as compatible as possible to leafletjs for raster layers, so I'll make a pull request adapting their api, that is an explicit {r} which gets replaced in the tile urls.

[xabbu42]

For people finding this issue, in the end we settled on {ratio} instead of {r} as that feature already existed in maplibre-gl-native.