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

Cumulocity IoT applications

import { Component } from '@angular/core';
import { ClusterMapConfig, defaultMapConfig } from '@c8y/ngx-components/map';

@Component({
  selector: 'c8y-cluster-map-examples',
  templateUrl: './cluster-map-examples.component.html'
})
export class ClusterMapExamplesComponent {
  config: ClusterMapConfig = { center: defaultMapConfig.center, zoomLevel: 4 };
  followConfig: ClusterMapConfig = { center: defaultMapConfig.center, zoomLevel: 4 };

  rootNode: unknown;
  oldRootNode: unknown;

  showClusterColor = false;

  setRandomZoomLevel() {
    this.config = { ...this.config, zoomLevel: Math.floor(1 + Math.random() * 11) };
  }

  setCenter() {
    this.config = { ...this.config, center: defaultMapConfig.center };
  }

  changeIcon() {
    this.config = { ...this.config, icon: this.config.icon ? undefined : 'map' };
  }

  changeColor() {
    this.config = { ...this.config, color: this.config.color ? undefined : '#0f0' };
  }

  toggleAutorefresh() {
    this.config = {
      ...this.config,
      refreshInterval: this.config.refreshInterval ? undefined : 5000
    };
  }

  startFollow(device) {
    this.oldRootNode = this.rootNode;
    this.rootNode = device;
    this.followConfig = {
      ...this.followConfig,
      follow: true,
      disablePan: true,
      disableZoom: true,
      realtime: true,
      zoomLevel: 14
    };
  }

  stopFollow() {
    this.rootNode = this.oldRootNode;
    this.resetConfig();
  }

  resetConfig() {
    this.followConfig = {
      ...this.followConfig,
      follow: false,
      disablePan: false,
      disableZoom: false,
      realtime: false
    };
  }
}