@bluehalo/ngx-leaflet 21.2.0 → 21.2.1

package/CHANGES.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 21.2.1
+- Docs: restructured README — extracted API reference and Recipes to docs/; added Angular component popup pattern to Recipes
+- Tests: expanded unit test coverage to 91 tests across all directives; added Codecov integration
+- CI: upgraded to Node 24, actions/checkout and actions/setup-node to v6
+- Chore: updated copyright to BlueHalo LLC; added npm version badge
+
 ## 21.2.0
 Add `(leafletOverlayAdd)` and `(leafletOverlayRemove)` output bindings to the `[leafletLayersControl]` directive. These pass through Leaflet's `overlayadd` and `overlayremove` map events, which fire when a user checks or unchecks an overlay in the layers control. Event data is typed as `LayersControlEvent` (provides `layer` and `name`). Closes #285.
 

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2007-2024 BlueHalo, LLC
+Copyright (c) BlueHalo LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,9 +1,19 @@
 # @bluehalo/ngx-leaflet
 
+<p align="left">
+  <img src="assets/logo.svg" alt="ngx-leaflet" width="200">
+</p>
+
+[![NPM version][npm-image]][npm-url]
 [![Build Status][ci-image]][ci-url]
+[![Code Coverage][coverage-image]][coverage-url]
 
+[npm-url]: https://www.npmjs.com/package/@bluehalo/ngx-leaflet
+[npm-image]: https://img.shields.io/npm/v/%40bluehalo%2Fngx-leaflet
 [ci-url]: https://github.com/bluehalo/ngx-leaflet/actions/workflows/ci.yml
 [ci-image]: https://github.com/bluehalo/ngx-leaflet/actions/workflows/ci.yml/badge.svg
+[coverage-url]: https://codecov.io/gh/bluehalo/ngx-leaflet
+[coverage-image]: https://codecov.io/gh/bluehalo/ngx-leaflet/graph/badge.svg
 
 > Leaflet packages for Angular.io.
 > Provides flexible and extensible components for integrating Leaflet v0.7.x and v1.x into Angular.io projects.
@@ -11,8 +21,9 @@
 ## Table of Contents
 - [Install](#install)
 - [Usage](#usage)
-- [API](#api)
+- [API](docs/API.md)
 - [Extensions](#extensions)
+- [Cookbook](docs/cookbook.md)
 - [Getting Help](#help)
 - [Contribute](#contribute)
 - [License](#license)
@@ -80,39 +91,7 @@ If you are using Angular CLI, you will need to add the Leaflet CSS file to the s
 
 #### A Note About Markers
 Leaflet marker URLs don't play well with the Angular CLI build pipeline without some special handling.
-The demo contained in this project demonstrates how to get around this problem. Here is a rough overview of the steps taken to get them working.
-
-1. Include the leaflet marker assets so they are copied intact to the build output.
-```json
-{
-	...
-	"assets": [
-		{
-			"glob": "**/*",
-			"input": "public"
-		},
-		{
-			"glob": "**/*",
-			"input": "./node_modules/leaflet/dist/images",
-			"output": "assets/"
-		}
-	],
-	...
-}
-```
-
-1. Configure Leaflet to use the asset URLs as custom marker images.
-
-```typescript
-let layer = marker([ 46.879966, -121.726909 ], {
-	icon: icon({
-		...Icon.Default.prototype.options,
-		iconUrl: 'assets/marker-icon.png',
-		iconRetinaUrl: 'assets/marker-icon-2x.png',
-		shadowUrl: 'assets/marker-shadow.png'
-   })
-});
-```
+See [Marker Setup](docs/cookbook.md#marker-setup) in the cookbook for the full configuration steps.
 
 
 ### Import LeafletDirective
@@ -258,410 +237,63 @@ layer = circle([ 46.95, -122 ], { radius: 5000 });
 ```
 
 
-### Dynamically Change Map Layers using [leafletLayers]
-
-> **Layer inputs (arrays and maps) are mutable**
-> Previous versions of this plugin treated layers arrays and layer control objects as immutable data structures.
-> We've changed that behavior.
-> Now, mutable changes to the ```leafletLayers```, ```leafletBaseLayers```, and ```leafletLayersControl``` inputs are detected.
-
-The plugin is now using internal ngx iterable and key/value differs to detect and track changes to mutable data structures.
-This approach requires a deep compare of the contents of the data structure (which can be slow when the contents are really big).
-For immutable data structures, all that is needed is a top-level instance equality check (which is way faster).
-This change is backwards compatible and was motivated by feedback and confusion.
-While there is a performance impact for some use cases, this approach is more intuitive.
-
-There are at least two good approaches to improving performance when there are a lot of layers bound to the map.
-First, you can use the OnPush change detection strategy. There's an example of this in the demo.
-Second, you can wrap a large number of layers into a Leaflet layer group, which will reduce the number of layers the plugin actually has to track during diffs.
+### Dynamically Change Map Layers
+The `[leafletLayers]`, `[leafletBaseLayers]`, and `[leafletLayersControl]` inputs detect mutable changes using Angular's iterable/key-value differs. For details on performance trade-offs and how syncing works, see the [API reference](docs/API.md#dynamically-change-map-layers).
 
 
 ### Working with Leaflet Events
 Often, you'll want to make changes based on a map click or other Leaflet interaction.
-The ngx-leaflet plugin supports several [map events](#map-events) and [layer events](#layer-events) as documented in the API section.
+The ngx-leaflet plugin supports several [map events](docs/API.md#map-events) and [layer events](docs/API.md#layer-events) as documented in the API reference.
 
 You may occasionally need to handle events that aren't exposed through the plugin, however.
 When that happens, you will need to be aware of how Zones and change detection work to ensure your event handling works as expected.
-Take a look at [A Note About Change Detection](#a-note-about-change-detection) for more details.
+Take a look at [A Note About Change Detection](docs/API.md#a-note-about-change-detection) for more details.
 This is by design and a common thing to deal with when using third party libraries and Angular.
 
 
 ## API
-This section includes more detailed documentation of the functionality of the directives included in this library.
-
-### Advanced Map Configuration
-There are several input bindings available for configuring the map.
-
-```angular181html
-<div leaflet style="height: 300px;"
-     [leafletOptions]="options"
-     [leafletPanOptions]="panOptions"
-     [leafletZoomOptions]="zoomOptions"
-     [leafletZoomPanOptions]="zoomPanOptions"
-     [leafletFitBoundsOptions]="fitBoundsOptions">
-</div>
-```
-
-#### [leafletOptions]
-Input binding for the initial leaflet map options (see [Leaflet's](https://leafletjs.com/reference.html#map-option) docs). These options can only be set initially because they are used to create the map. Later changes are ignored.
-
-#### [leafletPanOptions]
-Input binding for pan options (see [Leaflet's](https://leafletjs.com/reference.html#pan-options) docs). These options are stored and used whenever pan operations are invoked.
-
-#### [leafletZoomOptions]
-Input binding for zoom options (see [Leaflet's](https://leafletjs.com/reference.html#zoom-options) docs). These options are stored and used whenever zoom operations are invoked.
-
-#### [leafletZoomPanOptions]
-Input binding for zoom/pan options (see [Leaflet's](https://leafletjs.com/reference.html#zoom/pan-options) docs). These options are stored and used whenever zoom/pan operations are invoked.
-
-#### [leafletFitBoundsOptions]
-Input binding for FitBounds options (see [Leaflet's](https://leafletjs.com/reference.html#fitbounds-options) docs). These options are stored and used whenever FitBounds operations are invoked.
-
-
-### Dynamically changing zoom level, center, fitBounds, etc.
-```angular181html
-<div leaflet style="height: 300px;"
-     [leafletOptions]="options"
-     [(leafletZoom)]="zoom"
-     [(leafletCenter)]="center"
-     [leafletFitBounds]="fitBounds">
-</div>
-```
-
-#### [(leafletZoom)]: number
-Input and Output binding for the map zoom level.
-
-#### [leafletMaxZoom]: number
-Input binding for the maximum zoom level for the map.
-
-#### [leafletMinZoom]: number
-Input binding for the minimum zoom level for the map.
-
-#### [(leafletCenter)]: LatLng
-Input and Output binding for the map center position.
-
-#### Note: center/zoom operations may interfere with each other
-Zoom/Center operations that are applied in rapid succession may interfere with or cancel each other.
-If both changes are picked up at the same time, the component applies the changes as a map.setView() operation to ensure both are processed.
-Additionally, if a zoom level or center is applied that is not allowed (e.g., beyond max zoom level or outside of max bounds), Leaflet will determine the new value.
-
-#### [leafletFitBounds]: LatLngBounds
-Input bind a ```LatLngBounds``` value that will be applied to the map using ```Map.setFitBounds()```.
-This operation has no output binding because the input fitBounds usually results in a slightly different map bounds.
+Full API documentation is in [docs/API.md](docs/API.md). It covers:
+- Advanced map configuration inputs (`[leafletPanOptions]`, `[leafletZoomOptions]`, etc.)
+- Dynamically changing zoom, center, and fitBounds
+- Layer management: `[leafletBaseLayers]`, `[leafletLayers]`, `[leafletLayersControl]`, `[leafletLayer]`
+- Layer events and map events (full list)
+- Getting a reference to the map
+- A note about Angular zones and change detection
 
-#### [leafletMaxBounds]: LatLngBounds
-Input bind a ```LatLngBounds``` value that will be applied to the map using ```Map.setMaxBounds()```.
 
+## Extensions
+There are several libraries that extend the core functionality of ngx-leaflet:
+* [Leaflet Draw](https://github.com/bluehalo/ngx-leaflet-draw)
+* [Leaflet Markercluster](https://github.com/bluehalo/ngx-leaflet-markercluster)
+* [Leaflet D3 (Hexbins)](https://github.com/bluehalo/ngx-leaflet-d3)
 
-### Simple Layer Management: Setting Baselayers
-There is a convenience input binding for setting the baselayers on the map called ```[leafletBaseLayers]```.
-You can also provide ```[leafletLayersControlOptions]``` if you want to show the control on the map that allows you to switch between baselayers.
-If you plan to show more than just baselayers, you should use the more advanced layers controls described in *Advanced Layer Management* below.
-
-For an example of the basic map setup, you should check out the *Simple Base Layers* demo.
-
-```angular181html
-<div leaflet style="height: 300px;"
-     [leafletOptions]="options"
-     [leafletBaseLayers]="baseLayers"
-     [leafletLayersControlOptions]="layersControlOptions">
-</div>
-```
-
-#### [leafletBaseLayers]: Control.LayersObject
-Input bind an ```Control.LayersObject``` to be synced to the map.
-
-```typescript
-baseLayers: {
-	'layer1': Layer,
-	'layer2': Layer
-}
-```
-
-On changes, the component syncs the baseLayers on the map with the layers in this object.
-Syncing is performed by tracking the current baselayer and on changes, searching the map to see if any of the current baselayers is added to the map.
-If it finds a baselayer that is still added to the map, it will assume that is still the baselayer and leave it.
-If none of the baselayers can be found on the map, it will add the first layer it finds in the ```Control.LayersObject``` and use that as the new baselayer.
-Layers are compared using instance equality.
-
-If you use this directive, you can still manually use the ```[leafletLayers]``` directive, but you will not be able to use the ```[leafletLayersControl]``` directive.
-This directive internally uses the layers control, so if you add both, they'll interfere with each other.
-Because it uses ```control.layers``` under the hood, you can still provide options for the layers control.   
-
-
-#### [leafletLayersControlOptions]
-Input binding for Control.Layers options (see [Leaflet's](https://leafletjs.com/reference.html) docs).
-These options are passed into the layers control constructor on creation.
-
-
-### Advanced Layer Management: Layers, and Layers Control
-The ```[leafletLayers]``` and ```[leafletLayersControl]``` input bindings give you direct access to manipulate layers and the layers control.
-When the array bound to ```[leafletLayers]``` is changed, the directive will synchronize the layers on the map to the layers in the array.
-This includes tile layers and any added shapes. 
-
-The ```[leafletLayersControl]``` input binding allows you to provide a set of base layers and overlay layers that can be managed within leaflet using the layers control.
-When the user manipulates the control via Leaflet, Leaflet will automatically manage the layers, but the input bound layer array isn't going to get updated to reflect those changes.
-
-So, use ```[leafletLayers]``` to add a collection of layers to the map. 
-And, use ```[leafletLayersControl]``` to allow users to optionally turn layers/overlays on and off.
-
-For an example of using the layers controls, you should check out the *Layers and Layer Controls* demo.
-
-```angular181html
-<div leaflet style="height: 300px;"
-     [leafletOptions]="options"
-     [leafletLayers]="layers"
-     [leafletLayersControl]="layersControl"
-     [leafletLayersControlOptions]="layersControlOptions">
-</div>
-```
-
-#### [leafletLayers]: Layer[]
-Input bind an array of all layers to be synced (and made visible) in the map.
-
-On changes, the component syncs the layers on the map with the layers in this array.
-Syncing is performed by selectively adding or removing layers.
-Layers are compared using instance equality.
-As a result of how the map is synced, the order of layers is not guaranteed to be consistent as changes are made.
-
-
-#### [leafletLayersControl]: Control.Layers
-Input bind a Control.Layers specification. The object contains properties for each of the two constructor arguments for the Control.Layers constructor.
-
-```typescript
-layersControl: {
-	baseLayers: {
-		'layerName': Layer
-	},
-	overlays: {
-		'overlayName': Layer
-	}
-}
-```
-
-#### [leafletLayersControlOptions]
-Input binding for Control.Layers options (see [Leaflet's](https://leafletjs.com/reference.html) docs).
-These options are passed into the constructor on creation.
-
-
-### Advanced Layer Management: Individual Layers and @for / @if
-The ```[leafletLayer]``` input bindings gives you the ability to add a single layer to the map.
-While this may seem limiting, you can nest elements inside the map element, each with a ```[leafletLayer]``` input. 
-The result of this is that each layer will be added to the map.
-If you add a structural directive - ```@for``` or ```@if``` - you can get some added flexibility when controlling layers.  
-
-```angular181html
-<div leaflet style="height: 300px;"
-     [leafletOptions]="options">
-    
-    @for (layer of layers; track layer.id) {
-        <div [leafletLayer]="layer"></div>
-    }
-    
-</div>
-```
-
-In this example, each layer in the ```layers``` array will create a new child ```div``` element.
-Each element will have a ```[leafletLayer]``` input binding, which will result in the layer being added to the map.
-For more details, you should check out the *Layers and ngFor* demo.
-
-There are several layer events that are available when you are using this approach to controlling layers.
-
-### Layer Events
-When you are using the ```[leafletLayer]``` directive to add a layer, you can also access output bindings for layer events.
-Two events that are currently exposed include: ```(leafletLayerAdd)``` and ```(leafletLayerRemove)```.
-Each of these emits a ```LeafletEvent``` object.
-
-
-### Map Events
-Leaflet exposes a lot of map events including map zoom, map move, and mouse interactions.
-The plugin exposes several of the most common events.
-For each of these events, the event is emitted in the Angular Zone, so you shouldn't have to do anything extra to get change detection to work.
-For a working example, check out the events section of the demo.
-
-#### Mouse Interactions: LeafletMouseEvent
-The following events are provided:
-* ```(leafletClick)```
-* ```(leafletDoubleClick)```
-* ```(leafletMouseDown)```
-* ```(leafletMouseUp)```
-* ```(leafletMouseMove)```
-* ```(leafletMouseOver)``` 
-* ```(leafletMouseOut)``` 
-
-#### Map Zoom and Move: LeafletEvent
-The following events are provided:
-* ```(leafletMapMove)```
-* ```(leafletMapMoveStart)```
-* ```(leafletMapMoveEnd)```
-* ```(leafletMapZoom)```
-* ```(leafletMapZoomStart)```
-* ```(leafletMapZoomEnd)```
-
-
-
-### Getting a Reference to the Map
-Occasionally, you may need to directly access the Leaflet map instance.
-For example, to call ```invalidateSize()``` when the map div changes size or is shown/hidden.
-There are a couple of different ways to achieve this depending on what you're trying to do.
-
-The easiest and most flexible way is to use the output binding ```leafletMapReady```.
-This output is invoked after the map is created, the argument of the event being the ```Map``` instance.
-
-The second is to get a reference to the leaflet directive itself - and there are a couple of ways to do this.
-With a reference to the directive, you can invoke the ```getMap()``` function to get a reference to the ```Map``` instance.
-
-
-#### (leafletMapReady): Map
-This output is emitted when once when the map is initially created inside of the Leaflet directive.
-The event will only fire when the map exists and is ready for manipulation.
-
-```angular181html
-<div leaflet
-     [leafletOptions]="options"
-     (leafletMapReady)="onMapReady($event)">
-</div>
-```
-
-```typescript
-onMapReady(map: Map) {
-	// Do stuff with map
-}
-```
-
-This method of getting the map makes the most sense if you are using the Leaflet directive inside your own component
-and just need to add some limited functionality or register some event handlers.
-
-
-#### Inject LeafletDirective into your Component
-This is the more advanced technique and it won't always work depending on your setup.
-In particular, this will likely not work unless you are writing your own third-party library that extends the functionality of `ngx-leaflet`.
-If this approach does not work for you, try using the `leafletMapReady` event described above.
-
-In Angular.io, directives are injectable the same way that Services are.
-This means that you can create your own component or directive and inject the ```LeafletDirective``` into it.
-This will only work if your custom component/directive exists on the same DOM element and is ordered after the injected LeafletDirective, or if it is on a child DOM element.
-
-
-```angular181html
-<!-- On the same DOM element -->
-<div leaflet myCustomDirective></div>
-
-<!-- On a child DOM element -->
-<div leaflet>
-    <div myCustomDirective></div>
-</div>
-```
-
-```typescript
-
-@Directive({
-    selector: '[myCustomDirective]'
-})
-export class MyCustomDirective {
-    readonly #leafletDirective = inject(LeafletDirective);
-
-    someFunction() {
-        if (null !== this.#leafletDirective.getMap()) {
-            // Do stuff with the map
-        }
-    }
-}
-```
-
-The benefit of this approach is it's a bit cleaner if you're interested in adding some reusable capability to the existing leaflet map directive.
-As mentioned above, it might not work depending on how you are packaging your component.
-This is how the ```@bluehalo/ngx-leaflet-draw``` and ```@bluehalo/ngx-leaflet-d3``` packages work, so you can use them as references.
-
-
-### A Note About Change Detection
-Change detection is at the core of how Angular works.
-Angular.io uses Zone.js to scope how and when (events, actions, etc.) to trigger change detection.
-It's important to scope it carefully because change detection can be fairly expensive, so you don't want it to happen constantly.
-
-Libraries like ngx-leaflet have to decide what to do inside and outside of the Angular zone, balancing convenience and performance.
-Leaflet registers handlers for a lot of mouse events. 
-To mitigate the performance impact of constantly running change detection on all mouse events (including mousemove), ngx-leaflet runs most of the Leaflet code outside of the Angular zone.
-The impact of this is that Angular won't automatically detect changes that you make inside of a Leaflet event callback.
-
-The solution is to either make sure that Angular relevant changes are made inside of Angular's zone or to manually tell Angular to detect changes.
-
-#### Running Inside of Angular's Zone
-Leaflet event handlers run outside of Angular's zone, where changes to input bound fields will not be detected automatically.
-To ensure your changes are detected and applied, you need to make those changed inside of Angular's zone.
-Fortunately, this is extremely easy.
-
-```typescript
-fitBounds: any = null;
-circle = circle([ 46.95, -122 ], { radius: 5000 });
-
-// Inject the Change Detector into your component
-constructor(private zone: NgZone) {}
-
-ngOnInit() {
-
-	// The 'add' event callback handler happens outside of the Angular zone
-	this.circle.on('add', () => {
-
-		// But, we can run stuff inside of Angular's zone by calling NgZone.run()
-		// everything inside the arrow function body happens inside of Angular's zone, where changes will be detected
-		this.zone.run(() => {
-			this.fitBounds = this.circle.getBounds();
-		});
-
-	});
-}
-``` 
-
-#### Manually Triggering Change Detection
-Another option is to manually tell the change detector to detect changes.
-The drawback to this option is that it is less precise.
-This will trigger change detection for this component and all of its children.
-
-```typescript
-fitBounds: any = null;
-circle = circle([ 46.95, -122 ], { radius: 5000 });
-
-// Inject the Change Detector into your component
-constructor(private changeDetector: ChangeDetectorRef) {}
-
-ngOnInit() {
-
-	// The 'add' event callback happens outside of the Angular zone
-	this.circle.on('add', () => {
 
-		// Because we're outside of Angular's zone, this change won't be detected
-		this.fitBounds = this.circle.getBounds();
+## Cookbook
 
-		// But, it will if we tell Angular to detect changes 
-		this.changeDetector.detectChanges();
-
-	});
-}
-```
-
-## Extensions
-There are several libraries that extend the core functionality of ngx-leaflet:
-* [Leaflet Draw](https://github.com/BlueHalo/ngx-leaflet-draw)
-* [Leaflet Markercluster](https://github.com/BlueHalo/ngx-leaflet-markercluster)
-* [Leaflet D3 (Hexbins)](https://github.com/BlueHalo/ngx-leaflet-d3)
+Common patterns and examples are in [docs/cookbook.md](docs/cookbook.md), including:
+- [Marker Setup](docs/cookbook.md#marker-setup) — configuring Leaflet markers with the Angular CLI build pipeline
+- [SSR / Server-Side Rendering](docs/cookbook.md#ssr--server-side-rendering) — working around Leaflet's browser-only module initialization
+- [Angular Components in Marker Popups](docs/cookbook.md#angular-components-in-marker-popups) — using `createComponent()` to render Angular components into Leaflet popups
 
 
 ## <a name="help">Getting Help</a>
 Here's a list of articles, tutorials, guides, and help resources:
 * [ngx-leaflet on Stack Overflow](https://stackoverflow.com/questions/tagged/ngx-leaflet)
-* [High-level intro to @bluehalo/ngx-leaflet](https://github.com/BlueHalo/ngx-leaflet/wiki)
-* [Using @bluehalo/ngx-leaflet in Angular CLI projects](https://github.com/BlueHalo/ngx-leaflet/wiki/Getting-Started-Tutorial)
-* [Integrating 3rd Party Leaflet Libraries with @bluehalo/ngx-leaflet and @angular/cli](https://github.com/BlueHalo/ngx-leaflet/wiki/Integrating-Plugins)
+* [API Reference](docs/API.md) and [Cookbook](docs/cookbook.md) — up-to-date, version-controlled docs in this repo
+* [High-level intro to @bluehalo/ngx-leaflet](https://github.com/bluehalo/ngx-leaflet/wiki) *(wiki — may be out of date)*
+* [Using @bluehalo/ngx-leaflet in Angular CLI projects](https://github.com/bluehalo/ngx-leaflet/wiki/Getting-Started-Tutorial) *(wiki — may be out of date)*
+* [Integrating 3rd Party Leaflet Libraries with @bluehalo/ngx-leaflet and @angular/cli](https://github.com/bluehalo/ngx-leaflet/wiki/Integrating-Plugins) *(wiki — may be out of date)*
 
 
 ## Contribute
-PRs accepted. If you are part of BlueHalo, please make contributions on feature branches off of the ```develop``` branch. If you are outside of BlueHalo, please fork our repo to make contributions.
+PRs accepted. Please make contributions on feature branches and open a pull request against `master`.
 
 
 ## License
-See LICENSE in repository for details.
+See [LICENSE](LICENSE) for details.
 
 
 ## Credits
 **[Leaflet](http://leafletjs.com/)** Is an awesome mapping package.
+
+**Logo** designed by [@jjmhalew](https://github.com/jjmhalew) ([#371](https://github.com/bluehalo/ngx-leaflet/issues/371)).

package/fesm2022/bluehalo-ngx-leaflet.mjs

@@ -255,10 +255,10 @@ class LeafletDirective {
             this.map.setMaxZoom(zoom);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: LeafletDirective, isStandalone: true, selector: "[leaflet]", inputs: { fitBoundsOptions: ["leafletFitBoundsOptions", "fitBoundsOptions"], panOptions: ["leafletPanOptions", "panOptions"], zoomOptions: ["leafletZoomOptions", "zoomOptions"], zoomPanOptions: ["leafletZoomPanOptions", "zoomPanOptions"], options: ["leafletOptions", "options"], zoom: ["leafletZoom", "zoom"], center: ["leafletCenter", "center"], fitBounds: ["leafletFitBounds", "fitBounds"], maxBounds: ["leafletMaxBounds", "maxBounds"], minZoom: ["leafletMinZoom", "minZoom"], maxZoom: ["leafletMaxZoom", "maxZoom"] }, outputs: { mapReady: "leafletMapReady", zoomChange: "leafletZoomChange", centerChange: "leafletCenterChange", onClick: "leafletClick", onDoubleClick: "leafletDoubleClick", onMouseDown: "leafletMouseDown", onMouseUp: "leafletMouseUp", onMouseMove: "leafletMouseMove", onMouseOver: "leafletMouseOver", onMouseOut: "leafletMouseOut", onMapMove: "leafletMapMove", onMapMoveStart: "leafletMapMoveStart", onMapMoveEnd: "leafletMapMoveEnd", onMapZoom: "leafletMapZoom", onMapZoomStart: "leafletMapZoomStart", onMapZoomEnd: "leafletMapZoomEnd" }, host: { listeners: { "window:resize": "onResize()" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: LeafletDirective, isStandalone: true, selector: "[leaflet]", inputs: { fitBoundsOptions: ["leafletFitBoundsOptions", "fitBoundsOptions"], panOptions: ["leafletPanOptions", "panOptions"], zoomOptions: ["leafletZoomOptions", "zoomOptions"], zoomPanOptions: ["leafletZoomPanOptions", "zoomPanOptions"], options: ["leafletOptions", "options"], zoom: ["leafletZoom", "zoom"], center: ["leafletCenter", "center"], fitBounds: ["leafletFitBounds", "fitBounds"], maxBounds: ["leafletMaxBounds", "maxBounds"], minZoom: ["leafletMinZoom", "minZoom"], maxZoom: ["leafletMaxZoom", "maxZoom"] }, outputs: { mapReady: "leafletMapReady", zoomChange: "leafletZoomChange", centerChange: "leafletCenterChange", onClick: "leafletClick", onDoubleClick: "leafletDoubleClick", onMouseDown: "leafletMouseDown", onMouseUp: "leafletMouseUp", onMouseMove: "leafletMouseMove", onMouseOver: "leafletMouseOver", onMouseOut: "leafletMouseOut", onMapMove: "leafletMapMove", onMapMoveStart: "leafletMapMoveStart", onMapMoveEnd: "leafletMapMoveEnd", onMapZoom: "leafletMapZoom", onMapZoomStart: "leafletMapZoomStart", onMapZoomEnd: "leafletMapZoomEnd" }, host: { listeners: { "window:resize": "onResize()" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[leaflet]',
@@ -415,10 +415,10 @@ class LeafletLayerDirective {
         l.off('add', this.onAddLayerHandler);
         l.off('remove', this.onRemoveLayerHandler);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayerDirective, deps: [{ token: LeafletDirective }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: LeafletLayerDirective, isStandalone: true, selector: "[leafletLayer]", inputs: { layer: ["leafletLayer", "layer"] }, outputs: { onAdd: "leafletLayerAdd", onRemove: "leafletLayerRemove" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletLayerDirective, deps: [{ token: LeafletDirective }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: LeafletLayerDirective, isStandalone: true, selector: "[leafletLayer]", inputs: { layer: ["leafletLayer", "layer"] }, outputs: { onAdd: "leafletLayerAdd", onRemove: "leafletLayerRemove" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletLayerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[leafletLayer]',
@@ -500,10 +500,10 @@ class LeafletLayersDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayersDirective, deps: [{ token: LeafletDirective }, { token: i0.IterableDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: LeafletLayersDirective, isStandalone: true, selector: "[leafletLayers]", inputs: { layers: ["leafletLayers", "layers"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletLayersDirective, deps: [{ token: LeafletDirective }, { token: i0.IterableDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: LeafletLayersDirective, isStandalone: true, selector: "[leafletLayers]", inputs: { layers: ["leafletLayers", "layers"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayersDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletLayersDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[leafletLayers]',
@@ -676,10 +676,10 @@ class LeafletLayersControlDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayersControlDirective, deps: [{ token: LeafletDirective }, { token: i0.KeyValueDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: LeafletLayersControlDirective, isStandalone: true, selector: "[leafletLayersControl]", inputs: { layersControlConfig: ["leafletLayersControl", "layersControlConfig"], layersControlOptions: ["leafletLayersControlOptions", "layersControlOptions"] }, outputs: { layersControlReady: "leafletLayersControlReady", onOverlayAdd: "leafletOverlayAdd", onOverlayRemove: "leafletOverlayRemove" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletLayersControlDirective, deps: [{ token: LeafletDirective }, { token: i0.KeyValueDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: LeafletLayersControlDirective, isStandalone: true, selector: "[leafletLayersControl]", inputs: { layersControlConfig: ["leafletLayersControl", "layersControlConfig"], layersControlOptions: ["leafletLayersControlOptions", "layersControlOptions"] }, outputs: { layersControlReady: "leafletLayersControlReady", onOverlayAdd: "leafletOverlayAdd", onOverlayRemove: "leafletOverlayRemove" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletLayersControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletLayersControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[leafletLayersControl]',
@@ -798,10 +798,10 @@ class LeafletBaseLayersDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletBaseLayersDirective, deps: [{ token: LeafletDirective }, { token: i0.KeyValueDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: LeafletBaseLayersDirective, isStandalone: true, selector: "[leafletBaseLayers]", inputs: { baseLayers: ["leafletBaseLayers", "baseLayers"], layersControlOptions: ["leafletLayersControlOptions", "layersControlOptions"] }, outputs: { layersControlReady: "leafletLayersControlReady" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletBaseLayersDirective, deps: [{ token: LeafletDirective }, { token: i0.KeyValueDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: LeafletBaseLayersDirective, isStandalone: true, selector: "[leafletBaseLayers]", inputs: { baseLayers: ["leafletBaseLayers", "baseLayers"], layersControlOptions: ["leafletLayersControlOptions", "layersControlOptions"] }, outputs: { layersControlReady: "leafletLayersControlReady" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletBaseLayersDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletBaseLayersDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[leafletBaseLayers]',
@@ -818,8 +818,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
             }] } });
 
 class LeafletModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: LeafletModule, imports: [LeafletDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: LeafletModule, imports: [LeafletDirective,
             LeafletLayerDirective,
             LeafletLayersDirective,
             LeafletLayersControlDirective,
@@ -828,9 +828,9 @@ class LeafletModule {
             LeafletLayersDirective,
             LeafletLayersControlDirective,
             LeafletBaseLayersDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeafletModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LeafletModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@bluehalo/ngx-leaflet",
   "description": "Angular.io components for Leaflet",
-  "version": "21.2.0",
-  "author": "BlueHalo, LLC",
-  "copyright": "Copyright BlueHalo 2007-2025 - All Rights Reserved.",
+  "version": "21.2.1",
+  "author": "BlueHalo",
+  "copyright": "Copyright (c) BlueHalo LLC",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -28,5 +28,6 @@
       "default": "./fesm2022/bluehalo-ngx-leaflet.mjs"
     }
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "type": "module"
 }