GEOG 865
Cloud and Server GIS

Creating a data overlay with Mapbox

PrintPrint

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 web site 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 web site, 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 the left hand menu of Mapbox Studio, click the Styles button and click the purple button that says New Style.
  2. Type a name for your style, such as Geog865Base. Leave the Basic basemap selected. This is the one we’ll modify.
  3. Click the Create button and examine the resulting map that appears on the screen.
  4. 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: landuse_overlay_nationa… 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.
  5. Change the color of this layer to a slightly darker green as shown in the image below.
     
  6. Change the Background layer to be a lighter shade of gray.
  7. Change the roads to be a darker gray color, with major roads being darker than minor roads. Your map should now look something like this:
  8. 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.

    One final thing we’ll do to this map is remove the buildings. Because the buildings come from OpenStreetMap, they are somewhat arbitrary in nature in most cities. One neighborhood might have all the buildings, while a different neighborhood may have none depicted. Still another one might have buildings seemingly randomly placed, depending on what OpenStreetMap contributors felt like adding. To avoid confusion, let's remove this layer.
  9. Click the Building layer and then delete it by clicking the little garbage can icon up near the top of the layer list.

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 left side of the screen, click the Datasets icon (which looks like a cylinder with stripes across it).
  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 New 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 left side of Mapbox Studio, click the Tilesets icon, which looks like four little diamonds.
  14. Click your Top_Five_Restaurants tileset (Mapbox added the underscores in the name).
  15. Click the Add to Style button and select Geog865Basemap. This is where you can get your restaurants onto that custom basemap that you made.
  16. 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.
  17. Click the Create Layer button.
  18. Zoom the map to your area of interest and notice that your restaurants now appear on the map as black 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 as shown.
  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 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. On the left side of the screen, click the Styles button (paint can), then click your Geog865Basemap and click Share, Develop, and Use (in the right-hand list).
  10. Under Share and Preview, copy the Share URL and paste it into a brand new web browser. Take a look at the map you just made!