What is the proper way in OpenLayers (OSM) to trigger a popup for a feature?

Question

I have the feature ID, I can grab the marker layer on GeoRSS loadend, but I'm still not sure how to cause the popup to appear programmatically.

I'll create the popup on demand if that's necessary, but it seems as though I should be able to get the id of the marker as drawn on the map and call some event on that. I've tried using jQuery and calling the $(marker-id).click() event on the map elements, but that doesn't seem to be working. What am I missing?

Since I was asked for code, and since I presumed it to be boilerplate, here's where I am so far:

map = new OpenLayers.Map('myMap'); 
map.addLayer(new OpenLayers.Layer.OSM()); 
map.addLayer(new OpenLayers.Layer.GeoRSS(name,url));

//I've done some stuff as well in re: projections and centering and 
//setting extents, but those really don't pertain to this question.

Elsewhere I've done a bit of jQuery templating and built me a nice list of all the points that are being shown on the map. I know how to do a callback from the layer loadend and get the layer object, I know how to retrieve my layer out of the map manually, I know how to iter over the layers collection and find my layer. So I can grab any of those details about the popup, but I still don't know how to go about using the built-in methods of the DOM or of this API to make it as easy as element.click() which is what I would prefer to do.

When you add a popup to a Popup's layer, its automatically open. Can you post a little source code of your development? — Fran Verona, Mar 31 '11 at 12:53
@Fran ~ I'm adding a georss layer and I just want to be able to make something like google's map page, where clicking on a link on the left makes the popup appear on the right. I really don't think that any of my code so-far would mean anything. It's quite literally something to build the thing on the left for display, and then for the map it's `map = new OpenLayers.Map('myMap'); map.addLayer(new OpenLayers.Layer.OSM()); map.addLayer(new OpenLayers.Layer.GeoRSS(name,url));` Any other code I've written would not pertain to the question at hand, I'm sure. — jcolebrand, Mar 31 '11 at 14:52

score 4 · Accepted Answer · answered Apr 04 '11 at 08:28

You don't have to click the feature to open a popup.

First you need a reference to the feature from the feature id. I would do that in the loadend event of the GeoRSS layer, using the markers property on the layer.

Assuming you have a reference to your feature, I would write a method which handles the automatic popup:

var popups = {}; // to be able to handle them later 

function addPopup(feature) {

var text = getHtmlContent(feature); // handle the content in a separate function.

var popupId = evt.xy.x + "," + evt.xy.y; 
var popup = popups[popupId];
if (!popup || !popup.map) {
    popup = new OpenLayers.Popup.Anchored(
        popupId,
        feature.lonlat,
        null,
        " ",
        null,
        true,
        function(evt) {
            delete popups[this.id];
            this.hide();
            OpenLayers.Event.stop(evt);
        }
    );
    popup.autoSize = true;
    popup.useInlineStyles = false;
    popups[popupId] = popup;
    feature.layer.map.addPopup(popup, true);
}
popup.setContentHTML(popup.contentHTML + text);
popup.show();

}

"Since I need to grab a reference to the information from the loadend event anyways" - what information is that? The feature specific information is stored in feature.attributes, and if you want layer information, you have feature.layer property to get it. The only information you need in the loadend event is the id of the feature, and I understand it as you have that? — Niklas Wulff, Apr 04 '11 at 15:57
err, scratch all that, yes yes, I have the html content already /facepalm... thanks again — jcolebrand, Apr 04 '11 at 16:05

score 1 · Answer 2 · answered Nov 04 '11 at 18:41

fwiw I finally came back to this and did something entirely different, but his answer was a good one.

//I have a list of boxes that contain the information on the map (think google maps)
$('.paginatedItem').live('mouseenter', onFeatureSelected).live('mouseleave',onFeatureUnselected);

function onFeatureSelected(event) {
    // I stuff the lookup attribute (I'm lazy) into a global
    // a global, because there can be only one
    hoveredItem = $(this).attr('lookup');

    /* Do something here to indicate the onhover */
    // find the layer pagination id
    var feature = findFeatureById(hoveredItem);

    if (feature) {

        // use the pagination id to find the event, and then trigger the click for that event to show the popup
        // also, pass a null event, since we don't necessarily have one. 
        feature.marker.events.listeners.click[0].func.call(feature, event)
    }
}
function onFeatureUnselected(event) {
    /* Do something here to indicate the onhover */
    // find the layer pagination id
    var feature = findFeatureById(hoveredItem);

    if (feature) {

        // use the pagination id to find the event, and then trigger the click for that event to show the popup
        // also, pass a null event, since we don't necessarily have one. 
        feature.marker.events.listeners.click[0].func.call(feature, event)
    }

    /* Do something here to stop the indication of the onhover */

    hoveredItem = null;
}

function findFeatureById(featureId) {
    for (var key in map.layers) {
        var layer = map.layers[key];
        if (layer.hasOwnProperty('features')) {
            for (var key1 in layer.features) {
                var feature = layer.features[key1];
                if (feature.hasOwnProperty('id') && feature.id == featureId) {
                    return feature;
                }
            }
        }
    }
    return null;
}

also note that I keep map as a global so I don't have to reacquire it everytime I want to use it

What is the proper way in OpenLayers (OSM) to trigger a popup for a feature?

2 Answers2