Creating a data overlay with Mapbox

Now that you’ve gotten a feel for the Mapbox environment, let’s try something a little more complex that involves modifying the Mapbox style, creating thematic data from scratch, and viewing the result in a web browser environment rather than ArcMap.

Suppose you’re in charge of making a website to show the five best restaurants in your town (with you and only you as the judge). You want to make a map quickly that you can embed in a website, but since you’re somewhat of a picky cartographer, you want to have full control over the map style. Let’s do this with Mapbox, first designing a basemap, then adding data to represent the five restaurants of interest.

1. In Mapbox Studio, click the Styles menu and create a New Style using the Outdoors template.
2. Create a name for your style, such as Geog865Base.
3. Zoom in to your state and click a green area (which represents forested or park land). Then select the layer name which will probably be something like: Landcover. An additional menu should appear allowing you to modify the style of this feature, including the color.
   
   You can modify the style of anything on the map by either clicking its layer name from the left hand list, or by clicking it on the map.
   You may need to click the Override button to make changes to layer symbology.
    
4. Change the color of the greenspace to a slightly darker green.
5. Experiment with changing the Land (background) color to a different shade of gray.
6. Change the roads to be a darker gray color.
7. Zoom all the way in and out of the map, looking at a mix of urban and rural areas. Make any other style tweaks that you think are aesthetically appealing. For example, you might want to change the color of water bodies or labels.

You’re done editing your basemap for now. You don’t have to save your work; Mapbox Studio has been doing this as you go along. Now let’s get the restaurants entered.

1. On the upper-left side of Mapbox Studio, click the Mapbox icon to return to the main Studio page, and then select the Datasets menu.
2. Click New Dataset.
3. Enter the name Top Five Restaurants, and click Create.
4. Zoom in to a place you know well (like your town), and click the upside-down teardrop icon to draw a point.
5. Click the map at the location of your favorite restaurant. An orange dot should appear. (If you need help finding this, use another map for reference or change the Background style to one of the Mapbox satellite maps).
   
   You’ve added the coordinates of the restaurant, but now you need to add some attributes, or properties as they are called by Mapbox.
6. In the left panel, click the Add Property button.
   
   We’re just going to make one simple property here called labeltext, which will hold the text we’ll use to label the restaurant.
7. In the field box, type labeltext, and then in the value box, type the name of the restaurant.
8. Add another field called rank, and type the rank of the restaurant. Start with 1, since this is your favorite restaurant.
9. Repeat this process for four more restaurants that you know about. Make sure to add the labeltext and rank fields on each.
10. Click the Save button to save your edits.
    
    So far, you’ve just created some raw geographic data that is stored on Mapbox servers. Even though it shows up as little blue dots on the editor screen, it isn’t associated with any styling information. Also, it’s not saved as vector data tiles yet. Mapbox uses these tiles to insert the data as a layer in a web map.
11. Click the Export button to export your data to a tileset. You can call this tileset Top Five Restaurants just as you named the dataset.
12. Wait a few minutes for the tileset to be created. You’ll know when it’s done because the Processing… message will go away, and the little whirligig icon will stop spinning.
13. On the upper-left side of Mapbox Studio, click the Mapbox icon, and then select the Styles menu.
14. Return to your Geog865Basemap style, and add your restaurants layer. This is where you can get your restaurants onto that custom basemap that you made.
15. Look over the properties that are about to be applied to your layer in the basemap, but don’t change any of them. In particular, notice you could change the zoom levels where these restaurants show up. Since they are the main thematic layer in our map, let’s leave them visible at all scales.
16. Zoom the map to your area of interest and notice that your restaurants now appear on the map as dots.

Next, you’ll apply your own style to the icons and add some labels. You’ll then preview your map in a web browser.

There are several ways you could symbolize these restaurant points. One way might be with a little icon in the form of a scalable vector graphics (SVG) file. Mapbox provides a nice set of these SVG icons called Maki.

Another way is to just use a basic marker like a circle. We’ll take this approach, but we’ll also add a label from some of the information we entered in the restaurant fields. The restaurant points and the labels will be treated as separate layers in the map. Follow these steps:

1. Viewing your Geog865Basemap in Mapbox Studio, change the top-five-restaurants circle symbol to have a color and outline that is appealing to you.
   
   Now, you’ll create a layer to hold the text label.
2. With the top-five-restaurants layer selected, click the Duplicate Layer icon, which looks like two overlapping squares. Rename this layer to top-five-restaurants-label (which you can do at the very top of the styling details panel where it reports the layer name).
3. In the styling details panel of top-five-restaurants-label, click Select Data, and set the Type to Symbol.
4. Now switch over to the Style panel, and set the Text field as (rank) & ". " & (labeltext). This will substitute in the values from your rank and labeltext fields so that your labels look like “1. Fidelina’s”, “2. Kabob House”, etc.  If this part doesn’t work, you may need to wait a bit longer for your tileset to update. Try logging out of Mapbox and logging back in a few minutes later.
5. Click the Position menu, and set up your labels so they appear to the upper-right of the point, with an x offset of .5 em and a y offset of -.5 em, or whatever looks good to you. You should see the effects immediately once you set these properties.
6. Zoom the map to an extent where your five restaurants can be seen.
7. Make any further changes you want to make to your basemap in order to help the restaurants to stand out. For example, I lightened up my roads a bit.
8. When the map looks the way you want, click the Publish style button. You can use the little swipe tool to see the differences between the original map and the one you modified. Then click Publish again to confirm (don’t click Publish As New).
   
   Now, let’s take a look at how this would appear in a web map. A simple way to preview the map is in Mapbox’s basic web viewer.
9. Click Share... button.
10. Under Share, copy the Share Preview URL and paste it into a brand new web browser. Take a look at the map you just made!