Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 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

share|improve this answer
    
Note that OpenLayers.Popup.AnchoredBubble is deprecated now, use OpenLayers.Popup.Anchored instead. –  Mahdi Nov 25 '13 at 10:39

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

share|improve this answer
    
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? –  Pure.Krome Nov 10 '12 at 2:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.