Documentation

Retrieving POI Data

There are several ways to request and work with POI detail information in an ARchitect World. Depending on your application and use case, one might fit better than the other.

This sample consists of three parts

  1. From Application Model
  2. From a Local Resource
  3. From a Webservice

From Application Model (1/3)

Besides loading data from assets it is also possible to load data from a database, or to create it in native code. Use the platform common way to create JSON Objects of your data and use architectView.callJavaScript() to pass them to the ARchitect World's JavaScript.

Have a look at SampleCamContentFromNativeActivity.java to get a better understanding of how data can be injected to JavaScript.

From a Local Resource (2/3)

In case the data of your ARchitect World is static the content should be stored within the application. Create a JavaScript file (e.g. myjsondata.js) where a globally accessible variable is defined:

var myJsonData = …[YOUR-JSON-DATA]
view source code on GitHub

Include the JavaScript in the ARchitect Worlds HTML by adding <script src="js/myjsondata.js"/> to make POI information available anywhere in your JavaScript.

// request POI data
requestDataFromLocal: function requestDataFromLocalFn(lat, lon) {
    World.loadPoisFromJsonData(myJsonData);
}
view source code on GitHub

Note: This sample uses static POI data and overwrites latitude and longitude values using Helper.bringPlacesToUser, you must remove this line to avoid this.

From a Webservice (3/3)

JQuery provides a number of tools to load data from a remote origin. It is highly recommended to use the JSON format for POI information. Requesting and parsing is done in a few lines of code.

Use e.g. AR.context.onLocationChanged = World.locationChanged; to define the method invoked on location updates. In this sample POI information is requested after the very first location update. Note: You may set AR.context.onLocationChanged = null afterwards to no longer receive location updates in World.locationChanged.

It is recommended to store server information separately.

// holds server information
var ServerInformation = {
    // sample service returning dummy POIs
    POIDATA_SERVER: "http://example.wikitude.com/GetSamplePois/",
    POIDATA_SERVER_ARG_LAT: "lat",
    POIDATA_SERVER_ARG_LON: "lon",
    POIDATA_SERVER_ARG_NR_POIS: "nrPois"
};
view source code on GitHub

Ensure that the server returns valid JSON and it is escaped properly (e.g. special characters in POI name…).

The server response is passed over to World.loadPoisFromJsonData(poiData), where the creation of markers and their camera representation is defined.

// location updates
locationChanged: function locationChangedFn(lat, lon, alt, acc) {

    /* Request data from server only once*/
    if (!World.alreadyRequestedData) {
        World.requestDataFromServer(lat, lon);
        World.alreadyRequestedData = true;
    }
},
view source code on GitHub
// request POI data
requestDataFromServer: function requestDataFromServerFn(lat, lon) {

    // set helper var to avoid requesting places while loading
    World.isRequestingData = true;
    World.updateStatusMessage('Requesting places from web-service');

    // server-url to JSON content provider
    var serverUrl = ServerInformation.POIDATA_SERVER + "?" + ServerInformation.POIDATA_SERVER_ARG_LAT + "=" + lat + "&" + ServerInformation.POIDATA_SERVER_ARG_LON + "=" + lon + "&" + ServerInformation.POIDATA_SERVER_ARG_NR_POIS + "=20";

    var jqxhr = $.getJSON(serverUrl, function(data) {
        World.loadPoisFromJsonData(data);
    })
        .error(function(err) {
            World.updateStatusMessage("Invalid web-service response.", true);
            World.isRequestingData = false;
        })
        .complete(function() {
            World.isRequestingData = false;
        });
}
view source code on GitHub