CODEWITHSUNDEEP
openlayers
whiterook6
whiterook6

Reputation: 3534

How do I get the DOM element from openlayers vector feature

(I've searched through the post How to get Event or DOM element of selected feature in OpenLayers without much success. They only solve the problem with events, it seems.)

Our website is using qTip2 for tooltips and I want to have popups for the features in my vector layer. To make life easier, I want to use the qTip2 tooltip instead of the openlayers popup (so we can use our own styling.)

I need a reference to the DOM object when creating the feature so I can attach the qTip2 tooltip to it:

function onFeatureCreate(feature){
    var elem=?
    $(elem).qTip2(...);
}

How do I get the DOM object if I have the feature from the layer?

Upvotes: 2

Views: 1816

Answers (2)

user1483067
user1483067

Reputation: 41

If you want to find the position of the mouse or feature on hover so you can display a custom overlay, create a custom hover control and define the featurehighlighted function as follows:

var featureHoverControl = new OpenLayers.Control.SelectFeature([myLayer], {
    id: 'featureHoverControl',
    hover: true,
    autoActivate: true,
    highlightOnly: true,
    renderIntent: "temporary",
    eventListeners: {
       featurehighlighted: function(e) {
            // either use the mouse's position when the event was triggered
            var mouseXPosition = this.handlers.feature.evt.x;
            var mouseYPosition = this.handlers.feature.evt.y;

            // or retrieve the feature's center point
            var featureCenterLonLat = e.feature.geometry.bounds.getCenterLonLat();
            var featureCenterPoint = map.getPixelFromLonLat(featureCenterLonLat);

            // display your custom popup here
            // e.g. showTooltip(e.feature.attributes.name, featureCenterPoint.x, featureCenterPoint.y)
        }
        ,
        featureunhighlighted: function(e) {
            // hide your custom popup here
            // e.g. hideTooltip()
        }
    }
});
map.addControl(featureHoverControl);

If you require access to the SVG element representing your layer/feature (in the event you are using a third-party library and you don't feel like modifying the source code), use either of the following lines (depending if you require the layer or feature):

var layerElement = map.getLayersByName("My Layer")[0].features.root;
var layerElementId = map.getLayersByName("My Layer")[0].features.root.id;
var featureElementId = map.getLayersByName("My Layer")[0].getFeaturesByAttribute("name","My Feature Name")[0].geometry.components[0].id;

Note that since this only grabs the element's id, you'll still need to use an appropriate method to grab a reference to the element itself. Something like either of the following:

var elementReference1 = document.getElementById(featureElementId);
var elementReference2 = jQuery('#'+featureElementId)[0];

Upvotes: 1

Dayan Moreno Leon
Dayan Moreno Leon

Reputation: 5435

if your features are data driven you can add some metadata to the feature attributes object and this should be mapped to dom attributes then you can use those attributes to query i think thats should work

Upvotes: 0

Related Questions