intermediate
No code
Custom map styles in Unity
Prerequisite
Familiarity with Unity.

Mapbox allows you to create completely custom maps that can be used across platforms. This tutorial will walk you through how to add a Mapbox designer map to your account as a custom style and use that custom style with the Mapbox Maps SDK for Unity.

A basic map of San Francisco using the custom Whaam! style

Getting started

Here are some resources you’ll need to get started:

Learn about map styles

A map style is a document that defines the visual appearance of a map. The style document states which data sources to use and creates style layers that specify how that data should be styled. With the Mapbox Maps SDK for Unity, you can use one of our core Mapbox styles (like Mapbox Streets, Mapbox Outdoors, and Mapbox Satellite) or a custom map style from your Mapbox account.

You can create a custom style in the Mapbox Studio style editor. For more information on creating custom styles, check out the following resources:

You can also add one of our designer map styles to your account and use it in your Unity application. In this tutorial, you’ll use the designer map style, Whaam!

Browse all designer maps and add them to your account

a preview of all designer map styles

Add a designer style to your account

Start by signing into your Mapbox account. Once you are signed in, visit the designer map page to add a new style to your account:

  1. Visit mapbox.com/designer-maps.
  2. Find the Whaam! style and click Add this style.
  3. The style will automatically be added to your Mapbox account.

When the style is added to your account, it will appear on the Styles page in Mapbox Studio. From here, you can find the style URL for the style. You’ll use the style URL to add this style to your Unity application:

  1. Find the style on your Styles page.
  2. Click on the Menu next to the style name to uncover options for altering and using that style.
  3. Find the Style URL. You can use the clipboard icon to copy the style URL, which you’ll paste into your Unity project in a later step.

Add a custom style in Unity

Next, you’ll add this style in Unity using the style URL.

Set up a map in Unity

First, you’ll need to set up a new scene displaying a map. You can follow part one of the mesh generation tutorial series to add a map to a scene. After completing the tutorial, you should see a map using the Mapbox Dark style within the Unity interface.

A basic map of San Francisco using the built in Dark theme

Change the map style in Unity

Next, change the style of the map. In Unity, open the inspector window of your MapImageFactory. Change the MapType to Custom.

screenshot of the inspector window for the MapImageFactory
screenshot of the inspector window for the MapImageFactory showing all available options

Use a custom style in Unity

Copy and paste the style URL from the Mapbox Studio Styles page into the Id field of your MapImageFactory.

screenshot of the inspector window for the MapImageFactory while adding the style URL in the Id field

Final product

When you run your scene with the new style, you’ll see how your map has changed.

A basic map of San Francisco using the custom Whaam! style

Next steps

There are many other ways for you to customize your Unity application. Check out the following resources to continue building your application: