The ui5-geomap component is the main container of the Geomap webcomponent.
ES6 Module Import
import "@ui5/webcomponents-geomap/dist/Geomap.js";
Basic Sample
Properties
centerLng
| Description | Longitude of the point where the map is centered |
| Type | number |
| Default | 0 |
centerLat
| Description | Latitude of the point where the map is centered |
| Type | number |
| Default | 0 |
zoom
| Description | Zoom level of the map - the bigger, the more the map is zoomed |
| Type | number |
| Default | 2 |
rotation
| Description | Rotation of the map in degrees, counter-clockwise from the north |
| Type | number |
| Default | 0 |
tilt
| Description | Tilt of the map in degrees (0-60) relative to the screen's plane |
| Type | number |
| Default | 0 |
restrictedAreaWestSouthPointLng
| Description | Latitude of the West-South point, defining the map's restricted area The restricted area is provided as a rectangle, defined by its bottom-left (West-South) and top-right (East-North) coordinates
Note: Setting all 4 restrictedArea properties to 0 removes the restriction |
| Type | number |
| Default | 0 |
restrictedAreaWestSouthPointLat
| Description | Longitude of the West-South point, defining the map's restricted area The restricted area is provided as a rectangle, defined by its bottom-left (West-South) and top-right (East-North) coordinates
Note: Setting all 4 restrictedArea properties to 0 removes the restriction |
| Type | number |
| Default | 0 |
restrictedAreaEastNorthPointLng
| Description | Latitude of the West-South point, defining the map's restricted area The restricted area is provided as a rectangle, defined by its bottom-left (West-South) and top-right (East-North) coordinates
Note: Setting all 4 restrictedArea properties to 0 removes the restriction |
| Type | number |
| Default | 0 |
restrictedAreaEastNorthPointLat
| Description | Longitude of the West-South point, defining the map's restricted area The restricted area is provided as a rectangle, defined by its bottom-left (West-South) and top-right (East-North) coordinates
Note: Setting all 4 restrictedArea properties to 0 removes the restriction |
| Type | number |
| Default | 0 |
minZoom
| Description | The minimum allowed zoom level |
| Type | number |
| Default | 0 |
maxZoom
| Description | The maximum allowed zoom level |
| Type | number |
| Default | 24 |
minTilt
| Description | The minimum allowed tilt level |
| Type | number |
| Default | 0 |
maxTilt
| Description | The maximum allowed tilt level |
| Type | number |
| Default | 60 |
canvas
| Description | Returns the canvas element of the map |
| Type | HTMLCanvasElement |
| Default | null |
| Readonly | true |
Slots
default
| Description | Describes the content of the map - provider, controls, markers, etc. |
| Type | Array<HTMLElement> |
mapControls
| Description | Describes the controls of the map |
| Type | Array<HTMLElement> |
Events
map-center
| Description | The user changed the center of the map (dragged or zoomed) |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
map-zoom
| Description | The user zoomed the map |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
map-rotate
| Description | The user rotated the map |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
map-tilt
| Description | The user tilted the map |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
map-click
| Description | The user clicked on the map |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | Yes - via preventDefault() |
map-dblclick
| Description | The user double-clicked on the map |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | Yes - via preventDefault() |
map-mouseup
| Description | The user released the mouse button |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | Yes - via preventDefault() |
map-mousemove
| Description | The user moved the mouse over the map |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
| Description | The user right-clicked on the map |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | Yes - via preventDefault() |
map-bounds-change
| Description | The map's bounds have changed |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
map-error
| Description | The map has encountered an error |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | Yes - via preventDefault() |
selection-set
| Description | Fired when a selection is set programmatically via setSelection(). |
| Type | CustomEvent |
| Bubbles | No |
| Cancelable | No |
Methods
flyTo
| Description | Changes any combination of center, zoom, bearing, and pitch, animating the transition along a curve that evokes flight. |
| Return type | void |
| Parameters | lng: number
Describes the longitude of the center.
lat: number
Describe the latitude of the center.
zoom: number
Describes the zoom level. |
getLayersAt
| Description | - |
| Return type | any |
getBounds
| Description | Returns the map boundaries (for the visible viewport). |
| Return type | any |
perfectZoom
| Description | Zooms the map to the perfect level to display an area by its boundaries. |
| Return type | void |
getElementsInSelectedArea
| Description | Returns the elements in given area (described as a polygon). |
| Return type | Array<F> |
| Parameters | area: PolygonCoordinatesType |
setSelection
| Description | Sets one or more features as the active programmatic selection on the map.
Accepted shape types and the required GeoJSON geometry for each:
|
| Return type | void |
| Parameters | feature: GeoJSONFeature
A single GeoJSON Feature |
getSelection
| Description | Returns the current programmatic selection features as GeoJSON Features. |
| Return type | Array<GeoJSONFeature> |
removeSelection
| Description | Removes all programmatically-added selection features from the map. |
| Return type | void |
takeScreenshot
| Description | Captures the current map view and returns it as a data URL. The result includes both the WebGL map canvas and HTML marker overlays (spots). |
| Return type | Promise<string> |
| Parameters | type: string
MIME type of the output image (default: "image/png")
quality: number
Compression quality 0–1, applies to lossy formats like "image/jpeg" |
CSS Parts
No CSS parts available for this component.