Make Your First Custom Map in Under 30 Minutes Using Mapbox

NYCmap1.png
NYCmap2.png

Have you ever wanted to make one of those beautiful maps that you see in The Washington Post and The New York Times, but you're not sure where to start?

I've created a quick tutorial that will bring you from no experience to having your own custom map in under 30 minutes. In this tutorial, I'll show you:

  • How to navigate around Mapbox Studio.
  • What information you need in your dataset.
  • How to quickly style a custom basemap.
  • How to style your data layer on your map.
  • How to share your cool new map!

We'll use the NYC Open Data on the health of Manhattan trees to create a map similar to the one above (yours will look slightly different based on your design decisions!). It shows every tree in Manhattan and is colored based on the health of the tree (dead/stump, poor, fair, or good).

Let me help you get oriented and off to the races in under 30 minutes. There are so many possibilities for amazing data visualization when you learn how to use Mapbox. Like this or this. Scroll down and join me for this free mapping tutorial! :)


Follow These 7 (Short) Modules


1. Get the Data

Let's get started! Watch this video and follow the step-by-step instructions.

  1. Download the CSV file. This is the cleaned data that I'll talk about in the video. The original data source is from NYC Open Data website (feel free to look around that site, but it's not necessary to download anything from that site for this course - just download the CSV).
  2. Open up the "Manhattan_trees_2015.csv" file to make sure you have 4 columns: Status, Health, Latitude, Longitude.

Note: You always need a lat/long before you upload your data to Mapbox so that it knows where to put your points. If you only have the addresses of your points, you can try a website like geocod.io that will find the lat/long for you. Just make sure to carefully check the output.


2. Upload the Data to Mapbox

Now let's upload the data to Mapbox. Watch this video and follow the step-by-step instructions.

  1. Go to www.mapbox.com
  2. Click on Sign In in the top right-hand corner
  3. Create a new free account or use your current log-in information
  4. Click on Studio in the top right-hand corner
  5. Click on Datasets in the top right-hand corner
  6. Click the button New Dataset
  7. Click Upload
  8. Choose the dataset that you downloaded in the previous section

This is easy, right?! Let's keep going! :)


3. Export the Dataset to a Tileset

Now we can inspect the points that we've imported. Watch this video and follow the step-by-step instructions.

  1. Since everything is in order, click on Export in the top right-hand corner. This exports the dataset into a tileset.
  2. Note: A tileset is a "collection of raster or vector data broken up into a uniform grid of square tiles at 22 preset zoom levels. Mapbox relies heavily on both raster and vector tilesets to keep the maps fast and efficient."
  3. Bottom line: You'll upload data, export it to a tileset, which is the format that Mapbox needs it to be in before adding it to a map.
  4. Exporting to a tileset will take a few minutes. While that's happening, you can complete the next step, which is where we'll create a custom map style.

4. Create a Custom Style

You can create a custom map style based on any image using Mapbox's Cartogram page. Watch this video and follow the step-by-step instructions.

  1. Navigate to https://www.mapbox.com/cartogram/
  2. Upload any image
  3. Move around the circles to recolor the map to your liking
  4. When you're ready, click on the icon next to the Saved Style button at the top
  5. This will bring you back to the Style section in Mapbox. If you'd rather use one of Mapbox's pre-made styles, click on the button called More ways to create.

We're almost there! Keep chuggin'! :)


5. Add the Tileset to the Style

Now let's add our tileset to our style. Watch this video and follow the step-by-step instructions.

  1. Make sure you're in the Styles section
  2. Click on your new style (probably called My Cartogram Style if you used Cartogram)
  3. Click the Add Layer button in the top left-hand corner
  4. Click on No tileset, click to select...
  5. Scroll down and click on Manhattan_trees_2015 tileset
  6. Click on the Create Layer button

To recap, we've uploaded our data, exported it to a tileset, created our own custom map style based on a personal image, and added the tileset to our map style. In the next lesson, we'll tackle the fun part of styling the points based on the data values. Let's go!


6. Add Data-Driven Styling

Now we'll edit the styling of our trees layer so that the color of the point is determined by the Health attribute. Watch this video and follow the step-by-step instructions.

  1. Select the manhattan-trees-2015 layer
  2. Click on Color
  3. Click on Style with data conditions
  4. Select the Health field
  5. Select Stump or Dead
  6. Paste in this code for the color #FB3640
  7. Click Done
  8. Click Add another condition
  9. Repeat for the other fields with the following color codes: Poor - #FFFF57, Fair - #00A3FF, Good - #00D54F
  10. Click on Radius and type in 1 (or whatever you like)
  11. Click on the Publish Style button in the top right-hand corner

Note on choosing colors: it's helpful to use this Viz Palette tool to test the colors that you want to use. It will help you check for color blindness and ensure there are no color conflicts.

YAY! We're done! Now let's take a quick look about how to share your map...


7. Share Your Map!

Now that you've created your map, you can share it in a few ways. Watch this video and follow the step-by-step instructions.

Click on Share, develop and use your style

Options:

  • Click on the copy button in the Share URL section to paste the URL into the browser and interact with the map
  • Use the Develop with the style section to use this map with Mapbox GL JS (a javascript library that allows you to further customize your map with HTML, CSS and javascript). For this option, download the HTML_Code.txt file, which is the HTML needed to embed your map in your website. You'll need to add your Access Token and Style URL in the appropriate sections. Then add that code as a code block to your website. Check out more Mapbox GL JS tutorials here.
  • Use the Use style in GIS apps section to use this style within Carto, ArcGIS, Tableau or Fulcrum
  • Use the Use with WMTS service section to use this style within ArcMap or QGIS
  • Or if you go back to your map, click on the printer icon that's right next to Publish and then you can export the image to PNG or JPG.

YOU DID IT! I hope this tutorial was helpful to you. If you have any questions, need clarification on any parts, or have a suggestion for the next tutorial, then please contact me.

Want to keep obsessing over maps with me? I featured beautiful and innovative maps in these podcast episodes:

Til next time...Happy mapping. :) -Alli