Wikitude

avoiding the stacking of POIs

I wanted to know how can i manage to avoid the stacking of POIs if they in a straight line. Something like the junaio plugin does incrementing the height of POIs that are in straight line so that each poi is visible.

 

Any ideas are welcome.

Hi there!

There are several ways to handle this issue in the Wikitude SDK. 

You may e.g. cluster the places that are in same line/angle (compare http://goo.gl/an1iG, have a look at the imported clustering.js for details, orange/yellow: places that are clustered and replaced by average position = "C"-flat; Pink flags have enough space in the declared angle and are displayed at original location)

You can use this, or more sophisticated other algorithms, to cluster places around user every x meters of location changes.

Hope that helps.

Kind regards,
Andi

I dont want to cluster the POIs...I want to increment the height of the POIs that are being stacked. Something like this http://www.mobiadnews.com/wp-content/uploads/2011/01/junaio.jpg 

How can I calculate that the drawables are in straight line for the user and then increment the altitude(or height of the drawable if there is some funtion for that) of the POI. Sorry for being so noob I am really new to Maps, Latitude and Longitude Algorithms plus the Js.

Hi Andi,

Thanks for the support....and also for editing your script...really appreciate your input...Can you tell me the logic behind the bubble angle... what does it calculate and how does it effect the calculation of the clusters?? I noticed you were dividing 360/bubble angle which means that increasing the bubble angle will decrease the number of stacked POIs. 

But if you coudl explain the logic behind it that would be awesome !!

 

Thanks.

Hi again,

The bubble angle regulates the space that is "consumed" by a poi marker.
Think of cake-pieces whereat the user is sitting in the center of the cake ;-) 
Places are mapped to the "angle"-slices.

You may adjust the slice-size by changing the angle.
You can then decide how you like to manage the mapped places.

Please keep in mind that the provided JS is just a quick sample, you may use way fancier algorithms to solve your issue.

Cheers,
Andi

Hi,

Thank you for your support, now I can write my own algorithm to manage the altitude of the POIs.

Now I have hit some other major issue....but that I should post in a new thread.

 

Thanks Again Andi

Hi again,

As described in my last mail, the used clustering.js helper may help you to find out which pois are in same angle.
Just call the cluserize-method and you'll get an array with places in same angle. You can then increment the altitude of affected geoObjects.

Unfortunately the provided js is just a prototype and I do not have a full stack-sample project in place but I hope the js and hints help you.

Cheers,
Andi

sorry, i still didn't understand which value that i must input to clusterAngle variable? and what the function of this variable?

Hi there!

Angle can be between 1 and 360, whereat something around 20 is preferred.

Just imagine you're sitting in the center of a circle. The (horizontal) view-angle of your camera is usually around 55 degrees.
Depending on the size of your POI-markers they may overlap if they are too close to each other in cam-angle.

Choose clusterAngle depending on your marker's width, it will then map it to the closest "x-degree-angle-slice" and create a cluster if necessary.
Keep in mind that this is just a basic implementation, you may also adjust altitude value of places, alpha value or marker size depending on the markers position.

Kind regards,
Andreas

i still didn't understand how to use clustering.js , i try to call the function in my code like this:

 

places = new Array(place1, place2, place3, place4);

/* create helper array to create goeObjects out of given information */

var placeGeoObjects = new Array();

placeGeoObjects = createClusteredPlaces(20,SimpleRadar.currentLoc ,places);

for (var i = 0; i < places.length; i++) {

/* this line causes creation of object in cam and also rendering in cam / openGL */

placeGeoObjects = new AR.GeoObject(places, {drawables: {cam: places, radar: radarCircle}} ); }

 

but it make my poi didn't appear. what wrong with my code?

 

 

Hi there!

Please have a look at the clustering.js to see how it works. 

In your code you appy the clustering and store it in "placeGeoObjects", right afterwards you then overwrite the information by setting placeGeoObjects in a loop (?!)
I guess you mixed up places and placeGeoObjects.

Kind regards,
Andreas 

 

Hi,

I've a doubt quite basic about the altitude as a consequence of this example.... Whether the altitude of the user is supposed to be unknown (that's to say -32768m or equal to the constant  AR.CONST.UNKNOWN_ALTITUDE), when we do something like geoObject2.locations.altitude++; or geoObject2.locations.altitude = 1; the increment applied is going to be relative to the user altitude (-32767m) or to the sea altitude?

Thanks!!

Hi,

i just developed a working sample which uses the clustering based on the Wikitude Sample. You can use it to integrate it into the PhoneGap Sample of wikitude 3.1. You just have to add the modified clustering.js and poisFromWebService.js which are attachted to this message.

(dont forget to include <script type="text/javascript" src="js/clustering.js"></script>  in the <HEAD> area of the index.html inside the world folder :)

kind regards,

Alexander