Fullscreen mode doesn't work well with Safari - ol-cesium

CesiumJS
1

I have an map projected with OpenLayer 6. I added a button to change to 3d view with ol-cesium.

When the map is in Cesium the fullscreen button of Openlayer is no more visible (which by the way works perfectly in all browsers when I am in standard OL 2d), as it happens with ol-controls. So I added a fullscreen button that appears only when in ol3d. However, when I have ol3d activated, toggling between fullscreen and normal screen works fine only in Firefox and Chrome. In Safari I can access the fullscreen, but I cannot exit (I have to use the keyboard esc). I don’t understand where’s the problem.

Here’s my code

HTML

<div id="map" class="map">
  <div id="cesiumFs">                                                       
    <button id="cesiumFsButton" type="button" title="Toggle full-screen"></button>
  </div>

  <div id="CesiumEnable" class="cesium-icon-change-3d" title="Change projection">
    <i id="globe" class="fa fa-globe fa-2x" aria-hidden="true"></i>
  </div>
</div>

JS

const ol3d = new olcs.OLCesium({
  map: map,
});

//set ol3d to false as normally I want the 2d map view
ol3d.setEnabled(false);

//when clicking on 3D I enable the Cesium view 
document.getElementById('enable').onclick = function() {

  //get the elements controlling Fullscreen mode
  let cesiumFsTrigger = document.getElementById('cesiumFs');
  let cesiumFsButton = document.getElementById('cesiumFsButton');

  //if ol3d is true
  if(!ol3d.getEnabled()){

    //when opening up Cesium I change zoom and center
    const NewView =  new ol.View({
      projection: mercatorProjection,
      center: ol.proj.transform([-80, 20], 'EPSG:4326', 'EPSG:3857'),
      zoom: 3,
      maxZoom: 15,
      minZoom: 0,     
      }); 
    map.setView(NewView);

       //set ol3d to true  
    ol3d.setEnabled(true);  

        //When in 3d add a "Fullscreen" icon in substitution to the OpenLayer interaction (otherwise not working with Cesium)
        //shows the new fullscreen button (set as active) 
        cesiumFsTrigger.classList.add('FsActive');

          //add a fontawesome icon
        cesiumFsButton.innerHTML = '<i id="toggleFs" class="fa fa-expand-arrows-alt" aria-hidden="true"></i>';

        let iconFs = document.getElementById('toggleFs');
        let cesiumFsElement = document.getElementById('map');

          //set fullscreen mode to the map
        cesiumFsTrigger.addEventListener("click", () => {
          if (!document.fullscreenElement) {
            Cesium.Fullscreen.requestFullscreen(cesiumFsElement);
            iconFs.classList.remove('fa-expand-arrows-alt');
            iconFs.classList.add('fa-compress-arrows-alt');
  
          } else {
             if (Cesium.Fullscreen.exitFullscreen) {
             Cesium.Fullscreen.exitFullscreen();
             iconFs.classList.remove('fa-compress-arrows-alt');
             iconFs.classList.add('fa-expand-arrows-alt');
             }
             else if (Cesium.Fullscreen.webkitExitFullscreen) {
             Cesium.Fullscreen.webkitExitFullscreen();
             iconFs.classList.remove('fa-compress-arrows-alt');
             iconFs.classList.add('fa-expand-arrows-alt');
             }

          }
         });//close fullscreen conditions for icons 
  }
  else {
     //if ol3d is false
    ol3d.setEnabled(false)
    map.setView(view); 
    cesiumFsTrigger.classList.remove('FsActive');
  }
};
2

Hi there,

this function is not a part of the official CesiumJS API, and is likely maintained by the ol-cesium folks. I’d suggest opening an issue in the ol-cesium GitHub.

3

Thanks for your answer