ThinkGeo.com    |     Documentation    |     Premium Support

Determining Popup Direction

#1

I am wondering if there may be a way to determine which direction the custom popup will go. I have styled my popup so that there is a point leading to the marker. I now need a way to determine if the popup is going left or right of the marker so that I can set the style correctly.



#2




 


Jeremy,


The map is simply divided into 4 pieces (2*2) and the popup's direction is according to which phase the marker is within. For example if the marker is within the upper left one, the popup will always on the lower right side of the marker, like what shows on the following graph in which blue point represents a marker and the pink rectangle represents the popup.



Thanks,


Ben






#3

Is this handled in javascript or is there a css style that is set so that the popup knows which way it needs to go?

#4

Is there an event that I can listen for that will allow me to change the style of my popup?

#5

Jeremy, 
  
 It’s handled in javascript in OpenLayers. For now we don’t have an event to pass the direction out and change the style,  that’s a very good suggestion though and I’ve added it to the tracking system,  it might be available in the upcoming version I think.  Thanks for reminding! 
  
 Thanks, 
  
 Ben

#6

Has there been any update on this?  I would really like to customize our VauleItemStyle-based popups using custom html, but I cannot create one similar to the CloudPop without being able to know which "phase" of the viewport I'm in.


Thanks!



#7

Jeremy, 
  
 Thanks for following up this post. Please allow me to confirm something with you; I’m not sure where do you want to know the direction of the popup? on the client side or server side? While you panning around, it’s bad user experience to postback an event to the server. So I think it’s the event on the client side. If it’s client side; what informations do you want? Because I don’t know the detail requirement in your application. Hope you provide us your requirement; so that we can discuss to provide you a good solution. 
  
 Thanks, 
 Howard

#8

I want to be able to accomplish the following when hovering over markers using CustomPopups based on our own custom HTML and styles/images similar to the ThinkGeo CloudPop.  The main thing I need is the "Phase" number of the viewport when hovering over markers on the map.  Knowing this I could apply the appropriate style and get the marker's popup to show up in the right direction.  Any help would be appreciated.




#9

Jeremy,



I see; it can be achieved by rewrite OpenLayers library; please attache the following code to the header tag in the web page;

var OnMapCreating = function(map) {
            Class.Extent(OpenLayers.Popup.Anchored.prototype, {
                show: function() {
                    this.updatePosition();
                    OpenLayers.Popup.prototype.show.apply(this, arguments);
                    this.OnMovedCompleted(this.relativePosition);
                },

                OnMovedCompleted: function(relativePosition) {
                    this.div.childNodes[0].childNodes[0].innerHTML = relativePosition;
                }
            });
        }


The parameter "relativePosition" in the code is the relative position information of popup, for example, if you get “bl”, it means bottom and left. 



Note the above code is only suitable for CustomPopup.



If you have any more questions, please let me know.



Thanks,

Howard



#10

Fantastic!  Thanks for the excellent support! 
  
 Jeremy

#11

Jeremy, 
  
 No problem. We are sorry to delay your requirement for a long time. Thanks for your understanding and let me know if you have more questions. 
  
 Thanks, 
 Howard