Week Beginning 25th June 2018

This was a short week as I headed off on holiday on Thursday.  I’ll be off for the next two and a bit weeks.  I spent about two of my three days of work working on the SCOSYA project, implementing the new ‘group statistics’ feature that I’d written a mini-requirements document for last week.  This new feature will allow users to create groups of locations by clicking on them, to then save multiple groups, have facilities to edit and delete groups, and to be able to open up a pop-up to view statistics about the group.  I think it will be a really useful feature.  It has, however, been somewhat tricky to implement.  The Leaflet mapping library doesn’t make it easy (currently at least) to work programmatically with map markers.  It’s not possible to assign a marker an ID, or to iterate through all markers until you find the one you’re looking for.  It’s also very tricky to update the look of a marker after it has been added to the map.  Also, rather annoyingly, the latitude and longitude or particular markers doesn’t exactly match up with the values I store in the database for my map locations, which is slightly odd, and contributes to the difficulty of matching up my data and particular markers on the map.

However, I did manage to make some progress this week.  I created a new section in my ‘Display Options’ menu for group statistics and created a section in this for creating a new group.  With this option active, the default map behaviour when a marker is clicked on changes:  rather than opening a pop-up the script manages to grab some details relating to the map (such as the ‘display name’ from the pop-up) and to store these in an array.  Clicking a second time removes the details from the array.  I also figured out a way of updating the CSS class of a marker when it is clicked on.  This is actually not very easy to do in Leaflet.  Markers have access to a ‘setClass’ function which should allow you to add a custom class to a marker, but in actual fact this function is only available before a marker is added to the map – for existing markers using this function does nothing.  This seems really weird to me.  However, by using jQuery I was able to get around this limitation.  Within my ‘onClick’ function that gets called when the user clicks a marker, and assuming the marker variable has the name ‘loc’ I can update the class as follows:

$(loc.target.getElement()).attr(“class”,”leaflet-interactive markerSelect”);

If my ‘markerSelect’ class has styles to add a border round a marker I then have a highlighted marker.  A second click to deselect the marker calls the same code but without ‘markerSelect’ included.  This works pretty well.

With this in place I then created an AJAX script that the JavaScript posts data to when the user presses the ‘save’ button.  This takes the group name the user has entered and the array of locations and adds these to the database.

I then created another AJAX script that outputs a list of the user’s groups and added these underneath the ‘new’ section.  You ca see how this works in the following screenshot.

Unfortunately this is all I had time to implement this week.  I would have liked to have made more progress with the feature, but I just ran out of time.

Also this week I met with David Wilson, a developer working elsewhere in the College of Arts, to discuss approaches to creating project websites and database.  I made a few further tweaks to the HT category select feature too.  When creating the screenshot last week I noticed that the ‘recommended’ section was displaying information about each word’s categories that should really only have appeared in the timeline pop-up.  I fixed this.  I also updated the main timeline visualisation so that all results appear on it rather than just those for the current page of results.  I think this works a lot better and is a lot less confusing.  Fraser also wanted to update the visualisation so that words were clickable and led through to the appropriate category page.  I looked into this but I’m afraid this is going to be more complicated than you might think.

The timeline library strips out all HTML from the labels.  I tried tinkering with the library to ensure it can process HTML in the label, but I pull in the labels as JSON data and Javascript’s JSON.parse function can’t handle HTML in the data it’s parsing.  I tried passing escaped HTML (e.g. ‘&lt;’ instead of ‘<’) and then converting it back after the JSON was parsed, and this does get the tags through to the visualisation, but unfortunately as the visualisation is an SVG and not HTML it doesn’t know what to do with HTML tags.  I checked my Mapping Metaphor visualisations to see how I handled links in labels here, and what I did was use classes and IDs in order to process clicks in JavaScript rather than just using simple HTML links.  I can do this with the timeline, but I don’t have time to do it before I go on holiday.  I’ll see what I can do about it once I’m back.