Ajout des tooltips
Comme indiqué dans l’introduction, pour les tooltips j’utilise un overlay et une interaction.
En premier, on créé un overlay qui utilise notre div incluse dans celle de la carte, et on l’ajoute à la carte :
var tooltip = document.getElementById('tooltip');
var overlay = new ol.Overlay({
element: tooltip
});
map.addOverlay(overlay);
Ensuite, on créé une interaction qui s’applique sur les calques contenant les stations, et qui a une condition de déclenchement de type « pointerMove » :
var stationHover = new ol.interaction.Select({
condition: ol.events.condition.pointerMove,
layers: [pipStopsLayer,initStopsLayer, dev2006StopsLayer, ext1StopsLayer, ext2StopsLayer],
style: function(feature) {
return styleFeature();
}
});
Pour la fonction appelée au déclenchement de l’interaction, et le style du tooltip (que je ne présente pas ici), je me suis inspiré du fonctionnement de Leaflet.
Le principe de cette fonction est que s’il y a un élément sous la souris, on affiche le tooltip, et on y place la propriété « name » de l’élément. Et selon que la souris soit dans la moitié gauche ou la moitié droite de la carte, on change le positionnement de l’overlay et la classe à appliquer au tooltip pour que sa « queue » soit du bon côté.
La fonction elle-même :
stationHover.on('select', function(e){
if(e.selected.length > 0) {
tooltip.style.display = 'initial';
overlay.setPosition(e.selected[0].getGeometry().getCoordinates());
tooltip.innerHTML = e.selected[0].get('name');
if( e.mapBrowserEvent.pixel[0] < (document.getElementById('map').offsetWidth / 2) ) {
tooltip.classList.add('tooltip-right');
tooltip.classList.remove('tooltip-left');
overlay.setPositioning('center-left');
} else {
tooltip.classList.add('tooltip-left');
tooltip.classList.remove('tooltip-right');
overlay.setPositioning('center-right');
}
} else {
tooltip.style.display = 'none';
}
});
Ajout du contrôle
Maintenant, il ne nous reste plus qu’à initialiser le contrôle et le rajouter à la carte :
var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);
Et voilà, encore une carte de faite avec OpenLayers. Un exemple fonctionnel est disponible ici.