How to show a toolip over a feature with OpenLayers?

Question

This is a continuation (part 2) of this previously asked GIS question.

I have an array of objects. Each object has a name, some score and some Well Known Text.

For each object, I'm displaying the WTK over an OpenLayer map.

I'm trying to have a tooltip over each shape, but only when the mouse hovers over that shape/feature.

if I have this code here..

var data = [
    { 'aaaa', 100, <some WKT>' },
    { 'bbbb', 32, <some WKT>' },
    { 'cccc', 93, <some WKT>' },
    { 'dddd', 46, <some WKT>' } ]

and for each object in that array I need to generate the feature.. which is more or less like this..

var feature = format.read(data.WellKnownText);
shapeLayer.addFeatures(feature);

var highlightControl = new OpenLayers.Control.SelectFeature(shapeLayer, {
    hover: true,
    highlightOnly: true,
    renderIntent: "temporary"
});

map.addControl(highlightControl);
highlightControl.activate();

I'm guessing I need to define something after the renderIntent? Like onhover call this function?

Don't forget, i also need to pass to that function data.Name and data.Score ...

Any suggestions, folks?

Answer 1

I do not know if I understand correctly, but if you want to add some attributes to your feature so that using it later with some tooltip activity, you should check out this code.

.
.
.
var point = new OpenLayers.Feature.Vector(points, null, style);
point.attributes = {
      name: data[i].name,
      score: data[i].score,
      wkt: data[i].wkt
};

vector.addFeatures(point);

i hope it helps you...

Answer 2

you can listen for featurehighlighted and featureunhighlighted events of SelectFeature control, and accordingly create or remove popup.

At first, when creating features - set attributes for them (code sample is also posted by Aragon):

for (var i = 0, len = data.length; i < len; i++) {
    var feature = format.read(data[i].wkt);
    feature.attributes = {
        name: data[i].name,
        score: data[i].score
    }
    shapeLayer.addFeatures(feature);
}

Then, listen for select control's events. On feature highlight, create popup. Code should explain, how you can access attributes of selected feature.

highlightControl.events.on({
    featurehighlighted: function(evt) {

        var lonlat = new OpenLayers.LonLat(
            evt.feature.geometry.x,
            evt.feature.geometry.y
        );

        var html = 'Name: ' +
                   evt.feature.attributes.name + '<br />' +
                   'Score: ' + 
                   evt.feature.attributes.score;

        var popup = new OpenLayers.Popup.AnchoredBubble(
            'myPopup',
            lonlat,
            new OpenLayers.Size(150, 60),
            html, 
            {size: {w: 14, h: 14}, offset: {x: -7, y: -7}},
            false
        );

        evt.feature.popup = popup;
        map.addPopup(popup);
    },
    featureunhighlighted: function(evt) {
        map.removePopup(evt.feature.popup);
    }
});

On feature highlight, remove popup from map. Sorry, I'm not sure, is it also necessary to destroy popup:

        map.removePopup(evt.feature.popup);
        evt.feature.popup.destroy();
        evt.feature.popup = null;

You can find working example from http://jsfiddle.net/jSQrj/21/

As second alternative, you should be able to display tooltip for feature by defining 'title' in style. I've seen some working examples, but I haven't been able to get it to work myself. Look for 'title' in http://dev.openlayers.org/docs/files/OpenLayers/Feature/Vector-js.html and for 'Attribute Replacement Syntax' in http://docs.openlayers.org/library/feature_styling.html