Publish your style

Once you've finished adding data and styling your map, the next step is to add it to a web or mobile application. This section covers everything you can do with your published style.

Mapbox Studio topics covered in this section:

Upload

Dataset

Tileset

Template style

Custom style

Add data to style

Style data

Publish

Publish

Before your share your style or use it in an application, you will need to publish it inside the style editor. When making edits to your style in the style editor, the updated style is saved as a draft in your account. Changes made in the style editor will not be reflected in a style you share or use in production until you explicitly publish it using the Publish button.

Share & use

On your Styles page, there is a Share & use button next to the name of each style listed. This button will open a modal with all the available options for sharing or using your style in an application.

screenshot of the share and use modal

Share

The share URL provides a staging address for your map style. It gives you a quick way to share your map with others to get feedback, collaborate on designs, or just to show off your creative work. Click the clipboard button to copy the share URL to your clipboard. Paste it into a browser window to see your style.

help
Note

If you wish to add interactions like popups, you will need to do so by creating a web application with Mapbox GL JS.

Use

Web

Mapbox GL JS is a JavaScript library for creating interactive maps with Mapbox styles. This API harnesses the power of GL-driven maps, including smooth zooming, map bearing and pitch, and vector data available for interaction and styling in the browser. You can use custom styles created in the Mapbox Studio style editor, or the default styles we provide, and programmatically add additional data including GeoJSON, images, or even video!

The Use > Web option provides the HTML code that is necessary to initialize your map style on a web page using Mapbox GL JS.

share and use modal with the "Use" and "Web" options selected

Your access token and style URL are provided below the code block. Use these to integrate your custom style into an existing web project using Mapbox GL JS. A style URL is how you refer to your map style in other Mapbox tools. Combined with your access token, it allows you to access and use your map with any of the Mapbox developer tools.

A complete style URL, for example mapbox://styles/mapbox/streets-v10, is made up of three components:

  • mapbox://styles – points to Mapbox's Styles API
  • /mapbox – your Mapbox username
  • /streets-v10 – your style's unique ID
help
Note

The mapbox://styles notation for Mapbox styles is an alias to the full Styles API URL: https://api.mapbox.com/styles/v1/streets-v10.

Mapbox uses access tokens to associate your apps and tool usage with your account. Every account has a default public access token, but you can create new access tokens as well. You can find your access tokens on your Account page.

Be sure to look at the Mapbox GL JS examples to see the power of this amazing library and check out the Build a store locator guide to get started.

iOS, Android, and Unity

To use your map style with one of our mobile Mapbox Maps SDKs, you will need the style URL for your map and an access token associated with your account.

share and use modal with the "Use" and "iOS" options selected

Third party

You can use your Mapbox Studio style as a basemap in ArcGIS Online, Tableau, CARTO, and Fulcrum. Full instructions for each of these tools are available in the Style & use modal's Use > Third party option.

share and use modal with the "Use" and "Third party" options selected

Other ways to use your style

There are several other ways to use custom styles built with Mapbox Studio.

WMTS endpoints

Both Mapbox template styles and your custom styles designed in Mapbox Studio come with a WMTS endpoint that can be used to add your styles to desktop GIS applications. You can use the following endpoint with any of your custom styles:

https://api.mapbox.com/styles/v1/YOUR_USERNAME/YOUR_STYLE_ID/wmts?access_token=YOUR_ACCESS_TOKEN

This WMTS endpoint allows you to use this map in:

Mapbox.js

Mapbox.js is our older JavaScript web mapping library that extends the popular Leaflet.js library. Mapbox.js can be used to create interactive maps using your Mapbox Studio styles as a basemap. Note that using Mapbox.js does not provide all of the features available with a Mapbox Studio style.

Mapbox.js v3.0.1 and beyond support adding styles from Mapbox Studio, using the styleLayer method.

L.mapbox.styleLayer('mapbox://styles/mapbox/outdoors-v9').addTo(map);

See the full example in the Mapbox.js documentation.

Leaflet

Leaflet is an open-source JavaScript library for mobile-friendly interactive maps. You can add a Mapbox Studio style to a Leaflet map using this endpoint with the L.TileLayer class:

https://api.mapbox.com/styles/v1/YOUR_USERNAME/YOUR_STYLE_ID/tiles/256/{z}/{x}/{y}?access_token=YOUR_ACCESS_TOKEN

Attribution and Terms of Service

Whether you're creating a custom style with Mapbox Studio or building a mobile app with the Android SDK, all Mapbox tools are governed by our attribution requirements and our terms of service. For more information about either of these requirements, contact Mapbox Support.