A day in Coltsfoot Vale

Interactive map

by Emily Allbon, Simon Goulding, Howard Richardson, Adam Doughty.

Coltsfoot vale is a happy place but its residents are having more than their fair share of legal disputes. Explore the interactive map and try and figure out answers to their land-law problems.

This is a custom-built Javascript online map with light game elements. The user is encouraged to explore the map and self-test their land law expertise in a variety of legal scenarious.

Visuals and narration play a large part in making these otherwise static scenarios come to life in the student's imagination.


After being inspired many years ago by Paul Maharg’s simulation work and his virtual town of Ardcalloch, I have hankered after my own space to tell stories from. Students often find land law one of the more challenging subjects, partly because it is so legislation-heavy but also because they find it a bit alien…most of them won’t have bought a house, many won’t even have rented as they are still at home with their family. The issues we cover aren’t familiar to them in the same way as contract, tort or criminal law.

I have a minor obsession with maps (especially after going on a course run by the fantastic Helen Cann) and saw them as a great way to share stories.

Creating something which was detailed, engaging and interactive was always going to be more than I could achieve alone and so I teamed up with Adam Doughty, a wonderful illustrator whose style I admire tremendously, and Howard Richardson, my fantastic long-term Lawbore collaborator and web programmer, who would bring the map alive and make the content dynamic.

Using characters helps us get the students to think about land law in a less sterile way

Emily Allbon, writer

Using characters helps us get the students to think about land law in a less sterile way; considering the importance of home and having some empathy for the characters who face sometimes traumatic upheaval. It's a small detail, but even just giving them portraits and full names elevates a problem question from the abstract into the imaginably concrete.

Materials and creative process

The materials to create this map came from three main contributors and included specially paid-for commissions. The map itself we had drawn by a professional illustrator, whom we supplied with the spec for all the buildings and places it should contain. After several weeks of work he was able to give us a giant photoshop image with multiple layers. There was one background layer, containing all the scenery, and then all the hotspots (buildings mostly) were separates layers on top. The image was drawn in sufficient detail to allow the user to zoom in and out, as not all of the scene and detail needed for the map would be possible to fit on screen all at once. We asked our illustrator to draw each inhabitant too, to give them a better sense of being real people.

To go with each hotspot building, I wrote a scenario which encompassed a land law problem, added a portfolio of those who lived there and provided commentary and integrated questions and answers. For some of the buildings I also recorded a video presentation explaining the overarching legal principles involved in that area of land law.

After an initial few buildings, I recruited my colleague Simon, who is City's land law specialist. He agreed to write many of the commentary sections and also to provide much-needed critique on anything I'd written. His expertise has been invaluable to this project. We completed six buildings ready for launch and will work gradually on adding new ones. We're also hoping that academics and practitioners outside of City will consider getting involved too #AdoptAColtsfootValeHome.

Armed with the background, illustrations of the buildings and their inhabitants, and the story and support materials, I took these to Howard and he combined them into a online game of sorts – there's no "winning" involved, but the playing field can be interactively explored in a non-linear manner, and the students can self-test their understanding and knowledge of the matters with quizzes.

Although it may sound like straightforward, many of these phases overlapped in actuality. Being the first time we'd attempted anything on this scale, there was some trial and error involved, and much communication and revision between the writer (me), the illustrator and the programmer.

Having completed this project now, we're all in a much better position to know how we would set about another similar project. Planning what was needed for each of the stories was key, as was making sure the illustrator was kept appraised of the evolving stylistic and technical requirements by the web developer. Ultimately it was an incredibly rewarding process to work with creatives who were responsive to our needs.

Additional development credits

  • GreenSock animation libraries. These are freely licenced, but we did make use of their extra paid "ThrowProps" plug-in which enabled inertia in scrolling and dragging. This is optional. Without ThrowProps dragging and scrolling just stops dead when you let go.
  • A wonderful piece of music from the Youtube royalty free music library: Lazy Afternoon Sun by Dan Lebowitz
  • On the back-end XCRUD to allow simple input and generation of JSON data from a MySQL database.
  • Howler.js library provided audio support, freely licenced under MIT licence.


Go back