Concurrent Incidents

client/app/app.scss

@@ -2030,6 +2030,7 @@ input:checked + .slider:before {
 @import '../components/move-up-map/move-up-map.scss';
 @import '../app/notify/notification.scss';
 @import '../components/incident/incident';
+@import '../components/incident/incident-map';
 @import '../components/oauth-buttons/oauth-buttons';
 @import '../components/percent-change/percent-change';
 @import '../components/bar-gauge/bar-gauge';

client/app/effective-response-force/effective-response-force.routes.js

@@ -1,3 +1,5 @@
+import { initTippy } from '../../util/imports';
+
 'use strict';
 
 export default function routes($stateProvider) {
@@ -29,7 +31,7 @@ export default function routes($stateProvider) {
         async modules() {
           const modules = {};
           modules._ = await import(/* webpackChunkName: "lodash" */ 'lodash');
-          modules.tippy = (await import(/* webpackChunkName: "tippy" */ 'tippy.js')).default;
+          modules.tippy = await initTippy()
           modules.PlotlyBasic = await import(/* webpackChunkName: "plotly-basic" */ 'plotly.js/dist/plotly-basic.js');
           return modules;
         },

client/app/incident/incident-analysis/incident-analysis.html

@@ -173,7 +173,7 @@ <h6 class="tx-13 tx-medium mg-b-20">{{ analysis.description }}</h6>
         <!-- Map -->
         <div class="location-map card">
           <div class="card-body">
-            <incident-map incidents="[vm.incident]"></incident-map>
+            <incident-map incidents="[vm.incident]" concurrent="vm.concurrentIncidents"></incident-map>
             <div class="location-summary">
               <dl>
                 <dt>Overview</dt>

client/app/incident/incident-analysis/incident-analysis.scss

@@ -345,23 +345,6 @@
             }
           }
 
-          incident-map {
-            flex: 0 0 66.6%;
-
-            .incident-map {
-              border-right: 1px solid $color-geyser;
-              height: 100%;
-              max-height: 500px;
-              width: 100%;
-
-              @media (max-width: 768px) {
-                border-bottom: 1px solid $color-geyser;
-                border-right: 0;
-                height: 300px;
-              }
-            }
-          }
-
           .location-summary {
             flex: 0 0 33.3%;
             padding: 1rem;

client/app/incident/incident.routes.js

@@ -1,3 +1,5 @@
+import { initTippy } from '../../util/imports';
+
 'use strict';
 
 export default function routes($stateProvider) {
@@ -55,7 +57,7 @@ export default function routes($stateProvider) {
         async modules() {
           const modules = {};
           modules._ = await import(/* webpackChunkName: "lodash" */ 'lodash');
-          modules.tippy = (await import(/* webpackChunkName: "tippy" */ 'tippy.js')).default;
+          modules.tippy = await initTippy();
           modules.PlotlyBasic = await import(/* webpackChunkName: "plotly-basic" */ 'plotly.js/dist/plotly-basic.js');
           return modules;
         },

client/app/moveup/moveup-home/moveup-home.controller.js

@@ -1,3 +1,5 @@
+import { initTippy } from '../../../util/imports';
+
 /* eslint  class-methods-use-this: 0 */
 
 'use strict';
@@ -82,7 +84,7 @@ export default class MoveupHomeController {
   }
 
   async loadModules() {
-    tippy = (await import(/* webpackChunkName: "tippy" */ 'tippy.js')).default;
+    tippy = await initTippy();
   }
 
   setUnits() {

client/components/incident/incident-map.component.js

@@ -3,15 +3,36 @@
 import MapBoxGL from 'mapbox-gl';
 import _ from 'lodash';
 import geojsonExtent from '@mapbox/geojson-extent';
+import { initTippy } from '../../util/imports';
 
 export default class IncidentMapComponent {
   constructor(mapboxConfig) {
     'ngInject';
 
+    this.map = null;
+    this.showConcurrent = false;
     this.mapboxConfig = mapboxConfig;
   }
 
-  $onInit() {
+  async loadModules() {
+    const tippy = await initTippy();
+    tippy('.tippy', {
+      allowTitleHTML: true,
+      interactive: true,
+      delay: 150,
+      arrow: true,
+      arrowType: 'sharp',
+      theme: 'statengine',
+      duration: 250,
+      animation: 'shift-away',
+      maxWidth: '350px',
+      inertia: false,
+      touch: true,
+    });
+  }
+
+  async $onInit() {
+    await this.loadModules();
     this.initialized = true;
 
     const features = [];
@@ -36,19 +57,34 @@ export default class IncidentMapComponent {
       features
     };
 
+    const concurrent = this.concurrent.map(incident => {
+      const coordinates = [incident.address.longitude, incident.address.latitude];
+      return {
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates
+        },
+        properties: {
+          title: incident.description.incident_number,
+          icon: 'marker'
+        }
+      };
+    });
+
     const bounds = geojsonExtent(geojson);
     const center = features.length > 0 ? features[0].geometry.coordinates : undefined;
 
-    const map = new MapBoxGL.Map({
+    this.map = new MapBoxGL.Map({
       container: 'incident-map',
       style: 'mapbox://styles/mapbox/light-v9',
       zoom: 12,
       pitch: 60,
       center
     });
 
-    map.on('load', () => {
-      map.addLayer({
+    this.map.on('load', () => {
+      this.map.addLayer({
         id: 'incidents',
         type: 'symbol',
         source: {
@@ -60,7 +96,31 @@ export default class IncidentMapComponent {
           'text-field': '{title}',
           'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
           'text-offset': [0, 0.6],
-          'text-anchor': 'top'
+          'text-anchor': 'top',
+          'icon-allow-overlap': true,
+          'text-optional': true
+        }
+      });
+
+      this.map.addLayer({
+        id: 'concurrent',
+        type: 'symbol',
+        source: {
+          type: 'geojson',
+          data: {
+            type: 'FeatureCollection',
+            features: concurrent
+          }
+        },
+        layout: {
+          'icon-image': '{icon}-15',
+          'text-field': '{title}',
+          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
+          'text-offset': [0, 0.6],
+          'text-anchor': 'top',
+          'icon-allow-overlap': true,
+          'text-optional': true,
+          'visibility': (this.showConcurrent) ? 'visible' : 'none',
         }
       });
 
@@ -71,7 +131,19 @@ export default class IncidentMapComponent {
       bounds[2] += padding;
       bounds[3] += padding;
 
-      map.fitBounds(bounds);
+      this.map.fitBounds(bounds);
     });
   }
+
+  toggleConcurrent() {
+    if (this.map.loaded()) {
+      if (this.showConcurrent) {
+        this.showConcurrent = false;
+        this.map.setLayoutProperty('concurrent', 'visibility', 'none');
+      } else {
+        this.showConcurrent = true;
+        this.map.setLayoutProperty('concurrent', 'visibility', 'visible');
+      }
+    }
+  }
 }

client/components/incident/incident-map.html

@@ -1 +1,9 @@
-<div id="incident-map" class="incident-map"></div>
+<div class="incident-map-container">
+  <div id="incident-map" class="incident-map"></div>
+  <div class="incident-map-concurrent-layer tippy" data-tippy-html='#tippy' ng-class="{ 'active': vm.showConcurrent }"
+    ng-if="vm.concurrent && vm.concurrent.length > 0" ng-click="vm.toggleConcurrent()">
+  </div>
+  <div id="tippy" style="display: none;">
+    Toggle Concurrent Incidents
+  </div>
+</div>

client/components/incident/incident-map.scss

@@ -0,0 +1,42 @@
+incident-map {
+  flex: 0 0 66.6%;
+
+  .incident-map-container {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  .incident-map-concurrent-layer {
+    border-radius: 3px;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 30px;
+    height: 30px;
+    border: 1px solid #ccc;
+    background: white url("../assets/images/icon-layers.svg") no-repeat center;
+
+    &.active {
+      border: 2px solid #00a7dc;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .incident-map {
+    border-right: 1px solid $color-geyser;
+    height: 100%;
+    max-height: 500px;
+    width: 100%;
+
+    @media (max-width: 768px) {
+      border-bottom: 1px solid $color-geyser;
+      border-right: 0;
+      height: 300px;
+    }
+  }
+}

client/components/incident/index.js

@@ -16,6 +16,7 @@ export default angular.module('incident', [])
     controllerAs: 'vm',
     bindings: {
       incidents: '<',
+      concurrent: '<'
     },
   })
   .component('incidentTimeline', {

client/util/imports.js

@@ -0,0 +1,3 @@
+export const initTippy = async () => {
+  return (await import(/* webpackChunkName: "tippy" */ 'tippy.js')).default;
+}

server/api/incident/incident.controller.js

@@ -212,6 +212,8 @@ export async function loadConcurrent(req, res, next) {
         'description.units',
         'description.category',
         'address.battalion',
+        'address.latitude',
+        'address.longitude',
         'address.response_zone',
         'durations.total_event.seconds'],
       sort: [{