This is a bit of a two birds, one stone situation: my first basemap and my first Substack article! đĽł
I have been willing to make my own map style for some years, as I found Maplibreâs styling expressions very powerful, and it unlocks so many possibilities, it would be a shame not to get into it! With Basemapkit, itâs actually more than just one style, but more on that later. Meanwhile, here is what it looks like. The style is called avenue, and itâs open source:
But, âWhy even bother?â you may ask. There are many companies/SaaS out there with nice vector styles for the web maps, plus, making one takes quite a lot of time. Ok, itâs actually fun to do, at least for 80% of it, but there is a catch with SaaS and maps.
Why even bother?
Using a SaaS such as Mapbox, Maptiler, or Stadia Maps is usually the go-to solution for any business that needs a web map, and it makes perfect sense: super easy to use, great uptime, generous free tier to try out, and basically, it just works. But the nuance is in the word âbusinessâ. I am no business. Iâm a dev who likes to tinker freely without having to ask myself:
âAm I infringing the â¨Terms of Services⨠right now?â
I guess I am not yet. Not until I put this on GitHub. Ok, what if I just share this with a small group of friends? Is it still ok? đđ
And thatâs why I like open licenses for both data and software: itâs free, not just as in free of charge but as in freedom. If I want to build something mappy and later on I decide that I want to sell it, then I'd better have started off with something I can legally sell. And if the thing I want to build and sell requires me to fetch 1 billion vector tiles, then be it, I donât want to face a rate-limiting API or have my IP blocked by a SaaS.
So I figured that when it comes to web maps, Iâd rather rely on these great projects that are Maplibre GL JS and Protomaps, and set up all the necessary to have some relative freedom on how I use it. It takes a bit more effort at the beginning, but then it opens up so many possibilities! Technically, it means:
having a small server running on Hetzner Cloud (starting at 4 euros per month, mine is the extra fancy at 12 euros, for virtually as many apps as I want)
installing Coolify on it to manage all the apps and services I want (I love this thing, I canât recommend it enough)
storing a Protomaps planet build on an S3-compatible bucket (Hetzner Storage, 5 euros per month for 1TB of data and 1TB of traffic)
Making mappy web apps!
And for this last point, I was not entirely seduced by the Protomaps basemaps, so this is how it started!
The Avenue
This is the name I gave to this first style (yeah, because there will be others, for different purposes). I used Protomaps basemaps as a starting point, and then I heavily modified the colors, transparency, removed some layers, added others, etc. I was not looking for a way to make it quick, but it was definitely faster than starting from a blank style. The process of data discoverability: diving deep into what data layer is available and with what properties, was also more efficient, starting off from an existing style.
And again, I couldnât start from an existing SaaS style because vector styles are generally not open source (despite being source-available). But to be honest, I totally get it because itâs quite a lot of effort to create a style, and among all the data distributed by web map SaaS, styles are probably one of the few that are the fruit of an actual craft. So many thanks to Brandon and the Protomaps contributors for creating such a great ecosystem!
I think the biggest struggle I had was to remember what is part of land cover and what is in land use. More about it here.
The main idea behind avenue is to be a one-size-fits-all, a basemap that one can pull whenever they need a basemap, and itâs magically going to work just fine. Such a magically versatile basemap is probably not going to ever exist, but thatâs my attempt.
One of the key design rules for avenue is that there are ~no~ outrageously fake colors. Highways are not yellow, and the most rule-bending symbology is cycling lanes to be dashed+green and tunnels/bridges to be white.
An important point about this style: it works only on Protomaps OSM builds, and not on just any vector tileset generated with the pmtiles CLI. It uses the schemas and properties as defined in the official builds, thatâs why.
One avenue, many ways
Some of you, who are into photography, may be familiar with this toolbar:
It comes from Adobe Lightroom, an advanced raw photo editor, and Iâve spent hundreds of hours moving those little sliders! At first glance, vector basemaps and photographs have very little in common, except that eventually, they are both displayed with colorful pixels on our screens!
Now, letâs say that Basemapkit avenue is a raw photo, what kind of tools would it take to develop new map styles from it?
That is how Basemapkit started to be more than just a collection of StyleJSONs, and when the idea emerged that I should add color manipulation tools to it, such as:
brightness
exposure
saturation
contrast
color blending
etc.
Along the way, I found the Color package on NPM, which conveniently deals with CSS color parsing and some basic color functions. On top of this, I created custom methods for contrast, exposure, and color multiplications (which I find more relevant than white balance here).
âŹď¸ the originalâŚ
versus
âŚa multiplication with #ff8000 (orange) with a factor of 0.3 âŹď¸
Just like photo development or video color grading, the less contrasty the original, the more latitude we have to further process the colors (see log profiles for video).
This is one of the reasons avenue does not look like the typical extra bright and pop style. It needs to leave room to further âdevelopmentâ, but still be usable as is. Itâs a compromise.
From this, possibilities are endless! And Basemapkit already includes 9 built-in presets:
Going wild
Playing with colors, inverting, blenging, spinning the hue wheel, etc. that can really lead to anything (also, not only to great looking styles, but thatâs part of the process, right?) As I was writing the GitHub readme, I thought it would be cool to create a style for New York City. But not just any style: a Teenage Mutant Ninja Turtle kind of style, where the city has been taken over by a green toxic agent. This eventually led to this:
It turns out to be super easy to modify avenue and create something unique. A good place to learn how the different settings work is the GitHub section about it.
But the best is to play with the live demo and to customize it yourself:
The URL updates automatically when the preset âđď¸ custom đ¨â is selected, so you can share the URL or keep it somewhere for later.
Let me know if you create something!
Cheers â Jon.