How To Implement Feature Popups in OpenLayers 5 on Mouse Hover and Click
I learned that OpenLayer 2 has an OpenLayer.control.featurepopup control that allow one to add popups that show when you hover on a feature on the map and when you click on a feature. I am looking for a way to do that with OpenLayer 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing Popups</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 700px;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
Popop!!!!
<div id="map"></div>
<script>
var style,feature, map,vLayer,vSource,fpControl;
$(document).ready(function () {
style = [
new ol.style.Style({
image: new ol.style.Icon(({
scale: .7, opacity: 1,
rotateWithView: false, anchor: [0.5, 1],
anchorXUnits: 'fraction', anchorYUnits: 'fraction',
src: '//raw.githubusercontent.com/jonataswalker/map-utils/master/images/marker.png'
})),
zIndex: 5
})
];
feature = new ol.Feature({
geometry: new ol.geom.Point(new ol.proj.fromLonLat([-0.890000,51.57889])),
name: 'My Bus'
});
feature.setId(1007);
feature.setStyle(style);
// Create map
vSource = new ol.source.Vector();
vLayer = new ol.layer.Vector({
source : vSource
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vLayer
],
view: new ol.View({
center: new ol.proj.fromLonLat([-0.890000,51.57889]),
zoom: 12,
numZoomLevels: 18,
maxResolution: 156543.0339,
})
});
vSource.addFeature(feature);
fpControl = new ol.Control.FeaturePopups({
boxSelectionOptions: {},
layers: [
[
// Uses: Internationalized templates.
vLayer, {
templates: {
hover: '${.name}',
single: '${i18n("Name")}: ${.name}<br>',
item: '<li><a href="#" ${showPopup()}>${.name}</a></li>'
}
}
]
]
});
map.addControl(fpControl);
});
</script>
</body>
</html>
i expect to see a tool-tip showing some properties off the feature like the 'name' and 'id' when i hover on the feature and a popup with the same info when i click on the feature.
Answer
.popup {
border-radius: 5px;
border: 1px solid grey;
background-color: rgba(255, 255, 255, 0.9);
padding: 2px;
}
<div id="map"></div>
<div #popup class="popup" [hidden]="true"></div>
this.popupOverlay = new Overlay({
element: this.popup.nativeElement,
offset: [9, 9]
});
this.map.addOverlay(this.popupOverlay);
this.map.on('pointermove', (event) => {
let features = [];
this.map.forEachFeatureAtPixel(event.pixel,
(feature, layer) => {
features = feature.get('features');
const valuesToShow = [];
if (features && features.length > 0) {
features.forEach( clusterFeature => {
valuesToShow.push(clusterFeature.get('VALUE_TO_SHOW'));
});
this.popup.nativeElement.innerHTML = valuesToShow.join(', ');
this.popup.nativeElement.hidden = false;
this.popupOverlay.setPosition(event.coordinate);
}
},
{ layerFilter: (layer) => {
return (layer.type === new VectorLayer().type) ? true : false;
}, hitTolerance: 6 }
);
if (!features || features.length === 0) {
this.popup.nativeElement.innerHTML = '';
this.popup.nativeElement.hidden = true;
}
});
Obi, I had the same problem for the popup on hover over feature. I used OpenLayers 5 and Angular 6.
And I managed to solve it by creating a <div> popup element and referencing this element in an Overlay.
Added the overlay to the map object and define a pointermove event on the map. Within the pointermove event I reference the map and use the forEachFeatureAtPixel method.
The base layer for the on hover functionality was for me a ClusterSource, so multiple point features were grouped under one feature.
References: