This page describes creating locative experiences for the HTML5 flavour of Treasuremapper. Designing treasuremaps for the HTML5 Flavour is easy, as it's mostly a WYSIWYG (What You See Is What You Get) experience. On this page we'll create one such experience as an example: we'll create a childrens game in which they have to search for hidden gnomes.

 

A Treasuremap

To create a locative experience you need to create a map of that experience. On this map you draw lines to define areas in which you want something to happen when the user enters them. Maybe you want to show a picture when the user enters a certain area.

Treasuremapper uses a standardised format for its maps. This format is called KML. Google uses this format a lot too. In fact, they created it. That's why treasuremapper 'uses' Google's own tools for map creation to design our treasuremaps.

 

Creating the map file

You could use any tool that allows you to create KML files, such as Google Earth. This explanation uses Google Maps as it's mapmaking tool.

With Google 'My Maps' you can easily draw maps and share these with others. Google has a great video that explains how it works. Treasuremapper uses this same functionality, but with a surprise ending: after you are done designing your map, we'll download it, and then place it on your own website.

First, go to maps.google.com, and sign in using a google account. You can now create a "My Map" by clicking on My Maps.

Let's make a map in which the picture of a gnome is shown when the user walks near to the Blue Teahouse, a cafe in the middle of Amsterdam's Vondelpark. Create a new My Map and give it a name. In this example we'll name it "Vondelgnomes":

Next, we'll draw the areas. To do this we have to select the 'shape' tool, which is a subtool of the line tool:

Draw the area in which you want media to be triggered.

When you finish your polygon a pop-up will automatically appear asking you for a title and a description for the polygon. This is where it gets interesting.

First, give your area a name.

Second, we'll have to fill in the description field. Whatever you place in this field is what the user will see when they walk into this area later.

So, if you just want to show the user some bland text when they walk into the area, then go right ahead an type it in.

But text is so boring. Let's look at some other options:

If you want, say, an image to be shown, the easiest way is to click on the 'Rich text' option, and insert an image by then clicking on the image icon. You can point to the URL of an image that is already online, or upload your own images somewhere and fill in their address.

If you want audio, it gets a little more complicated: you'll have to choose the 'Edit HTML' option. You'll then have to add a little HTML code along the lines of the green text below:

<audio src="http://www.example.com/media/example.mp3" controls>

When you're finished creating your map press the save button.

 

Downloading the mapfile from Google

Now that the map had been designed, we need to download if from Google. Google maps wasn't designed to allow this, but it's easy to do..
First, while editing, click on the Link icon, and copy the URL google provides. Add the following at the end of the url: &output=kml

 

Your map will now be downloaded. Finally, rename your map to 'map.kml' and replace the map.kml file on your webserver in the asme place where you put Treasuremapper.