[OpenLayers-Users] Anchor popup on mouse click location?

jfranklin jfranklin at hmgeo.com
Fri Feb 11 14:41:19 EST 2011


I currently have a vector layer (polylines via WFS/geoserver),
representing trails for a map I'm currently working on.

I'm using popups to display feature information.  That part is working
fine, and I can have various attributes about the trail in question
displayed in the popup correctly.

However, the anchoring seems wiggy.  It seems that the popup is
anchoring to the center of the polyline feature.  That's fine for short
lines, but with long ones weird results occur, such as the map extremely
far away from the current view.

So is there any way to anchor the popup to the location where the mouse
was clicked?  Code in question is below...

// trails vector layer
    var trails = new OpenLayers.Layer.Vector("Trails", {
        styleMap: style_trail,
        projection: new OpenLayers.Projection("EPSG:4326"),
        strategies: [new OpenLayers.Strategy.BBOX()],
        protocol: new OpenLayers.Protocol.WFS({
            url: "http://example.com:8080/geoserver/wfs",
                srsName: "EPSG:4326",
            featureType: "psicc_nfs_trails",
            extractAttributes:true,
            featureNS: "pb_trails"
        })
    });

//popup code
          var selectControl = new
OpenLayers.Control.SelectFeature(trails,{onSelect: onFeatureSelect,
onUnselect: onFeatureUnselect});
            map.addControl(selectControl);
            selectControl.activate();
            function onPopupClose(evt) {
                 selectControl.unselect(selectedFeature);
             }

         function onFeatureSelect(feature) {
             selectedFeature = feature;
             popup = new OpenLayers.Popup.FramedCloud("trailinfo",

feature.geometry.getBounds().getCenterLonLat(),
                                      new OpenLayers.Size(100,200),
                      "Trail Name:  " + feature.attributes.name, null,
true, onPopupClose);
             feature.popup = popup;
             map.addPopup(popup);
         }
         function onFeatureUnselect(feature) {
             map.removePopup(feature.popup);
             feature.popup.destroy();
             feature.popup = null;
         }



More information about the Users mailing list