Question : how can to set min-height of map leaflet ?

[kattsushi]

in my leaflet.css we can set this

.yaga-map {
  min-height: 400px;
}

but how i can modified this dinamicly ? y try with

document.getElementsByClassName('yaga-map').minHeight(200);

in this example in jQuery i wanna the same behavior

var map = L.map('map').setView([51.505, -0.09], 13);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
    .openPopup();

$(window).on("resize", function() {
    $("#map").height($(window).height()).width($(window).width());  // <===
    map.invalidateSize(); ///<===
}).trigger("resize");

http://jsfiddle.net/fPEaV/

and ElementRef / Rendered too by Angular, Can you help me to figure out or show me the better way to manage this ? Thanks in advance! Great Job in this component is awesome 🗡

[atd-schubert]

Something like this is maybe an approach for you (Based on this example in src/app/map/map.component.ts):

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { OSM_TILE_LAYER_URL, MapComponent as YagaMapComponent } from '@yaga/leaflet-ng2'

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {

  @ViewChild(YagaMapComponent) public map: YagaMapComponent;

  constructor() { }

  public tileLayerUrl: string = OSM_TILE_LAYER_URL;

  ngOnInit() {
  }

  ngAfterViewInit() {
    ((this.map as any)._container as HTMLElement).style.height = '300px';
  }
}

[kattsushi]

Thanks a lot !! it was a lot help!

to work perfectly adding this.map.invalidateSize (); Like that because it does not change the size until window update it

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { OSM_TILE_LAYER_URL, MapComponent as YagaMapComponent } from '@yaga/leaflet-ng2'

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {

  @ViewChild(YagaMapComponent) public map: YagaMapComponent;

  constructor() { }

  public tileLayerUrl: string = OSM_TILE_LAYER_URL;

  ngOnInit() {
  }

  ngAfterViewInit() {
    ((this.map as any)._container as HTMLElement).style.height = '300px';
    this.map.invalidateSize(); // <<
  }
}

Cheers!