Stedelijk Museum

Do you want to make your own layer? This tutorial tells you how to do it! These are the requirements to create your own layer:

• Webserver with PHP and JSON support
• MySQL database with phpMyAdmin
• For testing: Layar installation on your iPhone 3GS or Android based phone (with GPS and compass)

1. Request your Developer key
The first step is requesting a developer key at Layar. Go to http://dev.layar.com and click ‘Request a developer account’may take a couple of days before you’ll receive your key. When you get the welcome mail, log off from any Google account and click the link in the mail. Now sign in with your Google account. Your Layar developer account is now linked with your Google account.

2. Creating a new layer
After you created your own account, you can sign in at http://dev.layar.com with your Google account and then click ‘Create Layer’. Fill out the form:

1. Fill in your layer’s name.
2. The type of layer you want to make. For now choose “Generic 2D”. We will cover the “3D and 2D objects in 3D space later” option later.
3. Your POI’s URL. This POI is a php file will provide the link between the layer and it’s database. It will tell the layer where to look for this database and what kind of information is stored inside of it. How to create your POI will be covered later on in this process.
4. Select in which countries your layer will be working.
5. Check the box if your layer is for non-commercial use only.
6. Enter your layer’s title.
7. Fill in a short description of your layer. The Layar users will be able to see this description once you publish your layer.
8. Enter you own or your company’s name.
9. Enter some tags that relate to your layer.

After you are done click “Save and Customize”, the following screen will appear:

1) The general section. In this tab you can:

• alter your layer type
• change your POI.php url
• Change the country you will design your layer for
• Set a bounding box for your layer. If people are not within this bounding box they cannot use your layer. I have set mine to only work in Amsterdam. You can add a bounding box by double clicking in the map itself.

2) The Listing tab. In this tab you can:
• Choose an icon for your layer. This icon will be displayed when people see your layer on their mobile device.
• Alter your layer title
• Alter the short description of your layer
• Alter the publisher of your layer
• Choose a category for your layer
• Add and/or delete tags for your layer
• Set a requirements list for your layer
3) The detail tab: In this tab you can:
• Enter a detailed description for your layer
• Set authorization for your layer
4) The AR View tab: In this tab you can:
• Set a banner icon for your layer. This is the icon that will appear in the top banner of your layer when it’s being used (1).
• Set the color of your banner text (2).
• Set the color of the background of your banner (3).
• Set the color for spots on the radar (4).
• Set the color of the outer points (5).
• Set the color of the middle points (6).
• Set the color for highlighted spots on the radar (7).
• Set the color of selected spots (8).
• Set the color for the title of the highlighted spot (9).
• Set the color of the information f the highlighted spot (10).

These images show what value is connected to what part of your layer:

5) The POI Incons tab: In this tab you can:
• Replace the POI’s colored dots with images! Simple click “Add POI icon set” and upload your images.
6) The AR View tab: In this tab you can:
• Add filters to your layer

3. Create the MySQL tables
So far, you’ve created a new, empty layer. Now it’s time to define some points of interest (POI’s) using Google Maps and your MySQL database. We’ll assume that you’re able to use phpMyAdmin in order to manage your database. Log in to your database server and click the SQL-button. We will create three new tables:
POI: this table contains all POI’s locations with some information
ACTION: here we will define the action buttons in you Layer, like an URL or phone number to call.
OBJECT: not necessary until step 7. Here you can specify 2D or 3D objects.
Use this SQL-code to create the tables. You can also download the attached file below.

– Layar SQL Table structure
– by Erik van Mastrigt

SET SQL_MODE=”NO_AUTO_VALUE_ON_ZERO”;

CREATE TABLE IF NOT EXISTS `POI` (
`id` int(11) NOT NULL auto_increment,
`attribution` varchar(50) default NULL,
`title` varchar(50) default NULL,
`lon` varchar(20) default NULL,
`imageURL` varchar(255) default NULL,
`line4` varchar(50) default NULL,
`line3` varchar(50) default NULL,
`line2` varchar(50) default NULL,
`lat` varchar(20) default NULL,
`type` int(11) default NULL,
`action` varchar(50) default NULL,
`dimension` int(1) NOT NULL default ’1′,
`alt` int(5) default NULL,
`relativeAlt` int(5) default NULL,
`objectId` int(5) default NULL,
`dtemodified` date default NULL,
`active` tinyint(1) default NULL,
`dtecreated` date default NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

CREATE TABLE IF NOT EXISTS `ACTION` (
`poiID` int(11) default NULL,
`label` varchar(30) default NULL,
`uri` varchar(255) default NULL,
`autoTriggerRange` int(11) default NULL,
`autoTriggerOnly` int(11) default NULL,
`ACTIVE` tinyint(1) default NULL,
`ID` int(11) NOT NULL auto_increment,
PRIMARY KEY (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

CREATE TABLE IF NOT EXISTS `OBJECT` (
`id` int(5) NOT NULL auto_increment,
`baseURL` varchar(100) NOT NULL,
`full` varchar(50) NOT NULL,
`reduced` varchar(50) NOT NULL,
`icon` varchar(50) NOT NULL,
`size` int(5) NOT NULL,
`rel` tinyint(1) NOT NULL default ’0′,
`angle` varchar(10) NOT NULL,
`scale` varchar(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

4. Gathering your POI’s
It’s time to feed the database with some POI’s. Go to Google Maps (http://maps.google.com) and zoom to a location you want to include in your layer. Point your mouse to the exact location, click the right button and select “What’s here?”. Google Maps will now return the GPS coordinates for this location in the search field (longitude, latitude).
Switch back to the database you’ve just created and click the POI table. In phpMyAdmin, there is an Insert-tab somewhere on top of the screen (in Dutch: ‘Invoegen’, as seen in the figure below).

Click this tab. We’re now going to put the first POI in your database with some additional information. Fill out the form:
Id: leave this field blanc. MySQL will generate an id automatically.
Attribution: the last line in the browser screen; small font
Title: the title of your POI
Lon: the longitude of your POI. In our example, Google Maps returned “52.359897,4.909483” as the coordinates of the Hogeschool van Amsterdam. The longitude here are the digits after the comma, so it must be 4.909483.
imageURL: link to a small picture of your object
line4: Fourth information line
line3: Third information line
line2: Second information line
lat: the latitude of your POI. Referring to our example: 52.359897 (digits before the comma).
Type: the id referring to the set of your custom made POI Icons (see step 2). Use ‘0’ for the standard icon set.
Action: leave it blanc
Dimension: in this case, set it to value ‘1’.
Alt: the altitude of your object. You can leave it blanc for now
relativeAlt: same as alt
objectId: leave blanc
dtemodified: leave blanc (or set today’s date)
active: set to ‘1’
dtecreated: leave blanc (or set today’s date)

Now click ‘Start’. You can repeat this step to add more POI’s.
For more information about the information stored in the database, check http://layar.pbworks.com/GetPointsOfInterest

5. PHP
After filling the table with some POI’s, we have to connect the Layar software to your database. We will use PHP to get POI’s from the database and translate the results into JSON, the language Layar uses. In step 2, you’ve entered a POI URL while creating a new layer. The file mentioned here, is the file we’re going to create now. You can use the code below. Please alter the values under ‘Presets’ ($dbhost, $dbuser, $dbpass and $dbdata) so the script can connect to your database. If you like to understand what the script is doing, take some time to read the notes between the lines (start with ‘//’). The PHP code can also be downloaded in the file attached below.

// PHP scripting by Erik van Mastrigt
// erik (at) mastrigt.net
// MediaLAB Amsterdam
// http://stedelijk.medialab.hva.nl
// Thanx to: Naos Wilbrink (aFrogleap; www.afrogleap.nl)
// and porPOISe: (http://code.google.com/p/porpoise)

// Presets
$dbhost = “localhost”;
$dbuser = “root”;
$dbpass = “password”;
$dbdata = “database”;

// Receive data from Layar en put them into variables
$requiredFields = array(“userId”, “developerId”, “developerHash”, “timestamp”, “layerName”, “lat”, “lon”, “accuracy”, “radius”);
//stop ze in variabelen zodat je ze later kan gebruiken
foreach ($requiredFields as $field) {
${$field} = $_GET[$field];
}

//Create the SQL query and ask your database for the POI’s in your range
$sql = “select id, type, title, lat, lon, line2, line3, line4, attribution, imageURL, action, dimension, alt, relativeAlt, objectId
, 6371010 * 2 * asin(sqrt(pow(sin((radians(” . addslashes($lat) . “) – radians(lat)) / 2), 2) + cos(radians(” . addslashes($lat) . “)) * cos(radians(lat)) * pow(sin((radians(” . addslashes($lon) . “) – radians(lon)) / 2), 2))) AS distance
FROM POI
WHERE active = ’1′
HAVING distance < (” . addslashes($radius) . ” + ” . addslashes($accuracy) . “)
ORDER BY distance ASC
LIMIT 0 , 50″;

// Connect to MySQL server
$con = mysql_connect($dbhost,$dbuser,$dbpass);
if (!$con) {
die(‘Could not connect: ‘ . mysql_error());
}
// Select the database
mysql_select_db($dbdata, $con);

// Get results from database
$result = mysql_query($sql);

// Start with some static data
$response = array();
$response["morePages"] = $morePages;
$response["nextPageKey"] = (string)$nextPageKey;
$response["layer"] = $_REQUEST["layerName"];
$response["errorCode"] = 0;
$response["errorString"] = “ok”;
$response["hotspots"] = array();

// Start processing the SQL results

while($row = mysql_fetch_array($result))
{
// Set counter
$i = count($response["hotspots"]);

// Setting variables
$poi = array();
$actions = array();

// Get actions for current POI and put them into an array
$id = $row['id'];
$sqlAction = “SELECT * FROM `ACTION` WHERE `poiID` = ‘”.$id.”‘”;
$resultAction = mysql_query($sqlAction);
$c = 0;
while($rowAction = mysql_fetch_assoc($resultAction)) {
$actions[$c]['uri'] = $rowAction['uri'];
$actions[$c]['label'] = $rowAction['label'];
$c++;
}

// Get the query results
$poi["id"] = $row["id"];
$poi["title"] = $row["title"];
$poi["type"] = $row["type"];
$poi["lat"] = $row["lat"];
$poi["lon"] = $row["lon"];
$poi["line2"] = $row["line2"];
$poi["line3"] = $row["line3"];
$poi["line4"] = $row["line4"];
$poi["attribution"] = $row["attribution"];
$poi["imageURL"] = $row["imageURL"];
$poi["distance"] = $row["distance"];
$poi["actions"] = $actions;
$poi["dimension"] = $row["dimension"];
$poi["alt"] = $row["alt"];
$poi["relativeAlt"] = $row["relativeAlt"];

// Checks if the POI is an object (2D or 3D)
if($row["objectId"]<>”") {
$sqlObject = “SELECT * FROM `OBJECT` WHERE `id` = ‘”.$row["objectId"].”‘ LIMIT 0,1″;
$resultObject = mysql_query($sqlObject);
while($rowObject = mysql_fetch_assoc($resultObject)) {
$object['baseURL'] = $rowObject['baseURL'];
$object['full'] = $rowObject['full'];
$object['size'] = $rowObject['size'];
if($rowObject['rel']==1) { $transform['rel']=true; }
else { $transform['rel']=false; }
$transform['angle'] = $rowObject['angle'];
$transform['scale'] = $rowObject['scale'];
}
$poi["object"] = $object;
$poi["transform"] = $transform;
}

// All done, put POI data into $response
$response["hotspots"][$i] = $poi;

// Some fixes
// upscale coordinate values and truncate to int because of inconsistencies in Layar API
// (requests use floats, responses use integers?)
$response["hotspots"][$i]["lat"] = (int)($response["hotspots"][$i]["lat"] * 1000000);
$response["hotspots"][$i]["lon"] = (int)($response["hotspots"][$i]["lon"] * 1000000);
// fix some types that are not strings
$response["hotspots"][$i]["type"] = (int)$response["hotspots"][$i]["type"];
$response["hotspots"][$i]["distance"] = (float)$response["hotspots"][$i]["distance"];
}

// Close MySQL connection
mysql_close($con);

/* Set the proper content type */
//header(“Content-Type: application/json”);
// All data is in $response now, so translate to JSON
printf(“%s”, json_encode($response));
?>

6. Testing your layer
In order to test your layer on your Android phone, please remove previous Layar installations and download the developer APK. For more information about this, please check: http://layar.pbworks.com/Download-the-APK
On your iPhone, go to ‘Settings’ and scroll down until you see Layar. Tap this and enable the ‘User Developer Key’. Enter your Developer Id and Key, go back and start the Layar app. Your layer will appear under ‘Featured’.

7. Adding actions
Now your layer is tested, you can add some actions per POI. Go back to phpMyAdmin and select the ACTION table. Click the Insert tab and fill out the form:
poiID: the id number of the POI this action belongs to. You can find the id in the POI table
label: the label of this action
uri: the action itself. In this example, we use an URL. You can also use a phone number, (enter “tel:+31612345678”) For more actions, see http://layar.pbworks.com/GetPointsOfInterest
autoTriggerRange: we won’t use this option.
autoTriggerOnly: idem
Active: set to ‘1’
Id: leave blanc.

When you test your layer now, a new button will appear next to the ‘Take me there’ button. You can add multiple actions per POI.

8. Adding 2D/3D objects
In this last step, we will use the OBJECT table in the database. Instead of displaying an icon to represent your POI, you can also use an 2D image (PNG file) or 3D object (L3D file). Note that creating 3D objects requires some experience with a 3D sketching program, Blender for example. Try this tutorial to know more about Layar and 3D: http://layar.pbworks.com/Creating-the-3D-objects
Insert a new record in the OBJECT table with the following information:
Id: leave blanc. The id number will be generated automatically. When you’ve inserted this record, you’ll need the generated id to alter the POI record in the next step.
baseURL: the base URL of your image/object file
full: file name of your image/object in full resolution
reduced (optional): file name of your image/object in middle resolution
icon (optional): a small image (2D, 32×32 pixels in PNG format) of your object.
Size: the size of your object
Rel: if 1, the object will always face the user. We’ll set this to 0.
Angle: rotation angle in degrees
Scale: scaling the object
The size, rel, angle and scale may require some experimenting.

After you’ve created the object-record, you have to alter some fields in the POI record. Click the POI table and then the Explore-tab. Look for the corresponding POI and edit it by clicking the small pencil in the same line of your record. Change the dimension field from 1 to 2 (when using a 2D image) or 3 (when using 3D object). In the objectId field, enter the id number of the object record you’ve just created. Then press the Start button.
Your 2D/3D object should now appear in your layer.

If you want to know more about creating layers, please visit the Layar Developer Wiki at http://layar.pbworks.com/

We hope you’ll enjoy being a Layar-layer developer!

Attachment: SQL and PHP file

See also: porPOISe – Point of Interest Server for Layar: http://code.google.com/p/porpoise/