Openlayers: Change the icon of the full-screen-true button

user_10749191 0
Viewed 419

I changed the openlayers (v6.3.1) controls icons to custom icons using Font Awesome and jquery:

$('button.ol-full-screen-true').html('<i class="fas fa-compress"></i>');
$('button.ol-full-screen-false').html('<i class="fas fa-expand"></i>');

This works as intended for the full-screen-false button. But the full-screen-true button does not change if I toggle full screen. Instead it uses the full-screen-false Font Awesome icon. If I remove the code for the full-screen-false icon, the default icons are shown. I also tried to change the tooltips of both buttons. It also worked only for the full-screen-false control.

I am stuck here and can't think of (or find) any other solution.

font-awesome openlayers jquery javascript
1 Answers

I found a different, more complex, solution.

var fullscreenFalse = document.createElement('i');
fullscreenFalse.setAttribute('class', 'fa fa-expand');
var fullscreenTrue = document.createElement('i');
fullscreenTrue.setAttribute('class', 'fa fa-compress');

var fullscreen = new ol.control.FullScreen({
    source: document.getElementById('map').parentNode,
    label: fullscreenFalse,
    labelActive: fullscreenTrue
});

You can change the tooltips using the following code:

fullscreen.on('enterfullscreen', function(evt){
    $('button.ol-full-screen-true').attr('title', 'Leave fullscreen');
});
fullscreen.on('leavefullscreen', function(evt){
    $('button.ol-full-screen-false').attr('title', 'Enter fullscreen');
});
user_107491910
Related