Mapbox Studio is a development upgrade to TileMill and can be downloaded to the PC or Desktop. Mapbox studio is used to create Style and Source vector tiles that can be uploaded as data for use in Mapbox Editor and other GIS mapping applications. Mapbox Studio gives the user a wider 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 Mapbox.com site.
* Internet connection is required to use Mapbox Studio.
Task
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).
Procedure
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
. 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:
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 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.
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.
No comments:
Post a Comment