-1

I am using OpenLayers 2.11 and would like to place a marker on my map which, when clicked on, would open a popup which then loads a local web page. I would like the popup to be located in the lower, left hand corner of the screen regardless of zoom level or map scrolling by the user.

I have been unable to locate an example of how to perform this.

closed as off-topic by PolyGeo Feb 12 at 21:15

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "When seeking help to debug/write/improve code always provide the desired behavior, a specific problem/error and the shortest code (as formatted text, not pictures) needed to reproduce it in the question body. Providing a clear problem statement and a code attempt helps others to help you." – PolyGeo
If this question can be reworded to fit the rules in the help center, please edit the question.

1

You could make use of the built-in popup class in OpenLayers, doing something like this:

var poSize = new OpenLayers.Size(<Width>, <Height>);

var poPrompt = new OpenLayers.Popup('name',
                                    null,
                                    poSize,
                                    '',
                                    false);

poPrompt.keepInMap = true;
poPrompt.setOpacity(0.9);

//Make popup static so it doesn't pan with map.
poPrompt.div.style.position = 'fixed';
map.addPopup(poPrompt);

poPrompt.setContentHTML('msg');

var llPixel = new OpenLayers.Pixel(<left>, <top>);

poPrompt.moveTo(llPixel);

If you are using the (deprecated) Marker layer type, you would need to trigger this code from some sort of click handler on the layer. However, it is recommended that you use a Vector layer type for markers now. You could add a select control to the layer to trigger the popup.

It would be nice if you could use a popup event to trigger an ajax callback to retrieve content, but the popup class doesn't seem to have any useful events that could be used.

  • This was very helpful, thank you! For some reason, I am unable to display an HTML document within the popup, like an iframe. Thank you for your assistance. – GIS Student Apr 8 '14 at 21:56
  • Alternatively, just create a hidden floating div with absolute positioning and display it when a feature is selected. The advantage of the popup system is that it works cleanly with map mouse events (you can drag over a popup). – drunkenwagoner Apr 9 '14 at 1:08
  • That is an excellent idea. Is this something I need to use jQuery for? Can you link an example to me? Thank you for the help. – GIS Student Apr 11 '14 at 21:11

Not the answer you're looking for? Browse other questions tagged or ask your own question.