The Interactive Whodunnit Map

Crime City is a fun board game which is played on a hand-drawn city map. The demo of the game can also be played online as an interactive map.

At the heart of Crime City is a large hand-drawn city map. This map contains a number of crimes and the clues that you need to solve them. The online demo of the board game uses the Leaflet.js interactive mapping library to allow you to play the game on your computer, tablet or phone.

Your first task in Crime City is to find the crime scene (pictured above). Clicking on the crime scene reveals a clue. You then need to solve that clue by searching for another secret location on the city map. Solving that clue with the help of the map will reveal the next clue - and so on - until you hopefully eventually solve the crime.

Turning large images into map tiles so that the image can be viewed using an interactive mapping library isn't new. If you are interested in creating your own interactive image map, like the one in Crime City, then you need to create map tiles from your image. Probably the easiest way to do this is by using Zoomify.

Bjørn Sandvik has written a neat Leaflet plugin (code available on GitHub) which can help you create a Leaflet map from a photo using Zoomify. Showing Zoomify Images with Leaflet is a blog post that explains how to use the plug-in to create your Leaflet.js interactive map from a Zoomified image.

Using Bjørn's Leaflet plugin all you need to do to create an interactive image map is Zoomify your photograph and provide the url to the Zoomify image folder. The result is a Leaflet map of your photograph which you can pan and zoom like any other map. Of course once you have created your image map you can then add other interactivity as well. For example you can add map markers or bounding boxes to the mapped image.

You can view a number of other examples of Leaflet maps made from large static images on the Maps Mania post Microscopic Mapping.