Sunday, 2 September 2018

popup - GetFeatureInfo on mouse hover on feature in OpenLayers 3


I am able to get popup onclick on the feature but want to get popup also on mouse hover on the feature (polygon,point). Can anyone help me out. For onclick I used below code -


var feature_onClick;
map.on('click', function(evt) {

feature_onClick = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {

console.log(feature);
return feature;
});


if (feature_onClick) {
var content = document.getElementById('popup-content');
console.log(feature_onClick.getProperties().name);
overlay.setPosition(evt.coordinate);
content.innerHTML = feature_onClick.getProperties().name;

container.style.display = 'block';
}
});

For mouse hover I am using below code but unable to get pop up. Only cursor changes to pointer.


map.on('pointermove', function(e) {
if (e.dragging) {
$(element).popover('destroy');
return;
}

var pixel = map.getEventPixel(e.originalEvent);
var hit = map.hasFeatureAtPixel(pixel);
map.getTarget().style.cursor = hit ? 'pointer' : '';
});

Answer



You could simply reuse your click code and change it pointermove/hover, although I presume you only want the popup visible when over a feature, so there's an else clause to hide it.


var feature_onClick;
map.on('click', function(evt) {

feature_onClick = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {

console.log(feature);
return feature;
});


if (feature_onClick) {
var content = document.getElementById('popup-content');
console.log(feature_onClick.getProperties().name);
overlay.setPosition(evt.coordinate);
content.innerHTML = 'CLICK ' + feature_onClick.getProperties().name;

container.style.display = 'block';
}
});

var feature_onHover;
map.on('pointermove', function(evt) {

feature_onHover = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
console.log(feature);
return feature;

});

if (feature_onHover) {
var content = document.getElementById('popup-content');
console.log(feature_onHover.getProperties().name);
overlay.setPosition(evt.coordinate);
content.innerHTML = 'HOVER ' + feature_onHover.getProperties().name;
container.style.display = 'block';
} else {
container.style.display = 'none';

}
});

No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...