Tutorials
beginner
No code

Create a custom style

This guide will walk through how to create a custom style in the Mapbox Studio style editor. The Mapbox Studio Monochrome style is customizable, which lets you create a map style that conforms to your company's branding. This tutorial will show you how to customize the Mapbox Monochrome style by changing colors, fonts, and labels. After you have completed the tutorial, you will have created a map style that reflects the Mapbox brand colors at any zoom level and at any place across the world.

Public Beta
Style components in Mapbox Studio are now available in public beta for every user. To start building, log in to Studio or sign up for an account to start making your first map.

Getting started

You will need a few resources to get started:

  • Mapbox account. Sign up for a free account on Mapbox.
  • Style guidelines. It is often helpful to start a new custom map style with some broad style guidelines. Mapbox's brand has three primary colors (blue, gray, and pink) and a broader set of secondary colors. Every hue includes a dark, light, and faint variation. This tutorial will use a combination of these colors to style the background, water, buildings, and labels in a custom map style.

Create a new style

Log in to your Mapbox account and navigate to the Styles page. This is where all your map styles are listed. A style is a set of rules that defines how Mapbox draws your map on the page. It includes references to your data, map images (icons, markers, and patterns), fonts, and defines how all your data should be styled on the map. For more information about styles, read the Styles section of the Mapbox Studio manual.

To create a new style from your Styles page:

  1. Click the New style button
  2. Find the Monochrome style
  3. Click Customize Monochrome

The Mapbox Studio style editor will open, and you will be able to start creating a custom map style.

Customize your style

The style editor

The Mapbox Studio style editor is a visual tool for creating custom maps by applying styles to map features. The style component beta feature offers two approaches to styling map features:

  • Components: A component is a collection of related map features of one or more types that you style as a single unit. Road network and administrative boundaries are examples of components. Each component contains several layers.
  • Layers: A layer is a collection of map features of a single type (for example fill, line, or symbol). bridge-pedestrian is an example of a layer. In the Mapbox Streets style, bridge-pedestrian is one of more than 50 layers in the Road network component. Layers can be a part of a component, but don’t have to be.

Both components and layers have properties you can change to adjust the appearance of map features. In this section, you'll change colors applied to features throughout your map style using the Colors tab and change a few component properties in the Components tab.

But first, change the name of your new style. Click into the name field in the upper left side of the screen and change the name to Mapbox Style.

Adjust the color palette

The Colors tab displays colors used throughout the style. There are over a dozen component color properties you can define in Mapbox template styles.

First, adjust the color assigned to the Base component color property:

  1. Click the color swatch already listed in the Colors tab.
  2. In the color picker, change the value to #edf0fd.

Then, add a component color property for Place labels to the color palette:

  1. Click on Manage color palette.
  2. Scroll through the list of properties until you find Place labels. Click + to add it to the color palette.
  3. Use the color picker to assign #5b7897.

Then, add Greenspace to the color palette and assign #afdec5.

Style buildings

Next, you'll add 3D buildings to the map and style them. You'll use a combination of component properties and layer properties.

  1. Make sure you're on the Components tab.
  2. Click on the Buildings component to see all available component properties.
  3. Toggle the 3D buildings property on.

When using the default styling for 3D buildings, the buildings are fairly faint. You can use a layer property to adjust the opacity of the buildings:

  1. In the component property panel for Buildings, click More options in the Buildings component property panel.
  2. Click View layers to open the layer property panel for the layers in this component.
  3. Find the Opacity property, click it, and change the value to 0.5.

Override water color

If a layer property is controlled by a component, a lock icon will appear next to the value. You can override any layer property controlled by a component by clicking Set manual override. When you override a property, the override will only affect one layer property for that specific layer — other layers controlled by the component will not be affected.

Override the water color defined by the Land & water component to gradually change the color as you zoom in and out:

  1. Switch to the Layers tab.
  2. Scroll down to the water layer and click on it.
  3. Make sure you are on the Color property, and click Set manual override to unlock styling options for the Color property.
  4. Click Style across zoom range.
  5. Set the first stop's Zoom to 8 and the color to #b0bcf3.
  6. Set the second stop's Zoom to 18 and the color to #4264fb.

Zoom in and out between zoom levels 8 and 18 to see the effect.

Style the landuse, landcover, and national park layers

Overrides and layer properties give you fine-grained control over the style of every feature at every zoom level. In this section, you'll get a feel for the level of detail that is possible with overrides and layer properties.

Landuse

Start by adjusting the default style that was applied to the landuse layer by the Land & water component properties:

  1. Switch to the Layers tab.
  2. Scroll down to the landuse layer and click on it.
  3. Make sure you are on the Color property, and click Set manual override to unlock styling options for the Color property.
  4. Click Style across zoom range.
  5. Set the first stop's Zoom to 8, click Clear value, and assign the color #c8d1f9.
  6. Set the second stop's Zoom to 18. Keep the default data conditions assigned by the component.

Landcover

Adjust the style of the landcover layer:

  1. Click Set manual override.
  2. Change the Fallback value to #c8d1f9.

National park

Finally, adjust the national-park layer:

  1. Click Set manual override
  2. Click Style across zoom range.
  3. Set the first stop's Zoom to 10 and assign the color #c8d1f9.
  4. Set the second stop's Zoom to 16 and assign the color #a9eac6.

Add a custom layer

A custom layer is a layer that is not part of a component. Any layers you add to a template style are custom layers. While layers inside components can be styled using either component properties or layer properties, custom layers must be styled using layer properties.

Add a hillshade layer to your style using data from the Mapbox Terrain tileset:

  1. Switch to the Layers tab.
  2. Click + to add a new layer.
  3. Click Source, search for hillshade, and add the hillshade layer from the Mapbox Terrain tileset.
  4. Set Type to Fill.

Style your custom layer using layer properties:

  1. Click the name of the layer in the layer list.
  2. Click Style across zoom range.
  3. Set the first stop's Zoom to 10 and the color to #a9b6ef with an opacity of 20.
  4. Set the second stop's Zoom to 18 and the color to #32c376 with an opacity of 20.

Publish

When you have finished editing your map style, publish your changes by clicking Publish in the upper right side of the screen. When you click the publish button, a window will display the difference between the previous and current version of this style. If you're happy with the changes, click Publish. Your style will now be available to share from a variety of tools and applications.

Finished product

You have created a map that reflects the Mapbox style guide, from a world view to the street level and at any location across the world. Explore your finished custom map style and take some time to view the style at various zoom levels.

Next steps

Mapbox Studio provides a wide variety of ways to use your new map style. You can use this map directly on your website or in a web or mobile application. Take a look at the Publish style section of the Mapbox Studio Manual to see all the ways you can use your style!

Was this page helpful?