Geek asks and answers

How can OpenLayers (OSM) launch a popup for a function?

I have a function identifier, I can capture the marker layer when loading GeoRSS, but I'm still not sure how to call a pop-up window for programmatic programming.

I will create a popup on demand if necessary, but it looks like I should get the identifier of the marker, as shown on the map, and trigger some kind of event on it. I tried using jQuery and throwing an event $(marker-id).click()on map elements, but this does not seem to work. What am I missing?

Since I was asked to enter the code, and since I assumed it was a template, here, where I still have:

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 made several jQuery templates and created me a good list of all the points that appear on the map. I know how to make a callback from a layer loadendand get a layer object, I know how to extract my layer from the map manually, I know how to do this from the layer collection and find my layer. So I can get any of these details about the popup, but I still don't know how to use the built-in DOM methods or this API to make it as simple as element.click()what I prefer to do.

+3
source share
2 answers

You do not need to click this function to open a popup.

. loadend GeoRSS, markers .

, , , :

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();

}
+4

fwiw , , - , .

//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;
}

, map , ,

+1

More articles:


All Articles