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

Jsconf in Reykjavik

I’m at the JsConf in Reykjavik. The venue is the fantastic Harpa, with wonderful artwork by Olafur Eliasson. We live in the hotel with the Sky Lounge just across the street.


View Larger Map

Today art and code mixed into an amazing creative cocktail. I cannot wait to experiment with the creative libraries from these wizards of code.

Augmented Reality

There were several talks on JavaScriot as a creative tool. Raisa Cuevas introduced to augmented reality, and she introduced several creative tools, such as:

Google ARCore Brings Augmented Reality to Android

https://threejs.org/

https://poly.google.com/

https://github.com/google-ar/three.ar.js/tree/master

https://github.com/jeromeetienne/AR.js/blob/master/README.md

 

Paint Splatter: The making of an interactive artwork

Halldór Eldjárn & Þórður Hans Baldursson introduced the code behind the interactive artwork decorating Harpa this week. On the website http://paint.jsconf.is/ you can choose the colors on the building. They told about the work, and how they wrote the creative code.

 

Creating generative art with Javascript

Then Kate Compton told about her work as an artist / researcher. She used JavaScript for art. Even her dress was made by JavaScript. One of her bon mots was:

“make things that makes things”

You can follow Kate’s work here: http://galaxykate.com/

Among the tools in her toolbox was https://threejs.org/ 

 

The keynote

The first keynote speaker was a nodejs talk, along the lines of this: “version 1.0.4 of XX is not there yet. Please google”. My mind drifted away, but perhaps there were hidden gems for the Nodejs adepts. But at the end of the day JsConf gave many ideas for creative code.

Code is poetry.

Scratch for Makey-Makey

Testing Makey-Makey

Makey: two belt buckels, a coin and a pen as keyboard.

What is Makey Makey?

Makey-Makey is basicly a keyboard. The bottom bar is ground, and the others are “keys”. You can use anything that’s conductive as a key. Even fruits, water or your partner.

Scratch Project Inspiration and Tutorials

How to Create a WordPress OnePager

Here’s a short and handy tutorial about the Siteorigin PageBuilder. In Pagebuilder each row will get an id. Then each row will get an id in the Pagebuilder settings.

Now the video does not tell this, but I guess that Pagebuilder will set bookmarks on the webpage, as in:

<h2 id="row-about-us">About us ...</h2>

In the WordPress menu the internal links will be used. The menu will link to #row-about-us, and Pagebuilder will create markup somewhat like in this sample:

<a href="#row-about-us">About us</a>

Now onepagers tend to scroll in a cool slow way. You can do this via some JavaScript. I guess there’s a plugin for it too.