On the East Coast we’re all suffering from dry skin, a lack of Vitamin D, and media-hyped snowstorms. After any snowstorm comes the final snowfall count - a time to boast over who got more snow.
Impress your friends and build your own snowfall map with Mapbox Studio.
Finding snowfall amounts
I found National Snowfall Observations from the National Weather Service. Local stations report in their snowfall data to build this dataset. It gives the coordinates of each station and the snowfall amount there in inches. On the page, I clicked “Text file with English units” and saved the file as snowfall.csv.
Styling in Studio
In Studio, I created a new blank source and imported the CSV as a layer. I saved the data source and uploaded it to my Mapbox account.
Now I’m ready to layer and style the data on a map.
I created a new project in Studio from the Mapbox style “Mapbox Light.” From the Layers panels, I changed the source to add my snowfall data. This gave me a snowfall
layer to style.
I created a new CartoCSS style tab named snowfall
and begin styling. Since I want the snowfall amount to appear as text labels, I used the attribute Amount
as the value for text-name
. I knew that I could use this attribute because in inspect mode (), I clicked a data point and found all the attribute keys.
I decided to only show snowfall amounts that are 3" or more, so I added [Amount >= 3]
to the selector. Here’s what my styles look like:
#snowfall::label[Amount>=3]{text-size:20;text-name:[Amount]+'″';text-face-name:'Mark Offc Pro Bold';text-fill:#2980b9;text-halo-fill:#fff;text-halo-radius:1.5;text-halo-opacity:0.75;text-avoid-edges:true;text-margin:5;[zoom<=8]{text-margin:15;text-size:15;}}
As a final step, I removed the map’s labels so they don’t compete with my snowfall labels. I did this by deleting the labels
CartoCSS tab. With my map looking great, I uploaded my style to my Mapbox account to share.
There’s so much more you can do with this dataset. You could style each point as a marker with its size relative to the snowfall amount. The Source quickstart gives a code example that you could repurpose. Why don’t you give it a try?
Did you make a snowfall map this season? We’d love to see it! Tweet it @mapbox.