GeomapGeocircle
<ui5-geomap-geocircle>
The ui5-geomap-geocircle defines the Geo Circle webcomponent.
GeomapGeocircle represents circles, defined in a real-world units (km, miles, etc.).
Rendered on the map as layers.
ES6 Module Import
import "@ui5/webcomponents-geomap/dist/GeomapGeocircle.js";
Basic Sample
Properties
lng
| Description | Describes the longitude of the center of the geo-circle. |
| Type | number |
| Default | 0 |
lat
| Description | Describes the latitude of the center of the geo-circle. |
| Type | number |
| Default | 0 |
radius
| Description | Describes the radius of the geo-circle. |
| Type | number |
| Default | 0 |
units
| Description | Describes the units in which the radius is measured. |
| Type | string |
| Default | "kilometers" |
fillColor
| Description | Describes the color of the fill of the geo-circle. |
| Type | string |
| Default | "black" |
outlineColor
| Description | Describes the outline color of the geo-circle. |
| Type | string |
| Default | "black" |
opacity
| Description | Describes the opacity of the fill of the geo-circle. |
| Type | number |
| Default | 0.5 |
dragndrop
| Description | Describes if the geocircle 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
No slots available for this component.
Events
geocircle-dragndrop-end
| Description | Fired when the geocircle 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.