Use a wrapper for map controls

app/scripts/components/common/map/index.tsx

@@ -2,11 +2,19 @@ import React, { ReactNode } from 'react';
 import { MapProvider } from 'react-map-gl';
 import Maps, { MapsContextWrapperProps } from './maps';
 
+export const COMPARE_NAME = 'Compare';
 export function Compare({ children }: { children: ReactNode }) {
   return <>{children}</>;
 }
 
-Compare.displayName = 'Compare';
+Compare.displayName = COMPARE_NAME;
+
+export const CONTROLS_CONTAINER_NAME = 'MapControlsContainer';
+export function MapControls({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
+
+MapControls.displayName = CONTROLS_CONTAINER_NAME;
 
 export default function MapProviderWrapper(props: MapsContextWrapperProps) {
   return (

app/scripts/components/common/map/maps.tsx

@@ -22,6 +22,7 @@ import { Styles } from './styles';
 import useMapCompare from './hooks/use-map-compare';
 import MapComponent from './map-component';
 import useMaps, { useMapsContext } from './hooks/use-maps';
+import { COMPARE_NAME, CONTROLS_CONTAINER_NAME } from '.';
 
 const chevronRightURI = () =>
   iconDataURI(CollecticonChevronRightSmall, {
@@ -96,12 +97,14 @@ function Maps({ children, projection }: MapsProps) {
         // @ts-expect-error displayName is not in the type
         const componentName = child.type.displayName ?? '';
 
-        if (componentName === 'Compare') {
+        if (componentName === COMPARE_NAME) {
           acc.compareGenerators = Children.toArray(
             child.props.children
           ) as ReactElement[];
-        } else if (componentName.endsWith('Control')) {
-          acc.controls = [...acc.controls, child];
+        } else if (componentName == CONTROLS_CONTAINER_NAME) {
+          acc.controls = Children.toArray(
+            child.props.children
+          ) as ReactElement[];
         } else {
           acc.generators = [...acc.generators, child];
         }

app/scripts/components/exploration/components/map/index.tsx

@@ -3,15 +3,19 @@ import { useAtomValue } from 'jotai';
 import { Feature, Polygon } from 'geojson';
 
 import { useStacMetadataOnDatasets } from '../../hooks/use-stac-metadata-datasets';
-import { selectedCompareDateAtom, selectedDateAtom, timelineDatasetsAtom } from '../../atoms/atoms';
+import {
+  selectedCompareDateAtom,
+  selectedDateAtom,
+  timelineDatasetsAtom
+} from '../../atoms/atoms';
 import {
   TimelineDatasetStatus,
   TimelineDatasetSuccess
 } from '../../types.d.ts';
 import { Layer } from './layer';
 import { AnalysisMessageControl } from './analysis-message-control';
 
-import Map, { Compare } from '$components/common/map';
+import Map, { Compare, MapControls } from '$components/common/map';
 import { Basemap } from '$components/common/map/style-generators/basemap';
 import GeocoderControl from '$components/common/map/controls/geocoder';
 import { ScaleControl } from '$components/common/map/controls';
@@ -82,31 +86,33 @@ export function ExplorationMap() {
           />
         ))}
       {/* Map controls */}
-      <DrawControl
-        displayControlsDefault={false}
-        controls={
-          {
-            polygon: true,
-            trash: true
-          } as any
-        }
-        customFeatures={customAoIFeatures}
-      />
-      <CustomAoIControl onConfirm={onCustomAoIConfirm} />
-      <AnalysisMessageControl />
-      <GeocoderControl />
-      <MapOptionsControl
-        projection={projection}
-        onProjectionChange={setProjection}
-        basemapStyleId={mapBasemapId}
-        onBasemapStyleIdChange={setBasemapId}
-        labelsOption={labelsOption}
-        boundariesOption={boundariesOption}
-        onOptionChange={onOptionChange}
-      />
+      <MapControls>
+        <DrawControl
+          displayControlsDefault={false}
+          controls={
+            {
+              polygon: true,
+              trash: true
+            } as any
+          }
+          customFeatures={customAoIFeatures}
+        />
+        <CustomAoIControl onConfirm={onCustomAoIConfirm} />
+        <AnalysisMessageControl />
+        <GeocoderControl />
+        <MapOptionsControl
+          projection={projection}
+          onProjectionChange={setProjection}
+          basemapStyleId={mapBasemapId}
+          onBasemapStyleIdChange={setBasemapId}
+          labelsOption={labelsOption}
+          boundariesOption={boundariesOption}
+          onOptionChange={onOptionChange}
+        />
 
-      <ScaleControl />
-      <MapCoordsControl />
+        <ScaleControl />
+        <MapCoordsControl />
+      </MapControls>
       {comparing && (
         // Compare map layers
         <Compare>