From 8322abfc92dee9b4ce67535b996383864c5d784e Mon Sep 17 00:00:00 2001
From: Daniel da Silva <danielfdsilva@gmail.com>
Date: Mon, 18 Sep 2023 14:25:53 +0100
Subject: [PATCH] Ensure labels and boundaries are applied to both maps

---
 app/scripts/components/common/map/map-component.tsx        | 4 ++--
 app/scripts/components/common/map/maps.tsx                 | 2 +-
 .../components/common/map/style-generators/basemap.tsx     | 7 ++++---
 app/scripts/components/exploration/index.tsx               | 6 +++++-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/scripts/components/common/map/map-component.tsx b/app/scripts/components/common/map/map-component.tsx
index fa3ee9cb5..1e6ac3660 100644
--- 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
index acbe5c5b1..9899b7977 100644
--- 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
index 3d86bc907..3bfe56f16 100644
--- 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
index 01e0f0339..10afc3ea9 100644
--- 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>