Styling a Map

Mapbox makes it simple to specify which map style you would like to use, or even generate your own custom style. Your style can be applied when creating the map, or set later using the style method.

Acceptable formats for the mapStyle parameter:

• A native style name only, without the URL prefix (eg: satellite-v9).
• A full URL to a Mapbox style (eg: mapbox://styles/mapbox/satellite-v9).
• A JSON object conforming to the Mapbox Style Specification (opens new window).

Pre-made styles

If you'd like a ready-to-go style, select one from the list of native Mapbox styles... (opens new window)

Omit base URL of native styles

If using one of the built-in Mapbox styles (opens new window), you can omit the base URL and specify only the style name itself (eg: satellite-v9).

Custom styles

Or if you'd prefer, you can use Mapbox Studio to create your own custom style... (opens new window)

Styling a new map

You can specify the style option when you create the initial map...

• JavaScript
• Twig
• PHP

// Use a native Mapbox style
const mapStyle = 'satellite-streets-v12';

// Apply style to the map
const map = mapbox.map(locations, {
    'style': mapStyle
});

Styling an existing map

You can also change the style of an existing map...

• JavaScript
• Twig
• PHP

// Get an existing map
const map = mapbox.getMap(mapId);

// Style the map
map.style(mapStyle);