@progress/kendo-angular-map

/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChange } from '@angular/core'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { PopupSettings } from '@progress/kendo-angular-popup'; import { IconSettings, IconsService } from '@progress/kendo-angular-icons'; import { Extent, Location, Map, MapControls, MapLayer } from '@progress/kendo-charts'; import { geometry } from '@progress/kendo-drawing'; import { Subscription } from 'rxjs'; import { ConfigurationService } from './common/configuration.service'; import { MapInstanceObserver } from './common/map-instance-observer'; import { BeforeResetEvent, MapClickEvent, MarkerActivateEvent, MarkerClickEvent, MarkerCreatedEvent, PanEndEvent, PanEvent, ResetEvent, ShapeClickEvent, ShapeCreatedEvent, ShapeFeatureCreatedEvent, ShapeMouseEnterEvent, ShapeMouseLeaveEvent, ZoomEndEvent, ZoomStartEvent } from './events'; import { InstanceEventService } from './events/instance-event.service'; import { TooltipPopupComponent } from './tooltip/tooltip-popup.component'; import * as i0 from "@angular/core"; /** * Represents the [Kendo UI Map component for Angular]({% slug overview_map %}). * * @example * ```ts * import { Component } from '@angular/core'; * * _@Component({ * selector: 'my-app', * template: ` * <kendo-map [center]="center" [zoom]="15"> * <kendo-map-layers> * <kendo-map-tile-layer * [subdomains]="tileSubdomains" * [urlTemplate]="tileUrl" * attribution="© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>" * > * </kendo-map-tile-layer> * <kendo-map-marker-layer * [data]="markers" * locationField="latlng" * titleField="name" * > * </kendo-map-marker-layer> * </kendo-map-layers> * </kendo-map> * ` * }) * class AppComponent { * tileSubdomains = ["a", "b", "c"]; * tileUrl = (e: TileUrlTemplateArgs): string => * `https://${e.subdomain}.tile.openstreetmap.org/${e.zoom}/${e.x}/${e.y}.png`; * * center = [30.2675, -97.7409]; * markers = [{ latlng: [30.2675, -97.7409], name: "Zevo Toys" }]; * } * * ``` */ export declare class MapComponent implements AfterViewInit, AfterViewChecked, OnChanges, OnDestroy { configurationService: ConfigurationService; protected instanceEventService: InstanceEventService; protected element: ElementRef; protected localizationService: LocalizationService; protected changeDetector: ChangeDetectorRef; protected ngZone: NgZone; protected renderer: Renderer2; protected iconsService: IconsService; /** * 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`. * * @example * ```ts * _@Component({ * selector: 'my-app', * template: ` * <kendo-map [resizeRateLimit]="2"> *  * </kendo-map> * ` * }) * export class AppComponent { * } * ``` */ resizeRateLimit: number; /** * The map center. Coordinates are listed as `[Latitude, Longitude]`. */ center: number[]; /** * The configuration of built-in map controls. */ controls: MapControls; /** * The minimum zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features). * * @default 1 */ minZoom: number; /** * The maximum zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features). * * @default 19 */ maxZoom: number; /** * The size of the map in pixels at zoom level 0. * * @default 256 */ minSize?: number; /** * Controls whether the user can pan the map. * * @default true */ pannable: boolean; /** * The settings for the tooltip popup. */ popupSettings: PopupSettings; /** * Specifies whether the map should wrap around the east-west edges. * * @default true */ wraparound: boolean; /** * 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. * * @default 3 */ zoom: number; /** * Controls whether the map zoom level can be changed by the user. * * @default true */ zoomable: boolean; /** * Fired immediately before the map is reset. This event is typically used for cleanup by layer implementers. */ beforeReset: EventEmitter<BeforeResetEvent>; /** * Fired when the user clicks on the map. */ mapClick: EventEmitter<MapClickEvent>; /** * Fired when a marker has been displayed and has a DOM element assigned. */ markerActivate: EventEmitter<MarkerActivateEvent>; /** * Fired when a marker has been clicked or tapped. */ markerClick: EventEmitter<MarkerClickEvent>; /** * Fired when a marker has been created and is about to be displayed. * * Cancelling the event will prevent the marker from being shown. */ markerCreated: EventEmitter<MarkerCreatedEvent>; /** * Fires after the map viewport has been moved. */ panEnd: EventEmitter<PanEndEvent>; /** * Fired while the map viewport is being moved. */ pan: EventEmitter<PanEvent>; /** * Fired when the map is reset. * * This typically occurs on initial load and after a zoom/center change. */ reset: EventEmitter<ResetEvent>; /** * Fired when a shape is clicked or tapped. */ shapeClick: EventEmitter<ShapeClickEvent>; /** * Fired when a shape is created, but is not rendered yet. */ shapeCreated: EventEmitter<ShapeCreatedEvent>; /** * Fired when a [GeoJSON Feature](https://geojson.org/geojson-spec.html#feature-objects) is created on a shape layer. */ shapeFeatureCreated: EventEmitter<ShapeFeatureCreatedEvent>; /** * Fired 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: EventEmitter<ShapeMouseEnterEvent>; /** * Fired 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: EventEmitter<ShapeMouseLeaveEvent>; /** * Fired when the map zoom level is about to change. * * Cancelling the event will prevent the user action. */ zoomStart: EventEmitter<ZoomStartEvent>; /** * Fired when the map zoom level has changed. */ zoomEnd: EventEmitter<ZoomEndEvent>; /** * Fired when the map center has been changed. */ centerChange: EventEmitter<number[]>; /** * Fired when the map zoom level has been changed. */ zoomChange: EventEmitter<number>; tooltipInstance: TooltipPopupComponent; instance: Map; initResizeSensor: boolean; protected options: any; protected theme: any; protected resizeTimeout: any; protected redrawTimeout: any; protected destroyed: boolean; protected rtl: boolean; protected subscriptions: Subscription; protected optionsChange: Subscription; protected domSubscriptions: () => void; protected iconSettings: IconSettings; constructor(configurationService: ConfigurationService, instanceEventService: InstanceEventService, element: ElementRef, localizationService: LocalizationService, changeDetector: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2, iconsService: IconsService); ngAfterViewInit(): void; ngAfterViewChecked(): void; ngOnChanges(changes: { [propertyName: string]: SimpleChange; }): void; ngOnDestroy(): void; /** * The marker layers instances. */ get layers(): MapLayer[]; /** * Gets the extent (visible area) of the map. */ get extent(): Extent; /** * Sets the extent (visible area) of the map. */ set extent(extent: Extent); /** * Detects the size of the container and redraws the Map. * Resizing is automatic unless you set the `resizeRateLimit` option to `0`. */ resize(): void; /** * Retrieves the size of the visible portion of the map. * * @returns The size (width and height) of the visible portion of the map. */ viewSize(): { width: number; height: number; }; /** * Returns the event coordinates relative to the map element. Offset coordinates are not synchronized to a particular location on the map. * * @param e The mouse event. * @returns The event coordinates relative to the map element. */ eventOffset(e: any): geometry.Point; /** * Retrieves projected (layer) coordinates that correspond to this mouse event. Layer coordinates are absolute and change only when the zoom level is changed. * * @param e The mouse event. * @returns The projected (layer) coordinates that correspond to this event. */ eventToLayer(e: any): geometry.Point; /** * Retrieves the geographic location that correspond to this mouse event. * * @param e The mouse event. * @returns The geographic location that correspond to this mouse event. */ eventToLocation(e: any): geometry.Point; /** * 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. * * @param e The mouse event. * @returns The relative (view) coordinates that correspond to this mouse event. */ eventToView(e: any): geometry.Point; /** * Transforms layer (projected) coordinates to geographical 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. */ layerToLocation(point: geometry.Point | number[], zoom?: number): Location; /** * Returns the layer (projected) coordinates that correspond to a geographical 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. */ locationToLayer(location: Location | number[], zoom?: number): geometry.Point; /** * Returns the view (relative) coordinates that correspond to a geographical 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. */ locationToView(location: Location | number[]): geometry.Point; /** * Returns the geographical location that correspond to the view (relative) 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. */ viewToLocation(point: geometry.Point | number[], zoom?: number): Location; /** * @hidden */ onResize(): void; /** * @hidden */ get canRender(): boolean; protected get autoResize(): boolean; protected init(): void; protected initConfig(): void; protected createInstance(element: any, observer: MapInstanceObserver): void; protected activeEmitter(name: string): any; protected trigger(name: string, e: any): boolean; protected run(callback: any, inZone?: boolean, detectChanges?: boolean): void; protected detectChanges(): void; protected setDirection(): void; protected get isRTL(): boolean; protected onInit(e: any): void; protected onShowTooltip(e: any): void; protected onHideTooltip(): void; protected onCenterChange(e: any): void; protected onZoomChange(e: any): void; /** * @hidden */ tooltipMouseleave(e: any): void; /** * @hidden */ mapMouseleave(e: any): void; static ɵfac: i0.ɵɵFactoryDeclaration<MapComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<MapComponent, "kendo-map", ["kendoMap"], { "resizeRateLimit": { "alias": "resizeRateLimit"; "required": false; }; "center": { "alias": "center"; "required": false; }; "controls": { "alias": "controls"; "required": false; }; "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; "minSize": { "alias": "minSize"; "required": false; }; "pannable": { "alias": "pannable"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "wraparound": { "alias": "wraparound"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomable": { "alias": "zoomable"; "required": false; }; }, { "beforeReset": "beforeReset"; "mapClick": "mapClick"; "markerActivate": "markerActivate"; "markerClick": "markerClick"; "markerCreated": "markerCreated"; "panEnd": "panEnd"; "pan": "pan"; "reset": "reset"; "shapeClick": "shapeClick"; "shapeCreated": "shapeCreated"; "shapeFeatureCreated": "shapeFeatureCreated"; "shapeMouseEnter": "shapeMouseEnter"; "shapeMouseLeave": "shapeMouseLeave"; "zoomStart": "zoomStart"; "zoomEnd": "zoomEnd"; "centerChange": "centerChange"; "zoomChange": "zoomChange"; }, never, never, true, never>; }