CODEWITHSUNDEEP
angularjsopenlayers-3
Robert
Robert

Reputation: 135

Angular js set Openlayers map window element dimensions dynamically

I have an Openlayers 3 map in an element from a directive that needs to resize correctly when the user resizes the browser.

wmm.directive('tchOlMap', ['$window', function ($window) {
var hgt = ($window.innerHeight - 102);
var wdth = ($window.innerWidth - 400);

var MAP_DOM_ELEMENT_ID = 'tchMap';

return {

    //restrict: 'E',
    scope: false,
    //replace: true,

    template: '<div id="' + MAP_DOM_ELEMENT_ID + '" class="full-height" style="height: '+hgt+'px; width: '+wdth+'px; padding: 0px; margin: 0px; border:2px solid;  border-color: #76AF75"></div>',

    link: function postLink(scope, element, attrs) {
     scope.isCollapsed = false;  

      var w = angular.element($window);
        scope.getWindowDimensions = function () {
        return { 'h': w.height(), 'w': w.width() };
        };

    scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {

        scope.windowHeight = newValue.h;
        scope.windowWidth = newValue.w;
        console.log(newValue.w+' '+newValue.h);
        hgt = newValue.h;
        wdth = newValue.w;

        scope.style = function () {

            return { 
                'height': (newValue.h - 102) + 'px',
                'width': (newValue.w - 400) + 'px' 
            };
        };

    }, true);

    w.bind('resize', function () {
        scope.$apply();
    });

I can see in the console that it is returning the updated dimensions but the values are not being applied to the element I'm stuck as to how to apply the dimensions to the element - Can anyone help please?

Upvotes: 1

Views: 161

Answers (2)

Robert
Robert

Reputation: 135

This is the final working code thanks to @pedromarc

wmm.directive('tchOlMap', ['$window', function ($window) {

var MAP_DOM_ELEMENT_ID = 'tchMap';

return {
    //restrict: 'E',
    scope: false,
    //replace: true,

    template: '<div id="' + MAP_DOM_ELEMENT_ID +'" class="full-height" ng-style="style"></div>',

    link: function postLink(scope, element, attrs) {
      scope.style = {};

      scope.isCollapsed = false;  

      var w = angular.element($window);
        scope.getWindowDimensions = function () {
        return { 'h': w.height(), 'w': w.width() };
        };

       scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {

        scope.style = { 
                'height': (newValue.h - 102) + 'px',
                'width': (newValue.w - 400) + 'px',
                'padding' : 0 + 'px',
                'margin' : 0 + 'px',
                'border': 2 + 'px solid',
                'border-color' : '#76AF75'
            };

    }, true);    
    w.bind('resize', function () {
       scope.$apply();
      });

Upvotes: 1

pedromarce
pedromarce

Reputation: 5669

You are assigning a static value in the template, you should change your template to use the values available in your scope.

template: '<div id="' + MAP_DOM_ELEMENT_ID + '" class="full-height" ng-style="style"></div>'

And then just define and update the style in your link function storing all style required in scope.style property.

Upvotes: 0

Related Questions