Creating a Global Disco

In February I experimented with ways to bring extruded buildings to life on a map using a range of visual effects. My Polygon Effects map focused on a single building, which lights up, oscillates, and changes color to create a series of animated displays.

Rainbow now takes this idea worldwide. Zoom to almost any location on the Rainbow map and you can watch extruded 3D buildings pulse in multicolored glory.

The two projects achieve their effects in very different ways. Polygon Effects uses a custom GeoJSON model of one building, with JavaScript continuously updating the height, base, and color of each floor to create scanner beams, waves, and neon-style animations. It is a hands-on, feature-driven approach that treats the building itself as editable map data.

Rainbow works at the rendering level instead. Rather than modifying individual features in JavaScript, it taps directly into the map’s existing 3D building layer and uses WebGL shaders to animate thousands of real-world buildings at once. Built with the help of Three.js as a graphics toolkit inside a MapLibre custom layer, the result is a far more scalable technique, capable of turning entire city skylines into synchronized light shows.

While undeniably eye-catching, effects like this could also serve a practical purpose. Animated map layers could be used to visualize live urban data such as traffic congestion, power consumption, air pollution, or emergency activity, allowing patterns to emerge instantly across an entire city.