Intro
In this article, we are going to make a map with a software called Mapbox. This won't involve any coding at all, but I think it is a cool tool to use if you want to add a professional-looking map to your website or app. Mapbox's software is used by apps of many popular companies that all of us utilize every day.
- Snap Inc.
- The Weather Company
- Shopify
- AllTrails
- Ancestry
- Peloton
- And many more...
For the map that we make today, we will be using the data visualization component that is provided to us in Mapbox Studio (aka Mapbox's map editor). The data we will be working with is the temperature change for US counties from 1895 to 2019. This is already pre-loaded into Mapbox studio which is really handy. Without further ado, let's get into it!
Setup
The setup for this is pretty simple. All you need is an internet connection and a Mapbox account. Once you have those 2 things you are ready to go!
The Process
Now that you are signed in you'll want to go to the Styles page. This is where all of your different designed maps would be housed. If you just set up your account you won't have anything in here.
Next, we are going to click the "New style" button on this page. This will take you to a screen where you can choose a map template you'll want to use. For this scenario I'm going to choose the Basic map template, I think any template will work here (other than the blank template of course). After you have chosen your template, click the "Customize" button at the bottom of the modal.
This will direct you to your new Mapbox map! Pro tip: your map will be centered in Paris. Make sure to navigate to the United State before moving on to the rest of the steps.
This next paragraph is completely optional, in my opinion, but to make the map feel a little less cluttered we will delete some of the components that are added on by default. Click on the component in the menu on the left-hand side. Then click the trash can icon at the top of the menu. Below is the list of components that I deleted.
- Buildings
- Place labels
- Points of interest
- Road network
- Transit
- Walking, cycling, etc.
Adding the data
For this exercise, we are going to create a choropleth map with data from The Washington Post's "2ºC: Beyond the Limit" series about rising temperatures, which analyzes warming temperatures in the United States. Our choropleth map will visualize the change in average annual temperature from 1895 to 2019.
In the Components panel, click the plus icon and then select "Data visualization" from the menu that pops up. You'll then be shown a dark map of the United States. Click on where it says "None selected" under Source. Then click "Add source by ID". Paste mapbox.brt3djy1 into the search bar and click "Find".
Yay! We have pulled in the data. It was that easy. Now we have to decide how we want our data to look on our map. Click "Select data visualization type". Then click the choropleth option, and lastly, the "Select Choropleth" button.
There you have it. The component will be added to your map and you'll see the United States illuminate with color.
Finishing touches
The rest is just messing around with the styles and colors. You'll notice initially that your map will have 3 colors populated. The field tempchg has values above and below 0. To make the visualization reflect divergence from 0 with color, the second stop should be 0 instead of the default value of 1.774. So let us change the middle value (2) in the Color section to 0.
Also, it would be nice to make this look a little bit more like a heat map. We can do that by going down to the bottom section of the Components panel under the Colors section. Click on "Choropleth" with the 3 colors to the left. This will expand and display a dropdown. In that dropdown, select the "Temperate" option (the "Adverse" color palette is a good choice too). Finally, our colors are switched around so we need to click the "Reverse palette" button next to the dropdown.
Conclusion
There you have it! A super slick looking map that shows temperature change data of the United States. How easy was that? I encourage you to play around a little more in the Mapbox studio and see what other cool manipulations you can make. Some easy ones are: adding more colors to show more details of the data, change the stroke to show or hide the polygon outlines, toggle labels on or off, and even change the opacity of your map.
You can preview your map by copying the share link in the top right corner, as well as publish it so you can include it in your dev project.
Lastly, if you're curious about diving deeper into this, Mapbox has lots of great lessons and tutorials to help guide you through all of the available functionality. I think a logical next step after this would be to add your own data to a Mapbox map. Maybe you could look at one of my previous articles about scraping websites for data then including that data into your very own custom map!
That's all for now. I hope you enjoyed this article. Happy coding!
Top comments (0)