diff --git a/app/src/app/constants/layers.ts b/app/src/app/constants/layers.ts index ca992f8f..93461404 100644 --- a/app/src/app/constants/layers.ts +++ b/app/src/app/constants/layers.ts @@ -23,7 +23,11 @@ export const INTERACTIVE_LAYERS = [BLOCK_HOVER_LAYER_ID, BLOCK_HOVER_LAYER_ID_CH export const PARENT_LAYERS = [BLOCK_LAYER_ID, BLOCK_HOVER_LAYER_ID]; -export const CHILD_LAYERS = [BLOCK_LAYER_ID_CHILD, BLOCK_HOVER_LAYER_ID_CHILD, BLOCK_LAYER_ID_HIGHLIGHT_CHILD]; +export const CHILD_LAYERS = [ + BLOCK_LAYER_ID_CHILD, + BLOCK_HOVER_LAYER_ID_CHILD, + BLOCK_LAYER_ID_HIGHLIGHT_CHILD, +]; export const DEFAULT_PAINT_STYLE: ExpressionSpecification = [ 'case', @@ -66,11 +70,11 @@ export function getLayerFill( captiveIds?: Set, shatterIds?: Set ): DataDrivenPropertyValueSpecification { - const innerFillSpec = [ + const innerFillSpec = ([ 'case', // is broken parent ['boolean', ['feature-state', 'broken'], false], - 0, + 0, // geography is locked ['boolean', ['feature-state', 'locked'], false], 0.35, @@ -108,7 +112,7 @@ export function getLayerFill( ['boolean', ['feature-state', 'hover'], false], 0.6, 0.2, - ] as unknown as DataDrivenPropertyValueSpecification; + ] as unknown) as DataDrivenPropertyValueSpecification; if (captiveIds?.size) { return [ 'case', @@ -162,12 +166,13 @@ export function getHighlightLayerSpecification( 'any', ['boolean', ['feature-state', 'focused'], false], ['boolean', ['feature-state', 'highlighted'], false], - ['all', + [ + 'all', // @ts-ignore correct logic, wrong types ['==', ['feature-state', 'zone'], null], ['boolean', !!highlightUnassigned], ['!', ['boolean', ['feature-state', 'broken'], false]], - ] + ], ], 3.5, 0, // Default width if none of the conditions are met @@ -255,12 +260,6 @@ const addBlockLayers = (map: Map | null, mapDocument: DocumentObject) => { } map?.addLayer(getHighlightLayerSpecification(mapDocument.parent_layer, BLOCK_LAYER_ID_HIGHLIGHT)); useMapStore.getState().setMapRenderingState('loaded'); - - // update map bounds based on document extent - useMapStore.getState().setMapOptions({ - bounds: mapDocument.extent as [number, number, number, number], - container: useMapStore.getState().mapOptions.container, - }); }; export function removeBlockLayers(map: Map | null) { @@ -275,10 +274,13 @@ export function removeBlockLayers(map: Map | null) { BLOCK_LAYER_ID_CHILD, BLOCK_HOVER_LAYER_ID_CHILD, BLOCK_LAYER_ID_HIGHLIGHT_CHILD, - BLOCK_SOURCE_ID, ].forEach(layer => { map.getLayer(layer) && map.removeLayer(layer); }); + + [BLOCK_SOURCE_ID].forEach(source => { + map.getSource(source) && map.removeSource(source); + }); } export {addBlockLayers}; diff --git a/app/src/app/store/mapStore.ts b/app/src/app/store/mapStore.ts index 9c48b8c5..19cabb0c 100644 --- a/app/src/app/store/mapStore.ts +++ b/app/src/app/store/mapStore.ts @@ -358,17 +358,26 @@ export const useMapStore = create( setMapViews: mapViews => set({mapViews}), mapDocument: null, setMapDocument: mapDocument => { - const currentMapDocument = get().mapDocument; + const { + mapDocument: currentMapDocument, + setFreshMap, + resetZoneAssignments, + upsertUserMap, + mapOptions + } = get(); if (currentMapDocument?.document_id === mapDocument.document_id) { return; } - get().setFreshMap(true); - get().resetZoneAssignments(); - get().upsertUserMap({ - mapDocument, - }); + setFreshMap(true) + resetZoneAssignments() + upsertUserMap({mapDocument}) + set({ mapDocument: mapDocument, + mapOptions: { + ...mapOptions, + bounds: mapDocument.extent + }, shatterIds: {parents: new Set(), children: new Set()}, }); },