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?
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?
No comments:
Post a Comment