Selecting multiple areas reflects correctly on the map sometimes

app/components/main-map.js

@@ -9,10 +9,14 @@ import { alias } from '@ember/object/computed';
 import bblDemux from '../utils/bbl-demux';
 import drawnFeatureLayers from '../layers/drawn-feature';
 import selectedLayers from '../layers/selected-lot';
+import comparisonSelectedLayers from '../layers/comparison-selected-lot';
 
 const selectedFillLayer = selectedLayers.fill;
 const selectedLineLayer = selectedLayers.line;
 
+const comparisonSelectedFillLayer = comparisonSelectedLayers.fill;
+const comparisonSelectedLineLayer = comparisonSelectedLayers.line;
+
 // Custom Control
 const MeasurementText = function () {};
 
@@ -114,6 +118,15 @@ export default class MainMap extends Component {
     };
   }
 
+  @computed('mainMap.comparisonSelected')
+  get comparisonSelectedLotSource() {
+    const comparisonSelected = this.get('mainMap.comparisonSelected');
+    return {
+      type: 'geojson',
+      data: comparisonSelected.get('geometry'),
+    };
+  }
+
   @computed('mainMap.drawMode')
   get interactivity() {
     const drawMode = this.get('mainMap.drawMode');
@@ -124,6 +137,10 @@ export default class MainMap extends Component {
 
   selectedLineLayer = selectedLineLayer;
 
+  comparisonSelectedFillLayer = comparisonSelectedFillLayer;
+
+  comparisonSelectedLineLayer = comparisonSelectedLineLayer;
+
   @action
   handleMapLoad(map) {
     window.map = map;
@@ -168,6 +185,10 @@ export default class MainMap extends Component {
     map.on('zoom', function () {
       mainMap.set('zoom', map.getZoom());
     });
+
+    if (this.router.currentRoute.name === 'map-feature.lot-comparison') {
+      mainMap.set('comparisonSelected', mainMap.selected);
+    }
   }
 
   @action
@@ -211,7 +232,22 @@ export default class MainMap extends Component {
         if (bbl && !ceqr_num) {
           // eslint-disable-line
           const { boro, block, lot } = bblDemux(bbl);
-          this.router.transitionTo('map-feature.lot', boro, block, lot);
+          if (this.router.currentRoute.name === 'map-feature.lot-comparison') {
+            if (!this.mainMap.comparisonSelected) {
+              this.mainMap.set('comparisonSelected', this.mainMap.selected);
+            }
+            this.router.transitionTo(
+              'map-feature.lot-comparison',
+              this.router.currentRoute.params.boro,
+              this.router.currentRoute.params.block,
+              this.router.currentRoute.params.lot,
+              boro,
+              block,
+              lot
+            );
+          } else {
+            this.router.transitionTo('map-feature.lot', boro, block, lot);
+          }
         }
 
         if (ulurpno) {

app/layers/comparison-selected-lot.js

@@ -0,0 +1,32 @@
+const comparisonSelectedLayers = {
+  fill: {
+    id: 'comparison-selected-fill',
+    type: 'fill',
+    source: 'comparison-selected-lot',
+    paint: {
+      'fill-opacity': 0.6,
+      'fill-color': 'rgba(0, 20, 130, 1)',
+    },
+  },
+  line: {
+    id: 'comparison-selected-line',
+    type: 'line',
+    source: 'comparison-selected-lot',
+    layout: {
+      'line-cap': 'round',
+    },
+    paint: {
+      'line-opacity': 0.9,
+      'line-color': 'rgba(0, 10, 90, 1)',
+      'line-width': {
+        stops: [
+          [13, 1.5],
+          [15, 8],
+        ],
+      },
+      'line-dasharray': [2, 1.5],
+    },
+  },
+};
+
+export default comparisonSelectedLayers;

app/models/lot-comparison.js

@@ -1,7 +1,7 @@
 import { attr } from '@ember-data/model';
 import CartoGeojsonFeature from './carto-geojson-feature';
 
-export default class Lot extends CartoGeojsonFeature {
+export default class LotComparison extends CartoGeojsonFeature {
   @attr properties;
 
   get title() {

app/templates/components/main-map.hbs

@@ -63,6 +63,16 @@
       <source.layer @layer={{this.selectedLineLayer}} @before="place_other" />
     </MapboxGlSource>
   {{/if}}
+  {{#if this.mainMap.comparisonSelected}}
+    <MapboxGlSource
+      @map={{map.instance}}
+      @sourceId="comparison-selected-lot"
+      @options={{this.comparisonSelectedLotSource}} as |source|
+    >
+      <source.layer @layer={{this.comparisonSelectedFillLayer}} @before="place_other" />
+      <source.layer @layer={{this.comparisonSelectedLineLayer}} @before="place_other" />
+    </MapboxGlSource>
+  {{/if}}
 
   <MapMeasurementTools
     @map={{map.instance}}

app/utils/bbl-demux.js

@@ -22,7 +22,6 @@ export default function bblDemux(bbl = '') {
 }
 
 export function comparisonBblDemux(bbl = '') {
-  console.log('comparison bbl', bbl);
   if (typeof bbl === 'string' || typeof bbl === 'number') {
     const bblString = bbl.toString();
     const boro = bblString.substring(0, 1);