> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/llms.txt)

# Create a custom basemap style with Mapbox Studio

This tutorial walks through how to create a custom basemap style in the [**Mapbox Studio style editor**](https://console.mapbox.com/studio/) from scratch. You will start with a **blank canvas** and add predefined groups of basemap features, called **components**, to your style. You will then use the editor's user interface to customize the colors, fonts, and other properties of your style's, resulting in a custom basemap style that you can use in your web and mobile applications.

You will learn how to:

-   Add components to a blank map style
-   Customize the colors of selected layers
-   Customize the style's fonts and labels
-   Add 3D buildings and terrain to the style
-   Publish the style to use in your applications

Once you have completed this tutorial, your style will include custom colors, fonts, terrain changes and buildings, like the one shown below:

Most users will find it easier to start by customizing an existing basemap, such as the [Mapbox Standard style](https://docs.mapbox.com/map-styles/standard/guides/), instead of creating a new style from scratch. To explore that approach, see the [Configure the basemap in Mapbox Studio](https://docs.mapbox.com/help/tutorials/configure-basemap-mapbox-studio) tutorial.

## Prerequisites

You will need a few resources to get started:

-   **Mapbox account**: [Sign up](https://account.mapbox.com/auth/signup/) for free or [log in](https://console.mapbox.com/) if you already have an account.
-   **Style guidelines**. It is often helpful to start a new custom map style with some broad style guidelines.
    -   It is recommended to include the following color options:
        -   A light base hue
        -   Several dark hues for label text and highlighting areas of interest.
    -   This tutorial will use a combination of these colors to style the background, water, parks, buildings, and labels in a custom map style. If you do not have your own branding colors, you can use the ones provided in the tutorial.

## Create a new style

The first step is to create a new style in Mapbox Studio.

> **Note**
> 
> A **style** is a document that defines the visual appearance of a map: what data to draw, the order to draw it in, and how to style the data when drawing it. This includes adding images (*icons, markers, and patterns*), fonts, data and much more to your style.

To create your own custom style, follow these steps:

1.  Log in to your Mapbox account and open the [Mapbox Studio styles page](https://console.mapbox.com/studio/), where all your map styles will be listed.
2.  Click the drop down next to the **New Style** button.
3.  Select **Start From Scratch** below *Start with Standard*.
4.  Click **Customize**.

The [**Mapbox Studio style editor**](https://console.mapbox.com/studio/) will open, and you will be able to start creating a custom map style.

> **Note: Learn more about map styles**
> 
> For more information about styles, read the [Styles](https://docs.mapbox.com/studio-manual/reference/styles/#components) section of the Mapbox Studio manual.

![Create a new custom style with Mapbox Studio.](https://docs.mapbox.com/help/assets/ideal-img/tutorials--create-a-custom-style--create-new-style.a32aa38.480.png)

## Overview of Mapbox Studio

The **Mapbox Studio style editor** is a visual tool for creating custom styles by applying styling rules to map features. View the two following tabs to learn more about Mapbox Studio features.

1.  The **Layers** tab allows you to add individual components to your map style, allowing you to adjust individual features of a component. Click on the **+** button and you will see the following components to choose from:

-   Land & water: Change the color of water and the landscape.
-   Place labels: Changes the format of the labels, like country names or continent names.
-   Transit: Changes everything from the color of transit lines, the format and font of their labels and differentiate between surface and underground transit.
-   Point of Interest: Changes the format of point of interest labels, like museums, colleges, government buildings, etc.
-   Natural features: Changes the format of water labels, like oceans, rivers, etc.
-   Road network: Changes the format of road networks labels, the colors of streets and differentiate between bridges, underground roads and surface level roads.
-   Administrative boundaries: Changes the colors of the state borders, country borders, etc.
-   Walking, cycling, etc: Differentiate between surface walkways, bridges and tunnels.
-   Buildings: Change the color and opacity of buildings, as well as the format of their labels.

2.  The **Global** tab allows you to adjust settings that affect the map style in its entirety. Look through the tab and you will find the following:

-   Projection: Affects what type of map design to display, for example you can choose the globe projection versus mercator, which displays a 2D map.
-   3D Lighting: Adds additional lighting and changes to the color and direction of the light.
-   3D Terrain: Adds terrain to the map style, showcasing the difference between flat plains and mountains.
-   Atmosphere: Changes the space around the globe, allowing you to increase the stars, change the color of the sky, etc.
-   Snow: Adds particle effects to the map style to simulate snow.
-   Rain: Adds particle effects to the map style to simulate rain.
-   Typography: Allows you to change the font of map style labels.
-   Colors: Allows you to change the color palette of the map style, which you'll learn more about in the next step.

> **Note**
> 
> Some of these components will have multiple layers, typically including 1 or more of the following: labels, color, surface, tunnels and/or bridges.

Now that you've had an overview of the editor, you can change your the name of your style in the top left corner of the editor and move to the next step.

## Add components to the style

To get a basic view of your map going, you will need to add the following component layers, as follows:

1.  Add and color land & water layer
    -   Click the **+** button and select **Components** > **Land & Water**.
    -   In the menu that appears, change the **Base** color to `#9ccced`
2.  Add Place labels
    -   Click the **+** button and select **Components** > **Place labels**
    -   This will create labels for country names, city names, etc.

Now you should be able to see labels, land formations and bodies of water across your globe.

> **Note: Troubleshooting**
> 
> If you cannot see the **Components** menu item, you will need to remake the style. When creating a new style, make sure to select the **Start from scratch** option. If you create a style using Mapbox Standard, **Components** will not be available.

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--create-a-style--add-components-c31ae0ee744f87404dfc9981533ebc3b.mp4).

## Adjust the projection

By default, maps render with a globe projection, allowing users to spin around the global. If you would like to uses a traditional Mercator map, you can follow these steps:

1.  Click the **Global** layer.
2.  Select **Projection**
3.  Click the dropdown under *Projection Name**
4.  Scroll through the options and select **Mercator**.

![Adjust the projection of the map from globe to mercator.](https://docs.mapbox.com/help/assets/ideal-img/tutorials--create-a-custom-style--change-projection.2854e32.480.png)

## Add 3D buildings

In the last step, you changed the colors of certain layers, but you can also adjust individual layer for more fine-grained customization.

You will walk through these kinds of changes, by customizing the individual layers of **Place labels** and adding 3D buildings to the style, by following these steps:

1.  Click on the **Layers** tab.
2.  Next, click the **+** button, go to Components and select the **Buildings** layer.
3.  In the panel, click the dropdown next to **Building Style** and select `3D`.
4.  Adjust the opacity to make the buildings more visible.

-   If you zoom into the map, you'll start to see building shapes, but you'll notice they're not very visible.
-   To adjust the opacity, slide the **Building opacity** slider towards the right to reduce to opacity of the buildings.

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--create-a-custom-style--buildings-7a2713632f24a82e56bcf4cefafd9eba.mp4).

## Change the water color on zoom

You can change the color of a feature based on the zoom level. For this step, you will adjust the color of the water on the map depending on the zoom level by following these steps:

1.  Click the **Land & water - water** layer dropdown and under the layer, select **water**.
2.  In the new panel, click **Style across zoom range**.
3.  Set the first stop's *Zoom* to `8` and the color to `#39a3ea`.
4.  Set the second stop's *Zoom* to `18` and the color to `#0268b1`.

Now, as you zoom in and out, you will see the map's water shift from a light blue, to a deeper more saturated blue. Note, that since the stops are not the extremes of the map, there may be zoom segments where the color does not change.

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--create-a-custom-style--water-zoom-a9cc86814dccc26331b30a3e42d767a9.mp4).

## Style the landuse, landcover, and national park layers

You can add 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 layer properties.

Start by adjusting the default style that was applied to the *landuse* layer by following these steps:

1.  Click the **Land & water - land** dropdown and under the layer, select **landuse**.
2.  In the new panel, click **Style across zoom range**.
3.  Set the first stop's *Zoom* to `8` and set the value to `#add4f0`
4.  Next, set the second stop's *Zoom* to `18`. Keep the default data conditions assigned by the component.
5.  Now, click the **national-park** component in the layers hierarchy.
6.  In the new panel, click **Style across zoom range**.
7.  Set the first stop's *Zoom* to `8` and the color value to `#add4f0`.
8.  Then set the second stop's *Zoom* to `18` and assign the color `#1d6294`.

Now when you zoom in and out of the map, you'll see colors change across the map.

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--create-a-custom-style--landuse-65e64b63364fab4405f2182cbefe9387.mp4).

## Add terrain

Now that you've added colors to various components of the map, this tutorial will walk you through adding Terrain to your style.

This component will display hillshades using data from the Mapbox Terrain v2 tileset.

To enable Terrain in your style, follow these steps:

1.  In the **Global** tab, click **3D Terrain**.
2.  Under **Enable Terrain**, switch the toggle to **enable**.
3.  Adjust your camera view to better view terrain changes.
    -   You may not immediately see the change, depending on the angle of your camera. To better view the terrain, hold **CTRL** and **drag your mouse** across the map.
    -   This will rotate the angle of the camera and will be able to see the terrain extruding from the globe.
4.  Adjust the exaggeration of the terrain.
    -   To make the terrain more prominent, click **Exaggeration** in the **3D terrain** panel and increase the exaggeration to 3.

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--create-a-custom-style--terrain-5eb4ba1570af256d5541ed049f83a55d.mp4).

## Publish your style

When you have finished editing your map style you'll want to publish your changes so you can access this style from a webpage or a mobile application.

To publish your changes follow these steps:

1.  Click **Publish** in the upper right side of the screen.
2.  Review your changes and make sure the map displays as expected.
3.  If you're happy with the changes, click **Publish**.

Your style will now be available to share from a variety of tools and applications, by going to clicking **Share** in the top right corner of Mapbox Studio, and grabbing the style URL.

You can use this URL in your mobile apps and websites to display your style on a Mapbox map. The style URL is structured like so:

```
mapbox://styles/{username}/{styleid}
```

Refer to the guides below to learn how to set up an interactive map with your new style, based on your platform of choice:

-   Web: [Set a style](https://docs.mapbox.com/mapbox-gl-js/guides/styles/set-a-style/#custom-styles)
-   Android: [Set a style](https://docs.mapbox.com/android/maps/guides/styles/set-a-style/#custom-styles)
-   iOS: [Set a style](https://docs.mapbox.com/ios/maps/guides/styles/set-a-style/#custom-styles)

## 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 your style](https://docs.mapbox.com/studio-manual/overview/publish-your-style/) section of the Mapbox Studio Manual to see all the ways you can use your style!

### What we covered

-   Add components to a blank map style
-   Customize the colors of selected layers
-   Customize the style's fonts and labels
-   Add 3D buildings and terrain to the style
-   Publish the style to use in your applications

### Expand on your work

Here are some ideas for improving your style that you can try on your own:

-   Customize the colors to match your real-world brand.
-   Remove certain layers or components completely for a different look and feel.
-   Add your own data and layers to the style using [Mapbox Studio](https://docs.mapbox.com/studio-manual/guides/geospatial-data/) or [Mapbox Tiling Service (MTS)](https://docs.mapbox.com/help/tutorials/get-started-mts-and-tilesets-cli/).

### Related learning

You might also be interested in:

-   Learning more about [Map design and styles](https://docs.mapbox.com/help/dive-deeper/map-design/) in our dive deeper guide.
-   [Creating a custom color theme](https://docs.mapbox.com/help/tutorials/create-a-custom-color-theme/) using LUT's.
-   Learning how to add 3D buildings to a map by following our [3D buildings tutorial](https://docs.mapbox.com/help/tutorials/z_add-3d-buildings-studio/).
-   Learning how to add precipitation to the map with our [snow](https://docs.mapbox.com/mapbox-gl-js/example/snow/) and [rain](https://docs.mapbox.com/mapbox-gl-js/example/rain/) examples.