Wikitude

Issue with displaying POI from webservice

Hi,

 

I'm using last version of the SDK 5_obtainPoiData_3_FromWebservice

I'm trying to display POI from the following JSON

https://api.getwemap.com/v2.2/EMM?ltoken=at5788eb835a81c9.75928685&emm_id=2069&center_latitude=48.12129&center_longitude=-9.88770&latitude_delta=18.35692&longitude_delta=22.01660&limit=20

See below the sample code I used.

 

I made the following changes:

-changed the source from poi to poi.pinpoints

- forced the serverUrl to be : https://api.getwemap.com/v2.2/EMM?ltoken=at5788eb835a81c9.75928685&emm_id=2069&center_latitude=48.12129&center_longitude=-9.88770&latitude_delta=18.35692&longitude_delta=22.01660&limit=20

I checked using following logs that json was correctly loaded:

        /World.updateStatusMessage('loading' + (typeof poiData));

        /World.updateStatusMessage('loading' + (poiData.hasOwnProperty("pinpoints"))); It gives true

        /World.updateStatusMessage('loading' + (poiData.pinpoints.name)); It gives "Abra"

For some reason the status message keeps saying "Requesting places from web-service"

Can you help?

Thx

P.

 

 

 

 

// information about server communication. This sample webservice is provided by Wikitude and returns random dummy places near given location

var ServerInformation = {

//POIDATA_SERVER: "https://api.getwemap.com/v2.2/EMM?ltoken=at5788eb835a81c9.75928685&emm_id=2069&center_latitude=48.12129&longitude_delta=22.01660&limit=400",

//POIDATA_SERVER_ARG_LAT: "center_latitude",

//POIDATA_SERVER_ARG_LON: "center_longitude",

//POIDATA_SERVER_ARG_NR_POIS: "nrPois"

};

 

// implementation of AR-Experience (aka "World")

var World = {

// you may request new data from server periodically, however: in this sample data is only requested once

isRequestingData: false,

 

// true once data was fetched

initiallyLoadedData: false,

 

// different POI-Marker assets

markerDrawable_idle: null,

markerDrawable_selected: null,

markerDrawable_directionIndicator: null,

 

// list of AR.GeoObjects that are currently shown in the scene / World

markerList: ,

 

// The last selected marker

currentMarker: null,

 

// called to inject new POI data

loadPoisFromJsonData: function loadPoisFromJsonDataFn(poiData) {

        //World.updateStatusMessage('loading' + (typeof poiData));

        //World.updateStatusMessage('loading' + (poiData.hasOwnProperty("pinpoints")));

        //World.updateStatusMessage('loading' + (poiData.pinpoints.name));

        

// empty list of visible markers

World.markerList = ;

 

// start loading marker assets

World.markerDrawable_idle = new AR.ImageResource("assets/marker_idle.png");

World.markerDrawable_selected = new AR.ImageResource("assets/marker_selected.png");

World.markerDrawable_directionIndicator = new AR.ImageResource("assets/indi.png");

         

        

        var data = poiData.pinpoints;

// loop through POI-information and create an AR.GeoObject (=Marker) per POI

for (var currentPlaceNr = 0; currentPlaceNr < data.length; currentPlaceNr++) {

            //World.updateStatusMessage('loading' + (typeof data.latitude));

            var singlePoi = {

"id": data.id,

"latitude": data.latitude,

"longitude": data.longitude,

"altitude": 0,

"name": data.name,

"description": data.description

            

};

 

World.markerList.push(new Marker(singlePoi));

          

}

 

World.updateStatusMessage(currentPlaceNr + ' places loaded');

},

 

// updates status message shon in small "i"-button aligned bottom center

updateStatusMessage: function updateStatusMessageFn(message, isWarning) {

 

var themeToUse = isWarning ? "e" : "c";

var iconToUse = isWarning ? "alert" : "info";

 

$("#status-message").html(message);

$("#popupInfoButton").buttonMarkup({

theme: themeToUse

});

$("#popupInfoButton").buttonMarkup({

icon: iconToUse

});

},

 

// location updates, fired every time you call architectView.setLocation() in native environment

// Note: You may set 'AR.context.onLocationChanged = null' to no longer receive location updates in World.locationChanged.

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

 

// request data if not already present

if (!World.initiallyLoadedData) {

World.requestDataFromServer(lat, lon);

World.initiallyLoadedData = true;

}

},

 

// fired when user pressed maker in cam

onMarkerSelected: function onMarkerSelectedFn(marker) {

 

// deselect previous marker

if (World.currentMarker) {

if (World.currentMarker.poiData.id == marker.poiData.id) {

return;

}

World.currentMarker.setDeselected(World.currentMarker);

}

 

// highlight current one

marker.setSelected(marker);

World.currentMarker = marker;

},

 

// screen was clicked but no geo-object was hit

onScreenClick: function onScreenClickFn() {

if (World.currentMarker) {

World.currentMarker.setDeselected(World.currentMarker);

}

World.currentMarker = null;

},

 

/*

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. 

 

This sample uses a test-service of Wikitude which randomly delivers geo-location data around the passed latitude/longitude user location.

You have to update 'ServerInformation' data to use your own own server. Also ensure the JSON format is same as in previous sample's 'myJsonData.js'-file.

*/

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

    

        

         var serverUrl = "https://api.getwemap.com/v2.2/EMM?ltoken=at5788eb835a81c9.75928685&emm_id=2069&center_latitude=48.12129&center_longitude=-9.88770&latitude_delta=18.35692&longitude_delta=22.01660&limit=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;

});

}

 

};

 

 

/* forward locationChanges to custom function */

AR.context.onLocationChanged = World.locationChanged;

 

/* forward clicks in empty area to World */

AR.context.onScreenClick = World.onScreenClick;

 

 

 

Please ensure that the format of the JSON in the dummy service is same as in your own service and your service is setup properly (e.g. CORS settings).
Also add logging informations to the experience and use remote webview debugging to figure out what the issue is.
The reason of "Requesting places from web-service" being shown is most likely a syntax or runtime issue.

Best regards,
Andreas

Hello,

There was indeed a syntax issue, sorry for distrurbing you with trivial bug.

P.