File

map/map-status.component.ts

Description

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.

Metadata

Index

Methods
Inputs
Outputs

Inputs

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.

Outputs

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.

Methods

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 :
Name Type Optional Description
$event MouseEvent No

Mouse event to prevent default and stop propagation.

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"
    >
      <button
        class="c8y-realtime"
        title="{{ 'Realtime' | translate }}"
        type="button"
        *ngIf="buttonsConfig.realtime.show"
        (click)="toggleRealtime()"
        [disabled]="buttonsConfig.realtime.disabled"
      >
        <span
          class="c8y-pulse"
          [ngClass]="{
            active: clusterMap?.config.realtime,
            inactive: !clusterMap?.config.realtime
          }"
        ></span>
      </button>

      <label
        class="toggle-countdown vertical"
        [attr.aria-label]="
          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)
        "
        [tooltip]="
          refreshPaused ? ('Enable auto refresh' | translate) : ('Disable auto refresh' | translate)
        "
        placement="left"
        *ngIf="
          !config.widgetInstanceGlobalAutoRefreshContext &&
          clusterMap?.config.refreshInterval &&
          !clusterMap?.config.follow
        "
        [adaptivePosition]="false"
        [container]="'body'"
        [delay]="1000"
      >
        <input
          type="checkbox"
          (click)="toggleAutoRefresh($event)"
        />
        <c8y-countdown-interval
          [hidden]="refreshPaused"
          [countdownInterval]="clusterMap?.config.refreshInterval"
        ></c8y-countdown-interval>
        <i
          c8yIcon="pause"
          *ngIf="refreshPaused"
        ></i>
      </label>

      <button
        title="{{ 'Cancel reload' | translate }}"
        type="button"
        *ngIf="(clusterMap?.isLoading$ | async) && !config.widgetInstanceGlobalAutoRefreshContext"
        (click)="cancelReload()"
      >
        <i
          class="icon-spin"
          c8yIcon="refresh"
        ></i>
      </button>
      <button
        [title]="'Reload' | translate"
        type="button"
        *ngIf="
          !clusterMap?.config.realtime &&
          !clusterMap?.assets &&
          !(clusterMap?.isLoading$ | async) &&
          !config.widgetInstanceGlobalAutoRefreshContext
        "
        (click)="reload()"
      >
        <i c8yIcon="refresh"></i>
      </button>
      <button
        title="{{ 'Center map' | translate }}"
        type="button"
        (click)="center()"
        [disabled]="buttonsConfig.center.disabled || clusterMap?.config.follow"
        *ngIf="buttonsConfig.center.show"
      >
        <i c8yIcon="target1"></i>
      </button>
      <button
      title="{{ 'Fit to assets bounds' | translate }}"
      type="button"
      (click)="fitToBounds()"
      [disabled]="buttonsConfig.fitToBounds.disabled || clusterMap?.config.follow"
      *ngIf="buttonsConfig.fitToBounds.show"
    >
      <i c8yIcon="waypoint-map"></i>
    </button>
      <button
        title="{{ 'Unfollow' | translate }}"
        type="button"
        *ngIf="clusterMap?.config.follow"
        (click)="unfollow()"
      >
        <i c8yIcon="marker-off"></i>
      </button>

      <button
        title="{{ 'Follow' | translate }}"
        type="button"
        *ngIf="initConfig.follow && !clusterMap?.config.follow"
        (click)="follow()"
      >
        <i c8yIcon="marker"></i>
      </button>
    </div>
  </div>
</div>

results matching ""

    No results matching ""