map/map-status.component.ts
Component to display controls and status information for a map rendered on an IoT Dashboard. Provides UI for centering, fitting bounds, toggling real-time updates, auto-refresh, and following assets.
| selector | c8y-map-status |
| imports |
NgClass
TooltipDirective
CountdownIntervalComponent
IconDirective
AsyncPipe
C8yTranslatePipe
|
| templateUrl | ./map-status.component.html |
Methods |
Inputs |
Outputs |
| assets |
Type : PositionManagedObject[]
|
|
List of managed objects with position information to be displayed on the map. |
| buttonsConfig |
Type : Partial<MapStatusButtonsConfig>
|
Default value : {}
|
|
Configuration for which map status buttons are shown/enabled. By default the "center" button is shown and realtime is disabled. See MapStatusButtonsConfig for available options. |
| clusterMap |
Type : ClusterMapComponent
|
|
Reference to the ClusterMapComponent instance rendered in the view. |
| config |
Type : ClusterMapConfig
|
|
Map configuration object, including center, refresh interval, and other map options. |
| configChange |
Type : EventEmitter
|
|
Emits when the map configuration changes (e.g., toggling real-time, follow, etc.). |
| fitAssetsToBounds |
Type : EventEmitter
|
|
Emits when the user requests to fit all assets within the map bounds. |
| onUnfollow |
Type : EventEmitter
|
|
Emits when the user unfollows an asset on the map. |
| cancelReload |
cancelReload()
|
|
Cancels the map reload operation.
Returns :
void
|
| center |
center()
|
|
Centers the map on the configured center coordinates.
Returns :
void
|
| fitToBounds |
fitToBounds()
|
|
Emits an event to fit all assets within the map bounds and disables the button until the next change.
Returns :
void
|
| follow |
follow()
|
|
Enables following an asset on the map and emits the change.
Returns :
void
|
| reload |
reload()
|
|
Reloads the map data.
Returns :
void
|
| toggleAutoRefresh | ||||||||
toggleAutoRefresh($event: MouseEvent)
|
||||||||
|
Toggles the auto-refresh state for the map, pausing or resuming the countdown.
Parameters :
Returns :
void
|
| toggleRealtime |
toggleRealtime()
|
|
Toggles real-time updates for the map.
Returns :
void
|
| unfollow |
unfollow()
|
|
Disables following an asset on the map and emits the change.
Returns :
void
|
<div class="c8y-map-status">
<div class="leaflet-touch">
<div
class="leaflet-bar"
role="group"
>
@if (buttonsConfig.realtime.show) {
<button
class="c8y-realtime"
title="{{ 'Realtime' | translate }}"
type="button"
(click)="toggleRealtime()"
[disabled]="buttonsConfig.realtime.disabled"
>
<span
class="c8y-pulse"
[ngClass]="{
active: clusterMap?.config.realtime,
inactive: !clusterMap?.config.realtime
}"
></span>
</button>
}
@if (
buttonsConfig.autoRefresh.show &&
!config.widgetInstanceGlobalAutoRefreshContext &&
clusterMap?.config.refreshInterval &&
!clusterMap?.config.follow
) {
<label
class="toggle-countdown vertical"
[attr.aria-label]="
(refreshPaused ? autoRefreshPausedLabel : autoRefreshEnabledLabel) | translate
"
[tooltip]="(refreshPaused ? autoRefreshPausedLabel : autoRefreshEnabledLabel) | translate"
placement="left"
[adaptivePosition]="false"
[container]="'body'"
[delay]="1000"
>
<input
type="checkbox"
(click)="toggleAutoRefresh($event)"
/>
<c8y-countdown-interval
[hidden]="refreshPaused"
[countdownInterval]="clusterMap?.config.refreshInterval"
></c8y-countdown-interval>
@if (refreshPaused) {
<i c8yIcon="pause"></i>
}
</label>
}
@if (
buttonsConfig.refresh.show &&
(clusterMap?.isLoading$ | async) &&
!config.widgetInstanceGlobalAutoRefreshContext
) {
<button
title="{{ 'Cancel reload' | translate }}"
type="button"
(click)="cancelReload()"
>
<i
class="icon-spin"
c8yIcon="refresh"
></i>
</button>
}
@if (
buttonsConfig.refresh.show &&
!clusterMap?.config.realtime &&
!clusterMap?.assets &&
!(clusterMap?.isLoading$ | async) &&
!config.widgetInstanceGlobalAutoRefreshContext
) {
<button
[title]="'Reload' | translate"
type="button"
(click)="reload()"
>
<i c8yIcon="refresh"></i>
</button>
}
<ng-content></ng-content>
@if (buttonsConfig.center.show) {
<button
title="{{ 'Center map' | translate }}"
type="button"
(click)="center()"
[disabled]="buttonsConfig.center.disabled || clusterMap?.config.follow"
>
<i c8yIcon="target1"></i>
</button>
}
@if (buttonsConfig.fitToBounds.show) {
<button
title="{{ 'Fit to assets bounds' | translate }}"
type="button"
(click)="fitToBounds()"
[disabled]="buttonsConfig.fitToBounds.disabled || clusterMap?.config.follow"
>
<i c8yIcon="waypoint-map"></i>
</button>
}
@if (clusterMap?.config.follow) {
<button
title="{{ 'Unfollow' | translate }}"
type="button"
(click)="unfollow()"
>
<i c8yIcon="marker-off"></i>
</button>
}
@if (initConfig.follow && !clusterMap?.config.follow) {
<button
title="{{ 'Follow' | translate }}"
type="button"
(click)="follow()"
>
<i c8yIcon="marker"></i>
</button>
}
</div>
</div>
</div>