Creating a custom basemap with Mapbox

As you saw with ArcGIS Server, online base maps can have dozens of layers, with all kinds of rules about what zoom levels they are hidden and displayed; therefore, we’re not going to start from scratch. Instead, we’ll start with existing Mapbox basemaps (which are pretty well designed to begin with) and make small modifications to fit our taste.

First, please download the data for  Lesson 5 exercises. After you download the data, unzip it.

We’ll start out simple by infusing some of our own data into one of the Mapbox basemaps. We’ll then view our creation in ArcMap, where you already know how to add more layers on top.

Suppose you’re examining nighttime safety in the Washington DC area. You want to understand where activities are occurring at night relative to existing street lighting. The “Dark” basemap offered by Mapbox looks appealing for your purposes, but you want to integrate a layer showing areas that are illuminated. You plan on eventually doing some visualization of street vendor activity, pedestrian patterns, crimes, and other happenings in relation to the street lighting.

For the best user experience, you should complete the following steps on a desktop computer (not a tablet or phone):

1. Open a web browser to Mapbox.com, click Products > Studio, and click Get Started.
2. If you haven't done so, make up a username, email address, and password, and click Create a Map in Studio after you log in.
3. This takes you into Mapbox Studio. Following the model of most software as a service offerings, this tool runs directly within the web browser. It allows you to choose colors, text, and symbol weights to be used in a basemap. The base data is from OpenStreetMap, although you can also load in your own layers.
4. On the Styles page, click the New Style button.
5. Proceed to customize the the Dark variation of the Monochrome template.
6. On the map editor page, click the pencil icon by the style name at the top (you need to hover over it to see it), and rename it to Street Lighting instead of the default name, Monochrome.
7. Zoom your map into the central area of Washington DC.
   
   This map looks great, but wouldn’t it be nice if we could add the areas illuminated by street lights in a soft yellow glow? Let’s do that. First, we’ll need to upload our data.
8. On the upper-left side of Mapbox Studio, click the Mapbox icon to return to the main Studio page, and then select the Tilesets menu.
   
   Tilesets are the vector tiles that Mapbox uses to encapsulate data displayed on the web. They’re very different from the rasterized tiles you worked with in ArcGIS Server. You can upload a vector dataset like a shapefile, and Mapbox will turn it into vector tiles, which it then hosts on its servers. You don’t ever really work with the tiles directly, but you can define styling rules to dictate how they should look. These styling rules can be changed on the fly because they are not “burned into” the tiles as they are with rasterized tiles.
9. Click New Tileset, and upload the light_areas.zip shapefile included in this lesson. I derived this from a dataset of street light locations and wattage that I obtained from the Open Data DC website. The lighted areas are just variable distance buffers based on a very unscientific mathematical formula (i.e., I made it up) based on the wattage of the light.
10. When it's done loading, navigate back to your StreetLighting basemap, and click to open the Layers list in the left-hand pane.
11. Click the Add New Layer button, and select your new lights layer as the Source.
12. Be sure to click on the Type setting and select Fill.
13. In the layer list on the left hand side, drag and drop your light-areas layer so that it is underneath all labels and boundaries.
14. Click your light-areas layer, and modify its color to a bright yellow with an opacity of 0.5 and no antialiasing. This gives the street lights a soft glow.
15. In the upper right of your screen, click the Publish style button, and confirm you want to do this by clicking Publish again (not Publish as new).
16. Click the Share... button in the menu.
17. Click Third Party, and copy the URL under WMTS.
    Remember from an earlier lesson a mention WMTS (web map tile service) which is an open alternative to an ArcGIS Server service for serving map data over the web via tiles. Mapbox exposes their basemaps using this specification, and we can use that endpoint (URL) to consume it in our local ArcGIS Pro maps.
18. Open ArcGIS Pro (on your own computer or on your EC2 instance, if you have licensed it).
19. Navigate to the Insert tab - Connections - Server - New WMTS Server.
20. Paste the URL you copied from the Mapbox site and click OK.
21. Open the Catalog pane in ArcGIS Pro and navigate to the Servers folder. You should see an entry for your Mapbox basemap.
22. Add the layer to your current map and zoom into the Washington DC area and you will see your street light features on the dark Mapbox basemap, as you styled it on the Mapbox site. Hooray! You now have your Mapbox map as a basemap in ArcGIS Pro.
23. Just for fun, add your sidewalk_vendors.shp shapefile (included with this lesson’s data) as a layer in ArcGIS Pro. I also obtained this from opendata.dc.gov. It contains the locations of registered street vendors in Washington DC.
24. Style and label the street vendors in such a way that you can get an idea of which ones are surrounded by lots of lighting and which ones are in the darker areas.

To recap, you took an existing Mapbox-designed basemap and fused in some of your own data. You then brought this into ArcGIS Pro so you could work with it as a basemap. The next walkthrough will go beyond this, showing you how to modify the Mapbox design, create your own thematic data, and view your creations on the web.