ember-leaflet in tabs and IntersectionObserver

components.my-map\.js

import Component from '@glimmer/component';
import { action } from "@ember/object";
import { schedule } from '@ember/runloop';
import { htmlSafe } from '@ember/string';

export default class extends Component {
  lat = 51.92;
  long = 35.68;
  zoom = 3;
  licenseAttribution = htmlSafe(
    '<a href="https://miguelcobain.github.io/ember-leaflet/"><em>ember-leaflet</em></a> | © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> | © <a href="https://carto.com/about-carto/">light_all</a>'
  );

  map = null;
  mapElem = null;
  visibilityObserver = null;

  invalidateSize() {
    schedule('afterRender', () => {
      this.map?.invalidateSize?.();
    });    
  }

  willDestroy() {
    super.willDestroy();
    this.visibilityObserver.disconnect();
    this.visibilityObserver = null;
    this.map = null;
    this.mapElem = null;
  }

  @action
  onMapLoad(event) {
    this.map = event.target;
    this.mapElem = event.target.getContainer();

    if (this.mapElem) {
      this.visibilityObserver = new window.IntersectionObserver((entries) => {
        if (entries?.[0].isIntersecting) {
          this.invalidateSize();
        }
      });
      this.visibilityObserver.observe(this.mapElem);
    }
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'ember-leaflet in tabs & IntersectionObserver';
}

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.leaflet-container {
  height: 300px;
}

templates.application\.hbs

<h1>{{this.appName}}</h1>
<h4>→<a href='https://github.com/miguelcobain/ember-leaflet/issues/585'> Rendering issues in ember-bootstrap tabs #585 </a></h4>
<br>
<br>
<BsTab @activeId="pane1" as |tab|>
  <tab.pane @title="Tab 1" @id="pane1" >
      <MyMap />
  </tab.pane>
  <tab.pane @title="Tab 2" @id="pane2" >
    <p>Text-only tab pane</p>
  </tab.pane>
</BsTab>
<br>
<br>
{{outlet}}

templates.components.my-map\.hbs

<LeafletMap 
    @lat={{this.lat}}
    @lng={{this.long}}
    @zoom={{this.zoom}}
    @onLoad={{this.onMapLoad}} as |layers|>
        <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
                     @attribution={{this.licenseAttribution}} />
</LeafletMap>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": false
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-bootstrap": "3.1.4",
    "ember-leaflet": "4.1.1"
  }
}