Part II - The Mapbox Studio Editor
What we’ll cover:
- creating a basic style from a template
- publishing and sharing your style
- brief overview of layer, data, and styling
Exercise
- Open up Mapbox Studio
- click New Style > choose Streets template > click Create
- Zoom in until you can see country labels
- Change color of country labels to your favorite color
- Publish and share
Congrats! You just published and shared your first style!
Mapbox Studio style editor
The Mapbox Studio style editor is a tool for creating map styles. A style is a set of rules for how your map will be drawn on the page – it includes references to your data, map images (icons, markers, patterns), fonts, and, most importantly, it defines how all of your data should be styled on your map. This is done through creation of layers. Most of what you do in the Mapbox Studio style editor will involve creating and editing layers.
On a technical level, map styles are JSON stylesheets written to adhere to the Mapbox GL Style Specification. These stylesheets are read by the renderer to display a map on the page, and many parts of the stylesheet can be edited client-side with Mapbox GL JS.
Layers
A layer is a styled representation of map data. It contains both a reference to the data it’s using as well as styling rules to be applied to that data.
You can create, sort, and group your layers within the Layers panel.
More about layers:
- Add a new layer in Mapbox Studio
- How to design complex styles with Mapbox Studio
- Style multiple layers at the same time in Mapbox Studio
Adding layers
Add and style data on your map by creating new layers in the Mapbox Studio style editor. Each layer has two main parts: the data that is being styled and the style rules themselves.
Data
As you add layers, you must define the tilesets they are representing. On the Select data tab of your layer, you can pick your tileset, upload new data, define the data types, adjust zoom extent, and filter your data by attributes or classes.
Data uploaded through the style editor interface is available on your Data page and can be used in any of your styles.
More about data and custom data:
- Add custom data in Mapbox Studio
- Make a shakemap with Mapbox Studio in 3 steps
- Selecting features with the new Mapbox Studio
- Getting your PostGIS data ready for Mapbox Studio
- Managing large datasets for Mapbox Studio with Tippecanoe
Style
After your data is in place, you can style every element of your data based on data type. Each data type has its own set of properties to apply a style. Data types include:
See the Mapbox Studio help docs for more guidance on styling layers.
Managing your styles
You can manage various aspects of your styles using the Properties panel, the Navigation toolbar, and the History, Debug, & Help options.
Properties
The Properties panel can be used to manage the overall style of your map by editing style properties in bulk. View your map styles by properties Colors, Numbers, Images, Font stacks, Text field, or Options to see the styles you’ve set globally for each layer.
You can sort options for each property by Layer count or Name, filter by data type, and view By value or By property. This panel also shows which layer is Used in each property and you can click to open any layer for direct editing.
Read more on managing your properties in our blog post, Designing The Blueprint style in Mapbox Studio.
Search, fullscreen, and zoom
The search button allows you to search for locations on the map as well as layers or data sources. You can find this button on the top right. Click the search icon, type in what you’re looking for, and select to be taken to that exact location or layer.
Right next to the search button is the fullscreen button. This button allows you to clear from the canvas any layers or panels that may be open. Move between zoom levels with zoom in and zoom out buttons.
Position
Click the position button to view and alter the zoom level, bearing, pitch, and centerpoint longitude, latitude direction. Under the Default position, lock the current map position to save the current location; your map will return to that location when you re-open the style. This position will also be used in Mapbox developer tools if no other coordinates are specified.
If you have altered the pitch, click the reset pitch icon to quickly set your map’s pitch back to zero.
Help
The help button allows you to toggle on Intro and Advanced tips cards in the interface. These cards and call-outs can help you better understand the tools in Mapbox Studio. As you scroll down on this panel, you will see a list of all the keyboard shortcuts you can use.
At the top of the help panel, you have links to Mapbox help and our Contact page.
