Start a new topic

avoiding the stacking of POIs

avoiding the stacking of POIs

Hi Alexander,

Thanks for the code you have provided. I am trying to use the same and it appears that the altitude is getting calculated correctly (which I verified using alert statements). But, the POI markers still appear at the same height on the screen. The altitude does't seem to make any difference at all. I specifically hard coded the altitude of one of the POIs to 2000, but it still appeared at the same height as the other POIs. What else do I need to do to make the POIs stack up correctly?


K. Ramesh

Please also ensure your LocationService is passing valid altitude information.
In the example above you should always pass altitude "0.0f" in architectView.setLocation, otherwise experience may be clunky when GPS is poor and real altitude is inaccurate.

Kind regards,
Hi Renso,

you should try to increase the height with following command 

singlePoi.altitude =  250; 

or alternatively (if the icon disappears)

singlePoi.altitude =  5;

to make things easier, you can try if first without the clustering js file.

The problem that might arise ist that if your POI is very close to you a change of altitude 5 meter places the POI a little higher but a change of 250 meter puts it very hight (out of screen). But if the POI is very distant (2 km away) then the increase of 5 meter in altitude will almost not be recognizeable because the POI moves up only a little.

Therefore you need to check how far away the POI is towards the user and increase the height accordingly.

I did it this way:

 for (var j=0; j<World.placeGeoObjects.places.length; j++) {
       //get POI from World
            var singlePoi = World.placeGeoObjects.places;
            // Calculate distance to User
            var poi1 = new AR.GeoLocation(singlePoi.latitude,singlePoi.longitude);
            singlePoi.distance = poi1.distanceToUser();
            //The following algorithm calculates the height that needs to be added
            //to each poi in a cluster.
            //The multiplier variable j is being used to increase height even further (if more than two POIs
            //lie in the same direction and need to be lined up.)
            if (j>0){
                //below 50 m away from User
                singlePoi.altitude = height + 3;
            if (singlePoi.distance > 50)
               //more than 50 m away from User
               singlePoi.altitude =  21*j;
            if (singlePoi.distance > 100)
               //more than 100 m away from User
               singlePoi.altitude =  40*j;
            if (singlePoi.distance > 250)
               //more than 250 m away from User
               singlePoi.altitude =  90*j;
            if (singlePoi.distance > 500)
               singlePoi.altitude =  120*j;
            if (singlePoi.distance > 1000)
               singlePoi.altitude =  130*j;
          if (singlePoi.distance > 1500)
               singlePoi.altitude =  180*j;
            if (singlePoi.distance > 2000)
               singlePoi.altitude =  220*j;
           var height = singlePoi.altitude;
            // Add POIs to the world
            World.markerList.push(new Marker(singlePoi));

This is just an approximation which I tested out myself. I guess there is a better formula to calculate the height increase. But it works for me :)

Good luck

kind regards,


i'm working with wikitude and i ran to the same issue of stacking POIs then i modified de JS code for clustering and is working but when i increment the altitude of each POI don't work any idea of how can i increment the altitude to make them move up a little. Thanks in advance.


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,



Hi Luis!

AR.CONST.UNKOWN_ALTITUDE is used when there is no altitude information available. Any altitude information of GeoObjects are ignored when user's altitude is unknown.
In case you want to always use altitude-value (which is measured in meters away from sealevel for AR.Locations but relative to the user in AR.RelativeLocation) ensure your native location-strategy always sets architectView's altitude to a valid value, e.g. sets altitude to 0, so user is always at sea-level and altitude of POIs to 5 if you want to show them above eye-level.



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?


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,


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!

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,

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

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.



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,

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.


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 !!


Login or Signup to post a comment