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 style="mapbox://styles/mapbox/streets-v10"] Multi Map - [ wp_mapbox_gl_js styles="mapbox://styles/mapbox/outdoors-v10,mapbox://styles/mapbox/light-v9" titles="Outdoors,Light"]
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.
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.
height="600px" // tall map width="100%" // full width of map height="20em" 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.