How can I trigger the OpenLayers 3 full screen event?

Question

I'm attempting to trigger my OpenLayers 3 map to become full screen within the code but I'm not having much luck.

I have something along the lines of:

var fullScreenControl = new ol.control.FullScreen()

// Create map in between using fullScreenControl

fullScreenControl.changed();

The code accomplishes nothing though. I tried fullScreenControl.dispatchEvent('change'); also without luck. I'm guessing it's not too tricky, but all the other questions seem to revolve around detecting the event rather than triggering it.

Answer 1

ol3 uses the "HTML5" Fullscreen API to toggle the map in full screen mode. I am not sure what are you trying to accomplish, but there are different ways to toggle the fullscreen.

Here is a pure js method to set your map on full screen:

function setMapToFullScreen(){
  //if your map element id is other than 'map' change it here
        var elem = document.getElementById('map');
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen();
        }   
}

Here is a fiddle to see it in action.

If you plan to attach the fullscreen functionality in a DOM element outside the map you can always use target option during fullscreen initialisation. If you just want to do it programmatically, then use the function above. It depends on what you want to achieve.