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 OpenLayers 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

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

• Mahdi: Note that OpenLayers.Popup.AnchoredBubble is deprecated now, use OpenLayers.Popup.Anchored instead.
• Nicolas Boisteault: If the feature's geometry is not a point, you won't have x,y. In this case you can use evt.feature.geometry.getBounds().getCenterLonLat() which will place the popup at the center of the feature. If you have a MousePosition control you can get current x,y with var lonlat = map.getLonLatFromPixel(map.getControlsByClass("OpenLayers.Control.MousePosition")[0].lastXy);.

Answer 2

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...

• Pure.Krome: Hi Aragon :) so adding in point.attributes on a vector feature means that .. when someone moves the mouse over the feature on the map ..a tooltip displays over that feature?