New crag, Edit crag basics

src/app/sandbox/map/map-event-demo.tsx

@@ -7,7 +7,6 @@ import MapMarker from "@/components/map/map-marker";
 function MapEventDemo() {
   const [position, setPosition] = useState<[number, number] | undefined>();
   const map = useMapEvent("click", (e) => {
-    console.log(e.latlng);
     setPosition([e.latlng.lat, e.latlng.lng]);
   });
 

src/components/map/lazy-map-marker.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Marker, Popup } from "react-leaflet";
+import L from "leaflet";
+import { ReactNode } from "react";
+import { useClientRenderToString } from "@/hooks/useClientRenderToString";
+import IconMarkerWall from "../ui/icons/marker-wall";
+import IconMarkerParking from "../ui/icons/marker-parking";
+import { IconSize } from "../ui/icons/icon-size";
+
+type TLazyMapMarkerProps = {
+  type: "parking" | "wall";
+  position: [number, number];
+  popupContent?: ReactNode;
+  interactive?: boolean;
+  hidden?: boolean;
+};
+
+function LazyMapMarker({
+  type,
+  position,
+  popupContent,
+  interactive = true,
+  hidden,
+}: TLazyMapMarkerProps) {
+  const [icon] = useClientRenderToString(
+    type === "parking" ? (
+      <IconMarkerParking size={IconSize.xl} />
+    ) : (
+      <IconMarkerWall size={IconSize.xl} />
+    )
+  );
+
+  return (
+    <Marker
+      icon={L.divIcon({
+        className: "",
+        html: icon,
+        iconSize: [52, 52],
+        iconAnchor: [26, 52],
+        popupAnchor: [0, -46],
+      })}
+      position={position}
+      interactive={interactive}
+      opacity={hidden ? 0 : 1}
+    >
+      {popupContent && <Popup>{popupContent}</Popup>}
+    </Marker>
+  );
+}
+
+export default LazyMapMarker;
+export type { TLazyMapMarkerProps };

src/components/map/map-marker.tsx

@@ -1,49 +1,12 @@
-"use client";
+import dynamic from "next/dynamic";
+import { TLazyMapMarkerProps as TMapMarkerProps } from "./lazy-map-marker";
 
-import { Marker, Popup } from "react-leaflet";
-import L from "leaflet";
-import { ReactNode } from "react";
-import { useClientRenderToString } from "@/hooks/useClientRenderToString";
-import IconMarkerWall from "../ui/icons/marker-wall";
-import IconMarkerParking from "../ui/icons/marker-parking";
-import { IconSize } from "../ui/icons/icon-size";
+const LazyMapMarker = dynamic(() => import("./lazy-map-marker"), {
+  ssr: false,
+});
 
-type TMapMarkerProps = {
-  type: "parking" | "wall";
-  position: [number, number];
-  popupContent?: ReactNode;
-  interactive?: boolean;
-};
-
-function MapMarker({
-  type,
-  position,
-  popupContent,
-  interactive = true,
-}: TMapMarkerProps) {
-  const [icon] = useClientRenderToString(
-    type === "parking" ? (
-      <IconMarkerParking size={IconSize.xl} />
-    ) : (
-      <IconMarkerWall size={IconSize.xl} />
-    )
-  );
-
-  return (
-    <Marker
-      icon={L.divIcon({
-        className: "",
-        html: icon,
-        iconSize: [52, 52],
-        iconAnchor: [26, 52],
-        popupAnchor: [0, -46],
-      })}
-      position={position}
-      interactive={interactive}
-    >
-      {popupContent && <Popup>{popupContent}</Popup>}
-    </Marker>
-  );
+function MapMarker(props: TMapMarkerProps) {
+  return <LazyMapMarker {...props} />;
 }
 
 export default MapMarker;

src/components/ui/coordinates-input.tsx

@@ -9,9 +9,9 @@ import Button from "./button";
 import Dialog, { DialogSize, DialogTitleSize } from "./dialog";
 import TextField, { TTextFieldProps } from "./text-field";
 import { Dispatch, SetStateAction, useState } from "react";
+import IconMarker from "./icons/marker";
 import { useMapEvent } from "react-leaflet";
 import MapMarker from "../map/map-marker";
-import IconMarker from "./icons/marker";
 
 type TCoordinatesInputProps = TTextFieldProps & {
   dialogTitle: string;
@@ -120,10 +120,10 @@ function PlacedMarker({
     setPosition([e.latlng.lat, e.latlng.lng]);
   });
 
-  return (
-    position && (
-      <MapMarker type={markerType} position={position} interactive={false} />
-    )
+  return position ? (
+    <MapMarker type={markerType} position={position} interactive={false} />
+  ) : (
+    <MapMarker type={markerType} position={[0, 0]} interactive={false} hidden />
   );
 }