Start a new topic
Solved

avoiding the stacking of POIs

avoiding the stacking of POIs


Hi, 

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.
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,
Alex

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,
Andreas

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?

Thx

K. Ramesh

Hi there,

I had the same probelm :). You can solve it when you create a GeoLocation first and pass it the to the marker afterwards:
           
                singlePoi.latitude = parseFloat(poiData.pois.lat);
                singlePoi.longitude = parseFloat(poiData.pois.lng);
                singlePoi.altitude = 0;
               
                 singlePoi.location = new AR.GeoLocation(singlePoi.latitude, singlePoi.longitude, 0);
                 World.markerList.push(new Marker(singlePoi));
               
If you do it this way you have to change the marker.js to use the location

marker.js:
    var markerObject = new AR.GeoObject(poiData.location, {
        drawables: {
            cam:
            //indicator: this.directionIndicatorDrawable
        }
    });

then you can change the altitude by setting:

  World.markerList.poiData.location.altitude = heightValue;

Another thing that you might want to implement is :

var poi1 = new AR.GeoLocation(singlePoi.latitude,singlePoi.longitude);
                 dist = poi1.distanceToUser();
                    if (!isNaN(dist)){
                        singlePoi.distance = poi1.distanceToUser();
                       }

If you check for !isNaN you make sure the calcualtion worked fine and you get a valid number. I had trouble with that on iOS where my pois started jumping up and down :)

kind regards,

Alexander

 

 

Hi Alexander,

Thanks for the quick response.

One question: are you saying all the Markers need to be created first, added to World.markerList and then the altitude has to be assigned? If yes, wouldn't that created a little jump in the UI since the markers would already be visible in the UI before the altitude is changed? Also, I am maintaining the unclustered singlePOIs in a separate array through World.markerListUnclustered.push(singlePoi); for height calculation later.

I will give your suggestion a try and let you know how it goes.

K. Ramesh

Hi there,

you should assign a height right away.(otherwise the objects might jump)  When you use:

singlePoi.location = new AR.GeoLocation(singlePoi.latitude, singlePoi.longitude, singlePoi.height);

and additionally you can change the height afterwards within the dataFromWebservice.js easily using a call like

World.markerList.poiData.location.altitude = singlePoi.altitude;

And I would suggest to put the clustering function into the locationupdate area as well :

if (!World.alreadyRequestedData) {
             if (Tour.id > 0){
                World.requestDataFromServer(lat, lon);
                World.alreadyRequestedData = true;}
            }
        else
        {

         Do The Clustering

}

This way when you move around and come closer toward the POIs they get reclustered if necessary.

good luck !

Alexander

 

Hi Alexander,

Thanks again. I am still doing something wrong and it is not working for me. Let me explain my code flow:

Loop through json items from webservice

           create singlePoi per item

           singlePoi.location = new AR.GeoLocation

           World.markerListUnclustered.push(singlePoi);

end loop

           //DO the clustering

           World.placeGeoObjects  = ClusterHelper.createClusteredPlaces(55, World.userLocation, World.markerListUnclustered);

Loop through the cluster

          singlePoi=World.placeGeoObjects.places;

          singlePoi.altitude = World.getNewAltitude(singlePoi, j); ==> getNewAltitude method has the logic posted by you to calculate the height

          World.markerList.push(new Marker(singlePoi)); ====> This is where finally the Marker is created and added to the markerList

end loop

So, where exactly in the above sequence should I be setting the height so that it works? Thanks

K. Ramesh

 

 

Hi There,

There need to be two changes :

First:

//DO the clustering

           World.placeGeoObjects  = ClusterHelper.createClusteredPlaces(55, World.userLocation, World.markerListUnclustered);

Loop through the cluster

          singlePoi=World.placeGeoObjects.places;

          singlePoi.altitude = World.getNewAltitude(singlePoi, j); ==> getNewAltitude method has the logic posted by you to calculate the height

          //You need to set the altitude of the GeoObject  :      

          singlePoi.location.altitude = World.getNewAltitude(singlePoi, j);

          World.markerList.push(new Marker(singlePoi)); ====> This is where finally the Marker is created and added to the markerList

end loop

 

Second:

you have to change the marker.js File

there is a line :

var markerLocation = new AR.GeoLocation(poiData.latitude, poiData.longitude, poiData.altitude); (Line 16 of the marker.js Sample phonegap app)

This line is now obsolete an can be deleted because your poiData now has a poiData.location Geolocation Object

AND:

 var markerObject = new AR.GeoObject(markerLocation, {   (Line 54 of marker.js phonegap sample)

needs to be changed to

 var markerObject = new AR.GeoObject(poiData.location, {   (Line 54 of marker.js phonegap sample)

I hope you get it running. If not you should try to do some debugging. Pass some fixed values of height to see if it works and use colsole.log to debug output your caculations to see if the right vales get returned.

kind regards,

Alexander

Hi Alexander,

Sorry to bother you again. I had already done the changes as suggested by you and had done debugging also. For some reason it doesn't seem to work for me. I have tried hard coding the altitude for one of the POIs, even that is not working.

            for (var i=0; i<World.placeGeoObjects.length; i++) {
            //go through all items in each cluster
                for (var j=0; j<World.placeGeoObjects.places.length; j++) {
                    singlePoi = World.placeGeoObjects.places;
                    // the singlePoi altitude is originally 0
                    // it will be increased by 250 for each item remaining in the cluster
                    try{
                        singlePoi.altitude = World.getNewAltitude(singlePoi, j);
                        singlePoi.location.altitude = singlePoi.altitude;
                    }catch(e){
                        alert(e.message);
                    }
                    
                    if (singlePoi.title.indexOf('Blah Blah') != -1) {
                        singlePoi.location.altitude = 1500;  ===> hard coding the altitude for one POI
                    }
                    World.markerList.push(new Marker(singlePoi));
                }
            }

I have done the marker.js change also through this line: var markerLocation = poiData.location;. This is slightly different than what you had suggested but it should be fine. Is there something else I could be missing. I read somewhere in the forum that the accuracy that is received by onLocationChanged matters for altitude setting. Does it?

I really appreciate your help. Thanks

K. Ramesh

Hi,

you could try to work it out step by step.

First take the marker.js an do

var markerLocation = new AR.GeoLocation(poiData.latitude, poiData.longitude, 250);

if this works then you can try the next change like :

var markerLocation = new AR.GeoLocation(poiData.latitude, poiData.longitude, 0);

markerLocation.altitude = 250;

if this works then you can set

markerLocation = poiData.location;

poiData.location.altitude = 250;

and so on, try to make as little change as possible from the original to see where the problem lies.

kind regards,

Alexaner

I added the below code in the markerObject creation where I am increasing the altitude on a click. Even this is not working! The alert shows up corretly and the altitude number keeps increasing by 500. But the marker remains at the same height!

     markerObject = new AR.GeoObject(markerLocation, {
            drawables: {
                cam: ,
                indicator: this.directionIndicatorDrawable
            }
        });
        if (this.poiData.title.indexOf('Pai') != -1) {
            markerObject.onClick = function() {
                alert(markerObject.locations.altitude);
                markerObject.locations.altitude = markerObject.locations.altitude+500;
            };
        }

Hi Alexander,

Do you have any feedback based on my latest reply? I know I am bothering you, but I am stuck and no one else,  including Wikitude support team, seem to have an answer. Please help.

Thx

K. Ramesh

Hello Andreas,

Can you guys help out? Alexander gave some good leads on the issue. Apparently it is working for him. But whatever I have tried, it doesn't seem to work for me. I have provided enough details on the various thigs I have tried. Anything else I need to try to make this altitude thing work correctly?

Why is it so difficult to get answers from Wikitude support team? I know I am still on the trial version, but without getting the issues sorted out, how can I decide to buy the paid version? Please help out.

K. Ramesh

Hi there,

I was a little busy lately :)

I checked your code and found something:
ert shows up corretly and the altitude number keeps increasing by 500. But the marker remains at the same height!

     markerObject = new AR.GeoObject(markerLocation, {
            drawables: {
                cam: ,
                indicator: this.directionIndicatorDrawable
            }
        });
        if (this.poiData.title.indexOf('Pai') != -1) {
            markerObject.onClick = function() {
                alert(markerObject.locations.altitude);
                markerObject.locations.altitude = markerObject.locations.altitude+500;
            };
        }

there is no locations array. Try to replace the highlighted lines with :

alert(markerLocation.altitude);
markerLocation.altitude = markerLocation.altitude + 50;

That should do the trick.

regards,

Alexander

 
Login or Signup to post a comment