Add support for 2x (retina) tiles

[mvl22]

Currently the mapnik style is only available at 1x tiles, which looks poor when viewed on a high-dpi ('retina') screen like any modern iPhone or Android.

It would be good if 2x (and maybe in future 3x...) were supported.

I realise that the mapnik style is not really intended as a consumer-facing style as such, but it is clear that screens are increasingly using higher dpi, and a good implementation would also perhaps provide a model of how to achieve 2x well, for people making other styles.

[HolgerJeromin]

As the icon are most SVG today a 2x style should be no problem right of the box. So the style (this repo) is ready IIRC. But the OSM servers are not. This is also a traffic/resource problem. See https://github.com/openstreetmap/openstreetmap-website/issues/104

[mvl22]

I understand that, as noted on that thread, that this will be needed:

redesigning the OSM style to work with a different scale factor

which was my main reason for this ticket.

This is also a traffic/resource problem.

Yes, I appreciate that may well be the case. But as the mapnik style is used as a basis for other designs, and can be hosted independently (as we would really like to do), my suggestion is that the style itself add support, but the question of whether to enable that on the OSM servers be considered a separate policy matter.

[HolgerJeromin]

The quoted comment is three years old. As I wrote I think the problems in the style are mostly solved.

[matkoniecz]

Is there anything specific to be done except #1165 ?

[nebulon42]

Yes, I think for full retina support also the patterns would need to be in SVG. Supported by Mapnik 3 only, though.

[rrzefox]

I think I linked that before, but maybe that was only on the osm-dev ML - there was a discussion there a year ago BTW: https://lists.openstreetmap.org/pipermail/dev/2015-January/028253.html . You can see osm-carto with 2x "HD" tiles here: https://osm.rrze.fau.de/testhd.html Note that the tiles are mostly half a year old and not automatically updated.

By now, many icons have been converted to SVG and thus look good in the HD rendering (that wasn't the case a year ago). However, those that haven't really stick out - and not in a positive way. Example: The shelter icon in https://osm.rrze.fau.de/osmhd/17/69170/42358.png (top right)

[kocio-pl]

@rrzefox Nice to see this demo, thanks for sharing! All the work with converting icons to SVG makes perfect sense now. I hope we will move along with this transition, since now I don't have too much new icons to create.

[pnorman]

I opened #2045 for converting patterns to SVGs - this and #1165 are all the work needed in the style that I am aware of before it works at high resolutions.

[matthijsmelissen]

Is there a way to preview retina tiles, for example with kosmtik?

[SomeoneElseOSM]

@matthijsmelissen Don't know about kosmtik but what I did recently to create and view retina tiles was to add SCALE=2 to renderd.conf and edit the scale in mapnik.xml directly (though that might be a "project" or "carto" option).

[SomeoneElseOSM]

@jeisenbe Prompted by the recent discussion at https://github.com/openstreetmap/openstreetmap-website/issues/104 , one thing that might be useful would be to document exactly what someone would need to do to create higher resolution tiles, and what differences you'd see. Without that everyone is just guessing as to what this style would look like. I know what the style I use looks like if you change the scaling, but not this one. I suspect that "many eyes" would be needed to look at it to see potential problems.

[imagico]

The requirements for high resolution tiles are the same as for rendering for print use. Most of what is important for that has been addressed (SVG based POI symbols, resolution independent way_pixels calculation in #3657). What is still not working without manual intervention is the patterns due to the mapnik rendering inconsistencies (#2045, #2750). A workaround for that was shown in https://github.com/gravitystorm/openstreetmap-carto/commit/00eb1a3963ad95e8b45df78a773bac8e9d1f565c.

I do not know if the mapnik bug is still present in newer versions. Due to the seemingly random nature of it determining that is not trivial. I have not recently consciously seen the problem with the patterns that would be affected by it (in particular graveyards IIRC) but that does not necessarily mean much.

[jeisenbe]

document exactly what someone would need to do to create higher resolution tiles

This would be helpful. I have not yet found a clear documentation of how this is done.

I have only previewed this style in kosmtik, using Docker. To render higher resolution tiles, you can change scale to 2 in project.mml, or better, in a localconfig.json file:

[
  {
    "where": "scale",
    "then": 2
  }
]

With kosmtik on Safari 13.0.5 for MacOS 10.14.6 (Mojave), I then need to zoom out the view in my browser window to see the tiles at the proper resolution.

Another option is to use the Export function of Kosmtik with the scale x2 option, though this renders a particular area rather than creating tiles.