Floor Map

by kelvinau

HTML

<script src="//cdn.bootcss.com/echarts/3.2.2/echarts.min.js"></script>
<script src="https://cdn.rawgit.com/pa7/heatmap.js/master/build/heatmap.min.js"></script>
<script src="https://cdn.rawgit.com/pa7/heatmap.js/master/plugins/angular-heatmap/angular-heatmap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jqlite.min.js"></script>
<body ng-app="heatmapApp">
  <div class="main-container" ng-controller="HeatmapCtrl">
    <div class="background" ng-click="heatmapClick()"></div>
    <div class="layer-stack__wrap">
      <div class="layer-stack__layer layer{{$index}}" ng-class="{'clicked': $index === clickedElementId}" ng-repeat="floorData in heatmapData">
        <heatmap id="heatmap-{{$index}}" data="floorData" config="heatmapConfig" ng-click="heatmapClick($index, $event)"></heatmap>
        <div ng-attr-id="main-{{$index}}" class="echarts-wrap"></div>
      </div>
    </div>
  </div>
</body>

SCSS

body {
  background: #f3f5f6;
}

.main-container {
  height: 1000px;
}

.background {
    width: 100%;
    height: 100%;
 }
 
.layer-stack__wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  //padding-top: 18%;
  //padding-left: 30
  .layer-stack__layer {
    position: absolute;
    /*   box-shadow: 0px 0px 10px 12px rgba(0, 0, 0, 0.15); */
    transition: all 0.3s ease-out;
    background-size: 100% 100%;
    cursor: pointer;
    transform-origin: 0 0;
    // opacity: 0.9;
    &.layer0 {
      background-image: url(http://library.marist.edu/pix/LibMap3.jpg);
      transform: rotateX(45deg) rotateZ(45deg) translateZ(0) scale(0.6);
    }
    &.layer1 {
      transform: rotateX(45deg) rotateZ(45deg) translateZ(150px) scale(0.6);
      background-image: url(https://i.pinimg.com/736x/05/12/26/05122622d6de24aaf579987ffda3559f--office-floor-plan-dental.jpg);
    }
    &.layer2 {
      transform: rotateX(45deg) rotateZ(45deg) translateZ(300px) scale(0.6);
      background-image: url(https://i.pinimg.com/originals/86/71/9f/86719f83b01c5e253426be7078658c1a.jpg)
    }
    &:hover {
      box-shadow: 0px 0px 7px 7px lightskyblue;
    }
    &.clicked {
      //transform: translateY(-70px) rotateX(0deg) rotateZ(0deg) translateZ(100px);
      transform: translateX(-50%);
      z-index: 9;
      opacity: 1;
      box-shadow: 0px 0px 7px 7px lightskyblue;
      .echarts-wrap {
        pointer-events: auto;
      }
    }
    heatmap {
      width: 100%;
      height: 100%;
      position: absolute !important;
      top: 0;
    }
    .echarts-wrap {
      width: 800px;
      height: 400px;
      pointer-events: none;
    }
  }
}

JavaScript

var app = angular.module('heatmapApp', ['heatmap']);
  app.controller('HeatmapCtrl', function($scope, $heatmap, $timeout) {
    var max = 100;
    var min = 0;
    var echartsWidth = 800; // this shouldn't be hardcoded
    var echartsHeight = 400; // this shouldn't be hardcoded

    var heatmapConfig = {
      blur: 0.8,
      radius: 180,
      //opacity: 0.8,
      minOpacity: 0,
      maxOpacity: 0.8,

      gradient: {
        /*
          '0': 'rgba(255,0,0,0.1)',
          '1': 'red',
          */
        '0': 'rgba(70, 130, 180, 0.1)',
        '1': 'steelblue',
        /*
        '0': 'rgba(255, 255, 224, 0.1)',
        '1': 'yellow',
        */
      }
    };

    var heatmapData = [{
      data: [{
        x: echartsWidth * 50 / 600,
        y: echartsHeight * 50 / 300,
      }, {
        x: echartsWidth * 550 / 600,
        y: echartsHeight * 250 / 300,
      }, {
        x: echartsWidth * 450 / 600,
        y: echartsHeight * 100 / 300,
      }, {
        x: echartsWidth * 300 / 600,
        y: echartsHeight * 150 / 300,
      }, ],
    }, {
      data: [{
        x: echartsWidth * 300 / 600,
        y: echartsHeight * 150 / 300,
      }, {
        x: echartsWidth * 150 / 600,
        y: echartsHeight * 30 / 300,
      }, {
        x: echartsWidth * 50 / 600,
        y: echartsHeight * 250 / 300,
      }, {
        x: echartsWidth * 500 / 600,
        y: echartsHeight * 40 / 300,
      }, ],
    }, {
      data: [{
        x: echartsWidth * 150 / 600,
        y: echartsHeight * 100 / 300,
      }, {
        x: echartsWidth * 150 / 600,
        y: echartsHeight * 200 / 300,
      }, {
        x: echartsWidth * 450 / 600,
        y: echartsHeight * 100 / 300,
      }, {
        x: echartsWidth * 450 / 600,
        y: echartsHeight * 200 / 300,
      }, ],
    }, ];

    var nodeData = [];
    var deviceNum = 0;
    angular.forEach(heatmapData, function(floorData, i) {
      floorData.min = min;
      floorData.max = max;
      nodeData[i] = [];
     ...