I am implementing fullscreen feature. I need to toggle fullscreen button in below 2 scenarios
When fullscreen mode is false, I need to dispaly "fullscreen(as per code)" button on map. Which is working properly.
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">';
}
})
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,
})