# Polygon
# Usage
let data = {
"type": "FeatureCollection",
"features": [
{
"id": "1",
"type": "Feature",
"properties": {
"name": "polygon1",
"color": "#00ffff"
},
"geometry": {
"coordinates": [
[
[
3006.0952985307595,
15198.972934052355
],
[
12606.64046359223,
9285.59366571666
],
[
4745.324495099878,
3720.060236694666
],
[
3006.0952985307595,
15198.972934052355
]
]
],
"type": "Polygon"
}
},
{
"id": "2",
"type": "Feature",
"properties": {
"name": "polygon2",
"color": "#ff00ff"
},
"geometry": {
"coordinates": [
[
[
19841.833921319492,
13807.589576796912
],
[
19841.833921319492,
4207.0444117340885
],
[
26172.62819683108,
4207.0444117340885
],
[
26172.62819683108,
13807.589576796912
],
[
19841.833921319492,
13807.589576796912
]
]
],
"type": "Polygon"
}
}
]
}
let polygon = new vjmap.Polygon({
data: map.toLngLat(data), // Convert CAD geometry coordinates to render longitude/latitude
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']],
fillOpacity: 0.8,
fillOutlineColor: "#f00",
isHoverPointer: true,
isHoverFeatureState: true
});
polygon.addTo(map);
polygon.clickLayer(e => map.logInfo(`You clicked No. ${e.features[0].id}, name: ${e.features[0].properties.name}, color: ${e.features[0].properties.color} `))
polygon.hoverPopup(f => `<h3>ID: ${f.properties.name}</h3>Color: ${f.properties.color}`, { anchor: 'bottom' });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
Alternatively, create the data source first, then create the fill layer, e.g.
map.addSource("fillSources", {
type: "geojson",
data: data
});
map.addLayer({
id: 'fillLayers',
source: 'fillSources',
type: 'fill',
"layout": {},
"paint": {
"fill-color": ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']], //color
'fill-opacity': 0.8,
'fill-outline-color': "#f00"
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Or use camelCase for properties, no need to distinguish layout vs paint
map.addGeoJSONSource("fillSources", data);
map.addFillLayer("fillLayers", "fillSources", {
fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', ['get', 'color']], //color
fillOpacity: 0.8,
fillOutlineColor: "#f00"
})
1
2
3
4
5
6
2
3
4
5
6
When using this approach of creating data source and layer, listen to map layer events for event handling
map.on("click", layerId, e => {})
1
# Common Methods
Use setData to modify data
polygon.setData(newDataJson);
1
Get layer ID and data source ID
// Get layer ID
polygon.getLayerId()
// Get data source ID
polygon.getSourceId()
1
2
3
4
2
3
4
Show or hide
// Show
polygon.show()
// Hide
polygon.hide()
1
2
3
4
2
3
4
Remove
// Remove
polygon.remove()
1
2
2
# Related Examples
Single polygon (opens new window)
Two polygons (opens new window)
Batch draw polygons (opens new window)
Polygon conditional filter (opens new window)
Batch draw different types of polygons (opens new window)
Hollow polygon (opens new window)
Complex hollow polygon (opens new window)
Polygon pattern style (opens new window)
Polygon show line width on highlight (opens new window)
# Type Definitions
/**
* Create polygon.
*
**/
export class Polygon extends OverlayLayerBase {
options: PolygonOptions;
constructor(options: PolygonOptions);
addTo(map: Map, beforeId?: string): void;
/** Replace the current data of the GeoJSON layer.
@param {GeoJSON} [data] GeoJSON object to set. If not provided, defaults to an empty FeatureCollection.
*/
setData(data: PointGeoJsonInput | PointGeoJsonInput[] | GeoJsonGeomertry | GeoPointLike | any): void;
/** Set `fill-sort-key` layout property on one or more layers. */
setFillSortKey(value: DataDrivenPropertyValueSpecification<number>): this;
/** Set `fill-antialias` paint property on one or more layers. */
setFillAntialias(value: PropertyValueSpecificationEx<boolean>): this;
/** Set `fill-opacity` paint property on one or more layers. */
setFillOpacity(value: DataDrivenPropertyValueSpecification<number>): this;
/** Set `fill-color` paint property on one or more layers. */
setFillColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
/** Set `fill-outline-color` paint property on one or more layers.*/
setFillOutlineColor(value: DataDrivenPropertyValueSpecification<ColorSpecification>): this;
/** Set `fill-translate` paint property on one or more layers. */
setFillTranslate(value: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>): this;
/** Set `fill-translate-anchor` paint property on one or more layers. */
setFillTranslateAnchor(value: PropertyValueSpecificationEx<"map" | "viewport">): this;
/** Set `fill-pattern` paint property on one or more layers. */
setFillPattern(value: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>): this;
/** Get `fill-sort-key` layout property of layer. */
getFillSortKey(): DataDrivenPropertyValueSpecification<number>;
/** Get `fill-antialias` paint property of layer. */
getFillAntialias(): PropertyValueSpecificationEx<boolean>;
/** Get `fill-opacity` paint property of layer. */
getFillOpacity(): DataDrivenPropertyValueSpecification<number>;
/** Get `fill-color` paint property of layer. */
getFillColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
/** Get `fill-outline-color` paint property of layer. */
getFillOutlineColor(): DataDrivenPropertyValueSpecification<ColorSpecification>;
/** Get `fill-translate` paint property of layer. */
getFillTranslate(): PropertyValueSpecificationEx<[number, number]>;
/** Get `fill-translate-anchor` paint property of layer. */
getFillTranslateAnchor(): PropertyValueSpecificationEx<"map" | "viewport">;
/** Get `fill-pattern` paint property of layer. */
getFillPattern(): DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
}
export class OverlayLayerBase {
sourceId?: string;
layerId?: string;
_map?: Map;
constructor();
addTo(map: Map, beforeId?: string): void;
/**
* Get data source ID
* @return {string | undefined}
*/
getSourceId(): string | undefined;
/**
* Get layer ID
* @return {string | undefined}
*/
getLayerId(): string | undefined;
/**
* Get data source data
* @return {GeoJsonGeomertry | undefined}
*/
getData(): GeoJsonGeomertry | undefined;
remove(): void;
/** Set map cursor to "pointer" when mouse hovers over these layers.
@returns A function to remove the handler.
* @param layerOrLayers
*/
hoverPointer(): void;
/**
Update feature state in connected source when mouse hovers over a feature in these layers.
* @param enterCb
* @param leaveCb
*/
hoverFeatureState(enterCb?: (arg0: {}) => void, leaveCb?: (arg0: {}) => void): void;
/** Show a popup when mouse hovers over a feature in these layers.
@param htmlFunc Function that receives feature and popup, returns HTML.
@param {Object<PopupOptions>} popupOptions Options passed to `Popup()` to customise popup.
@example hoverPopup(f => `<h3>${f.properties.Name}</h3> ${f.properties.Description}`, { anchor: 'left' });
*/
hoverPopup(htmlFunc: any, popupOptions?: PopupOptions): any;
/** Show a popup when clicking a feature in these layers.
@param htmlFunc Function that receives feature and popup, returns HTML.
@param {Object<PopupOptions>} popupOptions Options passed to `Popup()` to customise popup.
@returns A function that removes the handler.
@example clickPopup(f => `<h3>${f.properties.Name}</h3> ${f.properties.Description}`, { maxWidth: 500 });
*/
clickPopup(htmlFunc: (arg0: {}) => void, popupOptions?: PopupOptions): any;
/** Trigger callback when clicking a feature in these layers.
@param {function} cb Callback that receives event with .features property
@returns A function that removes the handler.
*/
clickLayer(cb: any): any;
/** Trigger callback when mouse hovers over a feature in these layers.
@returns A function to remove the handler.
*/
hoverLayer(cb: any): any;
/**
* Make the given layer visible.
* @param layer
*/
show(): void;
/**
* Make the given layer invisible.
* @param layer
*/
hide(): void;
/** Hide or show the given layer based on parameter.
@param {boolean} state True for visible, false for hidden.
*/
toggle(state: boolean): boolean;
/** Set paint or layout property on one or more layers.
@example setProperty('fillOpacity', 0.5)
*/
setProperty(prop: string | object, value?: any): void;
/** Get layer definition for given layer ID according to style spec.
*/
getLayerStyle(): LayerSpecification;
/**
* Set layer style
* @param layer
* @param style
*/
setLayerStyle(style: any): void;
/** Replace the filter of a layer.
@param {Array} filter New filter to set.
@example setFilter(['==','level','0']]);
*/
setFilter(filter: FilterSpecification): void;
}
export interface OverlayLayerBaseOptions {
sourceId?: string;
sourceLayer?: string;
layerId?: string;
minzoom?: number;
maxzoom?: number;
filter?: any;
visibility?: "visible" | "none";
isHoverPointer?: boolean;
isHoverFeatureState?: boolean;
}
export type FillLayerSpecification = {
id: string;
type: "fill";
metadata?: unknown;
source: string;
"source-layer"?: string;
minzoom?: number;
maxzoom?: number;
filter?: FilterSpecification;
layout?: {
"fill-sort-key"?: DataDrivenPropertyValueSpecification<number>;
visibility?: "visible" | "none";
};
paint?: {
"fill-antialias"?: PropertyValueSpecificationEx<boolean>;
"fill-opacity"?: DataDrivenPropertyValueSpecification<number>;
"fill-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
"fill-outline-color"?: DataDrivenPropertyValueSpecification<ColorSpecification>;
"fill-translate"?: PropertyValueSpecificationEx<[number, number]>;
"fill-translate-anchor"?: PropertyValueSpecificationEx<"map" | "viewport">;
"fill-pattern"?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
};
};
export type FillLayerStyleProp = {
metadata?: unknown;
source?: string;
sourceLayer?: string;
minzoom?: number;
maxzoom?: number;
filter?: FilterSpecification;
visibility?: "visible" | "none";
fillSortKey?: DataDrivenPropertyValueSpecification<number>;
fillAntialias?: PropertyValueSpecificationEx<boolean>;
fillOpacity?: DataDrivenPropertyValueSpecification<number>;
fillColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
fillOutlineColor?: DataDrivenPropertyValueSpecification<ColorSpecification>;
fillTranslate?: PropertyValueSpecificationEx<[number, number]>;
fillTranslateAnchor?: PropertyValueSpecificationEx<"map" | "viewport">;
fillPattern?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>;
};
export type FilterSpecification = ["has", string] | ["!has", string] | ["==", string, string | number | boolean] | ["!=", string, string | number | boolean] | [">", string, string | number | boolean] | [">=", string, string | number | boolean] | ["<", string, string | number | boolean] | ["<=", string, string | number | boolean] | Array<string | FilterSpecification>;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195