[GIS] OpenLayers Add EventListener for Fullscreen close

angularjseventsopenlayers

I'm currently building a web-app with Angular and OpenLayers. Due to the nature of my site I need to call map.updateSize() when the screen changes size which works as expected.

However when I enter fullscreen using OpenLayers own FullScreen control my maps streches fine but when closing fullscreen it keeps the fullscreen aspect and needs to be updated, hence a call to map.updateSize().

From OL3 ol.control.FullScreen there is an eventlistener on, however I don't know what to bind it to and how to write it. Can anyone provide me with an example, hopefully with the event of closing the fullscreen?

Best Answer

UPDATE: Digging a bit, here's what I've found. If you want to listen on fullscreen you may register the listener on document. Now, the event has different name for each browser so to webkit family:

document.addEventListener("webkitfullscreenchange", function(evt) {
    console.log('fullscreen...');
    console.log(evt);

});

And the others: mozfullscreenchange, MSFullscreenChange and fullscreenchange. Taken from ol-debug.js:

goog.dom.fullscreen.EventType = {
  /** Dispatched by the Document when the fullscreen status changes. */
  CHANGE: (function() {
    if (goog.userAgent.WEBKIT) {
      return 'webkitfullscreenchange';
    }
    if (goog.userAgent.GECKO) {
      return 'mozfullscreenchange';
    }
    if (goog.userAgent.IE) {
      return 'MSFullscreenChange';
    }
    // Opera 12-14, and W3C standard (Draft):
    // https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
    return 'fullscreenchange';
  })()
};

A listener would be written like:

var fullscreen = new ol.control.FullScreen();
map.addControl(fullscreen);

fullscreen.on('propertychange', function(evt){
    console.log(evt);
});

fullscreen.on('change', function(evt){
    console.log(evt);
});

But neither fires anything. Have you noticed that Openlayers already do this for you? https://github.com/openlayers/ol3/blob/v3.8.2/src/ol/control/fullscreencontrol.js#L149

Are you using latest version?

Related Question