@c8y/apps/tutorial/maps/cluster-map-examples.component.html

Cumulocity IoT applications

<c8y-title>Map examples</c8y-title>
<div class="card">
  <div class="card-header separator">
    <h4 class="card-title">Cluster map</h4>
  </div>
  <div class="card-block">
    <p class="lead">
      A cluster map should be used to display many assets. It reloads the assets on events and only
      the assets in the current view. If to many assets are in the current view, they are clustered
      and only the paging request is fired. A cluster map needs a
      <code>center</code>
      option to be set. If none is set, it defaults to Düsseldorf.
    </p>
    <label>It can be used to display:</label>
    <ul>
      <li>All assets of a tenant (this example)</li>
      <li>
        All direct children of a root node
        <code>rootNode=""</code>
      </li>
    </ul>
    <p>
      Additional the cluster map has a status information at the top which shows the current status.
    </p>

    <button (click)="setRandomZoomLevel()" class="btn btn-default">Set random zoom level</button>
    <button (click)="setCenter()" class="btn btn-default">Set map to Düsseldorf</button>
    <button (click)="changeIcon()" class="btn btn-default">Change icon</button>
    <button (click)="changeColor()" class="btn btn-default">Change color</button>
    <button (click)="toggleAutorefresh()" class="btn btn-default">Toggle auto refresh every 5s</button>
    <button (click)="showClusterColor = !showClusterColor" class="btn btn-default">
      Show cluster color
    </button>
    <div style="height: 500px; position: relative">
      <c8y-map-status [clusterMap]="map" [(config)]="config"></c8y-map-status>
      <c8y-cluster-map #map [config]="config" [showClusterColor]="showClusterColor">
        <div *c8yMapPopup="let context">
          Hello World from:
          <br />
          {{ context.name }}
        </div>
      </c8y-cluster-map>
    </div>
    <div>
      <code>
        <pre>{{ config | json }}  </pre>
      </code>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header separator">
    <h4 class="card-title">Cluster map with root node selection</h4>
  </div>
  <div class="card-block">
    <p class="lead">
      You can select a different root node. If the root-node is a positioned device itself, the
      clustered map only renders this and realtime can be enabled. You can try this by clicking on a
      device and select follow.
    </p>
    <div class="d-flex a-i-stretch">
      <div class="col-xs-2" style="height: 500px">
        <c8y-asset-selector
          [(ngModel)]="rootNode"
          [config]="{
            groupsSelectable: true,
            groupsOnly: false
          }"
          (change)="resetConfig()"
        ></c8y-asset-selector>
      </div>
      <div class="col-xs-5 flex-grow">
        <div style="height: 500px">
          <c8y-map-status
            [clusterMap]="map2"
            [(config)]="followConfig"
            (onUnfollow)="stopFollow()"
          ></c8y-map-status>
          <c8y-cluster-map
            #map2
            [rootNode]="rootNode"
            [config]="followConfig"
            [showClusterColor]="showClusterColor"
          >
            <div *c8yMapPopup="let context">
              Hello World from:
              <br />
              {{ context.name }}
              <button class="btn btn-primary btn-small" (click)="startFollow(context)">
                Follow
              </button>
            </div>
          </c8y-cluster-map>
        </div>
      </div>
      <div class="col-xs-2">
        RootNode:
        <code>
          <pre>{{ rootNode | json }}  </pre>
        </code>
        <br />
        <br />
        Config:
        <code>
          <pre>{{ followConfig | json }}  </pre>
        </code>
      </div>
    </div>
  </div>
</div>