Studio Exercise

studio-exercise.md

Studio Exercise

Use the Mapbox Studio Guides for reference.

1: Introduction

• Create a new style project using the Basic style
• Change the color of the land to black
• Change the color of water to lighten(@land,50%)
• Change color of roads to red
• Brighten the color of place names so that they are visible
• Show names of places only after zoom level 7
• Change the font of country names to Clan SC Offc Pro Bold

2: Styling

• Write a style to render all the parks in a light green color. For reference, create a new Emerald style project to see how it is done and use the same style in your project
• Render railway lines with hatches like in the Mapbox Bright style
• Add a style for buildings
• Style all educational institution areas with a polygon fill color of orange

3: The next level

• Use the custom font Libre Baskerville for the place labels
• Use the text-halo-fill and text-halo-radius properties on the place labels to stand out from the background
• 
• Add popup dialogs for the landuse layer using UTFGrid interactivity so that the class of the landuse polygona. See the style quickstart guide for help. You willYou would need to update the template tags and layer name to match

4: Adding extra data to the map

• We are going to make a public transport map and we first need some data points of bus stops and railway stations to overlay onto the map. Use overpass-turbo and run the wizard query for amenity=bus_station or highway=bus_stop or railway=station on the map of your home city.
• Use the export option to save your data as a .geojson file
• Refer to the Source quickstart quide and create a new Studio source using your geojson data and upload it to your account
• Create a new style project based on Mapbox Light
• Refer to the above guide and add your custom data source to the project
• Write a simple style with the property marker-width:2 to style the data points in your custom data layer
• Once you have simple markers showing for each point, write additional filters to render a marker of different width and color for [railway='station], [amenity='bus_station'] and [highway='bus_stop']

5: Your first map: Public Transport Map!

• Add the text-name: and text-face-name: properties to render the names of the points.