Recently, I was asked to create a map with geolocations for the various South Asian digital humanities projects across the globe. We agreed to use WordPress as the backend for our website, and I got to work on how to display a map on a WordPress page.

My first port of call, of course, were the various available plugins. However, most of them hassled me to upgrade to a premium version to use the neater features of mapping. After going through the first few on the plugin list, I decided to abandon that road. Also, I had some ideas as to how I wanted to display my map. First, I wanted the map to be a full-height one — it should cover every pixel of the visible browser space. Second, I wanted to have a go at using Leaflet, a most excellent Javascript library for creating interactive maps. I hadn’t done much with Javascript earlier, so this was a good opportunity to get some practice in. I had a spreadsheet with the list of names (and locations) of DH projects, and I proceeded to find their geo-coordinates using Google maps. It’s fairly easy to do that. Right click on the map, and then click on “What’s here?”. Now under the search bar, you should see the geo-coordinates. In this guide we are going to try and pin markers on the capitals of a few countries. You can get the CSV file here. I’ll come back to this in a bit. My solution might not be the most elegant one but it works.

The implementation.

First we create an html page. Lets call it index.html (for the lack of something more imaginative). Add a head tag and include the Leaflet stylesheet which can be sourced from their website. In fact, drawing the stylesheet from the Leaflet website creates the possibility that if someone has already been to a website with a Leaflet map, the stylesheet will be cached on their computer. Makes things just that little faster! Also, in a similar way, link the javascript file.

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

Next, within the body tag, we create a div to hold our map. We want the map to take up the entire browser space. Now, this div needs to be given a height (something that must be specified!) and we use the expression ‘min-height:100vh’. This lets us use 100% of the height of the page. The width is automatically 100%, unless specified otherwise. So we have something that looks like this.

<div id="mapdiv" style="min-height: 100vh;">This is the placeholder for the map.</div>

Next, create a folder called ‘js’ and create a file within it called map.js. Include the link to this file in index.html before the closing body tag. Like this:

<script src="js/map.js"></script>

Right, now to our javascript file. Enter the following code in your javascript file. This basically sets the zoom level for our map. I also dislike how maps zoom with the mouse-wheel. So we are going to turn that off. Zoom levels are usually between (roughly) 1 and 20, 1 being the furthest and 20 being the most zoomed in. Zoom level 3 refers to a fairly zoomed out view of the world and center [31.505, -13] refers to the central point of the map. Feel free to change these as you wish.

var map = L.map('mapdiv', {
center: [31.505, -13],
zoom: 3,
scrollWheelZoom: false
});

Tiles or map tiles are pre-rendered map images that support quick visualization of large datasets in a map. Think of them as squares that fit together and build the map. We are going to get our tiles from OpenStreetMap! You can, however get them from other map tile providers such as Mapquest. You can even make your own map tiles with ArcGIS.

Here’s the code.

var basemap =  L.tileLayer('http://c.tile.openstreetmap.org/{z}/{x}/{y}.png');
basemap.addTo(map);

Check your browser. You should be seeing your map!

But this map has no markers, no data. So lets get to it. Open the CSV file, containing Geo-locations of capital cities. You should now see rows of data. Each line has 3 parts: (1) longitude (2) latitude (3) capital city. Usually we could read the CSV file directly into your code. But, that requires a server request. In case you don’t have a server handy, this guide will demonstrate how we can get around that little problem. First, we need a way to get leaflet to read a comma-separated-value structure. For that we have a neat plugin called GeoCSV. Download the leaflet.geocsv.js file. Put it in your js folder. Include this file to your html page within the head tag.

<script src="leaflet.geocsv.js"></script>

Next, in the html file, after the mapdiv placeholder, write:

<div id="locations" style="display: none;"></div>

Following this, open CSV file in a code editor and copy the contents. Paste the contents under the line that you just wrote. Close the div.

44.05,9.55,Hargeisa
-36.5,-54.283333,King Edward Point
70.216667,-49.35,Port-aux-Français
35.233333,31.766666666666666,Jerusalem
19.9,60.116667,Mariehamn
166.920867,-0.5477,Yaren
-63.0822,18.0731,Marigot
.
.
.

Now, go back to your map.js file. We need to get leaflet to read these geolocations into the map we have created. We now create a variable called csv_options which teaches how to read the data we have pasted: “,” is the separator, the three columns contain longitude, latitude and capital city respectively. Next we call the popup.

var csv_options = {
fieldSeparator: ',',
titles: ['lng', 'lat', 'popup'],
onEachFeature: function(feature, layer){
layer.bindPopup(feature.properties.popup);
}
};

Next, we get each element in the the ‘locations’ div we created to be read in. Then, we add this layer of markers to our map.

var csvContents = document.getElementById('locations').innerHTML;
var geoLayer = L.geoCsv(csvContents, csv_options);
map.addLayer(geoLayer);

Check the map. We should have our markers now.

geo-tagging with Leafletjs

Geo-tagging with Leaflet and OpenStreetMaps

The last part of this guide is about incorporating this map into a WordPress theme. The first thing I look for is a full width theme that can display my entire map. I also want to get this done with the least amount of hassle, and with as little code as possible. So, I download one of the many shortcode generators. I upload my javascript files to the local server within the theme. I change the links in my index.html to work with the new paths created for moving the javascript files. Finally I paste the html into the shortcode generator and paste the shortcode into a page. And there you have it — a WordPress theme with your own map. The files are available, here, at my GitHub repository for download.