Week Beginning 22nd August 2016

On Monday I completed upgrading the 22 WordPress sites that I’m responsible for.  I ran into a couple of issues with one of the sites that took a little while to get to the bottom of (I ended up having to manually upgrade the files rather than just pressing the nice and easy ‘update’ button) but I got there in the end.  I spent most of the rest of the day preparing materials for my PDR.  Thankfully this blog is really useful for remembering just what I’ve done over the past year, so I could just read through posts and pull out some useful information.  For example, I’ve worked on almost 20 different projects in the past year and I’ve contributed technical sections to about 10 external research proposals.

On Tuesday Gary and I had our ‘SCOSYA atlas requirements’ meeting that had been postponed from last week due to Gary being ill.  It was a good meeting and we worked out an initial set of requirements for a prototype version of the Atlas.  After the meeting I prepared a requirements document based on our discussions and sent it to Gary for feedback.

On Wednesday I spent a lot of time finishing off my PDR materials and submitted them ahead of my PDR meeting next week.  Other than that I gave some advice to Jennifer Smith, Kirsteen McCue, Megan Coyer and Gavin Miller, who had all emailed me with questions.

I spent pretty much all of the rest of the week working on the prototype version of the SCOSYA Atlas interface.  This will initially only be available through the CMS, so I can’t provide any links to it here.  The Atlas is going to be based around the Leaflet.js mapping library, so my first task was to get this working.  This turned out to be a slightly frustrating process as the ‘Quick Start’ guide is not especially clear in certain places.  These were all linked to the setting up of a tile layer for the map.  I had expected to be able to just point Leaflet at OpenStreetMap (which it turns out you can do) but Leaflet seem to want you to get tile images via another provider called Mapbox.  Mapbox in turn uses the OpenStreetMap tile images, but allows you more freedom to customise the look and feel of the map.  I decided to try the Mapbox approach which required setting up a (free) Mapbox account.  Rather worryingly Mapbox only allows 50,000 map views per month for free.  I’m hoping this isn’t going to cause an issue with the Atlas, but if it does I’ll be able to change one line of code and point directly at OpenStreetMap instead.

The confusion with using Mapbox when following the Leaflet instructions is it requires you to have a ‘mapbox project id’ and looking round the mapbox interface I just couldn’t figure out where I would set this up.  Eventually I realised that the only way to get one of these was to go into the ‘classic’ part of the mapbox website as this seems to be a feature that is no longer being used.  It was only afterwards that I realised the ‘your.mapbox.project.id’ text in the leaflet quick start guide was clickable and would have taken me to the right place straight away.  The next bit of confusion came by the positioning of the access token.  You have to paste this into the following URL: https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken} but what I didn’t realise was that you have to remove the braces {} from around it in order for it to work.  Thankfully with these two bits of confusion out of the way I finally had a working map.

What I wanted to do initially was have a map that displayed the locations of the questionnaires as points on the map.  As latitude and longitude data is already stored in the system for each questionnaire (automatically generated based on postcode) it wasn’t too tricky to implement this.  However, I decided that I would create a proper API (Application Programming Interface) for the project, rather than an ad-hoc bunch of scripts that spit out JSON.  In order to do this I did a bit of research into APIs and the RESTful approach (Representation State Transfer).  I read a handy beginners guide to REST APIs: http://www.andrewhavens.com/posts/20/beginners-guide-to-creating-a-rest-api/ and then found a handy little site that talked through the basics of making such a thing using PHP: http://coreymaynard.com/blog/creating-a-restful-api-with-php/

After following the above I managed to create an API endpoint that spits out all of the locations of the questionnaires, without accepting any parameters.  This is a good starting point and it was all I needed for my first map.  I’ll be expanding the functionality of the project API as I proceed with the Atlas.

With the data now available in the always handy JSON format I was able to update my JavaSript file to populate the map with the locations of the questionnaires.  I decided to use fuzzy circles rather than map ‘pins’ because the locations aren’t exact points.  This is a good approach to take that I learned from one of the DH2016 sessions I attended.  I’ve also colour coded the circles based on the number of questionnaires that have been completed at each place (between 1 and 4), plus I added in toggles so users can turn each level on or off – e.g. to show you just those locations that have 4 questionnaires.  I added in the leaflet label plugin to allow the names and postcodes of the circles to appear when the mouse hovers over them and users can click on a marker to view the town name and postcode too.

I’ve also added in a feature that allows the exact location and zoom level of the map to be bookmarked or shared (using the leaflet hash plugin https://github.com/mlevans/leaflet-hash).  For example if you’re zoomed in on Dundee and you want to share this you can copy the URL in the address bar and clicking on this link will take you straight back there (Assuming you’re logged into the CMS, of course).  I’ll need to update this feature to also take into account which map views are currently active too.  Providing this facility was another useful ‘best practice’ nugget from DH2016!

I also added in a ‘display options’ menu that animates in from the left when you press the ‘menu’ button in the top-left of the map (using the ‘slidemenu’ plugin https://github.com/unbam/Leaflet.SlideMenu).  This is where the search and browse facilities are going to go, but I haven’t got round to implementing this yet.  I’m going to have to rework the JavaScript behind the map before I go much further as what I’ve created so far was just a test based on one single view.  I’ll be starting on this on Monday.  Working with Leaflet (once I actually got it going) is proving to be a lot of fun.  Here’s a screenshot of the ‘work in progress’ to finish off:

scosya-leaflet