Rain and Snow Effects for Mapbox

Mapbox GL now offers the option to add dynamic rain and snow effects to your maps. These new visual weather effects use particle animations to create realistic precipitation on any Mapbox GL map.

You can easily add these effects to your maps using the following functions in your JavaScript code:

map.setRain or map.setSnow

Both the rain and snow effects come with several customizable parameters that allow you to fine-tune their appearance. These include:

• Density: Controls the number of particles.
• Opacity: Adjusts the transparency of the effect.
• Speed: Defines how fast the particles move.
• Color: Modifies the color of raindrops and snowflakes.
• Size: Changes the size of the particles.
• Direction: Determines the movement direction of the precipitation.

You can experiment with these parameters in the Rain and Snow Playground. Once you’ve created an effect you like, you can copy and paste the corresponding JavaScript code into your project. Additionally, these parameters can be adjusted dynamically. For example, you can modify the particle animations in real-time based on live wind direction data for a given location.

Maplibre Snow Effect

With a little help from ChatGPT I was able to create a snowflake effect for Maplibre in under five minutes. If you want to use this effect yourself then you can clone the code my map's Glitch page.

Make Your Town Dance with Mapbox GL

Louisville is a rocking city. Every time someone plays the University of Louisville Flight Song the whole city starts to dance. Jesse Haze's Mapbox Extrusion by Audio animates the buildings of Louisville to the tune of the Flight Song. As the song plays the city's buildings literally bounce up & down on the map.

The Flight Song can become annoying very quickly. When this happens I like to sing to the map instead. Mapbox's Animate 3D Buildings Based on Ambient Sounds allows you to sing to your town in order to see its buildings dance. The map connects Mapbox's extruded building heights with the Web Audio API. Every time the level of sound changes the building heights and building colors change on the map.

How to create a Building Height Map

It is now very easy to create a building height map in just a few short steps using Mapbox.

This week Mapbox announced that their Mapbox Streets v7 vector tiles now include building height data. This means that you can use Mapbox Studio to style buildings on Mapbox Streets v7 by the height of the buildings. In other words you can color building footprints on a map to create a building height map.

Here's How

1. Open Mapbox 'Streets' in Mapbox Studio.
2. Select the 'Building' layer.
3. Under 'Style' change the color of the building footprint.
4. Under 'Select Data' add two filters to define the range of the building heights you want to be this color.

In the screenshot you can see I've chosen to color all buildings with a height greater than 0 and less than 6.

That's it! You should now have a map that colors all the building footprints with a height under 6.

But you why stop there. You can also add different colors for buildings with different heights.

5. Duplicate your 'Building' layer.

6. In your 'Building Copy' layer change the two filters you added above to 'height is less than 16' and 'height is greater than 5'.

7. Change the color of the building footprint to a different color than you chose for buildings under 6.

You now have a map with two different colors for buildings with heights from 0-5 and buildings with heights 6-15.

Of course you don't have to stop there either. You can carry on duplicating your 'Building' layer creating different colors for buildings with different height ranges.

Here is my completed Building Heights Map. In my map I've deleted every layer apart from my styled building layers. If you want street names and /or other map features there is no reason why you should delete these layers from your map style in Mapbox Studio.


Now you have your finished map style you might want to give your map users some controls to filter the buildings shown on the map by building height. This is very easy to do using Mapbox's setPaintProperty function. In this Change a layer's color with buttons map demo you should be able to see how you can create buttons to turn your different building height layers on and off. You could create buttons which switch the colors of your different layers between the map background color and the color you assigned to each layer in Mapbox Studio.

Alternatively you could allow your users to pick the color of each building height range for themselves. I used Mapbox's 'Change a layer's color with buttons' demo map and just dropped in my building height layers to create a map where users can pick their own colors.

Here is the completed Building Height Map in JSFiddle. Just use the drop-down menu to change the colors of the buildings by the range of building height.

Two Maps for the Price of One

The Mapbox GL JS documentation has a nice new example showing how you can synchronize two maps side-by-side. Swipe Between Maps creates two synchronized maps and allows you to swipe between the two different map instances.

Swipe Between Maps could be a a nice way to showcase all the beautiful map styles that I'm sure you have been creating with Mapbox Studio. Of course you aren't limited to just two maps. You could add a menu to one of the map instances in Swipe Between Maps which would allow users to change the base map layer (you could even add a menu to allow users to change the base maps of both map instances).

I've created a quick demo which adds a menu to Swipe Between Maps. Swipe Compare allows you to select a different base map style in the left map instance. I've added just four base map styles to my example. You could off course add as many map styles as you have created in Mapbox Studio.

Here Comes the Snow

Mapbox has mapped the winter storm spreading across the east coast of the USA. The map animates water equivalent accumulated snow depth data from NOAA’s High Resolution Rapid Refresh Model.

If the snow keeps you housebound this weekend then you might want to try and replicate this map yourself with Mapbox GL. The map uses the Mapbox GL video overlay capabilities to create an animated map of NOAA's predictive weather models. Mapbox GL video overlays allow you to quickly create really impressive animated weather maps (as long as you have access to really impressive weather videos).

If you like Mapbox's snow storm map then you might also like their other weather maps of Hurricane Patricia and Animated Atmosperic Water map.

Animated Weather Maps

Recently the Mapbox blog posted a really awesome map of Hurricane Patricia. The map uses the Mapbox GL video overlay capabilities to create an animated map of NOAA's predictive GFS-model of Hurricane Patricia wind gusts.

Mapbox have now created an even more impressive map. Animated Atmosperic Water is a global map of NOAA's 3-hour interval GFS model composite of precipitable water in the atmosphere (October 15-28).

When I think about how much work went into creating the absolutely amazing animated wind map, Earth.nullschool, then it's hard not to think that animating weather data on a map using a video is cheating a little. However it is a brilliant cheat.

Mapbox GL video overlays allow you to quickly create really impressive animated weather maps (as long as you have access to really impressive weather videos). I also assume that using a video rather than animating thousands of individual points of data on the map means that the map itself performs much more efficiently.

Fly Around the World with Mapbox GL

You can now pretend you are an astronaut aboard the International Space Station with this nice little Mapbox GL animated map. The map takes you on an animated tour around the equator, providing you with a choice of a map, satellite or hybrid view.

While this map won't make Map Mania's round-up of the best Maps of the Week, it is a very neat demonstration of two functions in the Mapbox GL API. The map uses CameraOperations to adjust the pitch of the map, providing an oblique view of the Earth. It also uses AnimationOptions to animate the map and take you on a tour around the Earth's equator.

Paint the Whole World with a Rainbow

Could there be a better way to celebrate Pride than to paint the whole world with a rainbow? Of course there could. The Supreme Court could legalize gay marriage in every state.

This weekend people across the globe will also be celebrating Gay Pride. The Pride rainbow colored flag will probably feature quite prominently in many of these Gay Pride events. In honor of these two events cartographers have also started painting the world with a rainbow.

Mapbox has started the party today with this Love Wins rainbow colored map. On this map the colors of the rainbow continuously scroll across the world. The map therefore not only celebrates the Supreme Court ruling but also acts as a neat little demonstration of how MapBox GL's vector map tiles can be updated in the browser on the fly.


If Mapbox's ever moving rainbow colors give you a headache then you can switch over to Amy Lee Walton's Love Wins map, which is a more serene rainbow styled map. Alternatively you could try Blake Thompson's Rainbow Roads map, which, as the name suggests, has rainbow colored roads.


If you don't like any of those rainbow maps then you might prefer my own Rainbow Map. This one has quite nice rainbow colored buildings.

3d Elevation Profiles

Mapbox has created a really great cycle route planning map for Washington DC which also provides a 3d dimensional elevation profile of the route.

Capital Bikeshare allows you to drop two markers on a map to set your starting point and destination. It then works out a cycling route between the closest Capital Bikeshare destination to your starting point and the closest station to your destination.

The magic really happens however when you click on the 'elevation profile' button. If you open the map in a WebGL enabled browser the map will tilt to an oblique view and a 3d elevation profile will be drawn on top of the entire route.


If you right-click on the map you can rotate the map view and the 3d elevation profile magically rotates with map.

The map was created with Mapbox GL. The map degrades well if you view it on a non-WebGL enabled browser but you really don't get the full 3d effect.

Turf.js was used to power the nearest bike station search.

Around & Around the Eiffel Tower

OSM Buildings is a JavaScript library for visualizing OpenStreetMaps building geometry on interactive maps. Thanks to a new demo map using Mapbox GL you can explore OSM Bulidings from a completely new perspective.

One of many great features in Mapbox GL is the Mapbox GL rotate event. Using the rotate event in Mapbox GL allows you to change the orientation of a map. In the new OSM Buildings GL Preview this means you can rotate the map and view the 3d buildings from all angles.


On this page you can view images of the Tate Modern in London with the map orientated to the south and to the north. When using the OSM Buildings GL Preview map you need to right-click on the map to start rotating the map and left-click to turn off rotation.

Mapping the History of Manhattan's Growth

Urban Layers is an incredible new mapped visualization of Manhattan's building history. The map uses building construction data from PLUTO with Mapbox GL to create a highly responsive and interactive tool to explore the history of building construction in central New York.

The time-line function provides a great tool to explore the building history of Manhattan. You can use the time-line to view how many buildings were constructed during any period of Manhattan's history. The time-line also includes a graph showing the number of buildings built in each year.

The time-line control may also be used to quickly animate through the whole of Manhattan's construction history in set lengths of time. For example, you can set the time-line for any decade (say 1970-1980). You can then drag the time-line control backwards and forwards to view Manhattan's construction by decade.

The use of Mapbox GL means that the data loads amazingly quickly on the map as you zip through the time-line. It also means that you can right click on the map to adjust the map orientation (when the map first loads West is roughly at the top of the map - which helps to fit most of Manhattan onto your monitor /screen).

Story Maps with Mapbox GL

Yesterday I was impressed by two story maps created with Mapbox GL. The Mapbox Blog published a very neat map highlighting some of the details in their new satellite imagery for Madrid airport. The Guardian  also used Mapbox GL in a feature on immigration in Texas (to see the map scroll down to the section headed 'The impact of Migrants on Falfurrias').

Both of these maps make use of Mapbox GL's panTo and rotateTo functions to seamlessly pan and spin the map to new locations.

I was particularly impressed with the Mapbox Blog map. This map cleverly uses the height of an overlaid div element to work out when to pan and zoom the map to show new locations. As you scroll down this map sidebar element the map automatically updates to show you the relevant location.

I was so impressed I had to steal the code. I used the Mapbox Blog's map code to make this little tour of the London Olympic Park.

Both The Guardian and Mapbox Blog maps include the option to gracefully fallback to an alternative Mapbox map for browsers which don't support Mapbox GL. I haven't done that with my map - so to view the map you will have to use a modern browser which supports Web GL.

Mapbox Satellite Update

Mapbox has begun adding new satellite imagery from Worldview-3. Worldview-3 was launched two weeks ago and is already providing unrivaled satellite imagery of the Earth, at 31 centimeter (12 inch) resolution.

Mapbox has now begun to add satellite Imagery from Worldview-3 to Mapbox satellite view. The first update to the imagery is just a small 3 km² area around Madrid’s airport. This small update is enough to see that Worldview-3 can be used by Mapbox to provide detailed satellite imagery which is at least on a par with plane captured aerial imagery.

The Mapbox blog has a really nice map of the new satellite imagery, which is almost as impressive as the imagery itself. The map highlights some of the detail captured by Worldview-3 at Madrid airport using the new Mapbox GL mapping platform.

The map uses Mapbox GL's panTo, flyTo and rotateTo methods to seamlessly pan and rotate the map to new locations. These location updates are fired by the user as they scroll through the map sidebar. As the user scrolls through the information provided in the map sidebar the map automatically pans and rotates to show the location being explored in the text.

Walk the Map

Here is another fun little Mapbox GL demo. The Walk Map allows you to navigate around a map using your cursor keys. That may not sound like a lot of fun but it is a rather neat demonstration of the Mapbox GL rotate event.

Using the up and down buttons you can move forwards and backwards on the map, while the left and right buttons allow you to rotate the map. The map rotation is fired by assigning a '+' or '-' value to the map heading every time the user clicks on the left or right mouse button.

This is the third Mapbox GL map I've seen since the introduction of Mapbox's new mapping library. You might also like to check out the Van Gogh Map (which uses images for map tile textures) and the birthplaces of Liverpool Football Club players map (which is a nice example of how to add markers and text labels).

If Van Gogh Made Maps

Here's another little Mapbox GL created map. The Van Gogh Map uses a few images from Van Gogh paintings as textures for the map feature types.

Feature types on this map, such as water and different types of land cover, are made up of map tiles created with textures taken from Van Gogh paintings. The result is a map style which you probably wouldn't want to use very often but the map does serve as a neat demo of how easy it is to create interesting map styles with Mapbox GL.

This is the second Mapbox GL map I've seen this week. The first, Birthplaces of Liverpool Football Club Players, is a handy little demo map showing how to add markers with text labels in Mapbox GL.

Adding Markers in Mapbox GL

I wouldn't normally post this map showing the birthplaces of Liverpool Football Club players but it is the first Mapbox GL created map in the wild that I've seen which includes map markers. The map also includes text labels with the markers so could provide a useful source for anyone looking to add markers and / or text labels to a Mapbox GL map.

The Mapbox GL example maps includes one demo showing how to add markers to a map. That example, like this map, shows you how to add an icon for the marker and also how to add a text label to the marker. The Mapbox GL example map also shows you how to style the text label. However the Liverpool players map includes far more styling of the text labels than the Mapbox GL example, so could be a useful guide for anyone interested in adding text labels to their markers.

If you look at the source code for the Liverpool players map you can see how a halo is added to the text,

"text-halo-color": "white",
"text-halo-width": 1,
"text-halo-blur": 0.5,

You can also see in this map how you can control the size of the text label according to the zoom level of the map. In this case the text labels become bigger as you zoom in on the map,

"text-size": { "stops": [[2, 6], [4, 8],[6,10],[8,12],[14,16]]

Currently Mapbox GL doesn't work on Internet Explorer (although Mapbox say support for IE is coming soon). While IE isn't supported it is good practice to add a warning for IE users. This Liverpool players map doesn't include a warning but the Mapbox GL examples section does include an example of how you can Check for Mapbox GL Browser Support and alert users with non-supported browsers.