Skip to content

SiMapComponent documentation

selector
si-map

Input Properties

NameTypeDefaultDescription
alwaysShowLabels
booleanfalseShow the label permanently next to the point. Normally the label is shown on hover or click. By enabling this it will always be visible next to the marker.
autoZoomClusterClick
booleantrueWhen disabled, clusters will no longer automatically be zoomed to on click.
autoZoomFeatureClick
booleanfalseWhen enabled, features will be automatically zoom to on click.
cluster
booleanfalseEnable or disable clustering of points on the map.
clusterClickZoom
numberDEFAULT_CLUSTER_CLICK_ZOOMMax zoom level for clicking on a cluster on the map. Defaults to 15.
clusterDistance
numberDEFAULT_CLUSTER_DISTANCEDefines range in which points are clustered. In pixels.
clusterPopoverComponent
Type<any>Custom popover component for clustering
displayPopoverOnClick
booleantrueOption to switch on/off the display of popover when clicked. Default set to true (on).
displayPopoverOnHover
booleanfalseOption to switch on/off popover when hovered. Default is set to false (off)
displayTooltipOnClusterHover
booleanfalseOption to switch on/off the display of tooltip while hovering over cluster.
displayTooltipOnHover
booleanfalseOption to switch on/off the display of tooltip while hovering over single point.
featureClickZoom
numberDEFAULT_FEATURE_CLICK_ZOOMMax zoom level which is used when clicking on feature on the map. Defaults to 15.
featureSelectZoom
numberDEFAULT_FEATURE_SELECT_ZOOMZoom level when calling the select() method on the component. Defaults to 10.
fitClusterPadding
[ number, number, number, number ][20, 20, 20, 20]Padding (in pixels) applied to the map view when zooming to a cluster, preventing points from being clipped at the edges. Specified as [top, right, bottom, left].
fitGeoJsonPadding
number[][20, 20, 20, 20]For GeoJson, padding (in pixels) to be cleared to fit the GeoJson inside the view after a click on it. Values in the array are: [top, right, bottom, left].
fitPointPadding
number[][20, 20, 20, 20]For Point geometry, padding (in pixels) to be cleared to fit the point inside the view after a click on it. Values in the array are: [top, right, bottom, left].
geoJson
anyPayload of a geo-JSON object.
geoJsonProjection
string'EPSG:3857'Projection format used to render the geo-JSON payload.
globalZoom
numberDEFAULT_GLOBAL_ZOOMMax zoom level on load or when clicking the reset button. Defaults to 5.
groupColors
(Record<number, string> | ColorPalette)'status'Defines which colors should be used when points are grouped. Grouping means that points are painted with their group color and they are displayed as series in donut chart inside cluster.
maptilerKey
stringProvide your key for MapTiler, this will use the default siemens element styles which can be used in both light and dark mode. Shouldn't be used together with styleJson.
markerAnimation
booleanfalseEnable or disable animation of markers.
maxLabelLineLength
number20Maximum number of characters per line for always displayed labels of a point.
If the label exceeds this limit, it will be wrapped or trimmed.
If set to 0, label trimming will be disabled.
This setting is effective only when alwaysShowLabels is enabled.
Important: Changing this is not recommended in most cases and may cause issues with positioning of the labels.
maxLabelLines
number3Maximum number of lines for always displayed labels of a point.
If the label exceeds this limit, it will be trimmed.
This setting is effective only when alwaysShowLabels is enabled and maxLabelLineLength is not 0.
Important: Changing this is not recommended in most cases and may cause issues with positioning of the labels.
multiWorld
booleantrueShow multiple worlds, including points that cross the 180th meridian.
nativeProperties
OverlayNativeProperties- overlay: Layer for popup element, an element to be displayed over the map and attached to a single map location. - controls: List of controls to activate for map, additional controls like full screen, etc. can be added here.
points
MapPoint[]Points to be rendered on the map as features.
popoverCloseOnClick
booleantrueClose the popover on click
popoverComponent
Type<any>Custom popover component
popoverComponentProps
anyCustom popover component
styleFunction
StyleLikeCallback function to add custom styling to the drawn geo-JSON features.
styleJson
anyType of background map, for example 'https://api.maptiler.com/maps/voyager/style.json?key=xxx' (Token key is required). The styleJson defines the tiler source and the used styles for different layers, should only be used if the siemens default styles by using maptilerKey isn't good enough.
moreText
Deprecated		TranslatableString$localize`:@@SI_MAPS.TOOLTIP_MORE_TEXT:and {{length}} more...`Cutoff text for tooltips, when cluster combines more than 4 features
Deprecated: Use SiMapTooltipComponent instead to set the moreText input e.g. <​si-map ...​><​si-map-tooltip [moreText]="'KEY_MORE'" /​><​/si-map​> .

Output Properties

NameTypeDescription
pointsChange
MapPoint[]Points to be rendered on the map as features.
pointsRefreshed
voidEmitted when the points are available as features. So consumers can call methods like zoomToPoints() on the actual point list.
pointsSelected
MapPoint[]Emitted when points on the map are selected or de-selected

Attributes and Methods

NameTypeDefaultDescription
clear()
() => void
closePopup()
() => booleanClose popup
createOverlay(...)
(container: HTMLElement, position: Positioning, nativeProperties: OverlayNativeProperties, isTooltip: boolean) => OverlayCreate overlay for tooltip and popover

Parameters
displayTooltip(...)
(feats: FeatureLike[]) => voidDisplay tooltip on hovering over feature type of Feature.

Parameters
featureCallback(...)
(feat: FeatureLike, clusterHolder: ClusterHolder) => (undefined | Feature<Geometry>[])Return features inside feature object in case of cluster enabled/disabled

Parameters
  • feat: FeatureLike  feature to get features from
  • clusterHolder: ClusterHolder
featureClick(...)
(feature: Feature, event: any, zoom: boolean) => voidAPI for feature clicking with extra properties.

Parameters
features
Feature<Geometry>[][]
hideOverlays()
() => void
init()
() => voidInitialize map and it's layers
isClicked
booleanfalse
map
Optional		MapOpenLayers map instance.
mapboxStyles(...)
(styleJSON: any) => voidSet mapbox styles

Parameters
  • styleJSON: any  the styleJSON as a JSON object
onClusterClick(...)
(event: MapBrowserEvent) => voidClicking on cluster event

Parameters
onFeatureHover(...)
(event: MapBrowserEvent) => voidOn feature hovering show tooltip and change cursor style

Parameters
onThemeSwitch(...)
(dark: boolean) => voidParameters
onThemeSwitchInternal(...)
(event: Event) => voidParameters
popoverOverlay
Overlay
refresh(...)
(points: MapPoint[], zoomToFeatures: boolean = true) => voidRefresh points with new set of points

Parameters
select(...)
(point: MapPoint, maxZoomLevel: number) => voidSelecting the certain point on map with API

Parameters
selected
Optional		Feature<Geometry>
setGeoJsonLayer()
() => voidSetting up the geoJson layer
setMapStyle(...)
(dark: boolean, key: string, styleJSON: string) => voidSet Map style

Parameters
  • dark: boolean  boolean if dark theme should be active or not
  • key: string  the api key for the maptiler styleJSON
  • styleJSON: string  a preexisting styleJSON as url with key already provided
showClusterTooltipContent(...)
(features: Feature<Geometry>[], cluster: Feature<Geometry>) => booleanSends data into cluster tooltip based on number of

Parameters
showTooltipContent(...)
(feature: Feature) => booleanShow tooltip with content on hover over feature

Parameters
  • feature: Feature  to show popup on
targetFeature
Optional		Feature<Geometry>
tooltipOverlay
Overlay
zoomCluster(...)
(clusterFeatures: Feature<Geometry>[]) => voidZoom to cluster features

Parameters
zoomToFeatures(...)
(features: Feature<Geometry>[], zoomLevel: number, shouldAnimate: boolean = true) => voidZoom to features, gets coordinates of features and creates bounding extent

Parameters
  • features: Feature<Geometry>[]  list of features to zoom in, if empty all features will be zoomed to
  • zoomLevel: number  number for level to zoom in
  • shouldAnimate: boolean = true
zoomToGeoJson(...)
(coordinate: Coordinate, zoomLevel: number, shouldAnimate: boolean = true) => voidZoom to GeoJson using coordinates of point of click

Parameters
  • coordinate: Coordinate  coordinates of point of click
  • zoomLevel: number  number for level to zoom in
  • shouldAnimate: boolean = true
zoomToPoints(...)
(points: MapPoint[], zoomLevel: number, shouldAnimate: boolean = true) => voidZoom to features, gets coordinates of points and creates bounding extent

Parameters
  • points: MapPoint[]  list of points to zoom in, if empty all points will be zoomed to, need to be the same reference as the input
  • zoomLevel: number  number for level to zoom in
  • shouldAnimate: boolean = true
onResize()
Deprecated		() => voidDeprecated: has no effect and will be removed in v48

Types Documentation

15 = 15
Variable
40 = 40
Variable
15 = 15
Variable
10 = 10
Variable
5 = 5
Variable
("status" | "element")
Properties
List of controls to activate for map, additional controls like full screen, etc. can be added here Defaults are zoom in and out
controls?: Control[]
Layer for popup element, an element to be displayed over the map and attached to a single map location.
overlay?: Overlay
extends MapPointMetaData
Properties
Marker description, can be simple string or HTML as string
description: string from description
Extra properties to be passed along (click function consumes it)
extraProperties?: any from extraProperties
If you want your point to be clustered by it's group, you need to set the group id here for this point Color with the same id will be assigned. Must be higher than 0
group?: number from group
Latitude value for marker
lat: number
Longtitude value for marker
lon: number
Marker style
marker?: MarkerOptions from marker
Marker name
name: string from name
Methods
(extraProperties: any) => void from click
Click functionality, do any extra staff when clicking on the point, just create needed logic for click functionality
Parameters
extraProperties?: any
import
imported from ol
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
import
imported from ol
import
imported from ol
import
imported from ol
import
imported from ol
Properties
Marker description, can be simple string or HTML as string
description: string
Extra properties to be passed along (click function consumes it)
extraProperties?: any
If you want your point to be clustered by it's group, you need to set the group id here for this point Color with the same id will be assigned. Must be higher than 0
group?: number
Marker style
marker?: MarkerOptions
Marker name
name: string
Methods
(extraProperties: any) => void
Click functionality, do any extra staff when clicking on the point, just create needed logic for click functionality
Parameters
extraProperties?: any
import
imported from ol
Properties
Color of the marker, HEX or css compliant color value. Only use when a semantic status isn't working for the use-case.
color?: string
Icon options
icon?: IconMarkerOptions
Semantic status for coloring. This is also theme-aware.
status?: MarkerStatusType
Visual representation of marker
type: ("status" | "icon" | "dot")
import
imported from ol
import
imported from ol
import
imported from ol
import
imported from ol
() => SiTranslateService
Function

import
imported from ol
Class for grouping functionality
Constructor
(groupColors: (Record<number, string> | ColorPalette) = 'status') => {}
Parameters
groupColors: (Record<number, string> | ColorPalette) = 'status'
Properties
_colors: string[]
_palette?: ColorPalette
Accessors
get colors: string[]
get length: number
get palette: (undefined | string)
Methods
(groupId: number) => string
Parameters
groupId: number
import
imported from ol
import
imported from ol
Properties
Scale value for marker
scale?: number
Path to the icon image
src?: string
("success" | "info" | "warning" | "danger" | "caution" | "critical" | "default" | "unknown")
import
imported from ol
import
imported from ol
import
imported from ol
import
imported from ol
import
imported from ol
<T> T extends string ? string : Record<string, string>
{ [ key in ColorPalette ]: string[] }
import
imported from ol
import
imported from ol
import
imported from ol
import
imported from ol
Properties
component?: Type<any>
map?: Map
mapPoints: (MapPointMetaData | MapPointMetaData[])
Constructor
() => {}
Properties
content: Signal<ElementRef<any>> = ...
elementRef: ElementRef<any> = ...
hiddenEntries: WritableSignal<number> = ...
Adds the maximum length of a string thats allowed in a tooltip and if its longer it cuts off the rest and adds 3 dots at the end. If set to -1, it will not cut off the string.
maxLabelLength: InputSignal<number> = 50
Cutoff text for tooltips, when cluster combines more than 4 features
moreText: InputSignal<TranslatableString> = $localize`:@@SI_MAPS.TOOLTIP_MORE_TEXT:and {{length}} more...`
Accessors
get nativeElement: HTMLElement
Methods
(label: string) => string
Parameters
label: string
(tooltip: string) => void
Parameters
tooltip: string
(labels: (string | string[])) => void
Method sets tooltip content. If parameter is of type string, it will directly set it as tooltip content. If it is array of string, it will render it as list of those strings.
Parameters
array of strings or string itself
labels: (string | string[])
Constructor
() => {}
Properties
_theme?: { colorPalette: ColorPalettes, defaultMarkerColor: string, fillColor: string, status: Record<MarkerStatusType, string>, strokeColor: string, textColor: string }
clusterStyleCache: Record<string, Style[]> = {}
grouping?: Grouping
labelStyleCache: Record<string, Style[]> = {}
labelTextStyleCache: Record<string, Text[]> = {}
styleCache: Record<string, Style[]> = {}
wrappedTextCache: Record<string, string> = {}
zoomCallback: () => (undefined | number) = ...
Accessors
get theme: { colorPalette: ColorPalettes, defaultMarkerColor: string, fillColor: string, status: Record<MarkerStatusType, string>, strokeColor: string, textColor: string }
Methods
(distance: number, clusterRadius: number) => number
Calculates minimal safe distance for clustering to avoid overlapping of clusters
Parameters
distance: number
clusterRadius: number
(features: Feature<Geometry>[], markerAnimation: boolean, clusterDistance: number, multiWorld: boolean) => Layer
Initialize animated cluster layer for points if clustering is enabled
Parameters
for the source
features: Feature<Geometry>[]
animation value for markers
markerAnimation: boolean
number distance between clusters
clusterDistance: number
boolean if points should be repeated on multiple world maps
multiWorld: boolean
(points: MapPoint[], alwaysShowLabels: boolean = false) => Feature<Geometry>[]
Create feature with parameters
Parameters
the list of points
points: MapPoint[]
alwaysShowLabels: boolean = false
(features: Feature<Geometry>[], grouping: Grouping) => ImageStyle
Parameters
features: Feature<Geometry>[]
grouping: Grouping
(features: Feature<Geometry>[], grouping: Grouping) => { colors: string[], data: number[] }
Parameters
features: Feature<Geometry>[]
grouping: Grouping
(feature: Feature) => Style[]
Cluster styling
Parameters
Feature
feature: Feature
(color: string) => CircleStyle
Parameters
color: string
(feature: Feature, cluster: boolean, features: Feature<Geometry>[], dummy: boolean = false) => Style[]
Separate feature styling with icon
Parameters
to style
feature: Feature
indication
cluster: boolean
list of features
features: Feature<Geometry>[]
dummy: boolean = false
(color: string, iconConf: IconMarkerOptions) => Icon
Parameters
color: string
iconConf?: IconMarkerOptions
(feature: Feature<Point>, features: Feature<Point>[], maxLabelLength: number, maxLines: number, clusterSource: Cluster<Feature<Point>>, dummy: boolean = false) => Style[]
Parameters
feature: Feature<Point>
features: Feature<Point>[]
maxLabelLength: number
maxLines: number
clusterSource?: Cluster<Feature<Point>>
dummy: boolean = false
(text: string = '', maxLength: number, maxLines: number, markerSizes: [ number, number ], markerOffset: [ number, number ]) => Text[]
Parameters
text: string = ''
maxLength: number
maxLines: number
markerSizes: [ number, number ]
markerOffset: [ number, number ]
(feature: Feature, grouping: Grouping, marker: MarkerOptions) => string
Decides what color should Marker be painted with.

Markers are painted with group colors if group id is present. If marker color is specified, it takes precedence over the group color.
Parameters
feature: Feature
grouping: Grouping
marker?: MarkerOptions
(feature: Feature) => [ number, number ]
Parameters
feature: Feature
(feature: Feature) => [ number, number ]
Parameters
feature: Feature
(feature: Feature, grouping: Grouping, marker: MarkerOptions) => (undefined | Icon | CircleStyle)
Parameters
feature: Feature
grouping: Grouping
marker?: MarkerOptions
(marker: MarkerOptions) => Icon
Parameters
marker: MarkerOptions
(theme: { colorPalette: ColorPalettes, defaultMarkerColor: string, fillColor: string, status: Record<MarkerStatusType, string>, strokeColor: string, textColor: string }, marker: MarkerOptions) => (undefined | string)
Parameters
theme: { colorPalette: ColorPalettes, defaultMarkerColor: string, fillColor: string, status: Record<MarkerStatusType, string>, strokeColor: string, textColor: string }
marker?: MarkerOptions
getZoom: () => number
(features: Feature<Geometry>[], multiWorld: boolean, maxLabelLength: number, maxLines: number, clusterLayer: Layer<Source, LayerRenderer<any>>) => VectorLayer<VectorSource<Feature<Geometry>>>
Parameters
features: Feature<Geometry>[]
multiWorld: boolean
maxLabelLength: number
maxLines: number
clusterLayer?: Layer<Source, LayerRenderer<any>>
resetCaches: () => void
(groupColors: (undefined | Record<number, string> | ColorPalette)) => void
Parameters
groupColors: (undefined | Record<number, string> | ColorPalette)
(callback: () => (undefined | number)) => void
Parameters
callback?: () => (undefined | number)
(data: number[], series: number[], size: number) => void
Parameters
data: number[]
series: number[]
size: number
(features: Feature<Geometry>[], multiWorld: boolean, defaultStyle: boolean = false) => VectorLayer<VectorSource<Feature<Geometry>>>
Create vector layer when clustering is disabled
Parameters
list of Features
features: Feature<Geometry>[]
boolean if points should be repeated on multiple world maps
multiWorld: boolean
defaultStyle: boolean = false
(labelText: string, maxLength: number, maxLines: number) => string
Parameters
labelText: string
maxLength: number
maxLines: number
Constructor
() => {}
Properties
contentContainer: Signal<ViewContainerRef> = ...
defaultCluster: Signal<TemplateRef<any>> = ...
defaultContent: Signal<TemplateRef<any>> = ...
elementRef: Signal<ElementRef<any>> = ...
maxHeight: WritableSignal<(null | number)> = ...
Methods
(RenderOptions) => void
Parameters
Parameter: RenderOptions
(component: Type<any>, mapPoints: (MapPointMetaData | MapPointMetaData[])) => void
Parameters
component: Type<any>
mapPoints: (MapPointMetaData | MapPointMetaData[])
(mapPoints: (MapPointMetaData | MapPointMetaData[])) => void
Parameters
mapPoints: (MapPointMetaData | MapPointMetaData[])
Wrapper around an actual translation framework which is meant to be used internally by Element. Applications must not use this service.

Use injectSiTranslateService to get an instance of the translation service.
Constructor
() => {}
Properties
documentRef: Document = ...
prevent$LocalizeInit?: boolean
translationChange$: Observable<void> = NEVER
Accessors
The available languages.
get availableLanguages: string[]
set availableLanguages: (languages: string[])
The currently used language.
get currentLanguage: string
If the underlying translation library supports switching the language and/or updating the translation texts, this observable will emit. There is no initial emit.
get translationChange: Observable<void>
Methods
The language to be used as default.
Returns The code of the default language.
getDefaultLanguage: () => string
(lang: string) => Observable<void>
Sets a new language to be used. If needed, loads the language file.
Returns An observable that emits when the new language is loaded and activated.
Parameters
The language to be used.
lang: string
(lang: string) => void
The language to be used as default.
Parameters
The language code.
lang: string
(lang: string) => void
Parameters
lang: string
(key: string, value: string) => void
If supported by the underlying translation library, this method can be used to add a translation for a specific key.
It is intended to be used for adding the english default value.
It will be called whenever a key within element is resolved.
An implementation of this method must check that it does not override an existing translation.
Parameters
key: string
value: string
<(T: (string | string[]))> (keys: T, params: Record<string, unknown>) => (TranslationResult<T> | Observable<TranslationResult<T>>)
Translates the key(s) by using the underlying translation library.
Returns Returns the translated key or an object with the translated keys. Depending on the underlying translation library (sync/async) the result will be wrapped in an Observable.
Parameters
A single translation key or an array of keys.
keys: T
Parameters to be replaced within the translation text.
params?: Record<string, unknown>
<(T: (string | string[]))> (keys: T, params: Record<string, unknown>) => Observable<TranslationResult<T>>
Translates the key(s) by using the underlying translation library in an asynchronous manner. It will emit each time the active language is changed.
Returns Returns the translated key or an object with the translated keys wrapped in an Observable.
Parameters
A single translation key or an array of keys.
keys: T
Parameters to be replaced within the translation text.
params?: Record<string, unknown>
<(T: (string | string[]))> (keys: T, params: Record<string, unknown>) => TranslationResult<T>
Translates the key(s) by using the underlying translation library in a synchronous manner.

Warning: The caller of this function needs to make sure the translation file(s) are already loaded. It is generally not recommended to use this function unless you know exactly what you are doing.

Returns Returns the translated key or an object with the translated keys.
Parameters
A single translation key or an array of keys.
keys: T
Parameters to be replaced within the translation text.
params?: Record<string, unknown>

Except where otherwise noted, content on this site is licensed under MIT License.