Start a new topic

How to create multiple Geo Objects with different markers

I'm looking to create multiple Geo Objects and have a different appearance for each marker, preferably just an image. I can't find any documentation on this. Would you have any examples of how to do this?


Thanks. For reference, below is how I did it. There's probably a more elegant way of implementing in the marker.js.


added to multiplepois.js


 

    loadPoisFromJsonData: function loadPoisFromJsonDataFn(poiData) {
        /* Empty list of visible markers. */
        World.markerList = [];

        /* Start loading marker assets. */


        World.markerDrawableIdle1 = new AR.ImageResource("assets/marker1.png", {
            onError: World.onError
        });
        World.markerDrawableSelected1 = new AR.ImageResource("assets/marker1_selected.png", {
            onError: World.onError
        });

        World.markerDrawableIdle2 = new AR.ImageResource("assets/marker2.png", {
            onError: World.onError
        });
        World.markerDrawableSelected2 = new AR.ImageResource("assets/marker2_selected.png", {
            onError: World.onError
        });

        World.markerDrawableIdle3 = new AR.ImageResource("assets/marker3.png", {
            onError: World.onError
        });
        World.markerDrawableSelected3 = new AR.ImageResource("assets/marker3_selected.png", {
            onError: World.onError
        });

        World.markerDrawableIdle4 = new AR.ImageResource("assets/marker4.png", {
            onError: World.onError
        });
        World.markerDrawableSelected4 = new AR.ImageResource("assets/marker4_selected.png", {
            onError: World.onError
        });

        World.markerDrawableIdle5 = new AR.ImageResource("assets/marker0.png", {
            onError: World.onError
        });
        World.markerDrawableSelected5 = new AR.ImageResource("assets/marker5_selected.png", {
            onError: World.onError
        });

        /* Loop through POI-information and create an AR.GeoObject (=Marker) per POI. */
        for (var currentPlaceNr = 0; currentPlaceNr < poiData.length; currentPlaceNr++) {
            var singlePoi = {
                "id": poiData[currentPlaceNr].id,
                "latitude": parseFloat(poiData[currentPlaceNr].latitude),
                "longitude": parseFloat(poiData[currentPlaceNr].longitude),
                "altitude": parseFloat(poiData[currentPlaceNr].altitude),
                "title": poiData[currentPlaceNr].name,
                "description": poiData[currentPlaceNr].description
            };

            /*
                To be able to deselect a marker while the user taps on the empty screen, the World object holds an
                 array that contains each marker.
            */
            World.markerList.push(new Marker(singlePoi));
        }

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

Removed the definition of the markerDrawable in marker.js and added the following:


 

   if (poiData.id == 1) {
        this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle1, 2.5, {
            zOrder: 0,
            opacity: 1,
            /*
                To react on user interaction, an onClick property can be set for each AR.Drawable. The property is a
                function which will be called each time the user taps on the drawable. The function called on each tap
                is returned from the following helper function defined in marker.js. The function returns a function
                which checks the selected state with the help of the variable isSelected and executes the appropriate
                function. The clicked marker is passed as an argument.
            */
            onClick: Marker.prototype.getOnClickTrigger(this)
        });

        /* Create an AR.ImageDrawable for the marker in selected state. */
        this.markerDrawableSelected = new AR.ImageDrawable(World.markerDrawableSelected1, 2.5, {
            zOrder: 0,
            opacity: 0.0,
            onClick: null
        });

    };

        if (poiData.id == 2) {
        this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle2, 2.5, {
            zOrder: 0,
            opacity: 1,
            /*
                To react on user interaction, an onClick property can be set for each AR.Drawable. The property is a
                function which will be called each time the user taps on the drawable. The function called on each tap
                is returned from the following helper function defined in marker.js. The function returns a function
                which checks the selected state with the help of the variable isSelected and executes the appropriate
                function. The clicked marker is passed as an argument.
            */
            onClick: Marker.prototype.getOnClickTrigger(this)
        });

        /* Create an AR.ImageDrawable for the marker in selected state. */
        this.markerDrawableSelected = new AR.ImageDrawable(World.markerDrawableSelected2, 2.5, {
            zOrder: 0,
            opacity: 0.0,
            onClick: null
        });

    };

    if (poiData.id == 3) {
        this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle3, 2.5, {
            zOrder: 0,
            opacity: 1,
            /*
                To react on user interaction, an onClick property can be set for each AR.Drawable. The property is a
                function which will be called each time the user taps on the drawable. The function called on each tap
                is returned from the following helper function defined in marker.js. The function returns a function
                which checks the selected state with the help of the variable isSelected and executes the appropriate
                function. The clicked marker is passed as an argument.
            */
            onClick: Marker.prototype.getOnClickTrigger(this)
        });

        /* Create an AR.ImageDrawable for the marker in selected state. */
        this.markerDrawableSelected = new AR.ImageDrawable(World.markerDrawableSelected3, 2.5, {
            zOrder: 0,
            opacity: 0.0,
            onClick: null
        });

    };

        if (poiData.id == 4) {
        this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle4, 2.5, {
            zOrder: 0,
            opacity: 1,
            /*
                To react on user interaction, an onClick property can be set for each AR.Drawable. The property is a
                function which will be called each time the user taps on the drawable. The function called on each tap
                is returned from the following helper function defined in marker.js. The function returns a function
                which checks the selected state with the help of the variable isSelected and executes the appropriate
                function. The clicked marker is passed as an argument.
            */
            onClick: Marker.prototype.getOnClickTrigger(this)
        });

        /* Create an AR.ImageDrawable for the marker in selected state. */
        this.markerDrawableSelected = new AR.ImageDrawable(World.markerDrawableSelected4, 2.5, {
            zOrder: 0,
            opacity: 0.0,
            onClick: null
        });
    };

    if (poiData.id == 5) {
        this.markerDrawableIdle = new AR.ImageDrawable(World.markerDrawableIdle5, 2.5, {
            zOrder: 0,
            opacity: 1,
            /*
                To react on user interaction, an onClick property can be set for each AR.Drawable. The property is a
                function which will be called each time the user taps on the drawable. The function called on each tap
                is returned from the following helper function defined in marker.js. The function returns a function
                which checks the selected state with the help of the variable isSelected and executes the appropriate
                function. The clicked marker is passed as an argument.
            */
            onClick: Marker.prototype.getOnClickTrigger(this)
        });

        /* Create an AR.ImageDrawable for the marker in selected state. */
        this.markerDrawableSelected = new AR.ImageDrawable(World.markerDrawableSelected5, 2.5, {
            zOrder: 0,
            opacity: 0.0,
            onClick: null
        });

    };

 

Hi,

We don't have a specific sample for this but you can have a look at this forum thread. This will help you understand.

Greetings
Eva

Hi Eva,


No these all show the same repeated image for the marker. I want to specify different images to use for each marker. 


James

Hi James,


I believe this is what you are looking for https://www.wikitude.com/external/doc/documentation/latest/android/poi.html#multiple-pois.


Thanks,

Eva

Attached is a design example. Please ignore the arrows in the middle

image

Login or Signup to post a comment