July 7th, 2024

Adventures in mapmaking: the search for grayscale tiles

The author shares their tileset journey, starting with Stamen Toner and transitioning to WMS TopPlusOpen gray due to cost concerns. They later repainted OpenStreetMap tiles into grayscale for desired aesthetics.

Read original articleLink Icon
Adventures in mapmaking: the search for grayscale tiles

The article discusses the author's journey in finding suitable tilesets for mapmaking. Initially using Stamen Toner, a commercial black-and-white tileset, the author later switched to the free WMS TopPlusOpen gray tileset provided by the German Federal Agency for Cartography due to cost concerns. However, this tileset had uneven coverage at different zoom levels in various regions. Subsequently, the author explored repainting OpenStreetMap tiles into grayscale using a plugin and CSS, achieving the desired aesthetic efficiently. The article highlights the challenges faced in selecting appropriate tilesets for map creation, acknowledging the contributions of Stadia Maps, LeafletJS, and OpenStreetMap in enabling mapmaking endeavors. The author expresses satisfaction with the final choice of using OpenStreetMap tiles displayed in grayscale, emphasizing the importance of accessibility and customization in map design.

Link Icon 8 comments
By @edg5000 - 5 months
It's quite doable to run your own tileserver. You will have full control over the colors, and you can hide/show things to create a more minimalist map. With some tricks you can 2x the resolution, making it look better than OSM on modern high-DPI screens. Tile generation is quite CPU heavy though, so you may have to pre-generate tiles ideally. So it is not that easy actually.
By @donalhunt - 5 months
In case you haven't already read the TOS for the OpenStreetMap tile servers, they are here: https://operations.osmfoundation.org/policies/tiles/
By @mdorazio - 5 months
If going with client-side CSS rendering, I'd also play with CSS filter functions like contrast. The OSM tiles have always looked too low on contrast for me and thus difficult to read. Making them grayscale makes it worse.
By @zeke - 5 months
To not load openstreetmap's servers, you could pull the tiles to your server and host them. Then only grab a tile from OSM when you are missing one.

This would also let you set the grayscale on the tiles using imagemagick convert.

Neat project and thanks for the write up.

By @wipfli - 5 months
The Protomaps basemap has also a grayscale style. The grayscale map looks like this: https://maps.protomaps.com/#map=5.09/47.14/8.64&theme=graysc...

Instructions for self-hosting a PMTiles file are available here: https://docs.protomaps.com/.

By @maptime - 5 months
Love this, the pure CSS option is really elegant

Another option would be self hosting vector tiles(or finding the most generous free tier vector tiles) and using a custom grey scale styling that you could tweak to your needs.

Maputnik is a great tool for building custom vector stylesheets. (1)

1. https://maputnik.github.io/

By @cdrini - 5 months
Much ado about a single line of CSS :P I thought this would lead to something a little more interesting, like dynamically modifying/drawing the elements of the map or something. CSS filter is the way to go; and I'm glad to see that applying the filter on-the-fly client-side was performant!