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:

Prepare to use your style

Share, develop, & use page

Each style you create has a Share, develop, & use page that provides useful snippets to share your style or use it in a web or mobile application. You can find the Share, develop, & use page for each style by navigating to your Styles page and clicking the next to a each style.

Each section on the share page is described in further detail below.

  • Share provides a link to a simple page to share your map style.
  • Develop with this style provides the style URL and an access token from your account for use with Mapbox GL JS and the Mapbox mobile SDKs.
  • Use style in GIS apps provides code for using your style with ArcGIS Online, Tableau, CARTO, and Fulcrum.
  • Mapbox WMTS Service provides the WMTS endpoint for your style for use in ArcMap Desktop and QGIS.

Style URL and access tokens

To use your map style with Mapbox GL JS, Mapbox.js, Leaflet, or the Mapbox Maps SDK for Android, iOS, or React Native, you will need the style URL for your map and an access token associated with your account. Both of these are available in the Develop with this style section of the Share, develop, & use page for your style.

Style URL

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 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

You can find your map’s style URL in the Mapbox Studio interface.

Note: the mapbox://styles notation for Mapbox styles is an alias to the full Styles API URL:

Access token

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.

Share your style

no code required

The share URL on the Share, develop, & use page 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.

Use in a web application

Mapbox GL JS

code required

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 your custom styles created in the Mapbox Studio style editor or the styles we provide, plus add any additional data you want programmatically – including GeoJSON, images, and even video!

Adding a map to a web page with Mapbox GL JS only requires a few lines of code. This JavaScript snippet adds a map with a given style, center, and zoom level to an HTML page:

mapboxgl.accessToken = '<your access token here>'; // your access token
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v10', // your style URL
  center: [-74.50, 40], // starting position
  zoom: 9 // starting zoom

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.


code required

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 supports adding styles from Mapbox Studio, using the styleLayer method.


See the full example in the Mapbox.js documentation.

Third-party tools and libraries

no code required

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 Use style in GIS apps section of your style’s Share, develop, & use page.

Use in a mobile application

code required

The open source Mapbox GL Native project enables Mapbox to provide three mobile SDKs for publishing your maps in native applications: the Mapbox Maps SDKs for iOS, Android, and React Native. Each SDK comes bundled with five Mapbox-designed map styles with the capacity for handling any custom design created with the Mapbox Studio style editor. Every developer also has access to the data dashboard that provides a continuously updated view of map usage.

If you’re new to the Mapbox mobile SDKs, check out our guides:

Use in a desktop application

no code required

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 like ArcMap Desktop and QGIS. These endpoints can be found in the Mapbox WMTS Service section of the Share, develop, & use page.

Add additional functionality

code required

In addition to designing maps and publishing mapping applications, Mapbox also has tools for interacting with data, locating addresses, conducting spatial analysis, and wayfinding. Mapbox web services APIs are building blocks you can use to make your maps interactive and dynamic.

Geocoding API

Integrating place searching is possible through our Geocoding API. You can pass longitude and latitude values to be converted to addresses, or you can pass addresses to return coordinate locations. You can use the Geocoding API within your web or mobile application or as a standalone service.

Directions API

The Directions API provides point-to-point directions for walking, cycling, or driving based on the wide network of paths in OpenStreetMap. The API returns text instructions, alternative routes, geometry (for drawing routes), and maneuvers. See the Directions API documentation for more response types to include in your application.

Distance API

The Mapbox Distance API returns all travel times between many points (also known as a “distance matrix” or “distance table”) and is calculated by the Directions API. The Distance API allows you to build tools that efficiently check the reachability of locations from each other, filter points by travel time, or run algorithms for solving optimization problems. When using the API, you can specify driving for car travel times, walking for pedestrian and hiking travel times, and cycling for bicycle travel times.

Map Matching API

For those of us who track our runs with Strava or map our hikes with AllTrails, the GPX tracks we get back can be a little wiggly and wobbly. The Mapbox Map Matching API lets you use these recorded traces (from your phone while driving or from a GPS tracker while hiking) and snap them to the OpenStreetMap road and path network. This is helpful for aligning noisy traces and displaying them cleanly on a map.

Analyze with Turf.js

Turf.js is an open source JavaScript library for conducting spatial analysis. Turf includes traditional spatial analysis operations, helper functions for creating GeoJSON data, and data classification and statistics tools. You can add Turf to your website as a client-side plugin, or you can run Turf server-side with Node.js.

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.

Share your map with us

Need inspiration? Check out the other great designs in the Mapbox Studio map design gallery.

Proud of your design? Fill out our contact form, including a style URL and screenshot of your map or app and we’ll look into adding it to our gallery. We’d love to showcase some of your map designs and applications.


Next section:
Tutorials and examples
Browse step-by-step tutorials using Mapbox Studio.