2

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 ?

6

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
    Thanks for the code @Alexis Solved a problem that I couldn't find in hours :-) – Mapper Oct 18 '15 at 16:39
1

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.

  • 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 '16 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 '16 at 14:33
  • was wondering if it might be something like that. thanks for joining in on the GIS SE! – neuhausr Sep 1 '16 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 '17 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.