disable map

src/components/forms/Done.tsx

@@ -13,8 +13,8 @@ import Button from "../buttons/Button";
 import PhotoUploadField from "../fields/PhotoUploadField";
 import FishStockingInfo from "../other/Info";
 import InfoColumn from "../other/InfoColumn";
-import Map from "../other/Map";
 import FishStockingPageTitle from "../other/PageTitle";
+import PreviewMap from "../other/PreviewMap";
 import SignatureList from "../other/SignatureList";
 import FishStockingTable from "../other/Table";
 import { fishOrigins } from "./Registration";
@@ -190,7 +190,7 @@ const FishStockingCompleted = ({
           </ButtonRow>
         </FishStockingMobile>
       </Container>
-      <Map display={!isMobile} value={fishStocking.geom} height="100%" />
+      <PreviewMap display={!isMobile} value={fishStocking.geom} height="100%" />
     </InnerContainer>
   );
 };

src/components/forms/Review.tsx

@@ -22,9 +22,9 @@ import TextAreaField from "../fields/TextAreaField";
 import TextField from "../fields/TextField";
 import ApproveFishRow from "../other/ApproveFishRow";
 import DeleteCard from "../other/DeleteCard";
-import Map from "../other/Map";
 import Modal from "../other/Modal";
 import FishStockingPageTitle from "../other/PageTitle";
+import PreviewMap from "../other/PreviewMap";
 import SignatureRow from "../other/SignatureRow";
 
 export interface FishStockingFactFormProps {
@@ -333,7 +333,7 @@ const Review = ({
                   />
                 </Modal>
               </StyledForm>
-              <Map
+              <PreviewMap
                 display={!isMobile}
                 value={fishStocking.geom}
                 height="100%"

src/components/other/PreviewMap.tsx

@@ -0,0 +1,88 @@
+import { useRef, useState } from "react";
+import styled from "styled-components";
+import { device } from "../../styles";
+import { Url } from "../../utils/texts";
+import LoaderComponent from "./LoaderComponent";
+
+export interface MapProps {
+  height: string;
+  value: string;
+  display: boolean;
+
+}
+
+const PreviewMap = ({ height, value, display }: MapProps) => {
+  const [loading, setLoading] = useState(true);
+  const iframeRef = useRef<any>(null);
+
+  const getMapUrl = () => {
+    const url = new URL(Url.DRAW);
+    const params = new URLSearchParams(url.search);
+    params.append("preview", "true");
+    url.search = params.toString();
+    return url.href;
+  };
+  const src = getMapUrl();
+  const handleLoadMap = () => {
+    setLoading(false);
+
+    iframeRef?.current?.contentWindow?.postMessage(
+      JSON.stringify({ geom: value }),
+      "*"
+    );
+  };
+
+  return (
+    <>
+      {loading ? <LoaderComponent /> : null}
+      <Container display={display}>
+        <InnerContainer>
+          <StyledIframe
+            ref={iframeRef}
+            src={src}
+            width={"100%"}
+            height={height}
+            style={{ border: 0 }}
+            allowFullScreen={true}
+            onLoad={handleLoadMap}
+            aria-hidden="false"
+            tabIndex={1}
+          />
+        </InnerContainer>
+      </Container>
+    </>
+  );
+};
+
+const Container = styled.div<{ display: boolean }>`
+  width: 100%;
+  height: 100%;
+  display: ${({ display }) => (display ? "flex" : "none")};
+`;
+
+
+
+const InnerContainer = styled.div<{}>`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @media ${device.mobileL} {
+    padding: 0;
+  }
+`;
+
+const StyledIframe = styled.iframe<{
+  height: string;
+  width: string;
+}>`
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+`;
+
+
+
+export default PreviewMap;