This is an old revision of the document!


Add a hotspot/Point of Interest

Time to add a “hotspot”. This is how you place something in the environment. Each will have its own unique ID, which you set yourself, and various other optional settings. The snippet of code below, shows the mandatory parameters. If you visit the API page, then the structure graph at the top of the page shows mandatory parameters marked with an asterisk. Note that the parameters can be empty - you just need to include them for each hotspot.

<?php
 
echo '{
    "layer": "mmo-demo",
    "hotspots": [
        {
            "id": "01",
            "anchor":{
	    },
	    "text":{
	    }
        }
    ],
    "errorCode": 0,
    "errorString": "ok"
}';
 
?>

Positioning in Space

The code above is missing a very important part of Augmented Reality - the position. At this point I'll briefly introduce the “GetPOIs Request”. Essentially the Layar app tries to send information to your server so that you can load the right thing. If you're familiar with web development, then these parameters are sent as GET variables. Two parameters that are sent are the latitude and longitude (location) of the phone.

Here we add 0.00003 to the latitude to move the hotspot roughly 3.33 metres north of wherever the phone is. Note that this doesn't work for the longitude because of the Earth's shape, but more on that later.

Layar supports two types of anchors - either to a geo-location (latitude and longitude), or relative to a reference image. We can also add a title in the text section so that our hotspot has a name.

<?php
 
$latitude = $_GET['lat'] + 0.00003;
$longitude = $_GET['lon'];
 
echo '{
    "layer": "mmodemo",
    "hotspots": [
        {
            "id": "01",
            "anchor":{
		"geolocation":{
		    "lat": '.$latitude.',
		    "lon": '.$longitude.'
		}
	    },
	    "text":{
		"title": "Monster"
	    }
        }
    ],
    "errorCode": 0,
    "errorString": "ok"
}';
 
?>

Full layer with an image

<?php
 
$latitude = $_GET['lat'] + 0.00001;
$longitude = $_GET['lon'];
 
echo '{
    "layer": "mmodemo",
    "hotspots": [
        {
            "id": "01",
            "anchor":{
	        "geolocation":{
		    "lat": '.$latitude.',
		    "lon": '.$longitude.'
		}
	    },
	    "text":{
		"title": "Monster"
	    },
	    "object":{
		"contentType": "image/png",
		"url": "http://www.wheretheimageis/imagename.png",
		"size": 1.8
	    }
        }
    ],
    "errorCode": 0,
    "errorString": "ok"
}';
 
?>

Add the transformation to make it always face you.

"object":{
    "contentType": "image/png",
    "url": "http://www.thoughtfulmonkey.com/layar/gilt/Banker.png",
    "size": 1.8
},
"transform":{
    "rotate": { 
    "axis": { 
	"x": 0, 
	"y": 0, 
	"z": 1
    }, 
    "angle": 0, 
    "rel": true 
}