WIP

src/components/FeaturePanel/Climbing/ClimbingCragDialog.tsx

@@ -40,6 +40,7 @@ export const ClimbingCragDialog = ({
     photoPaths,
   } = useClimbingContext();
   const { feature } = useFeatureContext();
+  console.log('___', feature);
   const handleSave = useGetHandleSave(setIsEditMode);
   const machine = getMachine();
   const router = useRouter();

src/components/FeaturePanel/Climbing/ClimbingViewContent.tsx

@@ -8,10 +8,11 @@ import { useClimbingContext } from './contexts/ClimbingContext';
 import { invertedBoltCodeMap } from './utils/boltCodes';
 import { RouteList } from './RouteList/RouteList';
 import { ContentContainer } from './ContentContainer';
-import { Button, ButtonGroup } from '@mui/material';
+import { Box, Button, ButtonGroup, Tab, Tabs } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 import { RouteDistribution } from './RouteDistribution';
-import React from 'react';
+import React, { useState } from 'react';
+import { CragMap } from './CragMap';
 
 const ContentBelowRouteList = styled.div<{ $splitPaneHeight: number }>`
   min-height: calc(
@@ -30,6 +31,7 @@ const ButtonContainer = styled.div`
 export const ClimbingViewContent = () => {
   const { splitPaneHeight, showDebugMenu, isEditMode, routes, setIsEditMode } =
     useClimbingContext();
+  const [activeTabIndex, setActiveTabIndex] = useState(0);
 
   const getRoutesCsv = () => {
     const getPathString = (path) =>
@@ -60,34 +62,48 @@ export const ClimbingViewContent = () => {
 
   return (
     <>
-      <RouteList isEditable />
-      <ContentBelowRouteList $splitPaneHeight={splitPaneHeight}>
-        <ContentContainer>
-          {!isEditMode && (
-            <ButtonContainer>
-              <Button
-                onClick={handleEdit}
-                color="primary"
-                variant="contained"
-                endIcon={<EditIcon />}
-              >
-                Edit routes
-              </Button>
-            </ButtonContainer>
-          )}
-          {showDebugMenu && (
-            <>
-              <br />
-              <ButtonGroup variant="contained" size="small" color="primary">
-                <Button size="small" onClick={getRoutesCsv}>
-                  export OSM
-                </Button>
-              </ButtonGroup>
-            </>
-          )}
-        </ContentContainer>
-        <RouteDistribution />
-      </ContentBelowRouteList>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          value={activeTabIndex}
+          onChange={(_e, value) => setActiveTabIndex(value)}
+        >
+          <Tab label="General" />
+          <Tab label="Map" />
+        </Tabs>
+      </Box>
+      {activeTabIndex === 0 && (
+        <>
+          <RouteList isEditable />
+          <ContentBelowRouteList $splitPaneHeight={splitPaneHeight}>
+            <ContentContainer>
+              {!isEditMode && (
+                <ButtonContainer>
+                  <Button
+                    onClick={handleEdit}
+                    color="primary"
+                    variant="contained"
+                    endIcon={<EditIcon />}
+                  >
+                    Edit routes
+                  </Button>
+                </ButtonContainer>
+              )}
+              {showDebugMenu && (
+                <>
+                  <br />
+                  <ButtonGroup variant="contained" size="small" color="primary">
+                    <Button size="small" onClick={getRoutesCsv}>
+                      export OSM
+                    </Button>
+                  </ButtonGroup>
+                </>
+              )}
+            </ContentContainer>
+            <RouteDistribution />
+          </ContentBelowRouteList>
+        </>
+      )}
+      {activeTabIndex === 1 && <CragMap />}
     </>
   );
 };

src/components/FeaturePanel/Climbing/CragMap.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import maplibregl from 'maplibre-gl';
+import { basicStyle } from '../../Map/styles/basicStyle';
+import { COMPASS_TOOLTIP } from '../../Map/useAddTopRightControls';
+import { PersistedScaleControl } from '../../Map/behaviour/PersistedScaleControl';
+import styled from '@emotion/styled';
+import { useMapStateContext } from '../../utils/MapStateContext';
+import { useUpdateViewOnMove } from '../../Map/behaviour/useUpdateViewOnMove';
+import { useToggleTerrainControl } from '../../Map/behaviour/useToggleTerrainControl';
+import { useUpdateStyle } from '../../Map/behaviour/useUpdateStyle';
+import { createMapEffectHook } from '../../helpers';
+
+const Container = styled.div`
+  height: 100%;
+`;
+
+const useInitMap = () => {
+  const mapRef = React.useRef(null);
+  const [mapInState, setMapInState] = React.useState(null);
+
+  React.useEffect(() => {
+    if (!mapRef.current) return undefined;
+
+    const map = new maplibregl.Map({
+      container: mapRef.current,
+      style: basicStyle,
+      attributionControl: false,
+      refreshExpiredTiles: false,
+      locale: {
+        'NavigationControl.ResetBearing': COMPASS_TOOLTIP,
+      },
+    });
+    setMapInState(map);
+
+    map.addControl(PersistedScaleControl as any);
+
+    map.scrollZoom.setWheelZoomRate(1 / 200); // 1/450 is default, bigger value = faster
+
+    return () => {
+      map.remove();
+    };
+  }, [mapRef]);
+
+  return [mapInState, mapRef];
+};
+
+export const CragMap = () => {
+  const [map, mapRef] = useInitMap();
+
+  // const useUpdateMap = createMapEffectHook((map, viewForMap) => {
+  //   const center = [viewForMap[2], viewForMap[1]];
+  //   map.jumpTo({ center, zoom: viewForMap[0] });
+  // });
+
+  // const { viewForMap, setViewFromMap, setBbox, activeLayers } =
+  //   useMapStateContext();
+  // useUpdateViewOnMove(map, setViewFromMap, setBbox);
+  // useToggleTerrainControl(map);
+  // useUpdateMap(map, viewForMap);
+  // useUpdateStyle(map, activeLayers);
+  return (
+    <Container>
+      <div ref={mapRef} style={{ height: '100%', width: '100%' }} />
+    </Container>
+  );
+};