Creating an interactive point map with custom icons and images

During production weeks at City (in which we produce our own newspaper in print and online), my Interactive Journalism coursemates and I were tasked with trying to combine our digital efforts with those of the print reporters to enhance the website’s online content.

For one project I chose to visualise a local historic walk that Ellie Busby was writing about for an experience feature. In order to do this effectively I needed to pin-point highlights along the route as accurately as possible, with images for colour and interest. I had experimented with simple Google Fusion maps before but this time, I would need to attempt some basic HTML editing. Fortunately our workshops with Simon Rogers had taught me a lot about making maps like these (and much more…) so while I still felt somewhat overwhelmed, my notes were on hand to help me out.

First I collated my data, with the postcode the most important element of each entry, inputted it into an Excel spreadsheet and saved it as CSV file.  I signed into Drive, clicked Create–> Fusion Table and imported my table. If Fusion Tables are not installed for you, click ‘Connect more apps’. Give your data a title, description and an attribution credit when prompted.

Next, I needed to make sure that the ‘Postcode’ column was registered as a location type. I clicked the small downwards arrow next to the column name and selected ‘Location’ from the drop-down ‘Type’ menu. The entries in this column were now highlighted in a rather putrid yellow- they were ready to be geocoded. To complete this process I clicked File–>Geocode and selected ‘Postcode’, adding a location hint of London, UK, to avoid any rogue points appearing somewhere in the middle of the Pacific.

I let the geocoding commence and soon found myself with a basic pointer map.

Before I forgot, I changed my sharing settings to allow anyone with the link to access my map. To do this, I clicked File–>Share, then changed the access preference accordingly.

I then played around with the style of my map (Map–>Change map styles), eventually opting for bright blue pointers. There is however, the much more exciting option of customising map icons. All you need to do is select the one you want from here, click on it and copy the icon name e.g. pink_stars. Create a new column in your original spreadsheet called ‘Icon’ and paste the name of whichever icon you want to use in each row. You can use multiple different icons within one spreadsheet, which is particularly useful if you have different categories of data to present. See here for an example by the Guardian showing firearms dealers and gunshot homicide victims in Chicago.

Now it was time for some HTML customisation, to make my captions more eye-catching. I clicked Map–>Change info window layout–>Custom. To make the name of each site larger I added this code, taken from Simon’s workshop sheet,  around the relevant column placeholder:

<b><font size=”+1″>{Name}</font></b><br>

I deleted details that I did not want to appear in the caption, such as Postcode, City and Address. I then needed to work out how to add a picture into the window. This was something Simon had not covered, so I was on my own to figure it out!

Google Search to the rescue as I soon found some simple instructions to help me embed images. First, I right-click on the picture and copied its URL (upload photos to Flickr if they need an online location), then pasted this into the relevant cell under a new ‘Picture’ column (make sure the chosen picture is viewable without having to sign-in anywhere). Next, I clicked the downwards arrow in the ‘Picture’ column heading and changed the format to display the size I want my image to be. I selected ‘Eight line image’ to display an image as tall as eight lines of text as I wanted the map to be visually striking.

You can edit this code in the window layout screen to make the picture a custom width or height:

<img src=”{Picture}” width=”460” height=”240”>

When my map was working correctly and looked how I wanted it to, I published it. To do this, I clicked Tools–> Publish. I copied and pasted the embed code into a post for the Islington Now website, but it is also possible to share the link via social media or in an email.

Here is the final article online, with my interactive successfully embedded. My next step would be to work out how to draw  the route taken by the historic walk onto my map.

(I have backdated this post to when I created the map in March, using notes made at the time.)