Wikitude

Changing renderingOrder of overlapping POI

Hello,

I've customized the Radar example to bring to top the selected POI and resolve overlapping issue.

I've tried to set the renderingOrder of my POIs but with no effect.

Here are my new functions setSelected and setDeselected.

Marker.prototype.setSelected = function(marker) {
    var markerOldOrder = marker.markerOldOrder;
    marker.isSelected = true;
    marker.renderingOrder =  World.markerList.length ;
    alert("Selected old order: " +markerOldOrder +" new order:"+ marker.renderingOrder);
}

Marker.prototype.setDeselected = function(marker) {
    var markerOldOrder= marker.markerOldOrder;
    marker.isSelected = false;
    marker.renderingOrder =  marker.markerOldOrder -1;
    alert("Deselected old order: " +markerOldOrder +" new order:"+ marker.renderingOrder);
}

in the alert the markerOldOrder is always undefined !!

Thanks in advance for your help

Is there no solution to this problem?

I'm not seeing any code that sets the marker.markerOldOrder property thus it is undefined.

You can test if javascript is working and use debugging tools if you open your world inside a desktop browser. Just make sure to include the ade.js that comes with the SDK. Once it loads click on the yellow/orange triangle in the lower right corner. It shows all created objects and you can call triggers on them.

Thanks for the answer Damm.

There were in fact a copy/past error in the code I had posted. Here is a correct version, I've also included ade.js to the index.html but the result is still the same. Even the alert returns a renderingOrder equal to 1000, the marker still in background.

 

Marker.prototype.setSelected = function(marker) {
    var markerOldOrder = marker.renderingOrder;
    marker.isSelected = true;
    marker.renderingOrder =  World.markerList.length +1000;
    alert("Selected old order: " +markerOldOrder +" new order:"+ marker.renderingOrder  );
}

Marker.prototype.setDeselected = function(marker) {
    var markerOldOrder= marker.renderingOrder;
    marker.isSelected = false;
    marker.renderingOrder =  markerOldOrder -1000;
    alert("Deselected old order: " +markerOldOrder +" new order:"+ marker.renderingOrder);
}

Have you verified that the renderingOrder property of the GeoObject (that represents your marker) is set correctly? This is best done by looking at the GeoObject's properties inside the ADE.

If the renderingOrder in the ADE is displayed correctly and is higher than the rest of the GeoObjects please post a complete sample that shows the problem. That way we can quickly verify if it is an issue on our side and resolve it.

That's right !!! 

I was trying to change the marker's renderingOrder, but I had to set this property on the markerObject of my marker in stead.

From the Radar sample code, I have changed it to the following

The constructor :

function Marker(poiData) {

....

    var markerObject = new AR.GeoObject(markerLocation, {
        drawables: {
            cam: ,
            indicator: this.directionIndicatorDrawable,
            radar: this.radardrawables
                                        
        }
    });

    this.markerObject = markerObject;
   return this;

}

Selecting marker method :

Marker.prototype.setSelected = function(marker) {
    marker.isSelected = true;
    

    //first deselect all pois, to put them in background
    for (var i = 0; i < World.markerList.length; i++) {
        var otherMarker =     World.markerList;
       Marker.prototype.setDeselected(otherMarker);
    }

    //then set the current marker's rendering order to top

    marker.markerObject.renderingOrder =100000;

}

Thank you very much for your help Damm.