/**----------------------------------------------------------------------------------------- * 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 %}). * * 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({ * selector: 'my-app', * template: ` * * * * * * * * * ` * }) * 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" }]; * } * ``` * * @remarks * Supported children components are: {@link LayersComponent}. */ 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. * To disable the automatic resizing, set it to `0`. * * @default 10 * * @example * ```ts * @Component({ * selector: 'my-app', * template: ` * * * ` * }) * export class AppComponent { * } * ``` */ resizeRateLimit: number; /** * Specifies the map center coordinates. * Provide coordinates as `[Latitude, Longitude]`. */ center: number[]; /** * Specifies the configuration for 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; /** * 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: number; /** * Determines whether users can change the map zoom level. * * @default true */ zoomable: boolean; /** * Fires immediately before the map resets. This event is typically used for cleanup by layer implementers. */ beforeReset: EventEmitter; /** * Fires when the user clicks on the map. */ mapClick: EventEmitter; /** * Fires when a marker appears on the map and its DOM element becomes available. */ markerActivate: EventEmitter; /** * Fires when the user clicks or taps a marker. */ markerClick: EventEmitter; /** * Fires once the map has created a marker, and just before the map displays it. * * Cancelling the event prevents displaying the marker. */ markerCreated: EventEmitter; /** * Fires after the map viewport completes panning. */ panEnd: EventEmitter; /** * Fires while the map viewport is being moved. */ pan: EventEmitter; /** * Fires when the map resets. * * This typically occurs on initial load and after a zoom/center change. */ reset: EventEmitter; /** * Fires when a shape is clicked or tapped. */ shapeClick: EventEmitter; /** * Fires when a shape is created, but is not rendered yet. */ shapeCreated: EventEmitter; /** * Fires when a [GeoJSON Feature](https://geojson.org/geojson-spec.html#feature-objects) is created on a shape layer. */ shapeFeatureCreated: EventEmitter; /** * 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: EventEmitter; /** * 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: EventEmitter; /** * Fires when the map zoom level is about to change. * * Cancelling the event will prevent the user action. */ zoomStart: EventEmitter; /** * Fires when the map zoom level changes. */ zoomEnd: EventEmitter; /** * Fires when the map center has been changed. */ centerChange: EventEmitter; /** * Fires when the map zoom level has been changed. */ zoomChange: EventEmitter; 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; /** * Gets 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 container size and redraws the Map. * Resizing happens automatically unless you set `resizeRateLimit` to `0`. */ resize(): void; /** * Gets the size of the visible map area. * * @returns {Object} The width and height of the visible map area. */ viewSize(): { width: number; height: number; }; /** * Gets event coordinates relative to the map element. * Offset coordinates do not sync to a specific map location. * * @param {any} e The mouse event. * @returns {geometry.Point} The event coordinates relative to the map element. */ eventOffset(e: any): geometry.Point; /** * Gets projected layer coordinates for this mouse event. * Layer coordinates are absolute and change only when zoom level changes. * * @param {any} e The mouse event. * @returns {geometry.Point} The projected layer coordinates for this event. */ eventToLayer(e: any): geometry.Point; /** * Gets the geographic location for this mouse event. * * @param {any} e The mouse event. * @returns {geometry.Point} The geographic location for this mouse event. */ eventToLocation(e: any): geometry.Point; /** * 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 {any} e The mouse event. * @returns {geometry.Point} The relative view coordinates for this mouse event. */ eventToView(e: any): geometry.Point; /** * Converts layer coordinates to geographic location. * * @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: geometry.Point | number[], zoom?: number): Location; /** * Gets layer coordinates for a geographic location. * * @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: Location | number[], zoom?: number): geometry.Point; /** * Gets view coordinates for a geographic 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: Location | number[]): geometry.Point; /** * Gets the geographic location for 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: 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; static ɵcmp: i0.ɵɵComponentDeclaration; }