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

Add the Per Page Add to Head 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.

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>

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>

In your page or post add –

Click update or publish.

Open your page and you should see a spinny globe!

Related posts:

Long Way Down Add-on World Wind as an in-flight map display World Wind 1.4 Beta RC2 released