Wiki

Information and Resources

User Tools

Site Tools


api:jmapwordpress

Embedding JournalMap in WordPress Sites

WordPress presents something of a challenge for embedding a JournalMap via the API because it is not straightforward to add JavaScript to a single WordPress post or page. According to the WordPress documentation (Codex), inline JavaScript cannot be added to a single page without using a third-party plugin. While a plugin like HTML JavaScript Adder or the CSS & JavaScript Toolbox. While this is certainly a possibility, you may not always have administrative access to your WordPress site to add plugins, or may not want to use these plugins.

Fortunately there is a simple way to embed a JournalMap into a WordPress site by using an iFrame HTML tag. An iFrame tag lets you embed one web page within another, and they can be used easily with WordPress (check out the article What is an iFrame?).

Here are steps for embedding a JournalMap into a WordPress site:

  1. You must first create a HTML page that displays only a map with the article locations on it and post this file to a web server where it can be accessed via the internet. For the purposes of this example, I modified the JournalMap Collections API example to strip out all of the description text so that it is just the map for a collection. You can get the file on our JournalMap GitHub repo.
  2. Once you're satisfied with how your map HTML file looks and acts, then open your WordPress page for editing and insert the following line of code where you want the map to appear in your page.
     <iframe width="700" height="500" src="//cdn.rawgit.com/JournalMap/API_examples/master/SW-ESA_collection.html" 
        frameborder="0" scrolling="no"></iframe> 

    Note that you'll need to be in Text editing mode in WordPress to insert the HTML iFrame tag.

That's all there is to it! Really pretty easy. I posted a working example on one of our WordPress sites, The Landscape Toolbox.

api/jmapwordpress.txt · Last modified: 2015/05/06 16:51 by jkarl

FEEDBACK    DOWNLOADS    ABOUT    SUPPORT US    HELP    BLOG    WIKI

JournalMap data is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
Creative Commons License