See the examples page for more examples of WordPress integration with WP Mapbox GL JS.

WP Mapbox GL JS has extensive shortcode settings for your WordPress installation.

Here are the most basic examples. More settings are available below.

Single Map
[ wp_mapbox_gl_js 

Multi Map - 
[ wp_mapbox_gl_js 

Single maps display one Mapbox Studio style at a time. You need only to specify a style.

Multi maps accept multiple Mapbox Studio styles, and titles for those maps. These will appear on an overlay on your map with a simple radio button switcher.

Both single and multi map shortcodes accept all other attributes, such as zoom, center, height, etc.


style allows you to set the initial Mapbox Studio style to display in your map. In the case of multiple styles, this does not need to be specified. This can be any of the default Mapbox maps or your own custom styles. To get the style URL, go to your style and grab the Style URL that Mapbox places in the sidebar. See screenshot below.

The style URL is on the right side of the screenshot.


styles and titles are used to display multiple maps at the same time using an overlay map style switcher. Place the appropriate style IDs in the styles attributed, separated by commas. Insert whatever titles you would like to give to those maps in the titles attribute, also separated by commas, in an order that corresponds to the order of the styles.


center allows you to specify initial longitude and latitude. Ensure you place these in the correct LNG LAT order for Mapbox GL JS! If this is not specified, your style will provide a center.


zoom allows you to set an initial zoom for the user. You may use decimals. If this is not specified, your style will provide a zoom. This must be a number between 0 (low zoom) and 22 (high zoom).


pitch defines the tilt of the map on load.


bearing defines the initial angle of the map relative to its central point.

height="600px" // tall map
width="100%" // full width of map
width="50px" // very narrow map

height and width will define the pixel height and width of your map. You can enter any value you would normally enter with CSS for these values (%, px, em, etc). By default these are set to 400px height and 100% width.