Angular-Leaflet-Directive - проблема, когда карта технически рендерится, но ни один из ее плиток не появляется.

Question

,,, потому что плитки абсолютно расположены в родительских контейнерах, высота которых равна нулю.

Вот директива: https://github.com/tombatossals/angular-leaflet-directive

Я не уверен относительно подходящего канала, по которому можно обращаться за помощью, поскольку я имею дело с относительно небольшой библиотекой. Я почти уверен, что не делаю ничего плохого, так как серый "холст" с элементами управления масштабированием для карты рендерится и плитки карты загружаются (но фактически не отображаются). Я могу заставить плитки появляться, назначая высоту их родительскому элементу, но очевидно, что Leaflet не должен работать.

Я понимаю, что это, возможно, не лучшее место, чтобы просить о помощи в подобных вещах, поэтому мне интересно, может ли кто-нибудь знать, как мне лучше всего искать помощь.

Answer 1

Этот селектор в моем CSS был проблемой:

img {
  max-height: 100%;
  max-width: 100%;
}

Решением было просто позволить изображениям отображаться так, как обычно в контейнере листовой карты:

.leaflet-container img {
  max-height: none;
  max-width: none;
}

Answer 2

Трудно сказать, не видя код вашего проекта. Но звучит так, как будто вам нужно применить высоту к вам #map элемент контейнера. Посмотрите один из буклетов для возможных примеров CSS.

Будет работать что-то вроде следующего:

#map{ height: 600px; width: 100% }

или же

#map{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}