After my last post on MapTable, a friend of mine asked how he might include a map and table in a blog post on a WordPress Instance. In this post I’ll outline the steps to doing just that.

Overview

The steps to render a MapTable in WordPress post are:

1. Include MapTable and related JS and CSS files
2. Generating and posting your .csv file
3. Author and post the actual JS for rendering the MapTable

Though this is specific to WordPress, the same logic applies to generically creating an HTML page in which you want to include a MapTable.

1: Ye Old <script> and <link> tags: MapTable, D3 and TopoJSON

Thanks to all the working examples hosted on the MapTable GitHub page, there’s no shortage of code snippets to look at on how to assemble the JavaScript and CSS to render a MapTable. I’ll be using the Example titled “Global Airport by Countries – +6000 rows, Log scale for country colors, tooltip“.

Looking at the source of that page, we see this code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="https://packet-clearing-house.github.io/maptable/maptable.min.js"></script>
 
<link rel="stylesheet" href="https://packet-clearing-house.github.io/maptable/maptable.css">

In order to render these in your blog post you need to switch to “Text” mode when editing your post (as opposed to Visual). Please note WordPress’s word of caution:

Switching between Visual and Text view can cause some of your HTML entities to be lost. This is due, in part, to the manner in which TinyMCE handles your HTML. If formatting is very important, do not switch between views. If you’re writing a lot of code, we suggest you remain in the text editor.

Following their advice, I don’t ever edit in visual mode.

So, now that you’re in text mode, go ahead an paste in the those three script and two style blocks.

2: CSV (or JSON) FTW

MapTable is very lenient on the format of the data you give it. While you do need to have at least Latitude and Longitude fields to render a map, you don’t need them if you’re just rendering a table! For our 6k aiport example, here’s what the first bit of the CSV will look like:

airport_id,name,city,country,iata_faa,latitude,longitude
1,Goroka,Goroka,Papua New Guinea,GKA,-6.081689,145.391881
2,Madang,Madang,Papua New Guinea,MAG,-5.207083,145.7887
3,Mount Hagen,Mount Hagen,Papua New Guinea,HGU,-5.826789,144.295861
4,Nadzab,Nadzab,Papua New Guinea,LAE,-6.569828,146.726242
5,Port Moresby Jacksons Intl,Port Moresby,Papua New Guinea,POM,-9.443383,147.22005
6,Wewak Intl,Wewak,Papua New Guinea,WWK,-3.583828,143.669186
7,Narsarsuaq,Narssarssuaq,Greenland,UAK,61.160517,-45.425978

Unlike the script and CSS files, this needs to originate from the same domain as your blog is hosted on. To facilitate this, you’ll need to upload the .csv file to your blog via the “Add Media” feature. If you get an error like “Sorry, this file type is not permitted for security reasons.” then you’ll need to try and allow this file to be upload. This forum post does a good job of describing how to do it – however please note: this may introduce some security risks to your site. Please make this change with caution!

In the end, despite explicitly adding “json” as a file type, I could not upload a file ending in “.json”. I had to change the name of “ne_110m_admin_0_countries.json” to “ne_110m_admin_0_countries.js”.

JavaScript

We’ll cull a bit of the javascript, but it otherwise is just about identical to the one on the MapTable demo page. As well, we prepend the JS with a bit of HTML and styles. Here is the complete code I’ll use to render my map:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="https://packet-clearing-house.github.io/maptable/maptable.min.js"></script>
 
<link rel="stylesheet" href="https://packet-clearing-house.github.io/maptable/maptable.css">
 
<div id="vizContainer" class='container'><div id='mt-map'></div></div>
 
<style >.container, svg { width: 100% }</style>
 
<script type="text/javascript">
<!--
var viz = d3.maptable('#vizContainer')
    .csv('/wp-content/uploads/sites/23/2016/07/global_airports.csv')
    .map({
      path: '/wp-content/uploads/sites/23/2016/07/ne_110m_admin_0_countries.js',
      countryIdentifierKey: 'country',
      countryIdentifierType: 'name',
      autoFitContent: true,
      countries: {
        attr: {
          fill: {
            empty: '#FFFFFF',
            min: '#FFFFFF',
            max: '#0000FF',
            legend: true,
            transform: function(val) {
              if (val === 0) return 0;
              return Math.sqrt(val);
            },
            rollup: function(groupedData) {
              return groupedData.length;
            }
          },
        },
        tooltip: function(a) {
          out = '';
          if (a.values.length === 0) {
            out +=  a.key + ' - N/A';
          } else {
            out += a.values[0].country + ' - ' + a.values.length + ' airports';
          }
          return out;
        },
      },
      markers: false,
    })
    .render();
//-->
</script>

MapTable now!

This is a MapTable of “Global Airport by Countries – +6000 rows, Log scale for country colors, tooltip” embedded in WordPress:

Caveats

If you use more than one MapTable on your blog, you’ll really want to move the .css and .js files to be in your template, as you’ll be including them many times, possible more than once on places like your home page. As well, if you do use more than one MapTable – you’ll only need to upload the ne_110m_admin_0_countries.json (or .js in our case ;) once and re-use the URL.

As well, I had some trouble getting the tooltip to work just as it is in the example. If I used HTML in it, the JS would break :( I suspect this has to do with the way WordPress aggressively adds line returns to HTML. This included taking a lot of line returns out above the MapTable JS and between my <script>, <link> and <style> tags.

Finally, if there is sufficient interest, I can see that a MapTable WordPress plugin would be really handy! Let me know if you’re interested and I’ll see what I can do!