Mapbox Map in a WordPres Post

Add a Mapbox Map in PageBuilder

So you have styled a map on Mapbox, now you want to use it in a WordPress post – but how can we do this in Pagebuilder? The map you see below is a costum Open Street Map style made in Mapbox. The map has a datalayer imported via Open Data Aarhus. On the map you see where you can pay and park in Aarhus, Denmark. Now the present page is made in Pagebuilder. If you don\’t know how to use Page builder I\’ll add a link to an online tutorial.

Mapbox Sample


The Pagebuilder Workflow

In Pagebuilder you must:

  1. Add a row.
  2. Add a Custom HTML widget

Then you may add the HTML that you need in the edit field. The code used on this page is demonstrated in the widget below or to the left.

Caveats: in the code an external stylesheet is loaded in line 6. That isn’t elegant at all, but for now it will do the trick. The code snippet is also a demonstration of the fact, that you can use JavaScript on a WordPress page or in a post.

 

Code sample

Pagebuilder Tutorial by Siteorigin

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.