NASA WorldWind inside WordPress

I have been doing a little experimentation on getting NASA WorldWind inside WordPress as it’s not as easy as simply pasting the code from Web World Wind into a page, that’s not to say it’s hard, it just requires a little research.

Things to note :

  1. This only works if you are self hosted
  2. Currently this doesn’t work well on SSL sites, but I’m working on it
  3. You’ll need to install a couple of plugins

The steps to get a 3D virtual globe embedded on your site are as follows :

Go to wordpress ACP -> Plugins -> add new

Wordpress screen shot showing location of add plugins

Add the Per Page Add to Head plugin.

Wordpress screen shot showing adding a plugin

Add the Code Embed plugin.

Activate both plugins.

Go to the page or post you want to add WorldWind to.

Go to ‘screen options’ in the top right and select to enable Custom Fields.

Wordpress screen shot showing location of custom fields

Scroll down and in the Custom Fields section and click ‘enter new’, for the name type ‘CODE1’, in the value box paste –

<!– Create a canvas for Web World Wind. –>
<canvas id=”canvasOne” width=”700″ height=”768″>
Your browser does not support HTML5 Canvas.
</canvas>

<script>
// Register an event listener to be called when the page is loaded.
window.addEventListener(“load”, eventWindowLoaded, false);

// Define the event listener to initialize Web World Wind.
function eventWindowLoaded() {
// Create a World Window for the canvas.
var wwd = new WorldWind.WorldWindow(“canvasOne”);

// Add some image layers to the World Window’s globe.
wwd.addLayer(new WorldWind.BMNGOneImageLayer());
wwd.addLayer(new WorldWind.BingAerialWithLabelsLayer());

// Add a compass, a coordinates display and some view controls to the World Window.
wwd.addLayer(new WorldWind.CompassLayer());
wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));
}
</script>

Wordpress screen shot showing enter new media field

Scroll down to the ‘Add to head’ section and paste –

<meta charset=”UTF-8″>
<title>World Wind Example</title>
<!– Include the Web World Wind library. –>
<script src=”http://worldwindserver.net/webworldwind/worldwindlib.js” type=”text/javascript”></script>

Wordpress screen shot showing adding to header

In your page or post add –

Wordpress screen shot showing location of code shortcut

Click update or publish.

Wordpress screen shot showing location of update button

Open your page and you should see a spinny globe!

screenshot of NASA WorldWind inside WordPress

Please ShareShare on FacebookTweet about this on TwitterShare on Google+Share on TumblrPin on PinterestEmail this to someone

You may Leave a reply here