Week Beginning 13th February 2017

My time this week was mostly spent on the SCOSYA Atlas again, continuing to work on the atlas search facilities, and specifically the Boolean ‘or’ search that has been proving rather tricky to get working properly.  Last week I reworked my initial version of the ‘or’ search so that it would properly function when the same attribute with different limit options was selected, but during testing I realised that the search was behaving in unexpected ways when more than two attributes (or the same attribute with different limit options) were joined by an ‘or’:  Rather than having the expected range of icons representing the different combinations of attributes at each location on the atlas many of the combinations were being given the same icon.

After quite a lot of head scratching I figured out what the problem was.  The logic in the section of my code that loops through the locations and works out which attributes are present (or not present) at each had some flaws in it which was causing combinations that should have had two ‘yeses’ in them instead being incorrectly assigned as all ‘nos’.  E.g. when three attributes are searched for and a location has the first two but not the third the combination should be ‘YYN’ but instead the code was quitting out with a ‘NNN’.  Once identified a bit of tweaking and further testing corrected this issue and now a much broader selection of icons gets displayed when three or more attributes are joined by an ‘or’, as the screenshot below demonstrates.

The next thing I tackled was the map legend.  As you can see in the above screenshot, the legend that’s displayed on an ‘or’ search map bears no relation to the icons found on the map.  The legend instead displays the average ratings (between 1 and 5) found at each location, which is appropriate for the ‘and’ search but not an ‘or’ search with all its different icons.  Adding the various ‘or’ icons to the legend actually required rather a lot of reworking of the atlas code.  The icons on the map are all grouped into layers and then each layer is added to the map.  These layers correspond to an item in the legend.  So the ‘or’ map was still adding locations to a layer depending on its average rating rather than grouping locations based on which attribute combinations were present or absent.  To have a legend that listed all the different icons and allowed the user to switch an icon on or off I needed to ensure that layers were set up for each of these attribute combinations.

It took quite a bit of reworking, but I managed to get the layer code updated so that a new layer was dynamically added for each present combination of attributes.  So for example, with two attributes joined with an ‘or’ there could potentially be 4 layers (YN, YY, NY and NN), although in reality there may be less than this depending on the data.  With this code in place I had a legend that listed the layers with their code combinations and the handy Leaflet checkboxes that allow you to show / hide each layer.  This was all working great, but I then had to tackle my next problem:  How to get the various shapes and colours of the icons represented in the legend.

The map icons I use are not actually ‘image’ files like PNGs or anything like that.  They are actually markers that are dynamically generated as SVG images using the Leaflet DVF plugin.  This works great as it allows me to create polygons or stars that have a random number of lines or points and can be assigned a random colour.  However, replicating these dynamic shapes in the legend was not so easy.  The Leaflet legend can only work with HTML by default so adding in SVG XML to make the shapes appear was not possible (or at least not possible without a massive amount of work).  I spent some time trying to figure out how to get SVG shapes to appear in the legend but didn’t make much progress.  I went to the gym at lunchtime and whilst jogging on the treadmill I had a brainwave:  Could I not just make PNG versions of each possible shape, leaving the actual shape area transparent and then give the HTML image tag a background colour to match the required random colour?

My ‘random shape and colour’ generator only had a few possible shape options:  Polygons with between 3 and 8 sides and stars with between 5 and 10 points.  Any possible colour could then be applied to these.  I created PNG files for each shape with the shape part transparent and the surrounding square white.  I then updated the part of my code that generated the legend content to pull in the correct image (e.g. if the particular randomly generated marker was a polygon shape with three sides then it would reference the image file ‘poly-3.png’) and the randomly generated colour for the marker was then added to the HTML ‘img’ tag via CSS as a background colour.  When displayed this then gave the effect of the shape being the background colour, with the white part of the PNG looking just like the white page background.  It all worked very well, as the following screenshot demonstrates:

There is still much work to do with the atlas, though.  For a start there is still some weird behaviour when a search combines ‘and’ and ‘or’.  I’ll tackle this another week, though.

Other than SCOSYA work I had a chat with Graeme about some Leaflet things he’s beginning to experiment with.  I had a chat with Luca about his projects and I also emailed all the other developers in the College of Arts to see if they’d like to meet up some time.  I also did some administrative work I can’t really divulge here and replied to a query from Marc about the Hansard data.  I made this week’s Burns ‘Song of the Week’ live (http://burnsc21.glasgow.ac.uk/i-love-my-jean/) and  helped Carole out with a couple of issues.  Other than that I continued to migrate the old STARN resource to the University’s T4 system.  It’s pretty tedious work but I’m making some good progress with it.  I’ve got through the bulk of the ‘poetry’ section now, at least.