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