Merge pull request #1165 from jboolean/location-picker-dots

Location map layer improvements

Author: jboolean

frontend/src/screens/App/screens/Corrections/components/LocationPickerModal.tsx

@@ -8,6 +8,10 @@ import useCorrectionsStore, {
 
 import FourtiesModal from 'shared/components/Modal';
 
+import {
+  installLayers,
+  setOverlay,
+} from '../../MapPane/components/MainMap/overlays';
 import stylesheet from './LocationPickerModal.less';
 
 const MAPBOX_STYLE = __DEV__
@@ -25,19 +29,22 @@ export default function LocationPickerModal(): JSX.Element {
     correctedLng,
     correctedLat,
     setCorrectedLngLat,
+    photo,
   } = useCorrectionsStore(
     ({
       isMapOpen,
       closeMap,
       correctedLng,
       correctedLat,
       setCorrectedLngLat,
+      photo,
     }) => ({
       isMapOpen,
       closeMap,
       correctedLng,
       correctedLat,
       setCorrectedLngLat,
+      photo,
     })
   );
   const { previousLng, previousLat } = useCorrectionsStoreComputeds();
@@ -60,11 +67,19 @@ export default function LocationPickerModal(): JSX.Element {
     });
 
     map.current.on('style.load', () => {
-      map.current.removeLayer('photos-1940s');
+      // map.current.removeLayer('photos-1940s');
+      map.current.setFilter('photos-1940s', [
+        '!=',
+        ['get', 'photoIdentifier'],
+        photo.identifier || null,
+      ]);
       map.current.removeLayer('photos-1940s-wide-zoom');
-      map.current.setLayoutProperty('lot-label', 'visibility', 'visible');
 
       map.current.addControl(new mapboxgl.NavigationControl(), 'top-right');
+      installLayers(map.current, 'photos-1940s', {
+        fadeOverlays: false,
+      });
+      setOverlay(map.current, ['default-map', 'bbl-label']);
     });
 
     map.current.on('moveend', () => {

frontend/src/screens/App/screens/MapPane/components/MainMap/overlays.ts

@@ -2,6 +2,8 @@
 
 import { bboxPolygon, booleanIntersects } from '@turf/turf';
 import { Feature } from 'geojson';
+import compact from 'lodash/compact';
+import flatMap from 'lodash/flatMap';
 import boroughBoundaries from './Borough Boundaries simplified.json';
 
 const LAYER_IDS = [
@@ -12,6 +14,8 @@ const LAYER_IDS = [
   'atlas-1930',
   'atlas-1956',
   'nyc-label',
+  'lot-label',
+  'block-label',
 ] as const;
 
 type LayerId = typeof LAYER_IDS[number];
@@ -23,7 +27,8 @@ export type OverlayId =
   | 'district'
   | 'atlas-1916'
   | 'atlas-1930'
-  | 'atlas-1956';
+  | 'atlas-1956'
+  | 'bbl-label';
 
 const MANHATTAN_BOUNDS_GEOJSON = boroughBoundaries.features.find(
   (feature) => feature.properties['boro_name'] === 'Manhattan'
@@ -55,6 +60,7 @@ const overlaysToLayers: { [overlay in OverlayId]: LayerId[] } = {
   'atlas-1916': ['atlas-1916'],
   'atlas-1930': ['atlas-1930'],
   'atlas-1956': ['atlas-1956'],
+  'bbl-label': ['block-label', 'lot-label'],
 };
 
 const NYC_ATTRIBUTION =
@@ -155,9 +161,17 @@ export const installLayers = (
 
 export const setOverlay = (
   map: mapboxgl.Map,
-  overlayId: OverlayId | null
+  overlayId: OverlayId | null | OverlayId[]
 ): void => {
-  const visibleLayers = overlayId ? overlaysToLayers[overlayId] : [];
+  // If overlayId is not an arary, convert it to an array
+  const overlayIds: OverlayId[] = compact(
+    Array.isArray(overlayId) ? overlayId : [overlayId]
+  );
+
+  const visibleLayers = flatMap(
+    overlayIds,
+    (overlayId) => overlaysToLayers[overlayId]
+  );
   const mapBounds = map.getBounds();
 
   // Convert the map bounds into a Turf polygon