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