Creating a Category map using cartocss feature in Mapbox Studio

 

Import vector source data into Mapbox Studio. Our vector source data are polygons- parcels-lu- representing parcels of land within a city block.

Download sample by clicking link-  data 

Capture-67

 

Click on the Settings > fill in the details- Name, Description and Attribution. Click on Upload to Mapbox to save the vector source online.

Capture-70

 

Open a Styles project. Click on Projects (red box 1). Create or Select a Style. For the demo, Streets Classic Style is selected.

Capture-73

 

Once the Style is opened, Click on Layer (red box 1) > Change source (red box 2) and in the window, go to where the map description is. Put comma after the style description and paste the Map ID of the source layer to addimage

Click Apply

Capture-76

 

The vector source- Parcels_lu- has been added to the Style project.

Capture-78

 

Click + button (in red box) to add a new CartoCSS tab.

Capture-79

 

For the Parcels_lu vector source file, style with the attribute field –Type, which has rental and owner as attribute values.

image The CartoCSS code here defines the parcels with Type field value is rental.

Below on the screenshot is the visualization for the cartocss code.

Capture-80

 

Replicate the code for the second attribute value – owner. The screenshot below shows both attributes –rental and owner is symbolized with different colors on the map.

Capture-81    image

 

Another attribute field of the Parcels_lu vector source layer is the Value_Clas. This is classified with attribute values 1,2,3 and 4. Similar CartoCSS code is inputted to classify the polygons according to their Value_Clas. On the screenshot is the visual result of the CartoCSS code for categorizing the polygons according to their attribute field- Value_Clas.

Capture-83      image

 

Another addition is the CartoCSS code (green boxed) to add labels to the polygons. image  text-name defines the field whose attribute values would be used to label the polygon features. text-face-name defines the font type for the label. text-fill defines the color of the label and text-size the size of the label.

Capture-83

 

Click on Settings > fill the details and Attribution > Click Upload to Mapbox.

Capture-85

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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