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?


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) {


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();

fullscreen.on('propertychange', function(evt){

fullscreen.on('change', function(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?

  • No I haven't noticed that OpenLayers already do this, and it isn't working quite as expected. I'm trying to build up a simple example to seperate the complex app with this specific issue as it must be a bug in the web-app when OL already handles it. And I'm using version 3.8.2. – Carsten Farving Sep 8 '15 at 13:18
  • Maybe you could make a simplified fiddle demo. It could be something related to angularjs. – Jonatas Walker Sep 8 '15 at 13:57
  • As said, I'm brewing on it at the moment, but apparently eventlisteners and fullscreen doesn't work properly in jsfiddle. Hopefully I'll have it ready sometime tomorrow. – Carsten Farving Sep 8 '15 at 19:43
  • I've also been digging and found this fiddle which shows some strange behavior of OpenLayers even without fullscreen, so my guess it have some flaws when dynamically change the size of the canvas. – Carsten Farving Sep 21 '15 at 6:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.