UNPKG

5.92 kBTypeScriptView Raw
1import { AfterContentInit, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
2import { LatLng, LatLngLiteral, PolyMouseEvent } from '../services/google-maps-types';
3import { PolygonManager } from '../services/managers/polygon-manager';
4/**
5 * SebmGoogleMapPolygon renders a polygon on a {@link SebmGoogleMap}
6 *
7 * ### Example
8 * ```typescript
9 * import { Component } from '@angular/core';
10 * import { SebmGoogleMap, SebmGooglePolygon, LatLngLiteral } from 'angular2-maps/core';
11 *
12 * @Component({
13 * selector: 'my-map-cmp',
14 * styles: [`
15 * .semb-map-container {
16 * height: 300px;
17 * }
18 * `],
19 * template: `
20 * <semb-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
21 * <semb-map-polygon [paths]="paths">
22 * </semb-map-polygon>
23 * </semb-map>
24 * `
25 * })
26 * export class MyMapCmp {
27 * lat: number = 0;
28 * lng: number = 0;
29 * zoom: number = 10;
30 * paths: Array<LatLngLiteral> = [
31 * { lat: 0, lng: 10 },
32 * { lat: 0, lng: 20 },
33 * { lat: 10, lng: 20 },
34 * { lat: 10, lng: 10 },
35 * { lat: 0, lng: 10 }
36 * ]
37 * // Nesting paths will create a hole where they overlap;
38 * nestedPaths: Array<Array<LatLngLiteral>> = [[
39 * { lat: 0, lng: 10 },
40 * { lat: 0, lng: 20 },
41 * { lat: 10, lng: 20 },
42 * { lat: 10, lng: 10 },
43 * { lat: 0, lng: 10 }
44 * ], [
45 * { lat: 0, lng: 15 },
46 * { lat: 0, lng: 20 },
47 * { lat: 5, lng: 20 },
48 * { lat: 5, lng: 15 },
49 * { lat: 0, lng: 15 }
50 * ]]
51 * }
52 * ```
53 */
54export declare class SebmGoogleMapPolygon implements OnDestroy, OnChanges, AfterContentInit {
55 private _polygonManager;
56 /**
57 * Indicates whether this Polygon handles mouse events. Defaults to true.
58 */
59 clickable: boolean;
60 /**
61 * If set to true, the user can drag this shape over the map. The geodesic
62 * property defines the mode of dragging. Defaults to false.
63 */
64 draggable: boolean;
65 /**
66 * If set to true, the user can edit this shape by dragging the control
67 * points shown at the vertices and on each segment. Defaults to false.
68 */
69 editable: boolean;
70 /**
71 * The fill color. All CSS3 colors are supported except for extended
72 * named colors.
73 */
74 fillColor: string;
75 /**
76 * The fill opacity between 0.0 and 1.0
77 */
78 fillOpacity: number;
79 /**
80 * When true, edges of the polygon are interpreted as geodesic and will
81 * follow the curvature of the Earth. When false, edges of the polygon are
82 * rendered as straight lines in screen space. Note that the shape of a
83 * geodesic polygon may appear to change when dragged, as the dimensions
84 * are maintained relative to the surface of the earth. Defaults to false.
85 */
86 geodesic: boolean;
87 /**
88 * The ordered sequence of coordinates that designates a closed loop.
89 * Unlike polylines, a polygon may consist of one or more paths.
90 * As a result, the paths property may specify one or more arrays of
91 * LatLng coordinates. Paths are closed automatically; do not repeat the
92 * first vertex of the path as the last vertex. Simple polygons may be
93 * defined using a single array of LatLngs. More complex polygons may
94 * specify an array of arrays. Any simple arrays are converted into Arrays.
95 * Inserting or removing LatLngs from the Array will automatically update
96 * the polygon on the map.
97 */
98 paths: Array<LatLng | LatLngLiteral> | Array<Array<LatLng | LatLngLiteral>>;
99 /**
100 * The stroke color. All CSS3 colors are supported except for extended
101 * named colors.
102 */
103 strokeColor: string;
104 /**
105 * The stroke opacity between 0.0 and 1.0
106 */
107 strokeOpacity: number;
108 /**
109 * The stroke width in pixels.
110 */
111 strokeWeight: number;
112 /**
113 * Whether this polygon is visible on the map. Defaults to true.
114 */
115 visible: boolean;
116 /**
117 * The zIndex compared to other polys.
118 */
119 zIndex: number;
120 /**
121 * This event is fired when the DOM click event is fired on the Polygon.
122 */
123 polyClick: EventEmitter<PolyMouseEvent>;
124 /**
125 * This event is fired when the DOM dblclick event is fired on the Polygon.
126 */
127 polyDblClick: EventEmitter<PolyMouseEvent>;
128 /**
129 * This event is repeatedly fired while the user drags the polygon.
130 */
131 polyDrag: EventEmitter<MouseEvent>;
132 /**
133 * This event is fired when the user stops dragging the polygon.
134 */
135 polyDragEnd: EventEmitter<MouseEvent>;
136 /**
137 * This event is fired when the user starts dragging the polygon.
138 */
139 polyDragStart: EventEmitter<MouseEvent>;
140 /**
141 * This event is fired when the DOM mousedown event is fired on the Polygon.
142 */
143 polyMouseDown: EventEmitter<PolyMouseEvent>;
144 /**
145 * This event is fired when the DOM mousemove event is fired on the Polygon.
146 */
147 polyMouseMove: EventEmitter<PolyMouseEvent>;
148 /**
149 * This event is fired on Polygon mouseout.
150 */
151 polyMouseOut: EventEmitter<PolyMouseEvent>;
152 /**
153 * This event is fired on Polygon mouseover.
154 */
155 polyMouseOver: EventEmitter<PolyMouseEvent>;
156 /**
157 * This event is fired whe the DOM mouseup event is fired on the Polygon
158 */
159 polyMouseUp: EventEmitter<PolyMouseEvent>;
160 /**
161 * This even is fired when the Polygon is right-clicked on.
162 */
163 polyRightClick: EventEmitter<PolyMouseEvent>;
164 private static _polygonOptionsAttributes;
165 private _id;
166 private _polygonAddedToManager;
167 private _subscriptions;
168 constructor(_polygonManager: PolygonManager);
169 /** @internal */
170 ngAfterContentInit(): void;
171 ngOnChanges(changes: SimpleChanges): any;
172 private _init();
173 private _addEventListeners();
174 private _updatePolygonOptions(changes);
175 /** @internal */
176 id(): string;
177 /** @internal */
178 ngOnDestroy(): void;
179}