The Invincibles – adventures with QGIS2Web

This is a maps and Arsenal post with a tiny bit of geekery added in. In the 2003-4 season Arsenal won the Premier League title while going the whole season unbeaten (actually including a couple of games in the preceding season and several in the following season they went 49 games unbeaten) a record that is unlikely to be equalled.

My favourite Arsenal blogger is a guy called Andrew Managan who blogs at Arseblog, he just ‘gets it’ as far as I am concerned and has been one of my daily reads for a heck of a long time. In 2014 Andrew Mangan teamed up with Andrew Allen to write Together, a book celebrating the 10th anniversary of that amazing season. Brilliant book, every Arsenal fan should read it and if you aren’t an Arsenal fan don’t worry the rest of this post is about maps and geekery so don’t give up yet.

I had been playing around trying to come up with an idea of how to map the Invincibles season and had produced some basic QGIS maps with the results etc. Then I had an idea and I approached Andrew M to ask whether I could use some of the content from Together as part of a web map and hey amazingly he said go for it, then I asked Ken Field for some help to produce an ESRI Story Map using the content and he being a pal and a football nutter also said go for it. So I went for it and by the beginning of 2015 I had a lot of the data pulled together and Ken had a Story Map template for me to drop it into, then life and work intervened and the project went onto the back burner.

Last week I was at FOSS4GUK and one of the hot topics was QGIS2Web a plugin developed by Tom Chadwin that makes it ridiculously easy to publish a web map. Unfortunately, as Ken Field has pointed out on numerous occasions, being able to make a web map does not mean that you will make a good map. The results below are a starting point, they certainly don’t get anywhere near to being a good map. The map shows the locations of the Premier League grounds, the dates and results of the matches and some highlights from Together (and also from Andrew’s blog and links to video and images – more to complete on these).

You can use the search box to find the away grounds if you put in a town name. There are some problems with the info popups (too big) so to read the full content you will need to pan from outside of the pop up to see the rest of the content, far from ideal I know.

What follows is a short summary of the wrestling with data and QGIS and QGIS2Web that got me this far. I have learnt a fair bit on the way and have a mountain more to learn but that’s the fun of teaching yourself.

Data to desktop map

Finding the data was pretty easy thanks to Google. I got the season’s results from Wikipedia where I also found the locations of Premier League Stadiums on Wiki. Joining the 2 together in a spreadsheet was easy enough and then I had each match in a table with coordinates of the ground except that I then had the home games showing at the away grounds but a little sort, copy and paste solved that.

Getting text out of the Kindle edition of Together was a struggle to say the least but eventually I found a helpful suggestion on an Amazon forum. I loaded the book into the Kindle app (which disables copy functionality) and highlighted the paragraphs that I wanted to use (your highlights get saved to your account). Then from the Kindle web client I was able to load my highlights and copy and paste them into the spreadsheet with the match details. Not something you are really meant to do but I had Andrew’s permission to use excerpts from the book so I thought that would be ok.

Finally I could pull the whole thing into QGIS and map using the coordinates. Sounds simple when you read this but there was more trial and error than I would have liked. I then worked out how to use an SVG icon as a marker and set the marker to be a football (red of course, but more of that later). Then I realised that I had 19 markers centred on the Highbury ground (our home matches) so I did some shifting to space them out around the pitch which was fiddly and not necessarily the most elegant way to present the data. I added an OSM base map and that was about it for the early 2015 version.

Desktop to web map

This afternoon I thought I would have a try at publishing my QGIS project through QGIS2Web. It’s pretty damn simple but I still needed a fair number of iterations to get it right or even close to right. A few things I learnt that may help others:

• QGIS2Web offers 2 output options, Leaflet and OpenLayers. I don’t why but it seems that the Leaflet option is more tolerant of the quirks of exporting QGIS projects, it also has a few more neat features like clustering markers which is why I chose it.
• Complex labels based on expressions don’t seem to come through to the web projects and I also couldn’t get label styling and placement to work so I reverted to just labelling with the opposition team name. On the other hand, label visibility thresholds did come through. If I could solve the labelling I would have used labels to show more info and styled them up elegantly.
• I coloured the markers in red in the QGIS project but they come through as black in the web project, another thing to research.
• I experimented with the min and max zoom levels and eventually got them about right (5-20). The preview works very well and allows you to tweak settings before you export your project.
• Popups were a nightmare and I still haven’t got them right. That was because I have got some very long text strings for the excerpts from Together. When you click on a marker the pop up can be very very long and pans the map a long way from the marker. I discovered that there are Leaflet options to set the Max height of the pop up window which would create a scroll bar in the popup rather than the map zooming off into space but I couldn’t find an example of how to insert this option. I’d also like to make the pop up wider to be easier to read. After several fruitless hours of searching I posted a question on GIS StackExchange so hopefully I will be able to solve this one soon.
• Combined with the popup problem I discovered that the popup on hover option prompted some bizarre behaviour so I switched that off (it works fine if the popups are small)
• I set a title for the map which will show up in your browser tab by putting <title>The Invincibles, Arsenal 2003-4</title> into the html file. It would be nice to have that floating over the map, something else to learn how to do.

So that’s about it for today, the map is here feel free to link to it. Hopefully it will improve when I solve the popup problem, red markers and the labelling. To be honest I don’t think this will ever be a work of great cartographic merit but I am learning a lot about QGIS2Web and maybe the next map will be better.