beginner
No code
Create a custom style

This guide will walk through creating a custom style in the Mapbox Studio style editor. You’ll start with a list of colors pulled from the Mapbox logo and apply them to the Mapbox Basic style. In the end, you’ll have created a custom-branded map style that reflects the Mapbox brand at any zoom level and at any place across the world.

preview of mapbox custom style

Getting started

Here are a few resources you’ll need before getting started:

  • Mapbox account. Sign up for free at mapbox.com/sign-up.
  • Style guidelines. Although not necessary, it is often helpful to start with some broad style guidelines when creating a custom map style. Here are the style guidelines for this guide:

mapbox logo

Labels:

#FFFFFF

#094261

Water:

#256897

Background and parks:

#A5D05C

#D0E4AD

#F6DF46

Buildings:

#F68622

Create a new style

screenshot of new style modal in mapbox studio

Log into your Mapbox account and navigate to your Styles page. This is where all your styles are listed. 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 defines how all of your data should be styled on your map. For more about styles, see the Styles section of the Mapbox Studio Manual.

To create a new style from your Styles page, click the New Style button, name your new style ‘Mapbox’, select the Basic template, and click Create. The style editor will automatically open with the Basic template style ready for editing.

Customize your style

The style editor

The Mapbox Studio style editor is a visual tool for creating custom map styles to your exact specifications. Take a look at the layers on the left side of the style editor screen. Each layer can be customized in a variety of ways including (but not limited to) changing colors. At the bottom of the layers list, you’ll find the properties panel. The properties panel allows your to edit the properties of multiple layers at once. This is the easiest way to change the color of all like properties in one place.

To learn more about the Mapbox Studio style editor, check out the Mapbox Studio Manual.

In this section, you will use the Mapbox Studio style editor to apply the style guidelines above. You will alter fonts and change the color of the background, water, parks, various labels, and building layers.

Style background and water

When the style editor first opens with the Basic style template, the map will be at a low zoom level, showing the entire world. To start, you will alter the style to match the Mapbox brand at this low zoom level by making the background and water layers match the green and blue from the logo:

  1. Click on the background layer in the layer list.
  2. When the layer panel opens, change the Color field to #A5D05C.
  3. Click on the water layer in the layer list.
  4. When the layer panel opens, change the Color field to #256897.

style background and water

Then, change the color of both landuse_park and landuse_overlay_national_park using the Properties panel:

  1. Click Properties at the bottom of the layers list to open the Properties panel.
  2. When the Properties list opens, select Colors.
  3. Filter by Fill layer.
  4. Find the Fill color property that is used for both the landuse_park and landuse_overlay_national_park layer.
  5. Change the Fill color field to #A5D05C.

style parks layers

Now the map style reflects the colors found in the Mapbox logo at this low zoom level.

Change fonts and options

Next, alter the fonts that are used as labels. If you zoom in slightly to zoom level 3, you will see that country labels start to appear. Alter the fonts to match the Mapbox logo:

  1. Click Properties at the bottom of the layer list to open the Properties panel.
  2. When the Properties list opens, click Fonts.
  3. When the layer panel opens, make the following changes:
    • Change Open Sans Semibold to Open Sans Bold.
    • Change Open Sans Regular to Open Sans Bold.
    • Change Open Sans Bold to Open Sans Extrabold.
  4. Go back to the list of property types in the lower left, and select Options.
  5. Filter by Symbol layer by clicking at the top of the panel.
  6. Scroll down to find the Text transform property, and select the Uppercase option.

change fonts and transform option

Style labels

After you have changed the font and set some general options, it’s time to change the colors of the labels to reflect the look of the Mapbox logo. First, change the place labels and then, the road labels.

Place labels

  1. Select all country, place, and poi symbol layers: country_label, place_label_city, place_label_other, poi_label
    • You can select multiple layers at once by holding down command (Mac) or CTRL (Windows) while clicking to select layers
  2. When the layer panel opens, change the Color field #FFFFFF
  3. Change the Halo color field to #094261.
  4. Change the Halo blur field to 0px.

change style of place labels

Road labels

  1. Click road_major_label in the layer list.
  2. When the layer panel opens, change the Color field to #094261.

change style of road labels

Style by zoom level

In the Mapbox Studio style editor, any feature or property can be styled based on the map’s zoom level. This is especially handy for colors, where contrast at high zoom levels requires different colors to have the same effect at lower zoom levels.

For this map, you will take advantage of styling by zoom level for the map’s background. When the map is at the lowest zoom levels (less than 4), the background color will be the green from the style guidelines we’ve already set. Using zoom properties, you can modify your style so the green gets lighter as the map zooms in. This will create more contrast between the green background and the color of the parks and less contrast between the green background and the white roads. Then, when zooming in beyond zoom level 10, you can modify the background color to gradually change from light green to yellow. By the time you reach zoom level 18, the background color will be yellow. Style the background layer by zoom level:

  1. Click on the background layer in the layer list.
  2. When the layer panel opens, click the icon next to the Color property.
  3. Click the Enable zoom function button.
  4. Add an additional stop by clicking Add stop.
  5. Edit each stop (the text field on the left is the zoom level and the text field on the right is the color)
    • Edit the first stop so the zoom level is 4 and the color is green #A5D05C.
    • Edit the second stop so the zoom level is 10 and the color is light green #D0E4AD.
    • Edit the third stop so the zoom level is 18 and the color is yellow #F6DF46.
  6. Zoom in to see the background color change gradually as the zoom level increases.

enable zoom function for background layer

Style buildings

Next, change the color of the buildings to reflect the style of the Mapbox logo:

  1. Click on the building layer in the layer list.
  2. When the layer panel opens, change the Color field to #F68622.
  3. Change the Opacity field to 0.6.
  4. Change the 1px stroke field to #F68622.

change building color

To ensure that Mapbox template styles are performant, layers are not included at every zoom level. The building layer, for example, is visible only at zoom levels 15 and higher. You can use a zoom function to create a fade-in effect as you zoom past level 15 rather than buildings showing up abruptly once you hit zoom level 15:

  1. Click on the building layer in the layer list
  2. When the layer panel opens, click the icon next to the Opacity property
  3. Click the Enable zoom function button
  4. Edit each stop (the text field on the left is the zoom level and the text field on the right is the opacity)
    • Edit the first stop so the zoom level is 15 and the opacity is 0
    • Edit the second stop so the zoom level is 16 and the opacity is 0.6
  5. Zoom in to see the buildings fade in between zoom level 15 and 16

add fade effect to buildings

Though not covered in this tutorial, this fade-in effect could also be applied to roads, parks, waterways, and any other layers.

Publish

When you have finished editing your map style, publish your changes by clicking Publish in the upper left. When you click Publish, a window will appear showing you the difference between the version of this style that was previously published and the current version you are editing. If you’re happy with the changes, click Publish. Your style will now be available to share from a variety of tools and applications.

publish your style

Finished product

You just created a map that reflects the aesthetics of the Mapbox logo from a world view to the street level and in any place across the world! Take some time to view the style at various zoom levels across the world.

compare logo with various areas of the style

Check out your finished custom map style. Great job!

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 an web or mobile application. Take a look at the Publish your style section of the Mapbox Studio Manual to see all the ways you can use your style!