javascriptandroidwikitude

Wikitude POI won't appear on Android


I created an Android Studio project and imported the Wikitude sample (Wikitude SDK 5.0) into the assets folder. I'm new in JavaScript and Wikitude, but I think I'm able to get the GPS coords, but no POI appear.

Does any of you have any experience with Wikitude on Android ? How can I make the POI appear? The official documentation won't help.

Sorry for the long source code, but I'm stuck for 2 days now and can't figure out any good solution :( Your help is appreciated!

POILOCATION.js:

// implementation of AR-Experience (aka "World")
var World = {
// true once data was fetched
initiallyLoadedData: false,



// POI-Marker asset
markerDrawable_idle: null,

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

    /*
        The example Image Recognition already explained how images are loaded and displayed in the augmented reality view. This sample loads an AR.ImageResource when the World variable was defined. It will be reused for each marker that we will create afterwards.
    */
    World.markerDrawable_idle = new AR.ImageResource("assets/marker_idle.png");

    /*
        For creating the marker a new object AR.GeoObject will be created at the specified geolocation. An AR.GeoObject connects one or more AR.GeoLocations with multiple AR.Drawables. The AR.Drawables can be defined for multiple targets. A target can be the camera, the radar or a direction indicator. Both the radar and direction indicators will be covered in more detail in later examples.
    */
    var markerLocation = new AR.GeoLocation(poiData.latitude, poiData.longitude, poiData.altitude);
    var markerImageDrawable_idle = new AR.ImageDrawable(World.markerDrawable_idle, 2.5, {
        zOrder: 0,
        opacity: 1.0
    });

    // create GeoObject
    var markerObject = new AR.GeoObject(markerLocation, {
        drawables: {
            cam: [markerImageDrawable_idle]
        }
    });

    // Updates status message as a user feedback that everything was loaded properly.
    World.updateStatusMessage('1 place loaded');
},

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
locationChanged: function locationChangedFn(lat, lon, alt, acc) {
    if (!World.initiallyLoadedData) {
        // creates a poi object with a random location near the user's location
        var poiData = {
            "id": 1,
            "longitude": (lon + (Math.random() / 5 - 0.1)),
            "latitude": (lat + (Math.random() / 5 - 0.1)),
            "altitude": 100.0
        };

        World.loadPoisFromJsonData(poiData);
        World.initiallyLoadedData = true;
    }
},
};

/*  Set a custom function where location changes are forwarded to. There is     also a possibility to set AR.context.onLocationChanged to null. In this case the     function will not be called anymore and no further location updates will be     received. 
*/
//AR.context.onLocationChanged = World.locationChanged;
AR.context.onLocationChanged = locationChangedFn(lat, lon, alt, acc) {
    console.log("asdsadasdsadasasdadaello World");

                                if (!World.initiallyLoadedData) {
                                    // creates a poi object with a random location near the user's location
                                    var poiData = {
                                        "id": 1,
                                        "longitude": (lon + (Math.random() / 5 - 0.1)),
                                        "latitude": (lat + (Math.random() / 5 - 0.1)),
                                        "altitude": 100.0
                                    };
   world.markerDrawable_idle = new AR.ImageResource("assets/marker_idle.png");

                                        /*
                                            For creating the marker a new object AR.GeoObject will be created at the specified geolocation. An AR.GeoObject connects one or more AR.GeoLocations with multiple AR.Drawables. The AR.Drawables can be defined for multiple targets. A target can be the camera, the radar or a direction indicator. Both the radar and direction indicators will be covered in more detail in later examples.
                                        */
                                        var markerLocation = new AR.GeoLocation(poiData.latitude, poiData.longitude, poiData.altitude);
                                        var markerImageDrawable_idle = new AR.ImageDrawable(World.markerDrawable_idle, 2.5, {
                                            zOrder: 0,
                                            opacity: 1.0
                                        });

                                        // create GeoObject
                                        var markerObject = new AR.GeoObject(markerLocation, {
                                            drawables: {
                                                cam: [markerImageDrawable_idle]
                                            }
                                        });

                                        // Updates status message as a user feedback that everything was loaded properly.
  World.updateStatusMessage('1 place loaded');
        World.initiallyLoadedData = true;
}};

Solution

  • Ok, I found the solution: after I set up a GPS location update as normal in Android, I forgot to add the "architectView.setLocation" line:

        private void makeUseOfNewLocation(Location location) {
        try {
            architectView.setLocation(location.getLatitude(), location.getLongitude(), location.getAltitude(), location.getAccuracy());
            this.architectView.load("poi_1/index.html");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    

    Now, everything works perfectly.