[OpenLayers-Users] Popups that follow the mousepointer

Alexandre Dube adube at mapgears.com
Tue Nov 18 08:37:17 EST 2008


Hi Trond,

I had the exact problem and resolved it by using 2 fixed positions of 
popup depending where the X center position of the feature is located. 
If the feature is more on the right, the popup pops to the left. If it's 
on the left, it pops at the right. Here's the code below. I only tested 
it with point features but it should work for polygons also.

Hope this helps,

Alexandre


// SOME CODE

var oPopupPosLeft = new OpenLayers.Pixel( 45,5);
var oPopupPosRight = new OpenLayers.Pixel( 0,5);

// this is in the onModificationStart: function(oFeature)
.....
addRoadFormPopup(oFeature);
.....

function addRoadFormPopup(feature) {
var szHTML = "<div style='font-size:.8em'><h1>Road form</h1>"
+ "<div id='roadFormInPopup'></div>"
+ "</div>";
var oPopupLonLatPos;

// calculate where (left or right) the popup will appear
nMapXCenter = oMap.getExtent().getCenterPixel().x;
nMapWidth = document.getElementById("map").clientWidth;
nFeatureXPos = feature.geometry.getBounds().getCenterPixel().x;
if (nFeatureXPos >= nMapXCenter) {
oPopupLonLatPos = oMap.getLonLatFromPixel(oPopupPosLeft);
} else {
// TODO : should register "onMapResize" or something like that instead
// of recalculating all the time
oPopupPosRight.x = nMapWidth - 25;
oPopupLonLatPos = oMap.getLonLatFromPixel(oPopupPosRight);
}

popup = new OpenLayers.Popup.AnchoredBubble(
"chicken",
oPopupLonLatPos,
new OpenLayers.Size(250,350),
szHTML,
null, true, onRoadFormPopupClose);
feature.popup = popup;
oMap.addPopup(popup);

// move roadForm <div> inside popup
oRoadFormDiv = document.getElementById('roadFormDiv');
oDiv = document.getElementById('roadFormInPopup');
oDiv.appendChild(oRoadFormDiv);
}

Trond Michelsen wrote:
> On Mon, Nov 17, 2008 at 10:31:40AM -0500, Amos Hayes wrote:
>   
>> Hello Trond. I was having the same problem and tried to write around  
>> it by moving the popup corner a number of pixels horizontally and  
>> vertically to avoid covering the point. Unfortunately, my algorithm  
>> for guessing which quadrant the popup will appear in is flawed for  
>> points near the very center of the map. If you can fix it or find a  
>> better way (I have yet to feel capable enough to explore the  
>> OpenLayers popup code), I'd love to see it. :)
>>     
>
> Thanks for the example. Unfortunately it didn't quite work for my
> case. I forgot to mention that the layer I'm using SelectFeature on is
> a polygon layer, so the mousepointer could be quite far from the
> center of the polygon.
>
> It occured to me, though, that I could just set the position to a few
> pixels off the mouseposition instead. However, I'm unable to find the
> event-object that would have the .xy-property with the mouseposition
> within the SelectFeature-object.
>
>   


-- 
Alexandre Dubé
Mapgears
www.mapgears.com




More information about the Users mailing list