3

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?

2 Answers 2

6

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

2
  • 1
    Note that OpenLayers.Popup.AnchoredBubble is deprecated now, use OpenLayers.Popup.Anchored instead.
    – Mahdi
    Nov 25, 2013 at 10:39
  • 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);. Oct 16, 2015 at 8:24
3

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

1
  • 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, 2012 at 2:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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