chore: use @opensystemslab/map@next in editor (#3557)

theopensystemslab · Aug 26, 2024 · 2d99fae · 2d99fae
1 parent 0dbb6d4
commit 2d99fae
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 47 deletions.
diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json
@@ -13,7 +13,7 @@
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
-    "@opensystemslab/map": "^0.8.3",
+    "@opensystemslab/map": "1.0.0-alpha.0",
     "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#6b2fd26",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",

diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml
diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx
@@ -88,29 +88,24 @@ export default function Component(props: Props) {
     if (isMounted.current) setSlots([]);
     isMounted.current = true;
 
-    const areaChangeHandler = ({ detail }: { detail: string }) => {
-      const numberString = detail.split(" ")[0];
-      const area = Number(numberString);
-      setArea(area);
-    };
-
     const geojsonChangeHandler = ({ detail: geojson }: any) => {
       if (geojson["EPSG:3857"]?.features) {
         // only a single polygon can be drawn, so get first feature in geojson "FeatureCollection"
         setBoundary(geojson["EPSG:3857"].features[0]);
+        setArea(
+          geojson["EPSG:3857"].features[0]?.properties?.["area.squareMetres"],
+        );
       } else {
-        // if the user clicks 'reset' to erase the drawing, geojson will be empty object, so set boundary to undefined
+        // if the user clicks 'reset' to erase the drawing, geojson will be empty object, so set boundary to undefined & area to 0
         setBoundary(undefined);
+        setArea(0);
       }
     };
 
     const map: any = document.getElementById("draw-boundary-map");
-
-    map?.addEventListener("areaChange", areaChangeHandler);
     map?.addEventListener("geojsonChange", geojsonChangeHandler);
 
     return function cleanup() {
-      map?.removeEventListener("areaChange", areaChangeHandler);
       map?.removeEventListener("geojsonChange", geojsonChangeHandler);
     };
   }, [page, setArea, setBoundary, setSlots]);

diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/Map.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/Map.tsx
@@ -164,6 +164,7 @@ export default function PlotNewAddress(props: PlotNewAddressProps): FCReturn {
               showNorthArrow
               osProxyEndpoint={`${process.env.REACT_APP_API_URL}/proxy/ordnance-survey`}
               clipGeojsonData={JSON.stringify(boundaryBBox)}
+              osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
               collapseAttributions={window.innerWidth < 500 ? true : undefined}
             />
           </MapContainer>

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public.tsx
@@ -1,4 +1,3 @@
-import { alpha } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { Feature } from "geojson";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -26,12 +25,6 @@ function MapAndLabelComponent(props: Props) {
   let count = 0;
 
   useEffect(() => {
-    const areaChangeHandler = ({ detail }: { detail: string }) => {
-      const numberString = detail.split(" ")[0];
-      const area = Number(numberString);
-      setArea(area);
-    };
-
     const geojsonChangeHandler = ({ detail: geojson }: any) => {
       if (geojson["EPSG:3857"]?.features) {
         count++;
@@ -49,12 +42,9 @@ function MapAndLabelComponent(props: Props) {
     };
 
     const map: any = document.getElementById("draw-boundary-map");
-
-    map?.addEventListener("areaChange", areaChangeHandler);
     map?.addEventListener("geojsonChange", geojsonChangeHandler);
 
     return function cleanup() {
-      map?.removeEventListener("areaChange", areaChangeHandler);
       map?.removeEventListener("geojsonChange", geojsonChangeHandler);
     };
   }, [objectArray, boundary]);
@@ -79,20 +69,20 @@ function MapAndLabelComponent(props: Props) {
           {/* @ts-ignore */}
           <my-map
             id="draw-boundary-map"
+            zoom={16}
             drawMode
             drawPointer="crosshair"
             drawGeojsonData={JSON.stringify(boundary)}
-            zoom={16}
-            drawFillColor={alpha(props.drawColor, 0.1)}
             drawColor={props.drawColor}
-            drawPointColor={props.drawColor}
             drawType={props.drawType}
             clipGeojsonData={
               teamSettings?.boundaryBBox &&
               JSON.stringify(teamSettings?.boundaryBBox)
             }
+            osProxyEndpoint={`${process.env.REACT_APP_API_URL}/proxy/ordnance-survey`}
+            osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+            collapseAttributions={window.innerWidth < 500 ? true : undefined}
           />
-
           <MapFooter>
             <Typography variant="body1">
               The property boundary you have drawn is{" "}

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -500,6 +500,7 @@ function DrawBoundary(props: ComponentProps) {
               hideResetControl
               staticMode
               style={{ width: "100%", height: "30vh" }}
+              osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
               collapseAttributions
             />
           </>