map/cluster-map.component.ts
Smart map component for that clusters devices together when there are too many to display individually. Unlike the basic map, this component loads device data dynamically and manages cluster rendering and updates. Extends the base MapComponent with clustering, dynamic data loading, and advanced refresh logic.
| providers |
ManagedObjectRealtimeService
|
| selector | c8y-cluster-map |
| templateUrl | ./cluster-map.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(moRealtimeService: ManagedObjectRealtimeService, mapService: MapService, layers$: Observable
|
|||||||||||||||||||||||||||||||||
|
Constructs the ClusterMapComponent, injecting required services and initializing the base map.
Parameters :
|
| asset |
Type : PositionManagedObject
|
|
Single asset to display (if not clustering). Used for following a specific device. If provided, clusters will not be used, and the asset will be displayed individually. If not provided, the component will cluster devices based on the root node. |
| config |
Type : ClusterMapConfig
|
|
Cluster map configuration, including clustering thresholds and refresh intervals. |
| rootNode |
Type : IManagedObject
|
|
The root managed object (e.g., group or device) for which to load and cluster data. |
| showClusterColor |
Type : boolean
|
Default value : false
|
|
Whether to show a color overlay for each cluster rectangle. This can be useful for debugging or visualizing clusters. |
| assets |
Type : PositionManagedObject | PositionManagedObject[]
|
|
Asset(s) to display as markers on the map. |
| polyline$ |
Type : Observable<[] | []>
|
Default value : NEVER
|
|
Observable for polyline coordinates to display on the map. |
| polylineOptions |
Type : L.PolylineOptions
|
|
Polyline display options for the map. |
| mapChange |
Type : EventEmitter
|
|
Emits Leaflet map change events (move, moveend) for external listeners. |
| onInit |
Type : EventEmitter
|
|
Emits when the map and Leaflet library are initialized. |
| onMap |
Type : BehaviorSubject
|
|
Emits the Leaflet map instance when available. |
| onMove |
Type : Observable<L.LeafletEvent>
|
|
Emits observable of map drag/move events. |
| onMoveEnd |
Type : Observable<L.LeafletEvent>
|
|
Emits observable of map move end events. |
| onRealtimeUpdate |
Type : EventEmitter
|
|
Emits when a tracked asset is updated in real-time. |
| onZoomEnd |
Type : Observable<L.LeafletEvent>
|
|
Emits observable of map zoom end events. |
| onZoomStart |
Type : Observable<L.LeafletEvent>
|
|
Emits observable of map zoom start events. |
| cancelReload |
cancelReload()
|
|
Cancels an ongoing reload operation.
Returns :
void
|
| changeConfig | ||||||||
changeConfig(change: SimpleChange)
|
||||||||
|
Handles changes to the map configuration, including follow and refresh interval. Cancels reload on follow, triggers reload on refresh interval change, and delegates to base config change logic.
Parameters :
Returns :
void
|
| listenToClusterAndIntervalChanges |
listenToClusterAndIntervalChanges()
|
|
Subscribes to cluster and interval changes, updating clusters as needed. Handles auto-refresh and global refresh loading.
Returns :
void
|
| listenToClusterMapChanges |
listenToClusterMapChanges()
|
|
Subscribes to map change events for cluster updates.
Returns :
void
|
| refreshMarkers |
refreshMarkers()
|
|
Refreshes markers or clusters, depending on whether a single asset or clusters are shown.
Returns :
void
|
| reload |
reload()
|
|
Triggers a reload of cluster data.
Returns :
void
|
| Async reset |
reset()
|
|
Resets the map and clusters, re-initializing the component.
Returns :
any
|
| Protected addLayers | ||||||
addLayers(layers: MapTileLayer[])
|
||||||
|
Parameters :
Returns :
void
|
| addMarkerToMap | ||||||||
addMarkerToMap(marker: C8yMarker | L.Marker)
|
||||||||
|
Adds a marker to the map and internal marker list.
Parameters :
Returns :
void
|
| center |
center()
|
|
Centers the map on the configured center coordinates.
Returns :
void
|
| clearMarkers | ||||||||
clearMarkers(fragment?: C8yMarkerAttributes)
|
||||||||
|
Removes all markers from the map, optionally filtered by marker attribute.
Parameters :
Returns :
void
|
| findMarker | ||||||||
findMarker(moOrId: string | IEvent | PositionManagedObject)
|
||||||||
|
Finds a marker on the map by asset, event, or ID.
Parameters :
Returns :
any
The found marker or undefined. |
| getAssetIcon | ||||||||
getAssetIcon(asset: PositionManagedObject)
|
||||||||
|
Returns a Leaflet icon for the given asset, using config or asset icon and color.
Parameters :
Returns :
any
The Leaflet icon. |
| getAssetMarker | ||||||||
getAssetMarker(asset: PositionManagedObject)
|
||||||||
|
Creates and returns a marker for the given asset, including icon and popup.
Parameters :
Returns :
any
The created marker. |
| getTrackingIcon |
getTrackingIcon()
|
|
Returns a Leaflet icon for a tracking event.
Returns :
any
The Leaflet icon. |
| getTrackingMarker | ||||||||
getTrackingMarker(event: IEvent)
|
||||||||
|
Creates and returns a marker for a tracking event, including icon and popup.
Parameters :
Returns :
any
The created marker. |
| Protected handleMobile |
handleMobile()
|
|
Returns :
void
|
| Protected hasChanged | |||||||||
hasChanged(change: SimpleChange, prop)
|
|||||||||
|
Parameters :
Returns :
boolean
|
| Protected initMap | |||||||||
initMap(layers: MapTileLayer[], defaultConfig: MapConfig)
|
|||||||||
|
Parameters :
Returns :
void
|
| Protected initOutputs |
initOutputs()
|
|
Returns :
void
|
| moveToPositionOfMo | ||||||||
moveToPositionOfMo(positions: PositionManagedObject | PositionManagedObject[])
|
||||||||
|
Moves the map view to the position of the given asset(s) if follow is enabled.
Parameters :
Returns :
void
|
| Protected Async ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
any
|
| Protected ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
| Protected ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| refresh |
refresh()
|
|
Refreshes the map and markers if the map is initialized.
Returns :
void
|
| removeMarker | ||||||||
removeMarker(marker: C8yMarker | L.Marker)
|
||||||||
|
Removes a marker from the map and internal marker list.
Parameters :
Returns :
void
|
| startRealtime |
startRealtime()
|
|
Starts real-time updates for a single asset on the map. Updates marker position and icon as new data arrives.
Returns :
void
|
| stopRealtime |
stopRealtime()
|
|
Stops real-time updates for the asset.
Returns :
void
|
| Protected toggleControls |
toggleControls()
|
|
Returns :
void
|
| Protected unsubscribeAllListeners |
unsubscribeAllListeners()
|
|
Returns :
void
|
| alerts |
Type : DynamicComponentAlertAggregator
|
|
Aggregator for dynamic component alerts. |
| isLoading$ |
Default value : new BehaviorSubject(false)
|
|
Emits true while the map is loading or refreshing clusters. |
| mapElement |
Type : ElementRef
|
Decorators :
@ViewChild('map')
|
|
Reference to the map element in the template. |
| Protected destroy$ |
Default value : new Subject<void>()
|
| isInit |
Default value : false
|
|
Indicates if the map was already initialized. |
| leaflet |
|
The leaflet library reference used for map operations. |
| map |
Type : L.Map
|
|
The leaflet map object instance. |
| markers |
Type : Array<C8yMarker | L.Marker>
|
Default value : []
|
|
The markers currently placed on the map. |
| popup |
Type : MapPopupDirective
|
Decorators :
@ContentChild(MapPopupDirective)
|
|
Reference to the custom popup directive for map markers. |
| Protected realtimeSubscription |
Type : Subscription
|
| Protected unsubscribeTrigger$ |
Default value : new Subject<void>()
|
<div class="c8y-map">
<div #map></div>
</div>
<ng-content></ng-content>