3

I saw many examples of Feature Popup activated when the cursor is moved over a feature for OpenLayers 2.0 but none for OpenLayers 3.0.

Does anyone know how to do the following : http://jorix.github.io/OL-FeaturePopups/examples/feature-popups.html on OpenLayers 3.0 ?

1

2 Answers 2

7

This works on OL 3.10.1. This example assumes you already have a feature layer added to your map and are using bootstrap and Jquery.

For a solution without Jquery and Bootstrap see : OpenLayers 3 - Feature Popup without Jquery/Bootstrap

HTML

<div id="map" class="map"><div id="info"></div></div> 

CSS

#map {
  position: relative;
}

#info {
  position: absolute;
  height: 1px;
  width: 1px;
  z-index: 100;
}

.tooltip.in {
  opacity: 1;
  filter: alpha(opacity=100);
}

.tooltip.top .tooltip-arrow {
  border-top-color: white;
}

.tooltip-inner {
  border: 2px solid white;
}

JS

Here you need to replace feature.get('id') by whatever feature property you want to show on your popup (example: feature.get('name')).

var info = $('#info');
info.tooltip({
    animation: false,
    trigger: 'manual'
});

var displayFeatureInfo = function(pixel) {
    info.css({
        left: pixel[0] + 'px',
        top: (pixel[1] - 15) + 'px'
    });
    var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
        return feature;
    });
    if (feature) {
        info.tooltip('hide')
            .attr('data-original-title', feature.get('id'))
            .tooltip('fixTitle')
            .tooltip('show');
    } else {
        info.tooltip('hide');
    }
};

map.on('pointermove', function(evt) {
    if (evt.dragging) {
        info.tooltip('hide');
        return;
    }
    displayFeatureInfo(map.getEventPixel(evt.originalEvent));
});
1
  • 1
    Thanks for the code @Alexis Solved a problem that I couldn't find in hours :-)
    – Mapper
    Oct 18, 2015 at 16:39
2

Word of warning to future searchers. The accepted answer is only correct if you using bootstrap. Without it the code will fail on attempting the .tooltip() calls.

4
  • 1
    since this applies to an answer, it is best to leave it as a comment on that answer, rather than post it as a new answer
    – neuhausr
    Aug 31, 2016 at 13:40
  • 3
    I completely agree. However the stack overflow system forbids adding comments on posts that you didn't start until you have enough reputation so either I didn't mention the flaw that could trip people up or I had to break with convention and post an answer. I chose the later as more useful to the people of the future.
    – Saurbaum
    Aug 31, 2016 at 14:33
  • was wondering if it might be something like that. thanks for joining in on the GIS SE!
    – neuhausr
    Sep 1, 2016 at 13:34
  • 1
    Just saw this ! I added the info to my answer and created another thread with a plain javascript solution: gis.stackexchange.com/questions/223649/…
    – Alexis_A
    Jan 7, 2017 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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