UEFA Euro 2016 is in full swing – a true celebration for fans. A group round has just ended, and sadly, Ukraine’s national team quit fighting for Europe’s main football trophy. But the show goes on! Passions run high and beer flows, triumphs and sadness of defeat.
France won its right to hold the European football competition among other candidates, and hosts the championship this year. So, a football fest has come to French cities. But to which ones? We invite you to a Map Tour across French cities hosting national teams and accompanied by supporters at the stadiums.
Fig. 1. “Cities and Stadiums of EURO 2016 in France” Story Map Tour (click the image to open the tour)
How was the story map tour made?
Picking tools
I used ArcGIS Online to create an app, and more specifically – an interactive Story Map builder. This online builder works in the browser (Chrome is recommended) and doesn’t require writing any code. Anyway, there is an option of downloading app source code via GitHub and optimising it according to one’s needs and preferences.
A user can tell their own story composed of web maps and multimedia content using various templates. To present stadiums in different French cities I chose a ‘Story Map Tour’ template. This mapping application is best for presenting a series of sites accompanied by a photo or video, captions and places’ short description. Photos and video are a kind of landmarks guiding users to places on the map and visually complementing those places’ description.
Source data and their preparation
‘Story Map Tour’ can be created either directly in the interactive builder, by publishing a map created in ArcGIS Online as a web-application, or by creating an application from ‘My Resources’ menu. All the options are available both with a free personal account (now, Facebook and Google accounts can also be used to access ArcGIS Online), and with a paid organisation account. The difference is in the set of available options. I.e., with the organization account, option of uploading media as a separate layer directly to the ‘own’ cloud in ArcGIS Online is available.
Anyway, preparatory work is necessary: data collection and organization. So, the source data are:
- a list of cities and stadiums that host national teams’ matches – data taken from the official web site of the championship’s organizer – UEFA.
- for a more detailed description, information is added about what club is hosted by the stadium, how many visitors can attend matches held under the aegis of the UEFA, stadium’s opening year. Also, a list of matches being held on the stadium is added.
- photos of the stadiums – images from open sources are used.
Creating a mapping web-application
Now we must add all these data to a Story Map Tour and connect them. The main task is to geotag media – images, in our case, with their location – stadiums. During a Story Map Tour configuring, there are several options to do that. For instance, there is an option of uploading a CSV-file including necessary settings: places’ coordinates, media URLs, captions and descriptions. That is exactly how I did it in the following sequence (figure 2):
Figure 2. The start of creating a Story Map Tour (GIF)
a point shape-file containing stadiums’ locations in Frech cities was created in ArcMAP using OpenStreetMap, one of the ESRI’s base maps, for the precise labelling.
then, an attribute table of this shape file with coordinate fields filled out (coordinate format – ‘decimal degrees’) was converted to an Excel file. Fields describing source data parametres were added to this file:
name (site name)
description (additional information)
long (longitude)
lat (latitude)
pic_url (icon URL)
thumb_url (slide URL).
images had been beforehand uploaded to Picasa, their URL-addresses were written respectively in pic_url and thumb_url fields.
edited CSV-file was imported in the interactive builder, and after that, the Story Map Tour was customized. Specifically, app’s color scheme and base map were changed, and a default extent was set.
A few remarks:
1) after importing a CSV-file, a text in Cyrillics contained in name and description wasn’t recognized. That is why all the necessary textual information was added separately.
2) Text can contain HTML-tags, which enables formatting captions and descriptions up to one’s preferences. So, stadium names were marked out in bold, ‘Ukraine’ was highlighted with color in the match schedule, and line-breaks were added
(text fragment with HTML tags
<b>Матчі групового етапу</b><br>Німеччина –
<b><font color=”#dc143c “>Україна </font></b> (Група С) – 12.06.2016<br>).
3) Links to two different media files can be provided: for a thumbnail and for a slide.
4) For better visual perception, it is recommended to make images the similar format. Recommended ratio is 4:3.
__________________
Featured image source.
