@@ -232,7 +85,7 @@ export const Map = (): JSX.Element => {
} />
);
diff --git a/src/components/MapBox/MapboxProvider.tsx b/src/components/MapBox/MapboxProvider.tsx
new file mode 100644
index 00000000..b895a603
--- /dev/null
+++ b/src/components/MapBox/MapboxProvider.tsx
@@ -0,0 +1,224 @@
+import React from 'react';
+
+import mapbox from 'mapbox-gl';
+import { renderToString } from 'react-dom/server';
+import { FiAirplay } from 'react-icons/fi';
+
+import {
+ setBearing,
+ setLatLng,
+ setMapStyle,
+ setPitch,
+ setZoom,
+} from '@core/slices/mapSlice';
+import { useAppDispatch } from '@hooks/useAppDispatch';
+import { useAppSelector } from '@hooks/useAppSelector';
+import { useCreateMapbox } from '@hooks/useCreateMapbox';
+import { Card } from '@meshtastic/components';
+
+import { MapStyles } from '../Map/styles';
+import { MapboxContext } from './mapboxContext';
+
+export type MapboxProviderProps = {
+ children: React.ReactNode;
+};
+
+export const MapboxProvider = ({
+ children,
+}: MapboxProviderProps): JSX.Element => {
+ const darkMode = useAppSelector((state) => state.app.darkMode);
+ const mapState = useAppSelector((state) => state.map);
+ const nodes = useAppSelector((state) => state.meshtastic.nodes);
+ const dispatch = useAppDispatch();
+ const ref = React.useRef