Adventures in mapmaking: the search for grayscale tiles

https://newsletter.pnote.eu/p/mapmaking-search-for-grayscale-tiles

by przem8k • 2 years ago

35 7 2 years ago

newsletter.pnote.eu

maptime• 2 years ago

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/

mdorazio• 2 years ago

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.

donalhunt• 2 years ago

In case you haven't already read the TOS for the OpenStreetMap tile servers, they are here: https://operations.osmfoundation.org/policies/tiles/

zeke• 2 years ago

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.

wipfli• 2 years ago

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/.

edg5000• 2 years ago

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.

cdrini• 2 years ago

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!

Adventures in mapmaking: the search for grayscale tiles

Related Stories