Mobile devices (@2x image) problem

[jbogdani]

Hello,
first of al thank you for this piece of software. It works wonderfully. I noticed today that the server does not support @2x images. I created a map and it worked perfectly on desktop, but when I tried to load it in tablets and smartphones no tiles were visible. Remore debugging showed a list of 404 errors about missing *@2x.png tiles.
Any help would be much appreciated

[infostreams]

Ok, I will look into this. Do you by chance have a map that I can test this with?

[jbogdani]

Yes, check here: http://test.bradypus.net/mb/client/
I think a workaround could be adding a new route for @2x images that points to standard images, but a better solution wold be serving properly @2x images, or far better, enable the possibility to choose about images to serve. This could permit users to save lot of bandwidth on mobile devices.

[infostreams]

Hmm, interesting. I seem to have the same problem on Chrome on my MacBook. The map is just blank and I see a bunch of 404s.

It turns out that Mapbox.js has changed something; they now automatically detect Retina displays and try to serve up @2x images if a Retina screen is detected. That's a good thing, but so far it works on MapBox's own servers, but not with mine. I think you can also switch off the detection (in MapBox.js) and force it to use regular sized tiles.

Anyway, there is a slight issue if we want to support this - after looking at the (ridiculously sparse) MBTiles specifications I don't think it is possible to include both regular (256x256 pixels) and retina images (512x512 pixels) in your mbtiles file. A quick glance at TileMill seems to confirm this (unless I overlooked).

That leaves three options to address this issue:

1. Serve regular sized images as @2x images.
2. Combine 4 images from a lower (higher?) zoom level into one new 'retina' image.
3. Select a different .mbtiles file if a Retina image is requested and serve the image from there.

I think I like the second approach best, but I'm not sure if the end result would be satisfactory. Hmm. Any thoughts on this?

(This is MapBox's section on Retina maps, by the way: https://www.mapbox.com/tilemill/docs/guides/high-resolution-tiles/ - They seem to suggest two different tilesets, as in option 3)

[jbogdani]

The second approach seems the best, maybe some test can be done in a separate branch. Anyway the third also can be implemented and documented: if a *@2x.mbtiles file exists in the same directory this tile DB will be used, otherwise option 2 will be used...

[infostreams]

Exactly, that was what I was thinking too. For Retina requests I think I'll first check for a *@2x.mbtiles file, and use that if it exists, and if it doesn't - I think I'll actually serve regular sized images (option 1). I'm a bit afraid that combining smaller images into one will mean that the text will end up looking really tiny, which would make the map unusable. This is at least what the MapBox page from above seems to hint at. I might include it in the code anyway, though - and maybe include a configuration option to switch it on or off.

[jbogdani]

That would be great! I'm looking forward to test it!

[infostreams]

Hi jbogdani! In the precious free time I have I managed to actually sit down and implement this. The latest version should now properly support Retina maps. Can you please test it? Basically, what it does is look for a Retina version of the map (named "@2x.mbtiles"), and serve tiles from that file if the user accesses the map from a Retina device. If that file does not exist, it will serve tiles from the regular/normal .mbtiles file as usual. Does it work for you?

[jbogdani]

Hello,
It's working fine for me. I don't have actually @2x.mbitles, but the fallback does work. Thank you.

[infostreams]

Great! Awesome.