angularopenlayers-6openlayers-5

Not able to toggle Fullscreen button in openLayers


I am implementing fullscreen feature. I need to toggle fullscreen button in below 2 scenarios

  1. When fullscreen mode is false, I need to dispaly "fullscreen(as per code)" button on map. Which is working properly.

  2. When fullscreen mode is true, I need to display "exitfullscreen(as per code)" button on map. Which is not working.

I have added the code which I have tried.

const fullscreen = document.createElement('span');
fullscreen.innerHTML = '<img src="fullscreen.png" width="20" height="20">';
document.addEventListener('change', (event) => {
if(document.fullscreenElement){
fullscreen.innerHTML = '<img src="fullscreen" width="20" height="20">';
  }else{
    fullscreen.innerHTML = '<img src="exitfullscreen.png" width="20" height="20">';
  }
})

Solution

  • You should define two span elements and OpenLayers will use the correct one depending on the status

    const fullscreen = document.createElement('span');
    fullscreen.innerHTML = '<img src="fullscreen.png" width="20" height="20">';
    
    const exitfullscreen = document.createElement('span');
    exitfullscreen.innerHTML = '<img src="exitfullscreen.png" width="20" height="20">';
    
    new ol.control.FullScreen({
      label: fullscreen,
      labelActive: exitfullscreen,
    })