@ng-maps/core
Version:
**@ng-maps/core** is a simple, modular and tree-shakable library for displaying google-maps inside an angular application
288 lines (287 loc) • 14.4 kB
TypeScript
import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { Subscription } from 'rxjs';
import { BoundsLiteral } from '../interface/bounds';
import { GeoPoint } from '../interface/geo-point';
import { LayerTypes } from '../interface/layers';
import { MapOptions } from '../interface/map-options';
import { Padding } from '../interface/padding';
import { FitBoundsService } from '../services/fit-bounds';
import { MapsApiWrapper } from '../services/maps-api-wrapper';
import * as i0 from "@angular/core";
/**
* NgMapsViewComponent renders a Google Map.
* **Important note**: To be able see a map in the browser, you have to define a height for the
* element `map-view`.
*
* @example
* <map-view [latitude]="lat" [longitude]="lng" [zoom]="zoom"></map-view>
*/
export declare class NgMapsViewComponent<T> implements OnChanges, OnInit, OnDestroy, MapOptions {
protected _mapsWrapper: MapsApiWrapper<T>;
protected _fitBoundsService: FitBoundsService;
protected _zone: NgZone;
constructor(_mapsWrapper: MapsApiWrapper<T>, _fitBoundsService: FitBoundsService, _zone: NgZone);
/**
* Map option attributes that can change over time
*/
private static _mapOptionsAttributes;
/**
* The longitude that defines the center of the map.
*/
longitude: number;
/**
* The latitude that defines the center of the map.
*/
latitude: number;
/**
* The zoom level of the map. The default zoom level is 8.
*/
zoom: number;
/**
* The minimal zoom level of the map allowed. When not provided, no restrictions to the zoom level
* are enforced.
*/
minZoom?: number;
/**
* The maximal zoom level of the map allowed. When not provided, no restrictions to the zoom level
* are enforced.
*/
maxZoom?: number;
/**
* Enables/disables if map is draggable.
*/
draggable: boolean;
/**
* Enables/disables zoom and center on double click. Enabled by default.
*/
disableDoubleClickZoom: boolean;
/**
* Enables/disables all default UI of the Google map. Please note: When the map is created, this
* value cannot get updated.
*/
disableDefaultUI: boolean;
/**
* If false, disables scrollwheel zooming on the map. The scrollwheel is enabled by default.
*/
scrollwheel: boolean;
/**
* Color used for the background of the Map div. This color will be visible when tiles have not
* yet loaded as the user pans. This option can only be set when the map is initialized.
*/
backgroundColor?: string;
/**
* The name or url of the cursor to display when mousing over a draggable map. This property uses
* the css * cursor attribute to change the icon. As with the css property, you must specify at
* least one fallback cursor that is not a URL. For example:
* [draggableCursor]="'url(http://www.example.com/icon.png), auto;'"
*/
draggableCursor?: string;
/**
* The name or url of the cursor to display when the map is being dragged. This property uses the
* css cursor attribute to change the icon. As with the css property, you must specify at least
* one fallback cursor that is not a URL. For example:
* [draggingCursor]="'url(http://www.example.com/icon.png), auto;'"
*/
draggingCursor?: string;
/**
* If false, prevents the map from being controlled by the keyboard. Keyboard shortcuts are
* enabled by default.
*/
keyboardShortcuts: boolean;
/**
* The enabled/disabled state of the Zoom control.
*/
zoomControl: boolean;
/**
* Options for the Zoom control.
*/
zoomControlOptions?: google.maps.ZoomControlOptions;
/**
* Styles to apply to each of the default map types. Note that for Satellite/Hybrid and Terrain
* modes, these styles will only apply to labels and geometry.
*/
styles: Array<google.maps.MapTypeStyle>;
/**
* When true and the latitude and/or longitude values changes, the Google Maps panTo method is
* used to
* center the map. See: https://developers.google.com/maps/documentation/javascript/reference#Map
*/
usePanning: boolean;
/**
* The initial enabled/disabled state of the Street View Pegman control.
* This control is part of the default UI, and should be set to false when displaying a map type
* on which the Street View road overlay should not appear (e.g. a non-Earth map type).
*/
streetViewControl?: boolean;
/**
* Options for the Street View control.
*/
streetViewControlOptions?: google.maps.StreetViewControlOptions;
/**
* Sets the viewport to contain the given bounds.
* If this option to `true`, the bounds get automatically computed from all elements that use the {@link NgMapsFitBounds} directive.
*/
fitBounds: BoundsLiteral | boolean;
/**
* Padding amount for bounds. This optional parameter is undefined by default.
*/
boundsPadding?: number | Padding;
/**
* The initial enabled/disabled state of the Scale control. This is disabled by default.
*/
scaleControl: boolean;
/**
* Options for the scale control.
*/
scaleControlOptions?: google.maps.ScaleControlOptions;
/**
* The initial enabled/disabled state of the Map type control.
*/
mapTypeControl: boolean;
/**
* Options for the Map type control.
*/
mapTypeControlOptions?: google.maps.MapTypeControlOptions;
/**
* The initial enabled/disabled state of the Pan control.
*/
panControl: boolean;
/**
* Options for the Pan control.
*/
panControlOptions?: google.maps.PanControlOptions;
/**
* The initial enabled/disabled state of the Rotate control.
*/
rotateControl: boolean;
/**
* Options for the Rotate control.
*/
rotateControlOptions?: google.maps.RotateControlOptions;
/**
* The initial enabled/disabled state of the Fullscreen control.
*/
fullscreenControl: boolean;
/**
* Options for the Fullscreen control.
*/
fullscreenControlOptions?: google.maps.FullscreenControlOptions;
/**
* The map mapTypeId. Defaults to 'roadmap'.
*/
mapTypeId: 'roadmap' | 'hybrid' | 'satellite' | 'terrain' | string | google.maps.MapTypeId;
/**
* Add layers https://developers.google.com/maps/documentation/javascript/trafficlayer to map
*/
layers?: Array<LayerTypes> | LayerTypes;
private _layerInstance;
/**
* When false, map icons are not clickable. A map icon represents a point of interest,
* also known as a POI. By default map icons are clickable.
*/
clickableIcons: boolean;
/**
* This setting controls how gestures on the map are handled.
* Allowed values:
* - 'cooperative' (Two-finger touch gestures pan and zoom the map. One-finger touch gestures are not handled by the map.)
* - 'greedy' (All touch gestures pan or zoom the map.)
* - 'none' (The map cannot be panned or zoomed by user gestures.)
* - 'auto' [default] (Gesture handling is either cooperative or greedy, depending on whether the page is scrollable or not.
*/
gestureHandling: 'cooperative' | 'greedy' | 'none' | 'auto';
/**
* Controls the automatic switching behavior for the angle of incidence of
* the map. The only allowed values are 0 and 45. The value 0 causes the map
* to always use a 0° overhead view regardless of the zoom level and
* viewport. The value 45 causes the tilt angle to automatically switch to
* 45 whenever 45° imagery is available for the current zoom level and
* viewport, and switch back to 0 whenever 45° imagery is not available
* (this is the default behavior). 45° imagery is only available for
* satellite and hybrid map types, within some locations, and at some zoom
* levels. Note: getTilt returns the current tilt angle, not the value
* specified by this option. Because getTilt and this option refer to
* different things, do not bind() the tilt property; doing so may yield
* unpredictable effects. (Default of AGM is 0 (disabled). Enable it with value 45.)
*/
tilt: number;
protected subscription: Subscription;
protected _fitBoundsSubscription?: Subscription;
/**
* This event emitter gets emitted when the user clicks on the map (but not when they click on a
* marker or infoWindow).
*/
mapClick: EventEmitter<google.maps.MapMouseEvent>;
/**
* This event emitter gets emitted when the user right-clicks on the map (but not when they click
* on a marker or infoWindow).
*/
mapRightClick: EventEmitter<google.maps.MapMouseEvent>;
/**
* This event emitter gets emitted when the user double-clicks on the map (but not when they click
* on a marker or infoWindow).
*/
mapDblClick: EventEmitter<google.maps.MapMouseEvent>;
/**
* This event emitter is fired when the map center changes.
*/
centerChange: EventEmitter<GeoPoint>;
/**
* This event is fired when the viewport bounds have changed.
*/
boundsChange: EventEmitter<BoundsLiteral>;
/**
* This event is fired when the mapTypeId property changes.
*/
mapTypeIdChange: EventEmitter<google.maps.MapTypeId | string>;
/**
* This event is fired when the map becomes idle after panning or zooming.
*/
idle: EventEmitter<void>;
/**
* This event is fired when the zoom level has changed.
*/
zoomChange: EventEmitter<number>;
/**
* This event is fired when the google map is fully initialized.
* You get the google.maps.Map instance as a result of this EventEmitter.
*/
mapReady: EventEmitter<T>;
/**
* This event is fired when the visible tiles have finished loading.
*/
tilesLoaded: EventEmitter<void>;
container?: ElementRef;
/** @internal */
ngOnInit(): void;
protected _initMapInstance(el: HTMLElement): Promise<void>;
protected _handleIdleEvent(): void;
protected _handleTilesLoadedEvent(): void;
protected _handleMapTypeIdChange(): void;
protected _handleBoundsChange(): void;
protected _handleMapMouseEvents(): void;
protected _handleMapZoomChange(): void;
protected _handleMapCenterChange(): void;
/** @internal */
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
protected _updateMapOptionsChanges(changes: SimpleChanges): void | Promise<void>;
/**
* @todo google specific
* @param changes
* @protected
*/
protected _layerChanges(changes: SimpleChanges): Promise<void>;
/**
* Triggers a resize event on the google map instance.
* When recenter is true, the of the google map gets called with the current lat/lng values or fitBounds value to recenter the map.
* Returns a promise that gets resolved after the event was triggered.
*/
triggerResize(recenter?: boolean): Promise<void>;
protected _updatePosition(changes: SimpleChanges): Promise<void>;
protected _setCenter(): Promise<void>;
protected _fitBounds(): Promise<void>;
protected _subscribeToFitBoundsUpdates(): void;
protected _updateBounds(bounds: BoundsLiteral): Promise<void>;
static ɵfac: i0.ɵɵFactoryDeclaration<NgMapsViewComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgMapsViewComponent<any>, "ng-component", never, { "longitude": { "alias": "longitude"; "required": false; }; "latitude": { "alias": "latitude"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "minZoom": { "alias": "minZoom"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "disableDoubleClickZoom": { "alias": "disableDoubleClickZoom"; "required": false; }; "disableDefaultUI": { "alias": "disableDefaultUI"; "required": false; }; "scrollwheel": { "alias": "scrollwheel"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "draggableCursor": { "alias": "draggableCursor"; "required": false; }; "draggingCursor": { "alias": "draggingCursor"; "required": false; }; "keyboardShortcuts": { "alias": "keyboardShortcuts"; "required": false; }; "zoomControl": { "alias": "zoomControl"; "required": false; }; "zoomControlOptions": { "alias": "zoomControlOptions"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; "usePanning": { "alias": "usePanning"; "required": false; }; "streetViewControl": { "alias": "streetViewControl"; "required": false; }; "streetViewControlOptions": { "alias": "streetViewControlOptions"; "required": false; }; "fitBounds": { "alias": "fitBounds"; "required": false; }; "boundsPadding": { "alias": "boundsPadding"; "required": false; }; "scaleControl": { "alias": "scaleControl"; "required": false; }; "scaleControlOptions": { "alias": "scaleControlOptions"; "required": false; }; "mapTypeControl": { "alias": "mapTypeControl"; "required": false; }; "mapTypeControlOptions": { "alias": "mapTypeControlOptions"; "required": false; }; "panControl": { "alias": "panControl"; "required": false; }; "panControlOptions": { "alias": "panControlOptions"; "required": false; }; "rotateControl": { "alias": "rotateControl"; "required": false; }; "rotateControlOptions": { "alias": "rotateControlOptions"; "required": false; }; "fullscreenControl": { "alias": "fullscreenControl"; "required": false; }; "fullscreenControlOptions": { "alias": "fullscreenControlOptions"; "required": false; }; "mapTypeId": { "alias": "mapTypeId"; "required": false; }; "layers": { "alias": "layers"; "required": false; }; "clickableIcons": { "alias": "clickableIcons"; "required": false; }; "gestureHandling": { "alias": "gestureHandling"; "required": false; }; "tilt": { "alias": "tilt"; "required": false; }; }, { "mapClick": "mapClick"; "mapRightClick": "mapRightClick"; "mapDblClick": "mapDblClick"; "centerChange": "centerChange"; "boundsChange": "boundsChange"; "mapTypeIdChange": "mapTypeIdChange"; "idle": "idle"; "zoomChange": "zoomChange"; "mapReady": "mapReady"; "tilesLoaded": "tilesLoaded"; }, never, ["*"], false, never>;
}