ng-azure-maps/fesm2022/ng-azure-maps.mjs.map

Angular wrapper for Azure Maps

{"version":3,"file":"ng-azure-maps.mjs","sources":["../../../projects/ng-azure-maps/src/lib/configuration/ng-azure-maps-configuration.ts","../../../projects/ng-azure-maps/src/lib/directives/controls/control.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/controls/zoom-control.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/controls/pitch-control.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/controls/compass-control.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/controls/style-control.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/markers/html-marker.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/drawing/drawing-toolbar.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/layers/layer-directive.ts","../../../projects/ng-azure-maps/src/lib/directives/layers/source-layer-directive.ts","../../../projects/ng-azure-maps/src/lib/directives/layers/symbol-layer.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/layers/bubble-layer.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/layers/line-layer.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/layers/polygon-layer.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/layers/polygon-extrusion-layer.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/layers/heatmap-layer.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/layers/image-layer.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/layers/tile-layer.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/popups/popup.directive.ts","../../../projects/ng-azure-maps/src/lib/directives/map/azure-map.directive.ts","../../../projects/ng-azure-maps/src/lib/models/search/search-address-optional-params.ts","../../../projects/ng-azure-maps/src/lib/models/search/search-address-reverse-optional-params.ts","../../../projects/ng-azure-maps/src/lib/models/search/search-address-reverse-cross-street-optional-params.ts","../../../projects/ng-azure-maps/src/lib/models/search/extended-postal-codes.ts","../../../projects/ng-azure-maps/src/lib/models/search/search-address-structured-optional-params.ts","../../../projects/ng-azure-maps/src/lib/models/search/connector-set.ts","../../../projects/ng-azure-maps/src/lib/models/search/search-fuzzy-optional-params.ts","../../../projects/ng-azure-maps/src/lib/models/search/search-nearby-optional-params.ts","../../../projects/ng-azure-maps/src/lib/models/search/search-poi-optional-params.ts","../../../projects/ng-azure-maps/src/lib/models/search/search-poi-category-optional-params.ts","../../../projects/ng-azure-maps/src/lib/models/search/search-poi-category-tree-optional-params.ts","../../../projects/ng-azure-maps/src/lib/models/search/search-along-route-optional-params.ts","../../../projects/ng-azure-maps/src/lib/models/search/search-inside-geometry-optional-params.ts","../../../projects/ng-azure-maps/src/lib/helpers/token-credential.ts","../../../projects/ng-azure-maps/src/lib/interceptors/atlas-rest-authentication.interceptor.ts","../../../projects/ng-azure-maps/src/lib/modules/ng-azure-maps-module.ts","../../../projects/ng-azure-maps/src/lib/services/pipeline-provider.ts","../../../projects/ng-azure-maps/src/lib/services/atlas-http.service.ts","../../../projects/ng-azure-maps/src/lib/services/search-service.ts","../../../projects/ng-azure-maps/src/lib/services/route-service.ts","../../../projects/ng-azure-maps/src/lib/services/weather-service.ts","../../../projects/ng-azure-maps/src/ng-azure-maps.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { AuthenticationOptions } from 'azure-maps-control';\nimport { IRetryOptions } from 'azure-maps-rest';\n\nexport const AZUREMAPS_CONFIG = new InjectionToken('AZUREMAPS_CONFIG');\n\n/**\n * Configuration of the Azure Maps\n */\nexport class AzureMapsConfiguration {\n  authOptions: AuthenticationOptions;\n  pipelineRetryOptions?: IRetryOptions;\n  domain?: string;\n}\n","import { Input, Directive } from '@angular/core';\nimport { ControlPosition, Map } from 'azure-maps-control';\n\n@Directive()\nexport abstract class ControlDirective {\n\n  @Input() public position: ControlPosition;\n\n  public abstract initialize(map: Map): void;\n\n}\n","import { Directive, Input } from '@angular/core';\nimport * as atlas from 'azure-maps-control';\nimport { ControlDirective } from './control.directive';\n\n@Directive({\n    selector: '[map-zoom-control], map-zoom-control',\n    standalone: false\n})\nexport class ZoomControlDirective\n  extends ControlDirective {\n\n  @Input()\n  public zoomDelta: number;\n\n  @Input()\n  public controlStyle: atlas.ControlStyle;\n\n  public initialize(map: atlas.Map): void {\n    map.controls.add(new atlas.control.ZoomControl({\n      zoomDelta: this.zoomDelta,\n      style: this.controlStyle\n    }), {\n      position: this.position\n    });\n  }\n\n}\n","import { Directive, Input } from '@angular/core';\nimport { ControlDirective } from './control.directive';\nimport * as atlas from 'azure-maps-control';\n\n@Directive({\n    selector: '[map-pitch-control], map-pitch-control',\n    standalone: false\n})\nexport class PitchControlDirective\n  extends ControlDirective {\n\n  @Input()\n  public pitchDegreesDelta: number;\n\n  @Input()\n  public controlStyle: atlas.ControlStyle;\n\n  public initialize(map: atlas.Map): void {\n    map.controls.add(new atlas.control.PitchControl({\n      pitchDegreesDelta: this.pitchDegreesDelta,\n      style: this.controlStyle\n    }), {\n      position: this.position\n    });\n  }\n\n}\n","import { ControlDirective } from './control.directive';\nimport { Directive, Input } from '@angular/core';\nimport * as atlas from 'azure-maps-control';\n\n@Directive({\n    selector: '[map-compass-control], map-compass-control',\n    standalone: false\n})\nexport class CompassControlDirective\n  extends ControlDirective {\n\n  @Input()\n  public rotationDegreesDelta: number;\n\n  @Input()\n  public controlStyle: atlas.ControlStyle;\n\n  public initialize(map: atlas.Map): void {\n    map.controls.add(new atlas.control.CompassControl({\n      rotationDegreesDelta: this.rotationDegreesDelta,\n      style: this.controlStyle\n    }), {\n      position: this.position\n    });\n  }\n\n}\n","import { Directive, Input } from '@angular/core';\nimport { ControlDirective } from './control.directive';\nimport * as atlas from 'azure-maps-control';\n\n@Directive({\n    selector: '[map-style-control], map-style-control',\n    standalone: false\n})\nexport class StyleControlDirective\n  extends ControlDirective {\n\n  @Input()\n  public layout: 'icons' | 'list';\n\n  @Input()\n  public mapStyles: string[] | 'all';\n\n  @Input()\n  public controlStyle: atlas.ControlStyle;\n\n  public initialize(map: atlas.Map): void {\n    map.controls.add(new atlas.control.StyleControl({\n      layout: this.layout,\n      mapStyles: this.mapStyles,\n      style: this.controlStyle\n    }), {\n      position: this.position\n    });\n  }\n\n}\n","import { Input, Directive, OnDestroy, OnChanges, Output } from '@angular/core';\nimport * as atlas from 'azure-maps-control';\nimport { Subject } from 'rxjs';\nimport { IMarkerEvent } from '../../contracts';\n\n@Directive({\n    selector: '[map-html-marker], map-html-marker',\n    standalone: false\n})\nexport class HtmlMarkerDirective\n  implements OnChanges, OnDestroy {\n\n  private _map: atlas.Map;\n  private _marker: atlas.HtmlMarker;\n\n  private readonly _markerEvents = new Map<any, (e: any) => void>(\n    [\n      ['click', e => this.onClick.next(this.toMarkerEvent(e))],\n      ['contextmenu', e => this.onContextMenu.next(this.toMarkerEvent(e))],\n      ['dblclick', e => this.onDblClick.next(this.toMarkerEvent(e))],\n      ['drag', e => this.onDrag.next(this.toMarkerEvent(e))],\n      ['dragstart', e => this.onDragStart.next(this.toMarkerEvent(e))],\n      ['dragend', e => this.onDragEnd.next(this.toMarkerEvent(e))],\n      ['keydown', e => this.onKeyDown.next(this.toMarkerEvent(e))],\n      ['keypress', e => this.onKeyPress.next(this.toMarkerEvent(e))],\n      ['keyup', e => this.onKeyUp.next(this.toMarkerEvent(e))],\n      ['mousedown', e => this.onMouseDown.next(this.toMarkerEvent(e))],\n      ['mouseenter', e => this.onMouseEnter.next(this.toMarkerEvent(e))],\n      ['mouseleave', e => this.onMouseLeave.next(this.toMarkerEvent(e))],\n      ['mousemove', e => this.onMouseMove.next(this.toMarkerEvent(e))],\n      ['mouseout', e => this.onMouseOut.next(this.toMarkerEvent(e))],\n      ['mouseover', e => this.onMouseOver.next(this.toMarkerEvent(e))],\n      ['mouseup', e => this.onMouseUp.next(this.toMarkerEvent(e))]\n    ]\n  );\n\n  @Input() public anchor: string;\n  @Input() public color: string;\n  @Input() public draggable: boolean;\n  @Input() public htmlContent: string | HTMLElement;\n  @Input() public pixelOffset: atlas.Pixel;\n  @Input() public position: atlas.data.Position;\n  @Input() public secondaryColor: string;\n  @Input() public text: string;\n  @Input() public visible: boolean;\n\n  @Input() public marker: atlas.HtmlMarker;\n\n  @Output() public onClick = new Subject<IMarkerEvent>();\n  @Output() public onContextMenu = new Subject<IMarkerEvent>();\n  @Output() public onDblClick = new Subject<IMarkerEvent>();\n  @Output() public onDrag = new Subject<IMarkerEvent>();\n  @Output() public onDragStart = new Subject<IMarkerEvent>();\n  @Output() public onDragEnd = new Subject<IMarkerEvent>();\n  @Output() public onKeyDown = new Subject<IMarkerEvent>();\n  @Output() public onKeyPress = new Subject<IMarkerEvent>();\n  @Output() public onKeyUp = new Subject<IMarkerEvent>();\n  @Output() public onMouseDown = new Subject<IMarkerEvent>();\n  @Output() public onMouseEnter = new Subject<IMarkerEvent>();\n  @Output() public onMouseLeave = new Subject<IMarkerEvent>();\n  @Output() public onMouseMove = new Subject<IMarkerEvent>();\n  @Output() public onMouseOut = new Subject<IMarkerEvent>();\n  @Output() public onMouseOver = new Subject<IMarkerEvent>();\n  @Output() public onMouseUp = new Subject<IMarkerEvent>();\n\n  public get hasMap(): boolean {\n    return !!this._map;\n  }\n\n  ngOnChanges() {\n    if (this._marker) {\n      this._marker.setOptions({\n        anchor: this.anchor,\n        color: this.color,\n        draggable: this.draggable,\n        htmlContent: this.htmlContent,\n        pixelOffset: this.pixelOffset,\n        position: this.position,\n        secondaryColor: this.secondaryColor,\n        text: this.text,\n        visible: this.visible\n      });\n    }\n  }\n\n  ngOnDestroy() {\n    if (this._map && this._marker) {\n      this._map.markers.remove(this._marker);\n    }\n  }\n\n  public addToMap(map: atlas.Map) {\n    this._map = map;\n\n    this._marker = this.marker ? this.marker : new atlas.HtmlMarker({\n      anchor: this.anchor,\n      color: this.color,\n      draggable: this.draggable,\n      htmlContent: this.htmlContent,\n      pixelOffset: this.pixelOffset,\n      position: this.position,\n      secondaryColor: this.secondaryColor,\n      text: this.text,\n      visible: this.visible\n    });\n\n    this._markerEvents.forEach((value, key) => {\n      this._map.events.add(key, this._marker, value);\n    });\n\n    map.markers.add(this._marker);\n  }\n\n  private toMarkerEvent(e: any): IMarkerEvent {\n    return {\n      marker: this._marker,\n      event: e\n    };\n  }\n\n}\n","import { Directive, Input, OnChanges, OnDestroy, Output } from '@angular/core';\nimport * as atlas from 'azure-maps-control';\nimport * as atlasdrawing from 'azure-maps-drawing-tools';\nimport { Subject } from 'rxjs';\n\n@Directive({\n    selector: '[map-drawing-toolbar], map-drawing-toolbar',\n    standalone: false\n})\nexport class DrawingToolbarDirective\n  implements OnChanges, OnDestroy {\n\n  private _drawingManager: atlasdrawing.drawing.DrawingManager;\n  private _toolbar: atlasdrawing.control.DrawingToolbar;\n  private _map: atlas.Map;\n\n  @Input() public dragHandleStyle: atlas.HtmlMarkerOptions;\n  @Input() public freehandInterval: number;\n  @Input() public interactionType: atlasdrawing.drawing.DrawingInteractionType;\n  @Input() public mode: atlasdrawing.drawing.DrawingMode;\n  @Input() public secondaryDragHandleStyle: atlas.HtmlMarkerOptions;\n  @Input() public shapeDraggingEnabled: boolean;\n\n  @Input() public buttons: string[];\n  @Input() public containerId: string;\n  @Input() public numColumns: number;\n  @Input() public position: string;\n  @Input() public toolbarStyle: string;\n  @Input() public visible: boolean;\n\n  @Output() public drawingChanged = new Subject<atlas.Shape>();\n  @Output() public drawingChanging = new Subject<atlas.Shape>();\n  @Output() public drawingComplete = new Subject<atlas.Shape>();\n  @Output() public drawingModeChanged = new Subject<atlasdrawing.drawing.DrawingMode>();\n  @Output() public drawingStarted = new Subject<atlas.Shape>();\n\n  ngOnChanges(): void {\n    if (this._toolbar) {\n      this._toolbar.setOptions({\n        buttons: this.buttons,\n        containerId: this.containerId,\n        numColumns: this.numColumns,\n        position: this.position,\n        style: this.toolbarStyle,\n        visible: this.visible\n      });\n    }\n  }\n\n  ngOnDestroy() {\n    if (this._map) {\n      this._map.events.remove('drawingchanged', this._drawingManager, null);\n      this._map.events.remove('drawingchanging', this._drawingManager, null);\n      this._map.events.remove('drawingcomplete', this._drawingManager, null);\n      this._map.events.remove('drawingmodechanged', this._drawingManager, null);\n      this._map.events.remove('drawingstarted', this._drawingManager, null);\n      this._map.controls.remove(this._toolbar);\n    }\n  }\n\n  public initialize(map: atlas.Map): void {\n    this._map = map;\n    this._toolbar = new atlasdrawing.control.DrawingToolbar({\n      buttons: this.buttons,\n      containerId: this.containerId,\n      numColumns: this.numColumns,\n      position: this.position,\n      style: this.toolbarStyle,\n      visible: this.visible\n    });\n    this._drawingManager = new atlasdrawing.drawing.DrawingManager(map, {\n      dragHandleStyle: this.dragHandleStyle,\n      freehandInterval: this.freehandInterval,\n      interactionType: this.interactionType,\n      mode: this.mode,\n      secondaryDragHandleStyle: this.secondaryDragHandleStyle,\n      shapeDraggingEnabled: this.shapeDraggingEnabled,\n      toolbar: this._toolbar\n    });\n\n    this._map.events.add('drawingchanged', this._drawingManager, e => {\n      this.drawingChanged.next(e);\n    });\n\n    this._map.events.add('drawingchanging', this._drawingManager, e => {\n      this.drawingChanging.next(e);\n    });\n\n    this._map.events.add('drawingcomplete', this._drawingManager, e => {\n      this.drawingComplete.next(e);\n    });\n\n    this._map.events.add('drawingmodechanged', this._drawingManager, e => {\n      this.drawingModeChanged.next(e);\n    });\n\n    this._map.events.add('drawingstarted', this._drawingManager, e => {\n      this.drawingStarted.next(e);\n    });\n  }\n\n  public getDatasource(): atlas.source.DataSource {\n    return this._drawingManager.getSource();\n  }\n\n  public getPreviewSource(): atlas.source.DataSource {\n    return (this._drawingManager as any).drawingHelper.previewSource;\n  }\n\n}\n","import * as atlas from 'azure-maps-control';\nimport { OnDestroy, Input, Output, Directive } from '@angular/core';\nimport { ILayerEvent } from '../../contracts';\nimport { Subject } from 'rxjs';\n\n@Directive()\nexport abstract class LayerDirective<T extends atlas.layer.Layer>\n  implements OnDestroy {\n\n  private readonly _layerEvents = new Map<any, (e: any) => void>(\n    [\n      ['click', e => this.onClick.next(this.toLayerEvent(this.layer, e))],\n      ['contextmenu', e => this.onContextMenu.next(this.toLayerEvent(this.layer, e))],\n      ['dblclick', e => this.onDblClick.next(this.toLayerEvent(this.layer, e))],\n      ['layeradded', e => this.onAdded.next(this.toLayerEvent(this.layer, e))],\n      ['layerremoved', e => this.onRemoved.next(this.toLayerEvent(this.layer, e))],\n      ['mousedown', e => this.onMouseDown.next(this.toLayerEvent(this.layer, e))],\n      ['mouseenter', e => this.onMouseEnter.next(this.toLayerEvent(this.layer, e))],\n      ['mouseleave', e => this.onMouseLeave.next(this.toLayerEvent(this.layer, e))],\n      ['mousemove', e => this.onMouseMove.next(this.toLayerEvent(this.layer, e))],\n      ['mouseout', e => this.onMouseOut.next(this.toLayerEvent(this.layer, e))],\n      ['mouseover', e => this.onMouseOver.next(this.toLayerEvent(this.layer, e))],\n      ['mouseup', e => this.onMouseUp.next(this.toLayerEvent(this.layer, e))],\n      ['touchcancel', e => this.onTouchCancel.next(this.toLayerEvent(this.layer, e))],\n      ['touchend', e => this.onTouchEnd.next(this.toLayerEvent(this.layer, e))],\n      ['touchmove', e => this.onTouchMove.next(this.toLayerEvent(this.layer, e))],\n      ['touchstart', e => this.onTouchStart.next(this.toLayerEvent(this.layer, e))],\n      ['wheel', e => this.onWheel.next(this.toLayerEvent(this.layer, e))],\n    ]\n  );\n\n  protected layer: T;\n\n  @Input() public id: string;\n  @Input() public before: string;\n\n  @Output() public onAdded = new Subject<ILayerEvent>();\n  @Output() public onClick = new Subject<ILayerEvent>();\n  @Output() public onContextMenu = new Subject<ILayerEvent>();\n  @Output() public onDblClick = new Subject<ILayerEvent>();\n  @Output() public onMouseDown = new Subject<ILayerEvent>();\n  @Output() public onMouseEnter = new Subject<ILayerEvent>();\n  @Output() public onMouseLeave = new Subject<ILayerEvent>();\n  @Output() public onMouseMove = new Subject<ILayerEvent>();\n  @Output() public onMouseOut = new Subject<ILayerEvent>();\n  @Output() public onMouseOver = new Subject<ILayerEvent>();\n  @Output() public onMouseUp = new Subject<ILayerEvent>();\n  @Output() public onRemoved = new Subject<ILayerEvent>();\n  @Output() public onTouchCancel = new Subject<ILayerEvent>();\n  @Output() public onTouchEnd = new Subject<ILayerEvent>();\n  @Output() public onTouchMove = new Subject<ILayerEvent>();\n  @Output() public onTouchStart = new Subject<ILayerEvent>();\n  @Output() public onWheel = new Subject<ILayerEvent>();\n\n  public get hasLayer(): boolean {\n    return !!this.layer;\n  }\n\n  ngOnDestroy(): void {\n    this.layer.getMap().layers.remove(this.layer);\n  }\n\n  protected initializeEvents(map: atlas.Map): void {\n    this._layerEvents.forEach((value, key) => {\n      map.events.add(key, this.layer, value);\n    });\n  }\n\n  private toLayerEvent(layer: atlas.layer.Layer | atlas.layer.Layer[], e: any): ILayerEvent {\n    return {\n      layer,\n      event: e\n    };\n  }\n}\n","import * as atlas from 'azure-maps-control';\nimport { OnDestroy, Input, Directive } from '@angular/core';\nimport { LayerDirective } from './layer-directive';\n\n@Directive()\nexport abstract class SourceLayerDirective<T extends atlas.layer.Layer>\n  extends LayerDirective<T>\n  implements OnDestroy {\n\n  @Input() public dataSourceId: string;\n  @Input() public sourceLayer: string;\n\n  public initialize(map: atlas.Map, dataSource: atlas.source.Source): void {\n    this.layer = this.buildLayer(dataSource);\n\n    this.initializeEvents(map);\n\n    map.layers.add(this.layer, this.before);\n  };\n\n  public clear(map: atlas.Map) {\n    map.layers.remove(this.layer);\n    this.layer = null;\n  }\n\n  protected abstract buildLayer(dataSource: atlas.source.Source): T;\n\n}\n","import { Directive, Input, OnChanges } from '@angular/core';\nimport * as atlas from 'azure-maps-control';\nimport { SourceLayerDirective } from './source-layer-directive';\n\n@Directive({\n    selector: '[map-symbol-layer], map-symbol-layer',\n    standalone: false\n})\nexport class SymbolLayerDirective\n  extends SourceLayerDirective<atlas.layer.SymbolLayer>\n  implements OnChanges {\n\n  @Input() public filter: atlas.Expression;\n  @Input() public iconOptions: atlas.IconOptions;\n  @Input() public lineSpacing: atlas.Expression | number;\n  @Input() public maxZoom: number;\n  @Input() public minZoom: number;\n  @Input() public placement: 'point' | 'line' | 'line-center';\n  @Input() public textOptions: atlas.TextOptions;\n  @Input() public visible: boolean;\n\n  ngOnChanges() {\n    if (this.layer) {\n      this.layer.setOptions({\n        filter: this.filter,\n        iconOptions: this.iconOptions,\n        lineSpacing: this.lineSpacing,\n        maxZoom: this.maxZoom,\n        minZoom: this.minZoom,\n        source: this.dataSourceId,\n        sourceLayer: this.sourceLayer,\n        placement: this.placement,\n        textOptions: this.textOptions,\n        visible: this.visible\n      });\n    }\n  }\n\n  protected buildLayer(dataSource: atlas.source.Source): atlas.layer.SymbolLayer {\n    return new atlas.layer.SymbolLayer(dataSource, this.id, {\n      filter: this.filter,\n      iconOptions: this.iconOptions,\n      lineSpacing: this.lineSpacing,\n      maxZoom: this.maxZoom,\n      minZoom: this.minZoom,\n      source: this.dataSourceId,\n      sourceLayer: this.sourceLayer,\n      placement: this.placement,\n      textOptions: this.textOptions,\n      visible: this.visible\n    });\n  }\n\n}\n","import { Directive, OnChanges, Input } from '@angular/core';\nimport { SourceLayerDirective } from './source-layer-directive';\nimport * as atlas from 'azure-maps-control';\n\n@Directive({\n    selector: '[map-bubble-layer], map-bubble-layer',\n    standalone: false\n})\nexport class BubbleLayerDirective\n  extends SourceLayerDirective<atlas.layer.BubbleLayer>\n  implements OnChanges {\n\n  @Input() public blur: number | atlas.Expression;\n  @Input() public color: string | atlas.Expression;\n  @Input() public filter: atlas.Expression;\n  @Input() public maxZoom: number;\n  @Input() public minZoom: number;\n  @Input() public opacity: number | atlas.Expression;\n  @Input() public pitchAlignment: 'map' | 'viewport';\n  @Input() public radius: number | atlas.Expression;\n  @Input() public strokeColor: string | atlas.Expression;\n  @Input() public strokeOpacity: number | atlas.Expression;\n  @Input() public strokeWidth: number | atlas.Expression;\n  @Input() public visible: boolean;\n\n  ngOnChanges() {\n    if (this.layer) {\n      this.layer.setOptions({\n        blur: this.blur,\n        color: this.color,\n        filter: this.filter,\n        maxZoom: this.maxZoom,\n        minZoom: this.minZoom,\n        opacity: this.opacity,\n        pitchAlignment: this.pitchAlignment,\n        radius: this.radius,\n        source: this.dataSourceId,\n        sourceLayer: this.sourceLayer,\n        strokeColor: this.strokeColor,\n        strokeOpacity: this.strokeOpacity,\n        strokeWidth: this.strokeWidth,\n        visible: this.visible\n      });\n    }\n  }\n\n  protected buildLayer(dataSource: atlas.source.Source): atlas.layer.BubbleLayer {\n    return new atlas.layer.BubbleLayer(dataSource, this.id, {\n      blur: this.blur,\n      color: this.color,\n      filter: this.filter,\n      maxZoom: this.maxZoom,\n      minZoom: this.minZoom,\n      opacity: this.opacity,\n      pitchAlignment: this.pitchAlignment,\n      radius: this.radius,\n      source: this.dataSourceId,\n      sourceLayer: this.sourceLayer,\n      strokeColor: this.strokeColor,\n      strokeOpacity: this.strokeOpacity,\n      strokeWidth: this.strokeWidth,\n      visible: this.visible\n    });\n  }\n\n}\n","import { SourceLayerDirective } from './source-layer-directive';\nimport * as atlas from 'azure-maps-control';\nimport { OnChanges, Input, Directive } from '@angular/core';\n\n@Directive({\n    selector: '[map-line-layer], map-line-layer',\n    standalone: false\n})\nexport class LineLayerDirective\n  extends SourceLayerDirective<atlas.layer.LineLayer>\n  implements OnChanges {\n\n  @Input() public blur: number | atlas.Expression;\n  @Input() public filter: atlas.Expression;\n  @Input() public lineCap: 'butt' | 'round' | 'square';\n  @Input() public lineJoin: 'bevel' | 'round' | 'miter';\n  @Input() public maxZoom: number;\n  @Input() public minZoom: number;\n  @Input() public offset: number | atlas.Expression;\n  @Input() public strokeColor: string | atlas.Expression;\n  @Input() public strokeDashArray: number[];\n  @Input() public strokeGradient: atlas.Expression;\n  @Input() public strokeOpacity: number | atlas.Expression;\n  @Input() public strokeWidth: number | atlas.Expression;\n  @Input() public translate: atlas.Pixel;\n  @Input() public translateAnchor: 'map' | 'viewport';\n  @Input() public visible: boolean;\n\n  ngOnChanges() {\n    if (this.layer) {\n      this.layer.setOptions({\n        blur: this.blur,\n        filter: this.filter,\n        lineCap: this.lineCap,\n        lineJoin: this.lineJoin,\n        maxZoom: this.maxZoom,\n        minZoom: this.minZoom,\n        offset: this.offset,\n        source: this.dataSourceId,\n        sourceLayer: this.sourceLayer,\n        strokeColor: this.strokeColor,\n        strokeDashArray: this.strokeDashArray,\n        strokeGradient: this.strokeGradient,\n        strokeOpacity: this.strokeOpacity,\n        strokeWidth: this.strokeWidth,\n        translate: this.translate,\n        translateAnchor: this.translateAnchor,\n        visible: this.visible\n      });\n    }\n  }\n\n  protected buildLayer(dataSource: atlas.source.Source): atlas.layer.LineLayer {\n    if (this.strokeGradient && (dataSource as any).setOptions) {\n      (dataSource as atlas.source.DataSource).setOptions({\n        lineMetrics: true\n      });\n    }\n\n    return new atlas.layer.LineLayer(dataSource, this.id, {\n      blur: this.blur,\n      filter: this.filter,\n      lineCap: this.lineCap,\n      lineJoin: this.lineJoin,\n      maxZoom: this.maxZoom,\n      minZoom: this.minZoom,\n      offset: this.offset,\n      source: this.dataSourceId,\n      sourceLayer: this.sourceLayer,\n      strokeColor: this.strokeColor,\n      strokeDashArray: this.strokeDashArray,\n      strokeGradient: this.strokeGradient,\n      strokeOpacity: this.strokeOpacity,\n      strokeWidth: this.strokeWidth,\n      translate: this.translate,\n      translateAnchor: this.translateAnchor,\n      visible: this.visible\n    });\n  }\n\n}\n","import { Directive, OnChanges, Input } from '@angular/core';\nimport { SourceLayerDirective } from './source-layer-directive';\nimport * as atlas from 'azure-maps-control';\n\n@Directive({\n    selector: '[map-polygon-layer], map-polygon-layer',\n    standalone: false\n})\nexport class PolygonLayerDirective\n  extends SourceLayerDirective<atlas.layer.PolygonLayer>\n  implements OnChanges {\n\n  @Input() public fillColor: string | atlas.Expression;\n  @Input() public fillOpacity: number | atlas.Expression;\n  @Input() public fillPattern: string | atlas.Expression;\n  @Input() public filter: atlas.Expression;\n  @Input() public maxZoom: number;\n  @Input() public minZoom: number;\n  @Input() public visible: boolean;\n\n  ngOnChanges() {\n    if (this.layer) {\n      this.layer.setOptions({\n        fillColor: this.fillColor,\n        fillOpacity: this.fillOpacity,\n        fillPattern: this.fillPattern,\n        filter: this.filter,\n        maxZoom: this.maxZoom,\n        minZoom: this.minZoom,\n        source: this.dataSourceId,\n        sourceLayer: this.sourceLayer,\n        visible: this.visible\n      });\n    }\n  }\n\n  protected buildLayer(dataSource: atlas.source.Source): atlas.layer.PolygonLayer {\n    return new atlas.layer.PolygonLayer(dataSource, this.id, {\n      fillColor: this.fillColor,\n      fillOpacity: this.fillOpacity,\n      fillPattern: this.fillPattern,\n      filter: this.filter,\n      maxZoom: this.maxZoom,\n      minZoom: this.minZoom,\n      source: this.dataSourceId,\n      sourceLayer: this.sourceLayer,\n      visible: this.visible\n    });\n  }\n\n}\n","import { Directive, OnChanges, Input } from '@angular/core';\nimport * as atlas from 'azure-maps-control';\nimport { SourceLayerDirective } from './source-layer-directive';\n\n@Directive({\n    selector: '[map-polygon-extrusion-layer], map-polygon-extrusion-layer',\n    standalone: false\n})\nexport class PolygonExtrusionLayerDirective\n  extends SourceLayerDirective<atlas.layer.PolygonExtrusionLayer>\n  implements OnChanges {\n\n  @Input() public base: number | atlas.Expression;\n  @Input() public fillColor: string | atlas.Expression;\n  @Input() public fillOpacity: number;\n  @Input() public fillPattern: string;\n  @Input() public filter: atlas.Expression;\n  @Input() public height: number;\n  @Input() public maxZoom: number;\n  @Input() public minZoom: number;\n  @Input() public translate: atlas.Pixel;\n  @Input() public translateAnchor: 'map' | 'viewport';\n  @Input() public verticalGradient: boolean;\n  @Input() public visible: boolean;\n\n  ngOnChanges() {\n    if (this.layer) {\n      this.layer.setOptions({\n        base: this.base,\n        fillColor: this.fillColor,\n        fillOpacity: this.fillOpacity,\n        fillPattern: this.fillPattern,\n        filter: this.filter,\n        height: this.height,\n        maxZoom: this.maxZoom,\n        minZoom: this.minZoom,\n        source: this.dataSourceId,\n        sourceLayer: this.sourceLayer,\n        translate: this.translate,\n        translateAnchor: this.translateAnchor,\n        verticalGradient: this.verticalGradient,\n        visible: this.visible\n      });\n    }\n  }\n\n  protected buildLayer(dataSource: atlas.source.Source): atlas.layer.PolygonExtrusionLayer {\n    return new atlas.layer.PolygonExtrusionLayer(dataSource, this.id, {\n      base: this.base,\n      fillColor: this.fillColor,\n      fillOpacity: this.fillOpacity,\n      fillPattern: this.fillPattern,\n      filter: this.filter,\n      height: this.height,\n      maxZoom: this.maxZoom,\n      minZoom: this.minZoom,\n      source: this.dataSourceId,\n      sourceLayer: this.sourceLayer,\n      translate: this.translate,\n      translateAnchor: this.translateAnchor,\n      verticalGradient: this.verticalGradient,\n      visible: this.visible\n    });\n  }\n\n}\n","import { Directive, OnChanges, Input } from '@angular/core';\nimport { SourceLayerDirective } from './source-layer-directive';\nimport * as atlas from 'azure-maps-control';\n\n@Directive({\n    selector: '[map-heatmap-layer], map-heatmap-layer',\n    standalone: false\n})\nexport class HeatmapLayerDirective\n  extends SourceLayerDirective<atlas.layer.HeatMapLayer>\n  implements OnChanges {\n\n  @Input() public color: atlas.Expression;\n  @Input() public filter: atlas.Expression;\n  @Input() public intensity: number | atlas.Expression;\n  @Input() public maxZoom: number;\n  @Input() public minZoom: number;\n  @Input() public opacity: number | atlas.Expression;\n  @Input() public radius: number | atlas.Expression;\n  @Input() public visible: boolean;\n  @Input() public weight: number | atlas.Expression;\n\n  ngOnChanges(): void {\n    if (this.layer) {\n      this.layer.setOptions({\n        color: this.color,\n        filter: this.filter,\n        intensity: this.intensity,\n        maxZoom: this.maxZoom,\n        minZoom: this.minZoom,\n        opacity: this.opacity,\n        radius: this.radius,\n        source: this.dataSourceId,\n        sourceLayer: this.sourceLayer,\n        visible: this.visible,\n        weight: this.weight\n      });\n    }\n  }\n  protected buildLayer(dataSource: atlas.source.Source): atlas.layer.HeatMapLayer {\n    return new atlas.layer.HeatMapLayer(dataSource, this.id, {\n      color: this.color,\n      filter: this.filter,\n      intensity: this.intensity,\n      maxZoom: this.maxZoom,\n      minZoom: this.minZoom,\n      opacity: this.opacity,\n      radius: this.radius,\n      source: this.dataSourceId,\n      sourceLayer: this.sourceLayer,\n      visible: this.visible,\n      weight: this.weight\n    });\n  }\n\n}\n","import { Directive, OnChanges, Input } from '@angular/core';\nimport * as atlas from 'azure-maps-control';\nimport { LayerDirective } from './layer-directive';\n\n@Directive({\n    selector: '[map-image-layer], map-image-layer',\n    standalone: false\n})\nexport class ImageLayerDirective\n  extends LayerDirective<atlas.layer.ImageLayer>\n  implements OnChanges {\n\n  @Input() public contrast: number;\n  @Input() public coordinates: atlas.data.Position[];\n  @Input() public fadeDuration: number;\n  @Input() public filter: atlas.Expression;\n  @Input() public hueRotation: number;\n  @Input() public maxBrightness: number;\n  @Input() public maxZoom: number;\n  @Input() public minBrightness: number;\n  @Input() public minZoom: number;\n  @Input() public opacity: number;\n  @Input() public saturation: number;\n  @Input() public url: string;\n  @Input() public visible: boolean;\n\n  ngOnChanges(): void {\n    if (this.layer) {\n      this.layer.setOptions({\n        contrast: this.contrast,\n        coordinates: this.coordinates,\n        fadeDuration: this.fadeDuration,\n        filter: this.filter,\n        hueRotation: this.hueRotation,\n        maxBrightness: this.maxBrightness,\n        maxZoom: this.maxZoom,\n        minBrightness: this.minBrightness,\n        minZoom: this.minZoom,\n        opacity: this.opacity,\n        saturation: this.saturation,\n        url: this.url,\n        visible: this.visible\n      });\n    }\n  }\n\n  public initialize(map: atlas.Map): void {\n    this.layer = new atlas.layer.ImageLayer({\n      contrast: this.contrast,\n      coordinates: this.coordinates,\n      fadeDuration: this.fadeDuration,\n      filter: this.filter,\n      hueRotation: this.hueRotation,\n      maxBrightness: this.maxBrightness,\n      maxZoom: this.maxZoom,\n      minBrightness: this.minBrightness,\n      minZoom: this.minZoom,\n      opacity: this.opacity,\n      saturation: this.saturation,\n      url: this.url,\n      visible: this.visible\n    });\n\n    this.initializeEvents(map);\n\n    map.layers.add(this.layer, this.before);\n  }\n\n}\n","import { Directive, OnChanges, Input } from '@angular/core';\nimport { LayerDirective } from './layer-directive';\nimport * as atlas from 'azure-maps-control';\n\n@Directive({\n    selector: '[map-tile-layer], map-tile-layer',\n    standalone: false\n})\nexport class TileLayerDirective\n  extends LayerDirective<atlas.layer.TileLayer>\n  implements OnChanges {\n\n  @Input() public bounds: atlas.data.BoundingBox;\n  @Input() public contrast: number;\n  @Input() public fadeDuration: number;\n  @Input() public filter: atlas.Expression;\n  @Input() public hueRotation: number;\n  @Input() public isTMS: boolean;\n  @Input() public maxBrightness: number;\n  @Input() public maxSourceZoom: number;\n  @Input() public maxZoom: number;\n  @Input() public minBrightness: number;\n  @Input() public minSourceZoom: number;\n  @Input() public minZoom: number;\n  @Input() public opacity: number;\n  @Input() public saturation: number;\n  @Input() public subdomains: string[];\n  @Input() public tileSize: number;\n  @Input() public tileUrl: string;\n  @Input() public visible: boolean;\n\n  ngOnChanges(): void {\n    if (this.layer) {\n      this.layer.setOptions({\n        bounds: this.bounds,\n        contrast: this.contrast,\n        fadeDuration: this.fadeDuration,\n        filter: this.filter,\n        hueRotation: this.hueRotation,\n        isTMS: this.isTMS,\n        maxBrightness: this.maxBrightness,\n        maxSourceZoom: this.maxSourceZoom,\n        maxZoom: this.maxZoom,\n        minBrightness: this.minBrightness,\n        minSourceZoom: this.minSourceZoom,\n        minZoom: this.minZoom,\n        opacity: this.opacity,\n        saturation: this.saturation,\n        subdomains: this.subdomains,\n        tileSize: this.tileSize,\n        tileUrl: this.tileUrl,\n        visible: this.visible\n      });\n    }\n  }\n\n  public initialize(map: atlas.Map): void {\n    this.layer = new atlas.layer.TileLayer({\n      bounds: this.bounds,\n      contrast: this.contrast,\n      fadeDuration: this.fadeDuration,\n      filter: this.filter,\n      hueRotation: this.hueRotation,\n      isTMS: this.isTMS,\n      maxBrightness: this.maxBrightness,\n      maxSourceZoom: this.maxSourceZoom,\n      maxZoom: this.maxZoom,\n      minBrightness: this.minBrightness,\n      minSourceZoom: this.minSourceZoom,\n      minZoom: this.minZoom,\n      opacity: this.opacity,\n      saturation: this.saturation,\n      subdomains: this.subdomains,\n      tileSize: this.tileSize,\n      tileUrl: this.tileUrl,\n      visible: this.visible\n    }, this.id);\n\n    this.initializeEvents(map);\n\n    map.layers.add(this.layer, this.before);\n  }\n\n}\n","import { Input, Directive, OnDestroy, SimpleChanges, OnChanges, Output } from '@angular/core';\nimport * as atlas from 'azure-maps-control';\nimport { IPopupEvent } from '../../contracts/popup-event';\nimport { Subject } from 'rxjs';\n\n@Directive({\n    selector: '[map-popup], map-popup',\n    standalone: false\n})\nexport class PopupDirective\n  implements OnChanges, OnDestroy {\n\n  private _map: atlas.Map;\n  private _popup: atlas.Popup;\n\n  private readonly _popupEvents = new Map<any, (e: any) => void>(\n    [\n      ['close', e => this.onClose.next(this.toPopupEvent(e))],\n      ['drag', e => this.onDrag.next(this.toPopupEvent(e))],\n      ['dragend', e => this.onDragEnd.next(this.toPopupEvent(e))],\n      ['dragstart', e => this.onDragStart.next(this.toPopupEvent(e))],\n      ['open', e => this.onOpen.next(this.toPopupEvent(e))],\n    ]\n  );\n\n  @Input() public opened: boolean;\n\n  @Input() public closeButton: boolean;\n  @Input() public content: HTMLElement | string;\n  @Input() public draggable: boolean;\n  @Input() public fillColor: string;\n  @Input() public pixelOffset: atlas.Pixel;\n  @Input() public position: atlas.data.Position;\n  @Input() public showPointer: boolean;\n\n  @Output() public onClose = new Subject<IPopupEvent>();\n  @Output() public onDrag = new Subject<IPopupEvent>();\n  @Output() public onDragEnd = new Subject<IPopupEvent>();\n  @Output() public onDragStart = new Subject<IPopupEvent>();\n  @Output() public onOpen = new Subject<IPopupEvent>();\n\n  public get hasMap(): boolean {\n    return !!this._map;\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (this._popup) {\n      this._popup.setOptions({\n        closeButton: this.closeButton,\n        content: this.content,\n        draggable: this.draggable,\n        fillColor: this.fillColor,\n        pixelOffset: this.pixelOffset,\n        position: this.position,\n        showPointer: this.showPointer\n      });\n\n      if (changes.opened) {\n        if (changes.opened.currentValue && !this._popup.isOpen()) {\n          this._popup.open(this._map);\n        }\n        if (!changes.opened.currentValue && this._popup.isOpen()) {\n          this._popup.close();\n        }\n      }\n    }\n  }\n\n  ngOnDestroy() {\n    if (this._map) {\n      this._map.popups.remove(this._popup);\n    }\n  }\n\n  public addToMap(map: atlas.Map) {\n    this._map = map;\n    this._popup = new atlas.Popup({\n      closeButton: this.closeButton,\n      content: this.content,\n      draggable: this.draggable,\n      fillColor: this.fillColor,\n      pixelOffset: this.pixelOffset,\n      position: this.position,\n      showPointer: this.showPointer\n    });\n\n    this._popupEvents.forEach((value, key) => {\n      this._map.events.add(key, this._popup, value);\n    });\n\n    map.popups.add(this._popup);\n  }\n\n  private toPopupEvent(e: any): IPopupEvent {\n    return {\n      popup: this._popup,\n      event: e\n    };\n  }\n}\n","import {\n  Directive,\n  AfterViewInit,\n  ElementRef,\n  Input,\n  Output,\n  ContentChild,\n  QueryList,\n  AfterContentChecked,\n  ContentChildren,\n  OnChanges,\n  SimpleChanges\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport * as atlas from 'azure-maps-control';\nimport { ZoomControlDirective } from '../controls/zoom-control.directive';\nimport { PitchControlDirective } from '../controls/pitch-control.directive';\nimport { CompassControlDirective } from '../controls/compass-control.directive';\nimport { StyleControlDirective } from '../controls/style-control.directive';\nimport { HtmlMarkerDirective } from '../markers/html-marker.directive';\nimport { DrawingToolbarDirective } from '../drawing/drawing-toolbar.directive';\nimport { SymbolLayerDirective } from '../layers/symbol-layer.directive';\nimport { BubbleLayerDirective } from '../layers/bubble-layer.directive';\nimport { SourceLayerDirective } from '../layers/source-layer-directive';\nimport { LineLayerDirective } from '../layers/line-layer.directive';\nimport { PolygonLayerDirective } from '../layers/polygon-layer.directive';\nimport { PolygonExtrusionLayerDirective } from '../layers/polygon-extrusion-layer.directive';\nimport { HeatmapLayerDirective } from '../layers/heatmap-layer.directive';\nimport { ImageLayerDirective } from '../layers/image-layer.directive';\nimport { TileLayerDirective } from '../layers/tile-layer.directive';\nimport { IMapEvent } from '../../contracts';\nimport { PopupDirective } from '../popups/popup.directive';\n\n@Directive({\n    selector: '[azure-map], azure-map',\n    queries: {\n        zoomControl: new ContentChild(ZoomControlDirective),\n        pitchControl: new ContentChild(PitchControlDirective),\n        compassControl: new ContentChild(CompassControlDirective),\n        styleControl: new ContentChild(StyleControlDirective),\n        htmlMarkers: new ContentChildren(HtmlMarkerDirective),\n        drawingToolbar: new ContentChild(DrawingToolbarDirective),\n        symbolLayers: new ContentChildren(SymbolLayerDirective),\n        bubbleLayers: new ContentChildren(BubbleLayerDirective),\n        lineLayers: new ContentChildren(LineLayerDirective),\n        polygonLayers: new ContentChildren(PolygonLayerDirective),\n        polygonExtrusionLayers: new ContentChildren(PolygonExtrusionLayerDirective),\n        heatmapLayers: new ContentChildren(HeatmapLayerDirective),\n        imageLayers: new ContentChildren(ImageLayerDirective),\n        tileLayers: new ContentChildren(TileLayerDirective),\n        popups: new ContentChildren(PopupDirective)\n    },\n    standalone: false\n})\nexport class AzureMapDirective\n  implements AfterViewInit, AfterContentChecked, OnChanges {\n\n  private readonly _mapEvents = new Map<any, (e: any) => void>(\n    [\n      ['boxzoomend', e => this.onBoxZoomEnd.next(this.toMapEvent(e))],\n      ['boxzoomstart', e => this.onBoxZoomStart.next(this.toMapEvent(e))],\n      ['click', e => this.onClick.next(this.toMapEvent(e))],\n      ['contextmenu', e => this.onContextMenu.next(this.toMapEvent(e))],\n      ['data', e => this.onData.next(this.toMapEvent(e))],\n      ['dblclick', e => this.onDblClick.next(this.toMapEvent(e))],\n      ['drag', e => this.onDrag.next(this.toMapEvent(e))],\n      ['dragend', e => this.onDragEnd.next(this.toMapEvent(e))],\n      ['dragstart', e => this.onDragStart.next(this.toMapEvent(e))],\n      ['idle', e => this.onIdle.next(this.toMapEvent(e))],\n      ['layeradded', e => this.onLayerAdded.next(this.toMapEvent(e))],\n      ['layerremoved', e => this.onLayerRemoved.next(this.toMapEvent(e))],\n      ['mousedown', e => this.onMouseDown.next(this.toMapEvent(e))],\n      ['mouseleave', e => this.onMouseLeave.next(this.toMapEvent(e))],\n      ['mousemove', e => this.onMouseMove.next(this.toMapEvent(e))],\n      ['mouseout', e => this.onMouseOut.next(this.toMapEvent(e))],\n      ['mouseover', e => this.onMouseOver.next(this.toMapEvent(e))],\n      ['mouseup', e => this.onMouseUp.next(this.toMapEvent(e))],\n      ['move', e => this.onMove.next(this.toMapEvent(e))],\n      ['moveend', e => this.onMoveEnd.next(this.toMapEvent(e))],\n      ['movestart', e => this.onMoveStart.next(this.toMapEvent(e))],\n      ['pitch', e => this.onPitch.next(this.toMapEvent(e))],\n      ['pitchend', e => this.onPitchEnd.next(this.toMapEvent(e))],\n      ['pitchstart', e => this.onPitchStart.next(this.toMapEvent(e))],\n      ['render', e => this.onRender.next(this.toMapEvent(e))],\n      ['resize', e => this.onResize.next(this.toMapEvent(e))],\n      ['rotate', e => this.onRotate.next(this.toMapEvent(e))],\n      ['rotateend', e => this.onRotateEnd.next(this.toMapEvent(e))],\n      ['rotatestart', e => this.onRotateStart.next(this.toMapEvent(e))],\n      ['sourceadded', e => this.onSourceAdded.next(this.toMapEvent(e))],\n      ['sourcedata', e => this.onSourceData.next(this.toMapEvent(e))],\n      ['sourceremoved', e => this.onSourceRemoved.next(this.toMapEvent(e))],\n      ['styledata', e => this.onStyleData.next(this.toMapEvent(e))],\n      ['styleimagemissing', e => this.onStyleImageMissing.next(this.toMapEvent(e))],\n      ['tokenacquired', e => this.onTokenAcquired.next(this.toMapEvent(e))],\n      ['touchcancel', e => this.onTouchCancel.next(this.toMapEvent(e))],\n      ['touchend', e => this.onTouchEnd.next(this.toMapEvent(e))],\n      ['touchmove', e => this.onTouchMove.next(this.toMapEvent(e))],\n      ['touchstart', e => this.onTouchStart.next(this.toMapEvent(e))],\n      ['wheel', e => this.onWheel.next(this.toMapEvent(e))],\n      ['zoom', e => this.onZoom.next(this.toMapEvent(e))],\n      ['zoomend', e => this.onZoomEnd.next(this.toMapEvent(e))],\n      ['zoomstart', e => this.onZoomStart.next(this.toMapEvent(e))]\n    ]\n  );\n\n  private _map: atlas.Map;\n\n  @Input() public autoResize: boolean;\n  @Input() public bearing: number;\n  @Input() public bounds: [number, number, number, number];\n  @Input() public boxZoomInteraction: boolean;\n  @Input() public cameraType: 'jump' | 'ease' | 'fly';\n  @Input() public center: [number, number];\n  @Input() public centerOffset: [number, number];\n  @Input() public cursor: string;\n  @Input() public dblclickZoomInteraction: boolean;\n  @Input() public disableTelemetry: boolean;\n  @Input() public duration: number;\n  @Input() public dragPanInteraction: boolean;\n  @Input() public dragRotateInteraction: boolean;\n  @Input() public enableAccessibility: boolean;\n  @Input() public interactive: boolean;\n  @Input() public keyboardInteraction: boolean;\n  @Input() public language: string;\n  @Input() public light: atlas.LightOptions;\n  @Input() public maxBounds: atlas.data.BoundingBox;\n  @Input() public maxZoom: number;\n  @Input() public minZoom: number;\n  @Input() public offset: [number, number];\n  @Input() public padding: { top: 0; bottom: 0; left: 0; right: 0 };\n  @Input() public preserveDrawingBuffer: boolean;\n  @Input() public pitch: number;\n  @Input() public refreshExpiredTiles: boolean;\n  @Input() public renderWorldCopies: boolean;\n  @Input() public scrollZoomInteraction: boolean;\n  @Input() public mapStyle: string;\n  @Input() public showBuildingModels: boolean;\n  @Input() public showFeedbackLink: boolean;\n  @Input() public showLogo: boolean;\n  @Input() public showTilesBoundary: boolean;\n  @Input() public touchInteraction: boolean;\n  @Input() public view: string;\n  @Input() public wheelZoomRate: number;\n  @Input() public zoom: number;\n\n  @Input() public dataSources: atlas.source.Source[];\n\n  @Input() public trafficOptions: atlas.TrafficOptions;\n\n  @Output() public onBoxZoomEnd = new Subject<IMapEvent>();\n  @Output() public onBoxZoomStart = new Subject<IMapEvent>();\n  @Output() public onClick = new Subject<IMapEvent>();\n  @Output() public onContextMenu = new Subject<IMapEvent>();\n  @Output() public onData = new Subject<IMapEvent>();\n  @Output() public onDblClick = new Subject<IMapEvent>();\n  @Output() public onDrag = new Subject<IMapEvent>();\n  @Output() public onDragEnd = new Subject<IMapEvent>();\n  @Output() public onDragStart = new Subject<IMapEvent>();\n  @Output() public onError = new Subject<IMapEvent>();\n  @Output() public onIdle = new Subject<IMapEvent>();\n  @Output() public onLayerAdded = new Subject<IMapEvent>();\n  @Output() public onLayerRemoved = new Subject<IMapEvent>();\n  @Output() public onLoad = new Subject<IMapEvent>();\n  @Output() public onMouseDown = new Subject<IMapEvent>();\n  @Output() public onMouseLeave = new Subject<IMapEvent>();\n  @Output() public onMouseMove = new Subject<IMapEvent>();\n  @Output() public onMouseOut = new Subject<IMapEvent>();\n  @Output() public onMouseOver = new Subject<IMapEvent>();\n  @Output() public onMouseUp = new Subject<IMapEvent>();\n  @Output() public onMove = new Subject<IMapEvent>();\n  @Output() public onMoveEnd = new Subject<IMapEvent>();\n  @Output() public onMoveStart = new Subject<IMapEvent>();\n  @Output() public onPitch = new Subject<IMapEvent>();\n  @Output() public onPitchEnd = new Subject<IMapEvent>();\n  @Output() public onPitchStart = new Subject<IMapEvent>();\n  @Output() public onReady = new Subject<IMapEvent>();\n  @Output() public onRender = new Subject<IMapEvent>();\n  @Output() public onResize = new Subject<IMapEvent>();\n  @Output() public onRotate = new Subject<IMapEvent>();\n  @Output() public onRotateEnd = new Subject<IMapEvent>();\n  @Output() public onRotateStart = new Subject<IMapEvent>();\n  @Output() public onSourceAdded = new Subject<IMapEvent>();\n  @Output() public onSourceData = new Subject<IMapEvent>();\n  @Output() public onSourceRemoved = new Subject<IMapEvent>();\n  @Output() public onStyleData = new Subject<IMapEvent>();\n  @Output() public onStyleImageMissing = new Subject<IMapEvent>();\n  @Output() public onTokenAcquired = new Subject<IMapEvent>();\n  @Output() public onTouchCancel = new Subject<IMapEvent>();\n  @Output() public onTouchEnd = new Subject<IMapEvent>();\n  @Output() public onTouchMove = new Subject<IMapEvent>();\n  @Output() public onTouchStart = new Subject<IMapEvent>();\n  @Output() public onWheel = new Subject<IMapEvent>();\n  @Output() public onZoom = new Subject<IMapEvent>();\n  @Output() public onZoomEnd = new Subject<IMapEvent>();\n  @Output() public onZoomStart =