Ensure labels and boundaries are applied to both maps

NASA-IMPACT · Sep 18, 2023 · 8322abf · 8322abf
1 parent e1cbdd5
commit 8322abf
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/app/scripts/components/common/map/map-component.tsx b/app/scripts/components/common/map/map-component.tsx
@@ -4,7 +4,7 @@ import { ProjectionOptions } from 'veda';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
 import { convertProjectionToMapbox } from '../mapbox/map-options/utils';
-import { StylesContext } from './styles';
+import { useMapStyle } from './styles';
 import { MapsContext } from './maps';
 
 export default function MapComponent({
@@ -36,7 +36,7 @@ export default function MapComponent({
       return convertProjectionToMapbox(projection);
     }, [projection]);
 
-  const { style } = useContext(StylesContext);
+  const { style } = useMapStyle();
 
   if (!style) return null;
 

diff --git a/app/scripts/components/common/map/maps.tsx b/app/scripts/components/common/map/maps.tsx
@@ -74,7 +74,7 @@ type MapsProps = Pick<MapsContextWrapperProps, 'projection'> & {
 };
 
 function Maps({ children, projection }: MapsProps) {
-  // Instanciate MGL Compare, if compare is enabled
+  // Instantiate MGL Compare, if compare is enabled
   useMapCompare();
 
   // Split children into layers and controls, using all children provided

diff --git a/app/scripts/components/common/map/style-generators/basemap.tsx b/app/scripts/components/common/map/style-generators/basemap.tsx
@@ -59,9 +59,10 @@ export function Basemap({
     setBaseStyle(styleJson as Style);
   }, [styleJson]);
 
-  // Apply labels and boundaries options, by setting visibility on related layers
-  // For simplicity's sake, the Mapbox layer group (as set in Mapbox Studio) is used
-  // to determine wehether a layer is a labels layer or boundaries or none of those.
+  // Apply labels and boundaries options, by setting visibility on related
+  // layers For simplicity's sake, the Mapbox layer group (as set in Mapbox
+  // Studio) is used to determine whether a layer is a labels layer or
+  // boundaries or none of those.
   useEffect(() => {
     if (!baseStyle) return;
 

diff --git a/app/scripts/components/exploration/index.tsx b/app/scripts/components/exploration/index.tsx
@@ -121,7 +121,11 @@ function Exploration() {
                 {compare && (
                   // Compare map layers
                   <Compare>
-                    <Basemap basemapStyleId={mapBasemapId} />
+                    <Basemap
+                      basemapStyleId={mapBasemapId}
+                      labelsOption={labelsOption}
+                      boundariesOption={boundariesOption}
+                    />
                   </Compare>
                 )}
               </Map>