Categories
Multimedia Deign

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

By Per Thykjaer Jensen

Per is the WordPress expert at Business Academy Aarhus. Senior Lecturer at the Multimedia Design Programme. His background is in the Arts: MA Literature History and BA Art History. Later he added a MA in IT, interaction and Multimedia. And he is a wicked Linux user.

Leave a Reply

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.