Creating and Styling web maps using the Mapbox Studio

Mapbox Studio is a development upgrade for TileMill and can be downloaded to the PC or Desktop. Mapbox Studio is uses Style and Source vector tiles that can be uploaded for use in Mapbox Editor and other GIS mapping applications. Mapbox Studio gives the user a wide range for customization with the use of CartoCSS.

The post will demonstrate how to use a standard free subscription of Mapbox Studio to create web maps. Mapbox Studio can be downloaded from the site.

* Internet connection is required to use Mapbox Studio.


Create and style a simple web map using Mapbox Studio. This demonstration will be a very introductory procedure(as we move along in the series the procedures will become more advanced).


1. First Add a custom vector tile. Simply implies the user will import and apply a vector layer.

Launch Mapbox Studio from the desktop. Click on Projects (cursor finger on the lower corner left on the screenshot).


Click on New Project on the next page. Click on Sources (cursor finger)


On the next page, click on the + button under blank source (cursor finger).


Click on New Layer (red boxed) and the inner display box will appear. Click on Browse (cursor finger) to navigate for the vector file. In the case of this demo, the vector file is a polygon shapefile named Parcels.shp.


The vector layer is added. The default window to the right will be the Configure window(red boxed) Fill in Description and adjust buffer size to 30-32 preferably.


Click on the Fields button (cursor finger) and a window that will allow the user to inspect and fill in description of the attribute fields (see in red box) of the vector layer will open.


Once done with the editing, click Save as (highlighted in blue on the upper left side where the cursor finger is). Make sure to save the vector layer.


Next Upload the Source to Mapbox. Click on Settings (indicated in red box 1) > In the settings window (red box 2), fill in the details and fix the zoom of the source map created > Click on Upload to Mapbox (red box 3).


Open Mapbox Account online. Click on Data > Uploads and copy the Map ID of the uploaded vector source (green boxed).


2. Create a Style. A source (either raster or vector) is added on a style to produce the web map.

Click on Projects (red boxed 1) > New Projects (red boxed 2) > Styles (red boxed 3). For the demo, High contrast map style is chosen.


Next is to add in the source layer (red box 1) on the style. Click on Layers and Change source (red box 2). The source window will open. Put a comma after the description of the Style layer and input the copied Map ID  Capture-26. Click Apply


The uploaded vector source layer is now added to the Style.For the demo- see the Parcels layer (red boxed).


3. Let us style the layer.

Click on the + button on the far right (small red box). The Add a new CartoCSS tab to your style  window opens. Give the style a name and click on new tab to add.


The new CartoCSS tab is added in the right window. Now we write a simple code as follows:

image  This is a simple CartoCSS code. To learn more about CartoCSS, browse online for resources on this topic. First line indicates the layer to style, the line-color allocates color to the polygon border lines. line-width allocates a polygon border line width of 1. polygon-opacity allocates opacity to the polygon and polygon-fill gives the fill color. Once the code is written , click on save button and the changes are made on the layer.


image Simple changes can be made in the code to change the appearance of the layer. line-width is increased to 2 and polygon-opacity to 8. Though a slight change but look at the screenshot to observe that the polygon border lines are now thicker.


4. Save the Style and Upload to the web

Click on Settings and a settings window will open. Fill in the Name and description of the style. Click Save to save the style locally.


Click on Settings again and Click on Upload to Mapbox. Note the Map ID allocated to the Style.


Viola!!!User can go their online Mapbox account and Click on Styles to view the uploaded map or edit it further.


This demonstration is a very simple introduction to using Mapbox Studio. This was designed in order to gradually bring in light skilled GI Users who may find the addition of codes intimidating. As we move along, more posts will reveal the awesome capacity of Mapbox Studio and even TileMill.

Thank you for reading and practicing along. Feel free to send in your comments.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s