Augmented Reality with Layar and ArcGIS Online

Let’s investigate how GIS and Augmented Reality can operate together. That is what I thought when I watched the possibilities of Layar some time ago. But only until last week, I did not find the time to look into it. But it turns out to be very fascinating to do and I am sure it will open up some new possibilities to combine the managebility of GIS with the exiting visualisations of Augmented Reality.

Background

Layar is a Dutch based company providing apps and services to overlay 3d information on the image your smartphone captures through the camera. It show you the world enriched (“augmented”) with extra information. For example: you can see the design of new buildings situated on the actual location that they are going to be built. Really cool! Layar calls these layers Geo Layers. They also provide a way to make the ads in your magazine pop out (digitally ofcourse) from the paper. Read more about that here: https://www.layar.com/augmented-reality/.

With GIS it is very simple to publish online maps and other 2D visualisations (for example this one: http://dev.citysdk.waag.org/buildings/. Since GIS is always based on a database, the visualisation changes if the data changes. And it is this last feature that is also implemented in the example below: change your data in ArcGIS Online and the Layar data is also changed.

Concepts

In the solution below I use ArcGIS Online to store my feature data (point data, in this case) and serve it as a feature service. I could also have chosen to use one of our ArcGIS for Server feature services. These feature services also expose the data in the REST protocol, using JSON notation. On the other hand, Layar also uses JSON/REST, so this is a good combination. The “only” thing I had to do is convert the ArcGIS JSON to Layar JSON. So I created a webservice to do just that.

ArcGIS side

Ok, this one is pretty straight forward. Create a feature service, containing points. Make sure you have some attributes, e.g. ID, Title, etc. These attributes contain the information that will be used in the Layar layer. You can use the service I published if you want: http://services.arcgis.com/zmBQLV64TsFvEpV0/ArcGIS/rest/services/LayarPOIs/FeatureServer/0. I’ve also provided a web map so you can actually see and manipulate the points: http://www.arcgis.com/home/webmap/viewer.html?webmap=efd0377724624600a8ac51524f2e3f85.

Web map with points to show up in Layar

Layar side

Set up an Layar developer account (https://www.layar.com/developers/). That’s it for now, we’ll return here a little later.

The connection between Layar and ArcGIS

The webservice I developed (ASP.NET/C#) deserializes the JSON from ArcGIS Online, converts the resulting point object to a POI object and serializes the hotspot object to JSON that can be processed by Layar. You’re still here? :-). The full solution in Visual Studio is available in GitHub, so no need to copy and paste everything.

step one: define the point object
This goes along these lines:

public class AGSpoint
{

private string _displayFieldName;
private string _geometryType;
private Hashtable _fieldAliases;
private Hashtable _spatialReference;
private List _features;
private List _fields;

public AGSpoint()
{

_displayFieldName = "";
_geometryType = "";
_spatialReference = new Hashtable();
_features = new List();
_fields = new List();
_fieldAliases = new Hashtable();

}

}

The AGSpoint object also references some other classes, AGSfield and AGSfeature.

Step 2: deserializing ArcGIS JSON

Now we can convert the JSON to the AGSpoint:

string json = GetREST();
AGSpoint punt = JsonConvert.DeserializeObject<AGSpoint>(json);

and this is the GetREST() function:

public static string GetREST()
{

string formattedUri = String.Format(CultureInfo.InvariantCulture,
ServiceUrl);

HttpWebRequest webRequest = GetWebRequest(formattedUri);
HttpWebResponse response = (HttpWebResponse)webRequest.GetResponse();
string jsonResponse = string.Empty;
using (StreamReader sr = new StreamReader(response.GetResponseStream()))
{

jsonResponse = sr.ReadToEnd();

}
return jsonResponse;

}

The JsonConvert object is located in an external referenced assembly (http://json.codeplex.com/releases/view/107620). You’ll need to add that to your solution. The variable ServiceURL contains the URL of the service (duh), in my case http://services.arcgis.com/zmBQLV64TsFvEpV0/arcgis/rest/services/LayarPOIs/FeatureServer/0 and some extra querystring parameters.

Step 3: define the POI object

These objects are the Layar objects (POIs, hotspots, etc). I’ll refer to the solution in GitHub, since (although the code is rather lengthy) it is pretty straightforward.

Step 4: Convert AGSpoint to POI

For this, I have written a function in the AGSpoint class: ConvertToPOI(). This will take the attribute of each feature in ArcGIS and use them to fill the attributes of a new collection of POIs. See this snippet:

Hotspot hotspot = new Hotspot();
if (feat.attributes["id"] != null)
{

hotspot.id = feat.attributes["id"].ToString();

}

else { hotspot.id = "1"; }

hotspot.lat = (int)(feat.geometry.y * 1000000);
hotspot.lon = (int)(feat.geometry.x * 1000000);

if (feat.attributes["titel_en"] != null)
{

hotspot.title = feat.attributes["titel_en"].ToString();
hotspot.attribution = feat.attributes["titel_en"].ToString();

}
else
{

hotspot.title = "unknown";
hotspot.attribution = "unknown";

}

… etc

Here, the values of the  attributes ID and titel_en from the ArcGIS are put in the attributes  id, title and attribution of the newly created hotspot. The x and y of the geometry of the feature are converted to the lat and lon of the hotspot.

Step 5: serialize the POI object to JSON

This is now very simple:

string jsonString = JsonConvert.SerializeObject(myPOI, Formatting.Indented);

Step 6: return the jsonstring

The json string is now returned as result of the webservice:

Response.Clear();
Response.Write(jsonString);

Step 7: publish the web service to a web server

If you came this far, you can figure this step out yourself, there are too many different options to do this. I use a Amazon EC2 Windows instance. See the result here.

Layar – revisited

Now we have to define the Layar layer. Log in to the “My Layers” section in Layar and define the new layer. Provide a name, title, description, and all other required descriptions. At the API Endpoint URL, provide the URL of your webservice (in my case: http://dev.geosolutions.nl/layarpoi/default.aspx).

That’s it! Congratulations on your first Layar/ArcGIS layer.

Testing

The Layar website provides an interface for testing your layer through the browser instead of yor smartphone. In the “My Layers” screen, press “Test”.  Specify the details necessary, and press “Load POIs”. If this works fine (you should see the POIs appearing in the right section of the screen), you can go to your smartphone. Install the app ad log in to your account. You should see a menu option “Test Layers” and your new layer should be there.

This is what I see anyway:

Screenshot Layar

Publishing

Now you only have to request Layar to review your service and make it available to the broader public!

Advertisements

5 thoughts on “Augmented Reality with Layar and ArcGIS Online

  1. Pingback: Augmented Reality with Layar and ArcGIS Online ...

  2. Good work. Thank you for sharing this tutorial about ArcGIS, I learn more from it. But I still have a problem, can I use it on my .net class? Hope you can give me some suggestion. Thank you in advance.

  3. Hi. I’ve been looking to publish my POIs in Layar and yours is the best I’ve found. But I’m lost when it comes to the “The connection between Layar and ArcGIS” part like how to use the AST.NET/C#.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s