ngMap forces height even if default style is disabled

[pan-henryk]

I am using ngmap in custom directive which is styled with ng-style.
This means that during map initialization component height is not set - I noticed that in this case despite setting defaultStyle to false, ngmap forces 300 px height in setStyle method:

  if (getStyle(el, 'height').match(/^(0|auto)/)) {
    el.style.height = '300px';
  }

and ng style (or map resize event) do not work afterwards.

My suggestion would be to remove this condition, as it collides logically with defaultStyle property.

[allenhwkim]

Thanks for your input,

In angular2, we can do this logically.
But in angular 1, unless we ask user to add stylesheet separately; which many don't want, it's hard to make something to work as you intended.

One way is to write <style> tag into your document; but it's somewhat invasive I think, but I might be wrong.

I want more input about this issue.

[pan-henryk]

My point is, that by defaultStyle is true by default. When you turn it off in order to change map style, you would rather expect map to fail when you didn't provide height instead of still providing default.
I cannot use style tag directly as I am styling these directives dynamically based on xml configuration.
Will try to provide some kind of sample for you to test.

[Vladimir85]

Analyzing the code, you'll find this method (services/ng-map.js):

/**
   * @memberof NgMap
   * @function setStyle
   * @param {HtmlElement} map contriner element
   * @desc set display, width, height of map container element
   */
  var setStyle = function(el) {
    //if style is not given to the map element, set display and height
    var defaultStyle = el.getAttribute('default-style');
    if (defaultStyle == "true") {
      ...
    } else {
      ...
      // If height is not set, fallback to default
      if (getStyle(el, 'height').match(/^(0|auto)/)) {
        el.style.height = '300px';
      }
    }
  };

Basically if the "height" attribute is present and it's value is equal to 0 or 'auto' then, it sets the default height to 300px.

To make it work, you have to set the "height" value.

Below is an example to set the custom height:

<ng-map center="0,0" style="height: 500px" default-style="false" zoom="8"></ng-map>

Or you can set the height in your stylesheet:

//Stylesheet
ng-map { height: 500px }

[pan-henryk]

I am referring to this code in my post. Problem is that when you lazy load, use ng-style to set height and use ngmap in custom directive (not exactly sure what is the root cause) this code gets executed before height is set by ng-style, blocking height you want to set.

[pitakill]

I can relate the same thing that @pan-henryk is posting.

Basically i'm loading lazy the map directive, with the default-style="false" attribute, showing in a modal from ui-bootstrap, the first time the modal is open, works, but the next times not.

[boltex]

I wish default-style="false" would respect my styles. because @allenhwkim checks the actual height instead of the specified height style it gets 0 when angular is still building the dom (some parents may have not yet be shown or have no height)

i also lazy load some directives and in those i then lazy-load some css! here is what i have to do to set the map to 100% height:

        var ocxMap = angular.element( document.querySelector( '#ocxMap' ) );
        ocxMap.attr("style", "height:800px;"); // HEIGHT FIX SET TO 800px here and to 100% below so it sees some actual height!
        // WHEN CSS IS NEEDED ********************************************************
        utils.lazyLoadCss('TESTMAP').then(function(){
          $scope.$emit( "ocxProgramReady" , { "uuid":"nouuid", "name": 'TESTMAP' } );
          $scope.displayReady=true;
          $timeout( function(){ocxMap.attr("style", "height:100%;display:block;");} );   // here i set it back to what i want!
        });

[allenhwkim]

How about setting style in your css instead of relying on default style or no style?

[boltex]

because inline style (that you set without respecting default-style="false") has precedence over css stylesheets.

[allenhwkim]

@boltex if you set it as !important, the inline style does not apply.

Here is the example
http://plnkr.co/edit/5NPJLMJnM98ElAoEggc0?p=preview