Creating Layers From Shapefiles

This article describes how to use MapBox to transform shapefile data into a custom layer that you can view on CalTopo or SARTopo.

To start with, register for an account at MapBox under the pay-as-you-go plan.

Shapefiles consist of several files with the same name, but different extensions - typically at least .shp, .prj and .dbf. MapBox requires you to upload these files zipped together, only one shapefile per zipfile:

mapbox-1.png

Click on the "Studio" link at the top right, then "Tilesets", then "New tileset".

mapbox-3.png

mapbox-4.png

mapbox-5.png

A notification will show at the bottom right of the screen while MapBox is processing your upload:

mapbox-6.png

Once complete, your tileset will show below the the list of standard MapBox tilesets:

mapbox-7.png

Click on "styles" at the top right, then "more ways to create" under "Create a new style":

mapbox-8.png

Click "Start blank" to open up MapBox Studio with a blank style:

mapbox-9.png

At this point you want to add your data set twice, as both a line layer (to show the actual lines) and a symbol layer (to show labels). Click on "Add layer", then "No tileset, click to select, then scroll down to the tileset you uploaded and click on it:

mapbox-11.png

Click "Create layer" to add this layer:

mapbox-12.png

Repeat this process to add the second layer, but this time, change the layer type to "Symbol":

mapbox-14.png

If necessary, use the location search tool at the top right of the screen to zoom in on your dataset:

mapbox-13.png

Click on your symbol layer (look for the T icon to the left of the layer name), and the "Text" subtab should come up. Click on "Insert a data field" and use the popup to find the field you want to use as a label:

mapbox-15.png

However, this inserts the field as a "formula", which has issues when rendering raster tiles for use with CalTopo. Make note of the field name, click "Reset value to default", and enter that field name surrounded by curly braces in the "Text field" box. If the field you wanted to use for a label was road_name, enter {road_name}

mapbox-31.png

In order to render labels along lines, rather than horizontally, click on the Placement subtab, then the Placement field, then the line icon:

mapbox-16.png

This leaves your labels overlapping the lines. In order to shift them upward, click on the Position subtab, the "Text anchor" field, and then the "Bottom" option:

mapbox-17.png

You probably want to edit the line layer and make your lines wider:
mapbox-18.png

Click on "Blank" at the top left and give you style a new name:

mapbox-19.png

If you have multiple shapefiles, you can repeat these instructions to add additional shapefiles to the style. When the style looks good, click "Publish style" at the top right:

mapbox-20.png

Click "Publish". If this is an update to a layer you've already been viewing in CalTopo, you may want to click "Publish as new", which will create a new layer with a new ID that will prevent any previously-viewed tiles from being cached and displaying your old style.

mapbox-21.png

Make note of your style's ID. You can get this from the URL of the style editor, or from the Style URL menu option on your styles list (the "Style URL" is mapbox://style, your MapBox user ID, another slash slash, and then the style ID).

mapbox-24.png

mapbox-23.png

Make note of your MapBox access token by clicking on "account" at the top right:

mapbox-28.png

On CalTopo, select Add New Layer -> Add Custom Source:
mapbox-25.png

Select type Tile and Max Zoom 21. Enter a name, and select whether you want the layer to be an overlay (shows up in the list of checkboxes) or a base layer (shows up in the layer dropdown along with an opacity slider). For the URL template, enter:

https://api.mapbox.com/styles/v1/your_mapbox_username/your_style_id/tiles/256/{Z}/{X}/{Y}?access_token=your_access_token

where your_mapbox_username is your mapbox username, your_style_id is the style ID you previously noted, and your_access_token is the access token you previously noted:

mapbox-26.png

Hopefully you will now see your layer overlaid in CalTopo:

mapbox-32.png