Today’s #30DayMapChallenge is Black. For this challenge I decided to create a map that makes use of and demonstrates one of MapLibre’s most powerful features: the ability to programmatically restyle map layers in real time.
My Back to Black map itself isn’t designed to be practical or analytical in itself – it’s simply an exploration of how to change a map’s style in real-time.
Back to Black uses a customized OpenFreeMap base map layer that has had all its map layers colored black in Maputnik. The result is a completely black map:
-
Black land and water
-
Black country labels
-
Black boundary lines
This monochrome starting point makes it easy to visualize subtle changes in color, which becomes important once the animation begins.
After the map loads, three kinds of layers are animated simultaneously:
-
Water polygons
-
Country label layers
-
Boundary line layers
Using a simple sine-wave function, each of these layers gradually transitions:
black→dark-gray→light-gray→white→light-gray→dark-gray→black
The result is a breathing map in which some of the underlying map layers slowly appear out of the black base map – and then fade back to black.
In MapLibre every style property in the base map can be updated programmatically, in real time.
In this instance that includes:
Using setPaintProperty(), the map updates these color values 60 times per second inside a timed loop. MapLibre applies these changes instantly, so there is no need for rebuilding tiles or reloading the map.
This is one of the most powerful aspects of client-side vector rendering – you aren’t limited to static tiles or predefined colors. Every visual layer can be repainted on the fly. Just for the hell of it I’ve added a couple of other modes to my map that gaudily demonstrates this feature in glorious technicolor.
