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 a Webservice
  2. From a Local Resource
  3. From Application Model

From a Webservice (1/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 detail information. Requesting and parsing is done in a few lines of JavaScript code.

In this sample, POI information is requested after the very first location update. Use e.g. AR.context.onLocationChanged = World.locationChanged; to define the method invoked on location updates.

It is recommended to store server information separately in your code, use the following snippet

// 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"
};

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.

var World = {
[…]

// location updates
locationChanged: function locationChangedFn(lat, lon, alt, acc) {
    World.userLocation = {
        'latitude': lat,
        'longitude': lon,
        'altitude': alt,
        'accuracy': acc
    };

    /* Request data from server only once*/
    if (!World.alreadyRequestedData) {
        World.requestDataFromServer(lat, lon);
        World.alreadyRequestedData = true;
    }
},

// request POI data
requestDataFromServer: function requestDataFromServerFn(lat, lon) {
    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() {
        alert("JSON error occurred!");
    })
        .complete(function() {});
}

[…]
}

From a Local Resource (2/3)

In the case where the data of your ARchitect World data is static, its content should be stored within the application. Create a JavaScript file (e.g. myJsonData.js) and define a globally accessible var myJsonData = …[YOUR-JSON-DATA]. Include the JavaScript in the ARchitect Worlds HTML by adding <script src="js/myJsonData.js"/>. POI information is then available anywhere in your JavaScript and can be processed similarly to the previous web service sample.

var World = {

[…]

// request POI data
requestDataFromLocal: function requestDataFromLocalFn(lat, lon) {
    World.loadPoisFromJsonData(poisNearby);
}

[…]
}

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