Add ESRI sat source + unify Sidebar overlay

src/pages/Map/styles.ts

@@ -1,28 +1,48 @@
+import type { Style } from 'mapbox-gl';
+
 export interface MapStyle {
   title: string;
-  url: string;
+  data: Style | string;
 }
 
 export const MapStyles = {
   Streets: {
     title: 'Streets',
-    url: 'mapbox://styles/mapbox/streets-v11?optimize=true',
+    data: 'mapbox://styles/mapbox/streets-v11?optimize=true',
   } as MapStyle,
   Outdoors: {
     title: 'Outdoors',
-    url: 'mapbox://styles/mapbox/outdoors-v11?optimize=true',
+    data: 'mapbox://styles/mapbox/outdoors-v11?optimize=true',
   } as MapStyle,
 
   Light: {
     title: 'Light',
-    url: 'mapbox://styles/mapbox/light-v10?optimize=true',
+    data: 'mapbox://styles/mapbox/light-v10?optimize=true',
   } as MapStyle,
   Dark: {
     title: 'Dark',
-    url: 'mapbox://styles/sachaw/ckwzwm92e1oep14pjunjqlqbo?optimize=true',
+    data: 'mapbox://styles/sachaw/ckwzwm92e1oep14pjunjqlqbo?optimize=true',
   } as MapStyle,
   Satellite: {
     title: 'Satellite',
-    url: 'mapbox://styles/mapbox/satellite-v9?optimize=true',
+
+    data: {
+      version: 8,
+      layers: [
+        {
+          id: 'esri',
+          type: 'raster',
+          source: 'esri',
+        },
+      ],
+      sources: {
+        esri: {
+          type: 'raster',
+          tiles: [
+            'https://clarity.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+          ],
+        },
+      },
+    },
   } as MapStyle,
 };

src/pages/Nodes/NodeCard.tsx

@@ -114,6 +114,7 @@ export const NodeCard = ({
         close={(): void => {
           setInfoOpen(false);
         }}
+        direction="x"
       >
         <CollapsibleSection title="User" icon={<FiUser />}>
           <div>Info</div>