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.

From Application Model

Besides loading data from assets you can also load data from a database, or create them in native code. Use the platform common method to create JSON Objects out of your data and use WikitudePlugin.callJavaScript()` to pass the JSON data to ARchitect World's JavaScript.

Have a look at the provided sample to see how POI data is created in JSON-format and then passed over to the WikitudePlugin.

From a Local Resource

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

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