EditDialog: Add map

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap.tsx

@@ -0,0 +1,129 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import maplibregl, { LngLatLike, Marker, PointLike } from 'maplibre-gl';
+import { useFeatureContext } from '../../../../utils/FeatureContext';
+import { outdoorStyle } from '../../../../Map/styles/outdoorStyle';
+import { COMPASS_TOOLTIP } from '../../../../Map/useAddTopRightControls';
+import { CircularProgress } from '@mui/material';
+import styled from '@emotion/styled';
+import { CameraMarker } from '../../../Climbing/CameraMarker';
+import ReactDOMServer from 'react-dom/server';
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+`;
+
+const LoadingContainer = styled.div`
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Map = styled.div<{ $isVisible: boolean }>`
+  visibility: ${({ $isVisible }) => ($isVisible ? 'visible' : 'hidden')};
+  height: 100%;
+  width: 100%;
+`;
+
+const useInitMap = () => {
+  const containerRef = React.useRef(null);
+  const mapRef = React.useRef<maplibregl.Map>(null);
+  const [isMapLoaded, setIsMapLoaded] = useState(false);
+  const { feature } = useFeatureContext();
+
+  React.useEffect(() => {
+    const geolocation = new maplibregl.GeolocateControl({
+      positionOptions: {
+        enableHighAccuracy: true,
+      },
+      fitBoundsOptions: {
+        duration: 4000,
+      },
+      trackUserLocation: true,
+    });
+
+    setIsMapLoaded(false);
+    if (!containerRef.current) return undefined;
+    const map = new maplibregl.Map({
+      container: containerRef.current,
+      style: outdoorStyle,
+      attributionControl: false,
+      refreshExpiredTiles: false,
+      locale: {
+        'NavigationControl.ResetBearing': COMPASS_TOOLTIP,
+      },
+    });
+
+    map.scrollZoom.setWheelZoomRate(1 / 200); // 1/450 is default, bigger value = faster
+    map.addControl(geolocation);
+    mapRef.current = map;
+
+    mapRef.current.on('load', () => {
+      setIsMapLoaded(true);
+      if (mapRef.current) {
+        mapRef.current.jumpTo({
+          center: feature.center as [number, number],
+          zoom: 18.5,
+        });
+      }
+    });
+
+    return () => {
+      if (map) {
+        map.remove();
+      }
+    };
+  }, [containerRef, feature.center, feature.memberFeatures]);
+
+  return { containerRef, isMapLoaded };
+};
+
+const useFeatureMarker = (mapRef) => {
+  const { feature } = useFeatureContext();
+
+  const markerRef = useRef<maplibregl.Marker>();
+
+  useEffect(() => {
+    if (mapRef.current && feature.center) {
+      new maplibregl.Marker({
+        color: '#556cd6',
+        draggable: true,
+      })
+        .setLngLat([14.2536616, 49.6619403] as LngLatLike)
+        .addTo(mapRef.current);
+
+      console.log('___T', feature.center, mapRef);
+      markerRef.current = new maplibregl.Marker({
+        color: '#556cd6',
+        draggable: true,
+      })
+        .setLngLat(feature.center as LngLatLike)
+        .addTo(mapRef.current);
+    }
+
+    return () => {
+      markerRef.current?.remove();
+    };
+  }, [feature.center, mapRef, markerRef]);
+};
+
+export const EditFeatureMap = () => {
+  const { containerRef, isMapLoaded } = useInitMap();
+  const mapRef = React.useRef<maplibregl.Map>(null);
+  useFeatureMarker(mapRef);
+
+  return (
+    <Container>
+      {!isMapLoaded && (
+        <LoadingContainer>
+          <CircularProgress color="primary" />
+        </LoadingContainer>
+      )}
+      <Map $isVisible={isMapLoaded} ref={containerRef} />
+    </Container>
+  );
+};

src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/FeatureEditSection.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { SingleFeatureEditContextProvider } from './SingleFeatureEditContext';
 import { MembersEditor } from '../MembersEditor';
 import { ParentsEditor } from '../ParentsEditor';
+import { EditFeatureMap } from './EditFeatureMap';
 
 type Props = {
   shortId: string;
@@ -15,6 +16,7 @@ export const FeatureEditSection = ({ shortId }: Props) => (
     <PresetSelect />
     <MajorKeysEditor />
     <TagsEditor />
+    <EditFeatureMap />
     <ParentsEditor />
     <MembersEditor />
   </SingleFeatureEditContextProvider>