MapBoX Studio / BASEMAP StylES

Optional Step

This is an optional step when creating a new map, as there are a number of very good default styles in Mapbox already (read more). Mapbox Studio application allows you to create a new basemap layer in your own style. It also allows you to upload your data and create a map of your data without writing code.

Basemaps with Mapbox Studio

First we need to choose a basemap and position it correctly:

  1. Click on the Styles homepage > "More options (Pick a template or upload a style)" and choose the Light template.
  2. Change your style title by clicking the left-up corner label "Light" and renaming it as appropriate.
  3. The page will change automatically to load the style into Mapbox Studio style editor. Down the left hand side there is a list of layers. Explore the layers and options.
  4. Click Search on the top right and type Melbourne, choose Melbourne, Victoria, Australia and the map will zoom to Melbourne area.
  5. To be a little more precise click on Map Position and enter the coordinates: 144.96332, -37.824664, change the zoom to 13 by using the +.
  6. Click Lock to save this as our default starting location.

Amend the Style

As the Light template is quite grey we will edit a few of the area layers to add some subtle colour to the parks and the waterways.

For good quality maps, areas are usually coloured using a light and desaturated shade as they tend to overly dominate the map. Lines, points or borders can be more saturated and darker shades.

  1. In the left panel, find "Water" near the bottom. Click on it to reveal some menus.
  2. The first menu shows the current 'style' (the color, the pattern etc). The second shows the 'select data' on the map associated with the feature. From either menu you can click on the map to the right to identify map features and identify map layers.
  3. If you change the menu to Select data, the map will go dark, and the river and waterways will be highlighted. This menu also shows additional information such as zoom levels where the data is visible.
  4. Go back to Style, change the color to a desaturated (dull/muddy) light blue.
  5. Then change the stroke to be slightly darker and more saturated than the area color (on maps water features usually have a darker line to indicate water edge).
  6. When happy with your water colour, select "Parks", and change the color (choose from the picker) and stroke (copy the hslcolour code rather than trying to choose the same from the colour picker) to the same desaturated light green.
  7. Finally, select "Buildings". Zoom into Melbourne centre to see these appear (>15 zoom level). Now change the color (choose from the picker) and stroke (copy the hsl colour code rather than trying to choose the same from the colour picker) to the same desaturated light brown (or grey).
  8. Zoom out of the map slightly (using your mouse) and evaluate whether your park, water and building colours are too saturated (bright). Edit them as appropriate.

Note: You may want to change the order of your map layers or remove layers from the map. To change the order simply drag and drop the layer to the new order location. But be careful to ensure the order still makes sense. e.g. the bridges are on top of the rivers. To remove layers, select the layer and click the hide "eye" button at the top. This will remove the layer from view. You shouldn't need to delete (bin icon) any layers from the template.

Styling the building footprint data based on building status

Now we will add to our map the 3D building footprint tileset that we uploaded earlier.

  1. Click + Add layer (top left under the map style title)
  2. In the New Layer panel ,click the Source field and identify the "Development_Activity..." file under "unused sources"

Click on this and the building polygons will appear on the x-ray map in green. The map will then show the layer in your own map style, with a default style of black with 100% opacity.

  1. Click the "Style" tab, change the color to a dark red and change the opacity (the number in the a under HSV) to 60%. Notice that the colour properties change from hsl() to hsla() when opacity is included.
  2. Explore the buildings on the map.
  3. Finally, we want to change the colour of the buildings based on the status of the building development, a property of the geojson file we loaded.
  4. Click the symbol next to color > style with data conditions > choose field: Status
  5. Choose the category labels and colour for our building status type: We have four (once you have added one, click add stop to add another): APPLIED, APPROVED, UNDER CONSTRUCTION and COMPLETED - choose a different colour for each (using the "Add another condition").
  6. Remember to think about your choice of colours for your variables. Do they look good? Do they make sense without a legend? Is there an order to these building status types?

Save, publish and locate the sharing options for your map

Now you have finished creating your map, you need to save and publish it to be able to link to it on a web page.

  1. Click Publish at the top. Note: If this is not the first time you have clicked publish it will ask you if you are sure, or whether you want to save as a new style. You can compare your two styles old and new side by side.
  2. Click on Styles in the left panel. Your new style will appear in the styles list.
  3. Click on the style to see the style properties. Notice your map style is saved in your account as a private map style. This will remain as private unless you make the style public using Make Public.
  4. To use the map we can Generate [a] Static image if you wish to use the new map style to create a static map. However, we want to use the map in the web browser so we need to click on share, develop and use. Here we have a few options:
    • Share URL - this we can link to to share our map style on mapbox. Copy and paste this into a browser to see if you can see your map.
    • Develop with this style - this is the location of your mapbox style URL and Access Token. We will be using this to link to your map in the next stage.
    • Use style in GIS apps - you can use your map style with other online mapping tools.
    • Mapbox WMTS Service - you can use your new map style in ArcMap or QGIS - have a go at doing this at home using the linked instructions.