Integrating Web Maps Into Websites

 

Introduction

Web maps can include some relatively complex JavaScript, HTML, and CSS. At the same time, websites created with systems like WordPress are complex in themselves and it can be challenging to add maps to WordPress sites. The solution is to use an "iframe" tag. Iframes are HTML elements that allow you to insert another web page into your web page. iframes are a replacement for the old "frame" tag will was never well defined. The new iframe tag is widely and uniformly supported in browsers.

Adding Maps with iframes

Open a web page for editing in a WordPress website. Insert the following code in the "Text" view. Update and view the page. you should see the GSP web page in a frame in your page.

<iframe src="http://gsp.humboldt.edu">
<p>Your browser does not support iframes.</p>
</iframe>

Find a web map in the File Manager. Make sure the page works well and have the URL for the page available. Insert the code below into your WordPress web page replacing the "src" URL with the one for your map.

Your map should appear when you update and view the page. Now change the width and height of the iframe. You can also change the style of the border if desired.

<iframe width="600" height="640" style="border:2px black solid;margin:6px" 
src="http://humboldt.reclaim.hosting/jg2345/CanvasMap/Examples/Thematic_Africa.html">
<p>Your browser does not support iframes.</p>
</iframe>

This works great to break up complicated pages and inserting HTML into an existing web system like WordPress. However, you can't really debug your web maps when they are in an iframe because the debugging will only reflect what is happening in the main web page. You'll need to debug the page by itself and then integrate and test it in the parent web page.