As a follow up on openlayers-add-eventlistener-for-fullscreen-close, i realized that OpenLayers3 already implemented an updateSize() on exit fullscreen.
I've been trying to solve this issue without any luck and wanted to ask whether my solution is incorrect or this is a known bug perhaps related to window resize not resetting arrows or something else.
I also realized when loading the page, the map size is incorrect and when resizing the splitbars minimally it updates the map size correctly.
I'm using Angular, Angular-UI and OpenLayers.
My HTML
My JS
(function () { 'use strict'; var app = angular.module('x', ['ui.layout']); app.controller('xCtrl', ['$scope', function ($scope) { $scope.EAST = "http://placehold.it/400x300/eee/666&text=EAST"; $scope.SOUTH = "http://placehold.it/400x300/eee/666&text=SOUTH"; $scope.vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector() }); $scope.map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://demo.boundlessgeo.com/geoserver/wms', params: { 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR' } }) }), $scope.vectorLayer], renderer: 'canvas', target: 'map', view: new ol.View({ projection: 'EPSG:3857', center: ol.proj.transform([8.47337333, 55.51580467], "EPSG:4326", "EPSG:3857"), minZoom: 2, zoom: 15 }), controls: ol.control.defaults().extend([ new ol.control.FullScreen(), new ol.control.ScaleLine()]) }); $scope.circleFeature = new ol.Feature({ geometry: new ol.geom.Circle( ol.proj.transform([8.47337333, 55.51580467], "EPSG:4326", "EPSG:3857"), 600 ) }); var circle = new ol.layer.Vector({ source: new ol.source.Vector({ features: [ $scope.circleFeature ] }), style: [ new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(76, 181, 248, 0.2)' }) }) ] }); $scope.map.addLayer(circle); $scope.map.updateSize(); $scope.$on('ui.layout.resize', function (e, beforeContainer, afterContainer) { $scope.map.updateSize(); console.log("%s", e); }); $scope.$on('ui.layout.toggle', function (e, container) { $scope.map.updateSize(); }); }]); }());
أكثر...
I've been trying to solve this issue without any luck and wanted to ask whether my solution is incorrect or this is a known bug perhaps related to window resize not resetting arrows or something else.
I also realized when loading the page, the map size is incorrect and when resizing the splitbars minimally it updates the map size correctly.
I'm using Angular, Angular-UI and OpenLayers.
My HTML
My JS
(function () { 'use strict'; var app = angular.module('x', ['ui.layout']); app.controller('xCtrl', ['$scope', function ($scope) { $scope.EAST = "http://placehold.it/400x300/eee/666&text=EAST"; $scope.SOUTH = "http://placehold.it/400x300/eee/666&text=SOUTH"; $scope.vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector() }); $scope.map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://demo.boundlessgeo.com/geoserver/wms', params: { 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR' } }) }), $scope.vectorLayer], renderer: 'canvas', target: 'map', view: new ol.View({ projection: 'EPSG:3857', center: ol.proj.transform([8.47337333, 55.51580467], "EPSG:4326", "EPSG:3857"), minZoom: 2, zoom: 15 }), controls: ol.control.defaults().extend([ new ol.control.FullScreen(), new ol.control.ScaleLine()]) }); $scope.circleFeature = new ol.Feature({ geometry: new ol.geom.Circle( ol.proj.transform([8.47337333, 55.51580467], "EPSG:4326", "EPSG:3857"), 600 ) }); var circle = new ol.layer.Vector({ source: new ol.source.Vector({ features: [ $scope.circleFeature ] }), style: [ new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(76, 181, 248, 0.2)' }) }) ] }); $scope.map.addLayer(circle); $scope.map.updateSize(); $scope.$on('ui.layout.resize', function (e, beforeContainer, afterContainer) { $scope.map.updateSize(); console.log("%s", e); }); $scope.$on('ui.layout.toggle', function (e, container) { $scope.map.updateSize(); }); }]); }());
أكثر...