kygoh / lflt-core Goto Github PK
View Code? Open in Web Editor NEWangular component and directives for leaflet
License: MIT License
angular component and directives for leaflet
License: MIT License
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.