GeomapPolygon
<ui5-geomap-polygon>
The ui5-geomap-polygon defines the Polygon webcomponent.
ES6 Module Import
import "@ui5/webcomponents-geomap/dist/GeomapPolygon.js";
Basic Sample
Properties
fillColor
| Description | Color of the fill of the layer of the polygon. |
| Type | string |
| Default | "black" |
outlineColor
| Description | Outline color of the layer of the polygon. |
| Type | string |
| Default | "black" |
opacity
| Description | Opacity of the layer of the polygon. |
| Type | number |
| Default | 0.5 |
dragndrop
| Description | Describes if the polygon is draggable & editable. |
| Type | boolean |
| Default | false |
minZoom
| Description | When the map's zoom property is less than this value, the layer will be hidden. Accepts values between 0 and 24. |
| Type | number |
| Default | 0 |
maxZoom
| Description | When the map's zoom property is equal to, or greater than this value, the layer will be hidden Accepts values between 0 and 24. |
| Type | number |
| Default | 0 |
filter
| Description | When set, only features, matching the filter, will be displayed |
| Type | object |
| Default | |
displayedFeatures
| Description | Determines which features the layer will display - All (default), only not-clustered, or only clustered Note: This property is ignored if the filter property is set Note: This property only makes sense when the layer is used for clustering (displays data from a ui5-geomap-cluster-source element) |
| Type | "All" | "NotClustered" | "Clustered" |
| Default | "All" |
hidden
| Description | Determines if the layer is hidden. |
| Type | boolean |
| Default | false |
zIndex
| Description | Describes the zIndex of the layer. The layer with the highest zIndex will be on top. |
| Type | number |
| Default | 0 |
width
| Description | Describes the width of the layer. |
| Type | number | null | undefined |
| Default | undefined |
layer
| Description | Returns the layer object in maplibre |
| Type | any |
| Default | |
| Readonly | true |
Slots
default
| Description | List of points that define the polygon. The first and the last points should always be the same. |
| Type | Array<HTMLElement> |
Events
polygon-dragndrop-end
| Description | Fired when the polygon edit is finished. |
| Type | CustomEvent |
| Bubbles | Yes |
| Cancelable | Yes - via preventDefault() |
layer-click
| Description | Layer clicked |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
layer-mouseenter
| Description | Mouse entered layer |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
layer-mousemove
| Description | Mouse moved in the layer |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
layer-mouseleave
| Description | Mouse left the layer |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
layer-mousedown
| Description | Mouse button down on the layer |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
layer-mouseup
| Description | Mouse button up on the layer |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
Methods
No methods available for this component.
CSS Parts
No CSS parts available for this component.