One of the best things about Mapbox is all the awesome styles!

WP Mapbox GL JS allows you to use any of Mapbox’s default styles, and you can enter your own custom styles as well.

Mapbox Styles

Mapbox’s default styles are available in a dropdown beside the mapmaker.

Just select your style and the map will change!

Custom Style

If you want to add your custom style, first you need to make it. Head into Styles in Mapbox Studio and create and export the style you want, with whatever data and styling you wanted. If you need to learn more, you should check out our Udemy course on Mapbox!

Make sure the style you are trying to load has the same account as your access token! Otherwise nothing will happen.

Once you have your style, you’ll need to get its special URL. Click the “Menu” on the style in its list.

You will see the “Style URL” in this box that pops up. Click the blue button beside the style URL to copy it.

Paste that into the “Custom Style” text box in WP Mapbox GL JS.

Once you click out of the box, you should see your map style change. Exciting! If it hasn’t, double check that you are using the right Mapbox account.