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

Published by Per Thykjaer Jensen

Senior Lecturer at the Multimedia Design and Communication Programme at Aarhus Business College. I teach code and UX. Linux evangelist and WordPress expert.

Leave a comment

Your email address will not be published. Required fields are marked *

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