@c8y/apps/tutorial/maps/simple-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">Simple map</h4>
  </div>
  <div class="card-block">
    <p class="lead">Simple map displaying assets.</p>
    <button (click)="changeDevices()" class="btn btn-default">Toggle device amount</button>
    <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)="toggleRealtime()" class="btn btn-default">
      {{ config.realtime ? 'Disable realtime' : 'Enable realtime' }}
    </button>
    <button (click)="toggleFollow()" class="btn btn-default">
      {{ config.follow ? 'Unfollow' : 'Follow' }}
    </button>
    <div style="height: 500px">
      <c8y-map [assets]="exampleDevices" [config]="config"></c8y-map>
    </div>
    <div>
      <code>
        <pre>{{ config | json }}  </pre>
      </code>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header separator">
    <h4 class="card-title">Simple map with custom marker popup</h4>
  </div>
  <div class="card-block">
    <p class="lead">A map with a custom marker popup.</p>
    <div style="height: 500px">
      <c8y-map [assets]="exampleDevices" [config]="config">
        <div *c8yMapPopup="let context">
          Hello World from:
          <br />
          name: {{ context.name }}
          <br />
          id: {{ context.id }}
        </div>
      </c8y-map>
    </div>
  </div>
</div>