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. You can also get to the Share, develop, & use page for a specific style from its Style information page.

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

  • Share and preview 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, CartoDB, 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, the Mapbox Android SDK, the Mapbox iOS SDK, Mapbox.js, or Leaflet, 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/mapbox/streets-v9
  • mapbox://styles – points to Mapbox’s styles API
  • /mapbox – your Mapbox username
  • /streets-v9 – 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: https://api.mapbox.com/styles/v1/streets-v9.

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.

Your default access token is listed on your Mapbox Studio home page. You can also manage your access tokens with Mapbox Studio. For more information, see the Interface section of this manual.

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.

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

Create a static map

no code required

You can create a static map from your custom style or a Mapbox template style using the Mapbox Studio image export tool. You must add attribution whenever you create a static map.

From your Styles page, open the menu next to your desired style and click Generate static image. Use the map to zoom in and out of the area you want to capture. You can also use the fields on the left to manually adjust the settings.

Once you have framed the area you want, copy the URL or HTML from the left-side panel and add it to your code.

<img src='https://api.mapbox.com/styles/v1/mapbox/streets-v9/static/-73.9788,40.7288,13,0,0/835x400@2x?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY5YzJzczA2ejIzM29hNGQ3emFsMXgifQ.az9JUrQP7klCgD3W-ueILQ' width='835' alt='Static map'>

You can also receive a static image (in PNG or JPEG format) from a Mapbox Studio style and display it on the web or mobile device without the aid of a mapping library.

demonstration of image export tool

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-v9', // 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.

Mapbox.js

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.

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

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

The open source Mapbox GL Native project enables Mapbox to provide both an iOS SDK and an Android SDK for publishing your maps in native applications. 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.

The next steps assume you have a project up and running. If you’re new to the Mapbox Mobile SDKs, check out our guides, First steps with the Mapbox iOS SDK and First steps with the Mapbox Android SDK, before continuing to the next sections.

Mapbox iOS SDK

code required

The Mapbox iOS SDK comes bundled with six professionally-designed styles. You can choose one of these styles by referencing its corresponding method within the MGLStyle class:

let url = MGLStyle.darkStyleURLWithVersion(9)
mapView = MGLMapView(frame: view.bounds, styleURL: url)
NSURL *url = [MGLStyle darkStyleURLWithVersion:9];
self.mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds
                                        styleURL:url];

In order to use a custom style you’ve created in Mapbox Studio, pass your map’s style URL to styleURL. Modify the above example to look like:

let url = NSURL(string: "mapbox://styles/mapbox/streets-v9")
mapView = MGLMapView(frame: view.bounds, styleURL: url)
NSURL *url = [NSURL URLWithString:@"mapbox://styles/mapbox/streets-v9"];
self.mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds
                                        styleURL:url];

To change the style of the map after initialization, set MGLMapView.styleURL. Check out the Mapbox iOS SDK documentation for more information.

Mapbox Android SDK

The Mapbox Android SDK also comes bundled with six professionally-designed styles. You can choose one of these styles by referencing its corresponding ID while setting up your map view either in XML or using MapboxMapOptions:

mapbox:mapbox_styleUrl="@string/mapbox_style_mapbox_streets"
options.styleUrl(Style.MAPBOX_STREETS);

In order to use a custom style you’ve created in Mapbox Studio, pass its style URL instead of using one of the SDK’s provided default styles:

mapbox:mapbox_styleUrl="mapbox://styles/mapbox/light-v9"
options.styleUrl("mapbox://styles/mapbox/light-v9");

Check out the Mapbox Android SDK documentation for more information.

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.

Track usage

You can view your account’s map views by date, referrer, map ID, and country, as well as stats for geocodes, directions requests, and static maps on your Stats page.

If you would like to view stats for a particular token, click on the all tokens button and choose a token from the drop-down list.

If you’re using the iOS or Android SDKs, you can view your statistics on the mobile analytics dashboard.

To see how many map views and how much storage you’ve used, navigate to your Billing page.

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.

studio-editor

Next section:

Tutorials and examples

Browse step-by-step tutorials using Mapbox Studio.