wikitude 3.01: adding some features between examples did not work properly

Question

i downloaded the SDK of Wikitude 3.1, installed the samples into my Eclipse workspace and on my Gnexus everything works. I divide the questions in points so could be easier to answer:

I added the "onMarkerSelectedFn" method into the "limitingVisiblePois.js" file because i wanted to have my POIs clickable and when clicked, appear the information page like the 5.1 example. I added the method but it doesn't work and i haven't understand where i'm making mistakes. Each other file is the same for the 5.x samples.

Code of "limitingVisiblePois.js" edited by me

var World = {

    markerDrawable_idle: new AR.ImageResource("assets/marker_idle.png"),
    markerDrawable_selected: new AR.ImageResource("assets/marker_selected.png"),
    markerDrawable_directionIndicator: new AR.ImageResource("assets/indi.png"),

    markerList: [],

    // called to inject new POI data
    loadPoisFromJsonData: function loadPoisFromJsonDataFn(poiData) {

        PoiRadar.show();

        document.getElementById("statusElement").innerHTML = 'Loading JSON objects';

        var poiImage = new AR.ImageResource("img/marker.png", {
            onError: World.errorLoadingImage
        });

        // TODO: call single POI-creation statement instead
        for (var i = 0; i < poiData.length; i++) {

            var singlePoi = {
                //EDIT BRUS: adding the ID of each POIs
                "id": poiData[i].id,
                "latitude": parseFloat(poiData[i].latitude),
                "longitude": parseFloat(poiData[i].longitude),
                "altitude": parseFloat(poiData[i].altitude),
                "title": poiData[i].name,
                "description": poiData[i].description
            };

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

        document.getElementById("statusElement").innerHTML = 'JSON objects loaded properly';

    },

    //  user's latest known location, accessible via userLocation.latitude, userLocation.longitude, userLocation.altitude
    userLocation: null,

    // location updates
    locationChanged: function locationChangedFn(lat, lon, alt, acc) {
        World.userLocation = {
            'latitude': lat,
            'longitude': lon,
            'altitude': alt,
            'accuracy': acc
        };
    },
    //EDIT BRUS: Adding onMarkerSelected function
    onMarkerSelected: function onMarkerSelectedFn(marker) {
        // notify native environment
        document.location = "architectsdk://markerselected?id=" + marker.poiData.id;
    },

    // called from slider.js every time the slider value changes
    onSliderChanged: function onSliderChangedFn(value) {
        if (value > 0) {
            var valueMeters = value * 1000;
            PoiRadar.setMaxDistance(valueMeters);
            AR.context.scene.cullingDistance = valueMeters;
        }
    }

};

// forward locationChanges to custom function
AR.context.onLocationChanged = World.locationChanged;

2) I wasn't able to understand where the POIs latlong coordinates where declareated. In the same code posted ahead, there is the function

loadPoisFromJsonData: function loadPoisFromJsonDataFn(poiData)

but i don't understand how the poiData are taken.

I used the last 3.1 SDK in Android and phonegap.

thanks in advance,

Kind regards

Brus

Answer 1

PhoneGap Plugin samples are yet not in sync with those from the native SDK.

Whereat the current "HelloWorld" sample in PhoneGap Plugin requests POI-Data from a webservice the sample you pointed out is from the Android SDK and passes POI-data from native Android via "architectView.callJavaScript('loadPoisFromJsonData(...)')".

Both are making use of the same method to parse POI data, PhoneGap sample uses it e.g. that way

// 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(err) {
        alert("JSON error occured! " + err.message);
    })
        .complete(function() {});
}

You may just add these lines in your locationChanged implementation to use places from a dummy-webserver (don't forget to define 'alreadyRequestedData= false;' )

if (!World.alreadyRequestedData) {
 World.requestDataFromServer(lat, lon);
 World.alreadyRequestedData = true;
}

Kind regards, Andreas