@progress/kendo-angular-map 19.1.2-develop.1 → 19.1.2-develop.3

package/fesm2022/progress-kendo-angular-map.mjs

@@ -351,44 +351,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * A vector shape layer for bubble maps. [See example](slug:bubble_layers_map).
+ * Represents the Kendo UI BubbleLayer component for Angular. Displays data as bubbles on vector shape layers for bubble maps.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-map>
+ *       <kendo-map-bubble-layer
+ *         [data]="bubbleData"
+ *         locationField="location"
+ *         valueField="population"
+ *         [maxSize]="50"
+ *         [minSize]="10">
+ *       </kendo-map-bubble-layer>
+ *     </kendo-map>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public bubbleData = [
+ *     { location: [40.7128, -74.0060], population: 8000000 }
+ *   ];
+ * }
+ * ```
  */
 class BubbleLayerComponent extends LayerComponent {
     configurationService;
     collectionService;
     sanitizer;
     /**
-     * The array of data items for this layer.
+     * Sets the array of data items for this layer.
      */
     data;
     /**
-     * The data item field which contains the symbol location.
-     *
-     * The field should be an array with two numbers - latitude and longitude in decimal degrees.
+     * Sets the data item field which contains the symbol location.
+     * The field should be an array with two numbers &mdash; latitude and longitude in decimal degrees.
      */
     locationField;
     /**
-     * The value field for the symbols used to determine their relative size.
+     * Sets the value field for the symbols used to determine their relative size.
      * The data item field should be a number.
      */
     valueField;
     /**
-     * The symbol to use for bubble layers.
+     * Sets the symbol to use for bubble layers.
      */
     symbol;
     /**
-     * The default style for symbols.
+     * Sets the default style for symbols.
      */
     style;
     /**
-     * The maximum symbol size for bubble layer symbols.
+     * Sets the maximum symbol size for bubble layer symbols.
      *
      * @default 100
      */
     maxSize;
     /**
-     * The minimum symbol size for bubble layer symbols.
-     * Setting non-zero value will distort symbol area to value ratio.
+     * Sets the minimum symbol size for bubble layer symbols.
+     * Setting a non-zero value will distort the symbol area to value ratio.
      *
      * @default 0
      */
@@ -489,7 +511,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: undefined }]; } });
 
 /**
- * Fired immediately before the map is reset. This event is typically used for cleanup by layer implementers.
+ * Arguments for the `beforeReset` event.
+ * Fires immediately before the map resets. Layer implementers typically use this event for cleanup.
  */
 class BeforeResetEvent extends BaseEvent {
     /**
@@ -501,7 +524,8 @@ class BeforeResetEvent extends BaseEvent {
 }
 
 /**
- * Fired when the user clicks on the map.
+ * Arguments for the `mapClick` event.
+ * Fires when you click on the map.
  */
 class MapClickEvent extends BaseEvent {
     /**
@@ -509,7 +533,7 @@ class MapClickEvent extends BaseEvent {
      */
     location;
     /**
-     * The source DOM event instance
+     * The source DOM event instance.
      */
     originalEvent;
     /**
@@ -523,7 +547,8 @@ class MapClickEvent extends BaseEvent {
 }
 
 /**
- * Fired when a marker has been displayed and has a DOM element assigned.
+ * Arguments for the `markerActivate` event.
+ * Fires when a marker displays and has a DOM element assigned.
  */
 class MarkerActivateEvent extends BaseEvent {
     /**
@@ -545,7 +570,8 @@ class MarkerActivateEvent extends BaseEvent {
 }
 
 /**
- * Fired when a marker has been clicked or tapped.
+ * Arguments for the `markerClick` event.
+ * Fires when the user clicks or taps a marker.
  */
 class MarkerClickEvent extends BaseEvent {
     /**
@@ -597,9 +623,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * Fired when a marker has been created and is about to be displayed.
+ * Arguments for the `markerCreated` event.
+ * Fires once the map has created a marker, and just before the map displays it.
  *
- * Cancelling the event will prevent the marker from being shown.
+ * Cancelling the event prevents displaying the marker.
  */
 class MarkerCreatedEvent extends PreventableEvent {
     /**
@@ -621,7 +648,8 @@ class MarkerCreatedEvent extends PreventableEvent {
 }
 
 /**
- * Fires after the map viewport has been moved.
+ * Arguments for the `panEnd` event.
+ * Fires after the map viewport completes panning.
  */
 class PanEndEvent extends BaseEvent {
     /**
@@ -633,7 +661,7 @@ class PanEndEvent extends BaseEvent {
      */
     center;
     /**
-     * The source DOM event instance
+     * The source DOM event instance.
      */
     originalEvent;
     /**
@@ -648,7 +676,8 @@ class PanEndEvent extends BaseEvent {
 }
 
 /**
- * Fired while the map viewport is being moved.
+ * Arguments for the `pan` event.
+ * Fires while the map viewport is being moved.
  */
 class PanEvent extends BaseEvent {
     /**
@@ -660,7 +689,7 @@ class PanEvent extends BaseEvent {
      */
     center;
     /**
-     * The source DOM event instance
+     * The source DOM event instance.
      */
     originalEvent;
     /**
@@ -675,7 +704,8 @@ class PanEvent extends BaseEvent {
 }
 
 /**
- * Fired when the map is reset.
+ * Arguments for the `reset` event.
+ * Fires when the map resets.
  *
  * This typically occurs on initial load and after a zoom/center change.
  */
@@ -689,7 +719,8 @@ class ResetEvent extends BaseEvent {
 }
 
 /**
- * Fired when a shape is clicked or tapped.
+ * Arguments for the `shapeClick` event.
+ * Fires when a shape is clicked or tapped.
  */
 class ShapeClickEvent extends BaseEvent {
     /**
@@ -701,7 +732,7 @@ class ShapeClickEvent extends BaseEvent {
      */
     shape;
     /**
-     * The source DOM event instance
+     * The source DOM event instance.
      */
     originalEvent;
     /**
@@ -716,7 +747,8 @@ class ShapeClickEvent extends BaseEvent {
 }
 
 /**
- * Fired when a shape is created, but is not rendered yet.
+ * Arguments for the `shapeCreated` event.
+ * Fires when a shape is created, but is not rendered yet.
  */
 class ShapeCreatedEvent extends BaseEvent {
     /**
@@ -732,7 +764,7 @@ class ShapeCreatedEvent extends BaseEvent {
      */
     dataItem;
     /**
-     * The shape location
+     * The shape location.
      */
     location;
     /**
@@ -748,11 +780,12 @@ class ShapeCreatedEvent extends BaseEvent {
 }
 
 /**
- * Fired when a [GeoJSON Feature](https://geojson.org/geojson-spec.html#feature-objects) is created on a shape layer.
+ * Arguments for the `shapeFeatureCreated` event.
+ * Fires when a [GeoJSON Feature](https://geojson.org/geojson-spec.html#feature-objects) is created on a shape layer.
  */
 class ShapeFeatureCreatedEvent extends BaseEvent {
     /**
-     * The original data item for this Feature. Members include `geometries` and `properties`.
+     * The original data item for this Feature. Includes `geometries` and `properties` members.
      */
     dataItem;
     /**
@@ -760,7 +793,7 @@ class ShapeFeatureCreatedEvent extends BaseEvent {
      */
     layer;
     /**
-     * The group containing feature shape instances.
+     * The group that contains feature shape instances.
      */
     group;
     /**
@@ -780,10 +813,11 @@ class ShapeFeatureCreatedEvent extends BaseEvent {
 }
 
 /**
- * Fired when the mouse enters a shape.
+ * Arguments for the `shapeMouseEnter` event.
+ * Fires when the mouse enters a shape.
  *
- * > This event will fire reliably only for shapes that have set fill color.
- * > The opacity can still be set to 0 so the shapes appear to have no fill.
+ * > This event fires reliably only for shapes that have a set fill color.
+ * > You can still set the opacity to 0 so the shapes appear to have no fill.
  */
 class ShapeMouseEnterEvent extends BaseEvent {
     /**
@@ -795,7 +829,7 @@ class ShapeMouseEnterEvent extends BaseEvent {
      */
     shape;
     /**
-     * The source DOM event instance
+     * The source DOM event instance.
      */
     originalEvent;
     /**
@@ -810,10 +844,11 @@ class ShapeMouseEnterEvent extends BaseEvent {
 }
 
 /**
- * Fired when the mouse leaves a shape.
+ * Arguments for the `shapeMouseLeave` event.
+ * Fires when the mouse leaves a shape.
  *
- * > This event will fire reliably only for shapes that have set fill color.
- * > The opacity can still be set to 0 so the shapes appear to have no fill.
+ * > This event fires reliably only for shapes that have a set fill color.
+ * > You can still set the opacity to 0 so the shapes appear to have no fill.
  */
 class ShapeMouseLeaveEvent extends BaseEvent {
     /**
@@ -825,7 +860,7 @@ class ShapeMouseLeaveEvent extends BaseEvent {
      */
     shape;
     /**
-     * The source DOM event instance
+     * The source DOM event instance.
      */
     originalEvent;
     /**
@@ -840,11 +875,12 @@ class ShapeMouseLeaveEvent extends BaseEvent {
 }
 
 /**
- * Fired when the map zoom level has changed.
+ * Arguments for the `zoomEnd` event.
+ * Fires when the map zoom level changes.
  */
 class ZoomEndEvent extends BaseEvent {
     /**
-     * The source DOM event instance
+     * The source DOM event instance.
      */
     originalEvent;
     /**
@@ -857,13 +893,13 @@ class ZoomEndEvent extends BaseEvent {
 }
 
 /**
- * Fired when the map zoom level is about to change.
- *
- * Cancelling the event will prevent the user action.
+ * Arguments for the `zoomStart` event.
+ * Fires when the map zoom level is about to change.
+ * Cancel the event to prevent the user action.
  */
 class ZoomStartEvent extends PreventableEvent {
     /**
-     * The source DOM event instance
+     * The source DOM event instance.
      */
     originalEvent;
     /**
@@ -911,8 +947,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1749804495,
-    version: '19.1.2-develop.1',
+    publishDate: 1750152817,
+    version: '19.1.2-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1159,11 +1195,14 @@ const svgIcons = {
 /**
  * Represents the [Kendo UI Map component for Angular]({% slug overview_map %}).
  *
+ * Use this component to display interactive maps with markers, layers, and controls.
+ * Configure zoom levels, center coordinates, and user interactions like panning and zooming.
+ *
  * @example
  * ```ts
  * import { Component } from '@angular/core';
  *
- * _@Component({
+ * @Component({
  *   selector: 'my-app',
  *   template: `
  *      <kendo-map [center]="center" [zoom]="15">
@@ -1192,7 +1231,6 @@ const svgIcons = {
  *  center = [30.2675, -97.7409];
  *  markers = [{ latlng: [30.2675, -97.7409], name: "Zevo Toys" }];
  * }
- *
  * ```
  */
 class MapComponent {
@@ -1207,18 +1245,16 @@ class MapComponent {
     /**
      * Limits the automatic resizing of the Map. Sets the maximum number of times per second
      * that the component redraws its content when the size of its container changes.
-     * Defaults to `10`. To disable the automatic resizing, set it to `0`.
+     * To disable the automatic resizing, set it to `0`.
+     *
+     * @default 10
      *
      * @example
      * ```ts
-     * _@Component({
+     * @Component({
      *     selector: 'my-app',
      *     template: `
      *         <kendo-map [resizeRateLimit]="2">
-     * <!--                 ^^^^^^^^^^^^^^^^^^^^^^
-     *       Will update the size of the Map up to two times a second.
-     *       Resize the example pane or window to try it out.
-     * -->
      *       </kendo-map>
      *   `
      * })
@@ -1228,11 +1264,12 @@ class MapComponent {
      */
     resizeRateLimit = 10;
     /**
-     * The map center. Coordinates are listed as `[Latitude, Longitude]`.
+     * Specifies the map center coordinates.
+     * Provide coordinates as `[Latitude, Longitude]`.
      */
     center;
     /**
-     * The configuration of built-in map controls.
+     * Specifies the configuration for built-in map controls.
      */
     controls;
     /**
@@ -1270,101 +1307,98 @@ class MapComponent {
      */
     wraparound;
     /**
-     * The initial zoom level.
-     *
-     * Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features).
-     *
-     * The map size is derived from the zoom level and minScale options: `size = (2 ^ zoom) * minSize`
-     *
-     * > Map zoom rounds floating point numbers. This is done so as the majority of web maps use the whole [`zoom levels`](https://wiki.openstreetmap.org/wiki/Zoom_levels) 0 through to 19.
+     * Specifies the initial zoom level.
+     * Use values from 0 (whole world) to 19 (sub-meter features).
+     * The map size derives from the zoom level and `minScale` options: `size = (2 ^ zoom) * minSize`.
+     * Map zoom rounds floating point numbers to use whole [`zoom levels`](https://wiki.openstreetmap.org/wiki/Zoom_levels) 0 through 19.
      *
      * @default 3
      */
     zoom = 3;
     /**
-     * Controls whether the map zoom level can be changed by the user.
+     * Determines whether users can change the map zoom level.
      *
      * @default true
      */
     zoomable;
     /**
-     * Fired immediately before the map is reset. This event is typically used for cleanup by layer implementers.
+     * Fires immediately before the map resets. This event is typically used for cleanup by layer implementers.
      */
     beforeReset = new EventEmitter();
     /**
-     * Fired when the user clicks on the map.
+     * Fires when the user clicks on the map.
      */
     mapClick = new EventEmitter();
     /**
-     * Fired when a marker has been displayed and has a DOM element assigned.
+     * Fires when a marker appears on the map and its DOM element becomes available.
      */
     markerActivate = new EventEmitter();
     /**
-     * Fired when a marker has been clicked or tapped.
+     * Fires when the user clicks or taps a marker.
      */
     markerClick = new EventEmitter();
     /**
-     * Fired when a marker has been created and is about to be displayed.
+     * Fires once the map has created a marker, and just before the map displays it.
      *
-     * Cancelling the event will prevent the marker from being shown.
+     * Cancelling the event prevents displaying the marker.
      */
     markerCreated = new EventEmitter();
     /**
-     * Fires after the map viewport has been moved.
+     * Fires after the map viewport completes panning.
      */
     panEnd = new EventEmitter();
     /**
-     * Fired while the map viewport is being moved.
+     * Fires while the map viewport is being moved.
      */
     pan = new EventEmitter();
     /**
-     * Fired when the map is reset.
+     * Fires when the map resets.
      *
      * This typically occurs on initial load and after a zoom/center change.
      */
     reset = new EventEmitter();
     /**
-     * Fired when a shape is clicked or tapped.
+     * Fires when a shape is clicked or tapped.
      */
     shapeClick = new EventEmitter();
     /**
-     * Fired when a shape is created, but is not rendered yet.
+     * Fires when a shape is created, but is not rendered yet.
      */
     shapeCreated = new EventEmitter();
     /**
-     * Fired when a [GeoJSON Feature](https://geojson.org/geojson-spec.html#feature-objects) is created on a shape layer.
+     * Fires when a [GeoJSON Feature](https://geojson.org/geojson-spec.html#feature-objects) is created on a shape layer.
      */
     shapeFeatureCreated = new EventEmitter();
     /**
-     * Fired when the mouse enters a shape.
+     * Fires when the mouse enters a shape.
      *
      * > This event will fire reliably only for shapes that have set fill color.
      * > The opacity can still be set to 0 so the shapes appear to have no fill.
      */
     shapeMouseEnter = new EventEmitter();
     /**
-     * Fired when the mouse leaves a shape.
+     * Fires when the mouse leaves a shape.
      *
      * > This event will fire reliably only for shapes that have set fill color.
      * > The opacity can still be set to 0 so the shapes appear to have no fill.
      */
     shapeMouseLeave = new EventEmitter();
     /**
-     * Fired when the map zoom level is about to change.
+     * Fires when the map zoom level is about to change.
      *
      * Cancelling the event will prevent the user action.
      */
     zoomStart = new EventEmitter();
     /**
-     * Fired when the map zoom level has changed.
+     * Fires when the map zoom level changes.
      */
     zoomEnd = new EventEmitter();
     /**
-     * Fired when the map center has been changed.
+     * Fires when the map center has been changed.
      */
     centerChange = new EventEmitter();
     /**
-     * Fired when the map zoom level has been changed.
+     * Fires when the map zoom level has been changed.
      */
     zoomChange = new EventEmitter();
     tooltipInstance;
@@ -1451,7 +1485,7 @@ class MapComponent {
         }
     }
     /**
-     * The marker layers instances.
+     * Gets the marker layers instances.
      */
     get layers() {
         return this.instance?.layers;
@@ -1469,92 +1503,95 @@ class MapComponent {
         this.instance?.extent(extent);
     }
     /**
-     * Detects the size of the container and redraws the Map.
-     * Resizing is automatic unless you set the `resizeRateLimit` option to `0`.
+     * Detects the container size and redraws the Map.
+     * Resizing happens automatically unless you set `resizeRateLimit` to `0`.
      */
     resize() {
         //this.instance?.resize();
     }
     /**
-     * Retrieves the size of the visible portion of the map.
+     * Gets the size of the visible map area.
      *
-     * @returns The size (width and height) of the visible portion of the map.
+     * @returns {Object} The width and height of the visible map area.
      */
     viewSize() {
         return this.instance?.viewSize();
     }
     /**
-     * Returns the event coordinates relative to the map element. Offset coordinates are not synchronized to a particular location on the map.
+     * Gets event coordinates relative to the map element.
+     * Offset coordinates do not sync to a specific map location.
      *
-     * @param e The mouse event.
-     * @returns The event coordinates relative to the map element.
+     * @param {any} e The mouse event.
+     * @returns {geometry.Point} The event coordinates relative to the map element.
      */
     eventOffset(e) {
         return this.instance?.eventOffset(e);
     }
     /**
-     * Retrieves projected (layer) coordinates that correspond to this mouse event. Layer coordinates are absolute and change only when the zoom level is changed.
+     * Gets projected layer coordinates for this mouse event.
+     * Layer coordinates are absolute and change only when zoom level changes.
      *
-     * @param e The mouse event.
-     * @returns The projected (layer) coordinates that correspond to this event.
+     * @param {any} e The mouse event.
+     * @returns {geometry.Point} The projected layer coordinates for this event.
      */
     eventToLayer(e) {
         return this.instance?.eventToLayer(e);
     }
     /**
-     * Retrieves the geographic location that correspond to this mouse event.
+     * Gets the geographic location for this mouse event.
      *
-     * @param e The mouse event.
-     * @returns The geographic location that correspond to this mouse event.
+     * @param {any} e The mouse event.
+     * @returns {geometry.Point} The geographic location for this mouse event.
      */
     eventToLocation(e) {
         return this.instance?.eventToLocation(e);
     }
     /**
-     * Retrieves relative (view) coordinates that correspond to this mouse event. Layer elements positioned on these coordinates will appear under the mouse cursor.
-     * View coordinates are no longer valid after a map reset.
+     * Gets relative view coordinates for this mouse event.
+     * Layer elements positioned on these coordinates appear under the mouse cursor.
+     * View coordinates become invalid after a map reset.
      *
-     * @param e The mouse event.
-     * @returns The relative (view) coordinates that correspond to this mouse event.
+     * @param {any} e The mouse event.
+     * @returns {geometry.Point} The relative view coordinates for this mouse event.
      */
     eventToView(e) {
         return this.instance?.eventToView(e);
     }
     /**
-     * Transforms layer (projected) coordinates to geographical location.
+     * Converts layer coordinates to geographic location.
      *
-     * @param point The layer (projected) coordinates. An array argument is assumed to be in x, y order.
-     * @param zoom Optional. Assumed zoom level. Defaults to the current zoom level.
-     * @returns The geographic location that corresponds to the layer coordinates.
+     * @param {geometry.Point | number[]} point The layer coordinates. Arrays use x, y order.
+     * @param {number} zoom Optional. Zoom level to use. Defaults to current zoom level.
+     * @returns {Location} The geographic location for the layer coordinates.
      */
     layerToLocation(point, zoom) {
         return this.instance?.layerToLocation(point, zoom);
     }
     /**
-     * Returns the layer (projected) coordinates that correspond to a geographical location.
+     * Gets layer coordinates for a geographic location.
      *
-     * @param location The geographic location. An array argument is assumed to be in [Latitude, Longitude] order.
-     * @param zoom Optional. Assumed zoom level. Defaults to the current zoom level.
-     * @returns The layer (projected) coordinates.
+     * @param {Location | number[]} location The geographic location. Arrays use [Latitude, Longitude] order.
+     * @param {number} zoom Optional. Zoom level to use. Defaults to current zoom level.
+     * @returns {geometry.Point} The layer coordinates.
      */
     locationToLayer(location, zoom) {
         return this.instance?.locationToLayer(location, zoom);
     }
     /**
-     * Returns the view (relative) coordinates that correspond to a geographical location.
+     * Gets view coordinates for a geographic location.
      *
-     * @param location The geographic location. An array argument is assumed to be in [Latitude, Longitude] order.
-     * @returns The view coordinates that correspond to a geographical location.
+     * @param {Location | number[]} location The geographic location. Arrays use [Latitude, Longitude] order.
+     * @returns {geometry.Point} The view coordinates for the geographic location.
      */
     locationToView(location) {
         return this.instance?.locationToView(location);
     }
     /**
-     * Returns the geographical location that correspond to the view (relative) coordinates.
+     * Gets the geographic location for view coordinates.
      *
-     * @param point The view coordinates. An array argument is assumed to be in x, y order.
-     * @param zoom Optional. Assumed zoom level. Defaults to the current zoom level.
-     * @returns The geographic location that corresponds to the view coordinates.
+     * @param {geometry.Point | number[]} point The view coordinates. Arrays use x, y order.
+     * @param {number} zoom Optional. Zoom level to use. Defaults to current zoom level.
+     * @returns {Location} The geographic location for the view coordinates.
      */
     viewToLocation(point, zoom) {
         return this.instance?.viewToLocation(point, zoom);
@@ -1865,7 +1902,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * A collection of one or more layers.
+ * Represents the Kendo UI Layers component for Angular. Contains a collection of one or more map layers.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-map>
+ *       <kendo-map-layers>
+ *         <kendo-map-tile-layer [urlTemplate]="tileUrl"></kendo-map-tile-layer>
+ *         <kendo-map-shape-layer [data]="shapeData"></kendo-map-shape-layer>
+ *       </kendo-map-layers>
+ *     </kendo-map>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public tileUrl = (args: any) => `https://tile.openstreetmap.org/${args.z}/${args.x}/${args.y}.png`;
+ *   public shapeData = [];
+ * }
+ * ```
  */
 class LayersComponent extends CollectionComponent {
     configurationService;
@@ -1890,30 +1946,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: CollectionService }]; } });
 
 /**
- * A vector shape layer for bubble maps. [See example](slug:marker_layers_map).
+ * Represents the Kendo UI MarkerLayer component for Angular. Displays data as markers on vector shape layers for marker maps.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-map>
+ *       <kendo-map-marker-layer
+ *         [data]="markerData"
+ *         locationField="location"
+ *         titleField="title"
+ *         shape="pin">
+ *       </kendo-map-marker-layer>
+ *     </kendo-map>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public markerData = [
+ *     { location: [40.7128, -74.0060], title: "New York" }
+ *   ];
+ * }
+ * ```
  */
 class MarkerLayerComponent extends LayerComponent {
     configurationService;
     collectionService;
     sanitizer;
     /**
-     * The array of data items for this layer.
+     * Sets the array of data items for this layer.
      */
     data;
     /**
-     * The data item field which contains the marker location.
-     *
-     * The field should be an array with two numbers - latitude and longitude in decimal degrees.
+     * Sets the data item field which contains the marker location.
+     * The field should be an array with two numbers &mdash; latitude and longitude in decimal degrees.
      */
     locationField;
     /**
-     * The data item field which contains the marker title.
+     * Sets the data item field which contains the marker title.
      */
     titleField;
     /**
-     * The default marker shape for data-bound markers. Supported marker shapes are "pinTarget and "pin".
-     *
-     * Marker shapes are implemented as CSS classes on the marker element (`span.k-marker`). For example "pinTarget" is rendered as `k-marker-pin-target`.
+     * Sets the default marker shape for data-bound markers. Supported marker shapes are `pinTarget` and `pin`.
+     * Marker shapes are implemented as CSS classes on the marker element (`span.k-marker`). For example `pinTarget` is rendered as `k-marker-pin-target`.
      */
     shape;
     constructor(configurationService, collectionService, sanitizer) {
@@ -1957,18 +2033,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Defines a vector shape layer bound to GeoJSON data. [See example](slug:shape_layers_map).
+ * Represents the Kendo UI ShapeLayer component for Angular. Defines a vector shape layer bound to GeoJSON data.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-map>
+ *       <kendo-map-shape-layer
+ *         [data]="geoJsonData"
+ *         [style]="shapeStyle">
+ *       </kendo-map-shape-layer>
+ *     </kendo-map>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public geoJsonData = { type: "FeatureCollection", features: [] };
+ *   public shapeStyle = { fill: { color: "#007acc" }, stroke: { color: "#ffffff" } };
+ * }
+ * ```
  */
 class ShapeLayerComponent extends LayerComponent {
     configurationService;
     collectionService;
     sanitizer;
     /**
-     * The array of data items for this layer.
+     * Sets the array of data items for this layer.
      */
     data;
     /**
-     * The default style for shapes.
+     * Sets the default style for shapes.
      */
     style;
     constructor(configurationService, collectionService, sanitizer) {
@@ -2008,26 +2103,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Defines a vector shape layer bound to GeoJSON data. [See example](slug:tile_layers_map).
+ * Represents the Kendo UI TileLayer component for Angular. Displays raster map tiles from various sources.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-map>
+ *       <kendo-map-tile-layer
+ *         [urlTemplate]="tileUrlTemplate"
+ *         [subdomains]="['a', 'b', 'c']"
+ *         [tileSize]="256">
+ *       </kendo-map-tile-layer>
+ *     </kendo-map>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public tileUrlTemplate = (args: any) => `https://${args.subdomain}.tile.openstreetmap.org/${args.z}/${args.x}/${args.y}.png`;
+ * }
+ * ```
  */
 class TileLayerComponent extends LayerComponent {
     configurationService;
     collectionService;
     sanitizer;
     /**
-     * The size of the image tile in pixels.
+     * Sets the size of the image tile in pixels.
      *
      * @default 256
      */
     tileSize;
     /**
-     * A list of subdomains to use for loading tiles.
-     *
-     * Alternating between different subdomains allows more requests to be executed in parallel.
+     * Sets a list of subdomains to use for loading tiles.
+     * Alternating between different subdomains allows more requests to execute in parallel.
      */
     subdomains;
     /**
-     * A function that returns an image URL for each tile position.
+     * Sets a function that returns an image URL for each tile position.
      */
     urlTemplate;
     constructor(configurationService, collectionService, sanitizer) {
@@ -2078,6 +2191,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *    * `layerIndex: number`&mdash;The index of the layer for the tooltip.
  *    * `location: Location`&mdash;The location of the bubble.
  *    * `value: number`&mdash;The value of the bubble.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-map>
+ *       <kendo-map-layer type="bubble" [data]="data">
+ *         <kendo-map-bubble-layer-tooltip>
+ *           <ng-template kendoMapBubbleTooltipTemplate let-dataItem="dataItem" let-value="value">
+ *             <div>{{ dataItem.name }}: {{ value }}</div>
+ *           </ng-template>
+ *         </kendo-map-bubble-layer-tooltip>
+ *       </kendo-map-layer>
+ *     </kendo-map>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public data = [{ name: 'City', value: 100000 }];
+ * }
+ * ```
  */
 class BubbleTooltipTemplateDirective {
     templateRef;
@@ -2106,6 +2240,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *    * `title: string`&mdash;The marker title.
  *    * `layerIndex: number`&mdash;The index of the layer for the tooltip.
  *    * `location: Location`&mdash;The marker location.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-map>
+ *       <kendo-map-layer type="marker" [data]="markers">
+ *         <kendo-map-marker-layer-tooltip>
+ *           <ng-template kendoMapMarkerTooltipTemplate let-title="title" let-location="location">
+ *             <div>{{ title }} at {{ location.lat }}, {{ location.lng }}</div>
+ *           </ng-template>
+ *         </kendo-map-marker-layer-tooltip>
+ *       </kendo-map-layer>
+ *     </kendo-map>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public markers = [{ title: 'Office', location: [42.6977, 23.3219] }];
+ * }
+ * ```
  */
 class MarkerTooltipTemplateDirective {
     templateRef;
@@ -2134,6 +2289,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *    * `dataItem: any`&mdash;The original data item used to create the shape.
  *    * `layerIndex: number`&mdash;The index of the layer for the tooltip.
  *    * `location: Location`&mdash;The location of the center of the shape.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-map>
+ *       <kendo-map-layer type="shape" [data]="data">
+ *         <kendo-map-shape-layer-tooltip>
+ *           <ng-template kendoMapShapeTooltipTemplate let-dataItem="dataItem" let-layerIndex="layerIndex">
+ *             <div>Shape: {{ dataItem.properties.name }} (Layer {{ layerIndex }})</div>
+ *           </ng-template>
+ *         </kendo-map-shape-layer-tooltip>
+ *       </kendo-map-layer>
+ *     </kendo-map>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public data = [ ... ]; // GeoJSON data for shapes
+ * }
+ * ```
  */
 class ShapeTooltipTemplateDirective {
     templateRef;
@@ -2154,7 +2330,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * The configuration options of the [Bubble Layer Tooltip](slug:bubble_layers_map#toc-tooltips).
+ * Represents the Kendo UI BubbleTooltip component for Angular.
+ *
+ * Configures the [Bubble Layer Tooltip](slug:bubble_layers_map#toc-tooltips).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-map>
+ *       <kendo-map-layer type="bubble" [data]="bubbleData">
+ *         <kendo-map-bubble-layer-tooltip>
+ *           <ng-template kendoMapBubbleTooltipTemplate let-dataItem="dataItem" let-value="value">
+ *             <div>{{ dataItem.name }}: {{ value }}</div>
+ *           </ng-template>
+ *         </kendo-map-bubble-layer-tooltip>
+ *       </kendo-map-layer>
+ *     </kendo-map>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public bubbleData = [{ name: 'Population', value: 50000 }];
+ * }
+ * ```
  */
 class BubbleTooltipComponent extends SettingsComponent {
     configurationService;
@@ -2186,7 +2385,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options of the [Marker Layer Tooltip](slug:marker_layers_map#toc-tooltips).
+ * Represents the Kendo UI MarkerTooltip component for Angular.
+ *
+ * Configures the [Marker Layer Tooltip](slug:marker_layers_map#toc-tooltips).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-map>
+ *       <kendo-map-layer type="marker" [data]="markers">
+ *         <kendo-map-marker-layer-tooltip>
+ *           <ng-template kendoMapMarkerTooltipTemplate let-title="title">
+ *             <div>Marker: {{ title }}</div>
+ *           </ng-template>
+ *         </kendo-map-marker-layer-tooltip>
+ *       </kendo-map-layer>
+ *     </kendo-map>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public markers = [{ title: 'Location A' }];
+ * }
+ * ```
  */
 class MarkerTooltipComponent extends SettingsComponent {
     configurationService;
@@ -2218,7 +2440,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The configuration options of the [Shape Layer Tooltip](slug:shape_layers_map#toc-tooltips).
+ * Represents the Kendo UI ShapeTooltip component for Angular.
+ *
+ * Configures the [Shape Layer Tooltip](slug:shape_layers_map#toc-tooltips).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-map>
+ *       <kendo-map-layer type="shape" [data]="shapeData">
+ *         <kendo-map-shape-layer-tooltip>
+ *           <ng-template kendoMapShapeTooltipTemplate let-dataItem="dataItem">
+ *             <div>{{ dataItem.properties.name }}</div>
+ *           </ng-template>
+ *         </kendo-map-shape-layer-tooltip>
+ *       </kendo-map-layer>
+ *     </kendo-map>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public shapeData = [ ... ]; // GeoJSON data for shapes
+ * }
+ * ```
  */
 class ShapeTooltipComponent extends SettingsComponent {
     configurationService;
@@ -2250,8 +2495,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
-* Utility array that contains all `Map` related components and directives.
-*/
+ * Utility array that contains all `Map` related components and directives.
+ */
 const KENDO_MAP = [
     BubbleLayerComponent,
     BubbleTooltipComponent,
@@ -2270,24 +2515,24 @@ const KENDO_MAP = [
 //IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
-* definition for the Map component.
-* @example
-*
-* ```ts
-* import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-* import { BrowserModule } from '@angular/platform-browser';
-* import { NgModule } from '@angular/core';
-* import { MapModule } from '@progress/kendo-angular-map';
-* import { AppComponent } from './app.component';
-*
-* @NgModule({
-*     declarations: [AppComponent],
-*     imports:      [BrowserModule, BrowserAnimationsModule, MapModule],
-*     bootstrap:    [AppComponent]
-* })
-* export class AppModule {}
-*```
-*/
+ * definition for the Map component.
+ *
+ * @example
+ * ```ts
+ * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { NgModule } from '@angular/core';
+ * import { MapModule } from '@progress/kendo-angular-map';
+ * import { AppComponent } from './app.component';
+ *
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports: [BrowserModule, BrowserAnimationsModule, MapModule],
+ *     bootstrap: [AppComponent]
+ * })
+ * export class AppModule {}
+ * ```
+ */
 class MapModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MapModule, imports: [BubbleLayerComponent, BubbleTooltipComponent, BubbleTooltipTemplateDirective, LayersComponent, MapComponent, MarkerLayerComponent, MarkerTooltipComponent, MarkerTooltipTemplateDirective, ShapeLayerComponent, ShapeTooltipComponent, ShapeTooltipTemplateDirective, TileLayerComponent], exports: [BubbleLayerComponent, BubbleTooltipComponent, BubbleTooltipTemplateDirective, LayersComponent, MapComponent, MarkerLayerComponent, MarkerTooltipComponent, MarkerTooltipTemplateDirective, ShapeLayerComponent, ShapeTooltipComponent, ShapeTooltipTemplateDirective, TileLayerComponent] });