kygoh / lflt-core Goto Github PK

The following template will only render either layer1$ or layer2$:

<lflt-map class="map-container">
  <lflt-tile-layer [urlTemplate]="tileLayerUrl" [options]="tileLayerOptions"></lflt-tile-layer>

  <lflt-geojson-layer [geojson]="layer1$ | async" [options]="geojsonOptions">
  </lflt-geojson-layer>

  <lflt-geojson-layer [geojson]="layer2$ | async" [options]="geojsonOptions">
  </lflt-geojson-layer>
</lflt-map>

Supposedly, both geojson layers should be rendered.

Each time the following template is used, an unnecessary LeafletInteractiveObservableLayersDirective is created when only LeafletInteractiveObserverLayersDirective should be created.

<lflt-interactive-layers #main="observable">
  ...
<lflt-interactive-layers>

When using <lflt-interactive-layers [observable]="main">, the following error occured:

core.js:6241 ERROR TypeError: Cannot read property 'interactiveLayerDirectivesQueryList' of undefined
    at LeafletInteractiveObserverLayersDirective.get interactiveLayerDirectives [as interactiveLayerDirectives] (lflt-core.js:486)
    at LeafletInteractiveObserverLayersDirective.get areLayersReady [as areLayersReady] (lflt-core.js:316)
    at LeafletInteractiveObserverLayersDirective.ngAfterViewChecked (lflt-core.js:489)
    at callHook (core.js:4730)
    at callHooks (core.js:4690)
    at executeInitAndCheckHooks (core.js:4630)
    at refreshView (core.js:12088)
    at refreshEmbeddedViews (core.js:13404)
    at refreshView (core.js:12035)
    at refreshComponent (core.js:13458)

Facing the same issue described in Interacting with a Leaflet Map in an Ionic Framework PWA:

[...] Because Ionic Framework does some things at load time prior to the views being built, Leaflet cannot determine the correct window sizing information immediately. Because of this, some or all tiles may be missing from the view. To correct this, we can set a short timeout and invalidate the map size causing it to refresh.

To workaround this issue, the following was added after the map is instantiated

        setTimeout(() => {
            map.invalidateSize();
        }, 1000);

This happens whenever LeafletInteractiveObserverLayersDirective that is dependent on LeafletInteractiveObservableLayersDirective is used as follows:

<lflt-map>
  <!-- LeafletInteractiveObservableLayersDirective -->
  <lflt-interactive-layers #main="observable">
    ...
  </lflt-interactive-layers>
</lflt-map>

<lflt-map>
  <!-- LeafletInteractiveObserverLayersDirective -->
  <lflt-interactive-layers [observable]="main">
    ...
  </lflt-interactive-layers>
</lflt-map>

The apps will stall and if javascript console is enabled, the log from the following code is repeatedly emitted:

The following commands will publish a new patch version package to GitHub Packages

npm --no-git-tag-version version patch
npm run deploy

After publishing the package, commit the changes, push the commit and create a release.

Synchronize tag with the release

git fetch --all --tags

LeafletInteractiveLayerDirective is rendered correctly the first time. However, when

is re-assigned with a different geojson, it doesn't get re-rendered.