diff --git a/frontend/src/details/adaptations/FeatureAdaptationsTable.tsx b/frontend/src/details/adaptations/FeatureAdaptationsTable.tsx
index ff525533..8adfb068 100644
--- a/frontend/src/details/adaptations/FeatureAdaptationsTable.tsx
+++ b/frontend/src/details/adaptations/FeatureAdaptationsTable.tsx
@@ -8,7 +8,7 @@ import { getAssetDataFormats } from 'config/assets/data-formats';
import { FeatureSidebarContent } from 'details/features/FeatureSidebarContent';
import { BoundingBox, extendBbox } from 'lib/bounding-box';
import { colorMap } from 'lib/color-map';
-import { mapFitBoundsState } from 'map/MapView';
+import { mapFitBoundsState } from 'lib/map/MapBoundsFitter';
import { ColorBox } from 'map/tooltip/content/ColorBox';
import { useCallback, useMemo } from 'react';
import { atom, useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 46b0f12b..ffc54a78 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,5 +1,6 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
import { App } from './App';
const container = document.getElementById('root');
-render(, container);
+const root = createRoot(container);
+root.render();
diff --git a/frontend/src/lib/data-map/BaseMap.tsx b/frontend/src/lib/data-map/BaseMap.tsx
index 93a98096..0ecaf88a 100644
--- a/frontend/src/lib/data-map/BaseMap.tsx
+++ b/frontend/src/lib/data-map/BaseMap.tsx
@@ -1,11 +1,13 @@
import { MapViewState } from 'deck.gl/typed';
-import { ComponentProps, FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
import { Map } from 'react-map-gl/maplibre';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { backgroundState, showLabelsState } from 'map/layers/layers-state';
+import { useBasemapStyle } from 'map/use-basemap-style';
+import { mapViewStateState } from 'state/map-view/map-view-state';
export interface BaseMapProps {
- mapStyle: ComponentProps['mapStyle'];
- viewState: MapViewState;
- onViewState: (vs: MapViewState) => void;
children?: ReactNode;
}
@@ -13,13 +15,22 @@ export interface BaseMapProps {
* Displays a react-map-gl basemap component.
* Accepts children such as a DeckGLOverlay, HUD controls etc
*/
-export const BaseMap: FC = ({ mapStyle, viewState, onViewState, children }) => {
+export const BaseMap: FC = ({ children }) => {
+ const background = useRecoilValue(backgroundState);
+ const showLabels = useRecoilValue(showLabelsState);
+ const [viewState, setViewState] = useRecoilState(mapViewStateState);
+ const { mapStyle } = useBasemapStyle(background, showLabels);
+
+ function handleViewStateChange({ viewState }: { viewState: MapViewState }) {
+ setViewState(viewState);
+ }
+
return (