From 8945ce2fe958b3a078f45e8e544ad5a167c307e3 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Thu, 19 Jan 2023 14:13:38 +0100
Subject: [PATCH 1/2] dispatch geojsonChange events in two projections

---
 src/components/my-map/index.ts | 28 +++++++++++++++-------------
 src/components/my-map/utils.ts | 23 +++++++++++++++++++++++
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/components/my-map/index.ts b/src/components/my-map/index.ts
index bddf5af8..5b4017b4 100644
--- a/src/components/my-map/index.ts
+++ b/src/components/my-map/index.ts
@@ -37,7 +37,13 @@ import {
   pointsSource,
 } from "./snapping";
 import styles from "./styles.scss?inline";
-import { AreaUnitEnum, fitToData, formatArea, hexToRgba } from "./utils";
+import {
+  AreaUnitEnum,
+  fitToData,
+  formatArea,
+  hexToRgba,
+  makeGeoJSON,
+} from "./utils";
 
 type MarkerImageEnum = "circle" | "pin";
 type ResetControlImageEnum = "unicode" | "trash";
@@ -391,12 +397,10 @@ export class MyMap extends LitElement {
         if (sketches.length > 0) {
           const lastSketchGeom = last(sketches)?.getGeometry();
 
-          this.dispatch(
-            "geojsonChange",
-            new GeoJSON().writeFeaturesObject(sketches, {
-              featureProjection: "EPSG:3857",
-            })
-          );
+          this.dispatch("geojsonChange", {
+            webMercator: makeGeoJSON(sketches, "EPSG:3857"),
+            britishNationalGrid: makeGeoJSON(sketches, "EPSG:27700"),
+          });
 
           if (lastSketchGeom && this.drawType === "Polygon") {
             this.dispatch(
@@ -487,12 +491,10 @@ export class MyMap extends LitElement {
           fitToData(map, outlineSource, this.featureBuffer);
 
           // write the geojson representation of the feature or merged features
-          this.dispatch(
-            "featuresGeojsonChange",
-            new GeoJSON().writeFeaturesObject(outlineSource.getFeatures(), {
-              featureProjection: "EPSG:3857",
-            })
-          );
+          this.dispatch("featuresGeojsonChange", {
+            webMercator: makeGeoJSON(outlineSource, "EPSG:3857"),
+            britishNationalGrid: makeGeoJSON(outlineSource, "EPSG:27700"),
+          });
 
           // calculate the total area of the feature or merged features
           const data = outlineSource.getFeatures()[0].getGeometry();
diff --git a/src/components/my-map/utils.ts b/src/components/my-map/utils.ts
index 2324365c..27cdd7a7 100644
--- a/src/components/my-map/utils.ts
+++ b/src/components/my-map/utils.ts
@@ -1,9 +1,14 @@
 import { asArray, asString } from "ol/color";
 import { buffer } from "ol/extent";
+import { GeoJSON } from "ol/format";
+import { GeoJSONObject } from "ol/format/GeoJSON";
 import Geometry from "ol/geom/Geometry";
+import { Feature } from "ol/index";
 import Map from "ol/Map";
 import { Vector } from "ol/source";
+import VectorSource from "ol/source/Vector";
 import { getArea } from "ol/sphere";
+import { ProjectionEnum } from "./projections";
 
 export type AreaUnitEnum = "m2" | "ha";
 
@@ -55,3 +60,21 @@ export function hexToRgba(hexColor: string, alpha: number) {
   const [r, g, b] = Array.from(asArray(hexColor));
   return asString([r, g, b, alpha]);
 }
+
+/**
+ * Generate a geojson object from a vector source or an array of features
+ * @param source
+ * @param projection
+ * @returns
+ */
+export function makeGeoJSON(
+  source: VectorSource<Geometry> | Feature<Geometry>[],
+  projection: ProjectionEnum
+): GeoJSONObject {
+  return new GeoJSON().writeFeaturesObject(
+    source instanceof VectorSource ? source.getFeatures() : source,
+    {
+      featureProjection: projection,
+    }
+  );
+}

From 639de7121572471b73842fb25d372f040c9b0c5d Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Thu, 19 Jan 2023 19:49:54 +0100
Subject: [PATCH 2/2] improve key naming

---
 src/components/my-map/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/my-map/index.ts b/src/components/my-map/index.ts
index 5b4017b4..fab3d093 100644
--- a/src/components/my-map/index.ts
+++ b/src/components/my-map/index.ts
@@ -398,8 +398,8 @@ export class MyMap extends LitElement {
           const lastSketchGeom = last(sketches)?.getGeometry();
 
           this.dispatch("geojsonChange", {
-            webMercator: makeGeoJSON(sketches, "EPSG:3857"),
-            britishNationalGrid: makeGeoJSON(sketches, "EPSG:27700"),
+            "EPSG:3857": makeGeoJSON(sketches, "EPSG:3857"),
+            "EPSG:27700": makeGeoJSON(sketches, "EPSG:27700"),
           });
 
           if (lastSketchGeom && this.drawType === "Polygon") {
@@ -492,8 +492,8 @@ export class MyMap extends LitElement {
 
           // write the geojson representation of the feature or merged features
           this.dispatch("featuresGeojsonChange", {
-            webMercator: makeGeoJSON(outlineSource, "EPSG:3857"),
-            britishNationalGrid: makeGeoJSON(outlineSource, "EPSG:27700"),
+            "EPSG:3857": makeGeoJSON(outlineSource, "EPSG:3857"),
+            "EPSG:27700": makeGeoJSON(outlineSource, "EPSG:27700"),
           });
 
           // calculate the total area of the feature or merged features