From 51200d3ae0ed174fe9f1b1325515b7e868325e25 Mon Sep 17 00:00:00 2001
From: Sanjay Babu <sanjaytkbabu@gmail.com>
Date: Thu, 23 Jan 2025 11:32:50 -0800
Subject: [PATCH 01/10] Frontend - SubmissionIntakeForm, Map updated with pin
 or draw, externalAPIService updated, types, enums updated

---
 frontend/src/components/housing/maps/Map.vue  | 100 +++++++++++++++++-
 .../housing/submission/SubmissionForm.vue     |   9 +-
 .../submission/SubmissionIntakeForm.vue       |  86 +++++++++++++++
 .../submission/SubmissionIntakeSchema.ts      |   3 +-
 frontend/src/services/externalApiService.ts   |   8 ++
 frontend/src/types/Submission.ts              |   2 +
 frontend/src/utils/constants/housing.ts       |   6 +-
 frontend/src/utils/enums/housing.ts           |   3 +-
 .../housing/projects/ProjectsList.spec.ts     |   1 +
 9 files changed, 212 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/housing/maps/Map.vue b/frontend/src/components/housing/maps/Map.vue
index 758512ed..0d4b9bdd 100644
--- a/frontend/src/components/housing/maps/Map.vue
+++ b/frontend/src/components/housing/maps/Map.vue
@@ -3,8 +3,10 @@ import * as L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import '@geoman-io/leaflet-geoman-free';
 import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
-import { onMounted, onUpdated, watch } from 'vue';
+import { onMounted, onUpdated, ref, watch } from 'vue';
 
+import { useToast } from '@/lib/primevue';
+import { externalApiService } from '@/services';
 import {
   BC_BOUNDARIES_LOWER,
   BC_BOUNDARIES_UPPER,
@@ -14,22 +16,37 @@ import {
   OSM_URL_TEMPLATE
 } from '@/utils/constants/mapping';
 
+import type { GeoJSON } from 'geojson';
+import type { Ref } from 'vue';
+
 // Props
 const {
   disabled = false,
   latitude = undefined,
-  longitude = undefined
+  longitude = undefined,
+  pinOrDraw = false
 } = defineProps<{
   disabled?: boolean;
   latitude?: number;
   longitude?: number;
+  pinOrDraw?: boolean;
 }>();
 
+// Constants
+const POINT = 'Point';
+
 // Actions
 let marker: L.Marker;
 let map: L.Map;
+const geoJSON: Ref<GeoJSON | undefined> = ref(undefined);
+const toast = useToast();
+const oldLayer = ref<L.Layer | undefined>(undefined);
+
+// Emits
+const emit = defineEmits(['map:polygonUpdated', 'map:pinUpdated']);
 
 async function initMap() {
+  L.Icon.Default.prototype = new L.Icon(MAP_ICON_OPTIONS_RED);
   const osm = L.tileLayer(OSM_URL_TEMPLATE, OSM_TILE_LAYER_OPTIONS);
 
   map = L.map('map', {
@@ -43,6 +60,83 @@ async function initMap() {
   map.on('drag', function () {
     map.panInsideBounds(bcBounds, { animate: false });
   });
+
+  if (pinOrDraw) {
+    map.on('pm:create', async (e) => {
+      try {
+        const geo = e.layer as L.GeoJSON;
+
+        if (oldLayer.value) {
+          //@ts-ignore - insufficient type definitions
+          map.removeLayer(oldLayer.value);
+          oldLayer.value = undefined;
+        }
+        oldLayer.value = e.layer;
+
+        //@ts-ignore - insufficient type definitions
+        if (geo.toGeoJSON().geometry.type === POINT) {
+          //@ts-ignore - insufficient type definitions
+          let latitude = geo.toGeoJSON().geometry.coordinates[1];
+          //@ts-ignore - insufficient type definitions
+          let longitude = geo.toGeoJSON().geometry.coordinates[0];
+
+          getNearestOccupant(longitude, latitude);
+        } else {
+          geoJSON.value = geo.toGeoJSON();
+
+          emit('map:polygonUpdated', { geoJSON: geoJSON.value });
+        }
+        // Zoom in
+        if (geo.getBounds) map.fitBounds(geo.getBounds());
+        //@ts-ignore - insufficient type definitions
+        else map.flyTo(geo.getLatLng(), 17);
+      } catch (e: any) {
+        toast.error('Error', e.message);
+      }
+    });
+    initControls();
+  }
+}
+
+// Function to remove all markers from the map
+function removeAllMarkers() {
+  map.eachLayer((layer) => {
+    if (layer instanceof L.Marker) {
+      map.removeLayer(layer);
+    }
+  });
+}
+
+// show parcel data from Geocoder
+async function getNearestOccupant(longitude: string, latitude: string) {
+  const result = await externalApiService.getNearestOccupant(longitude, latitude);
+  const address = result.data.properties.occupantAliasAddress;
+  if (!address || address.length == 0) {
+    toast.warn('No address found');
+  }
+  emit('map:pinUpdated', {
+    longitude: longitude,
+    latitude: latitude,
+    address: address
+  });
+}
+
+function initControls() {
+  map.pm.addControls({
+    position: 'topleft',
+
+    // Create
+    drawCircleMarker: false,
+    drawCircle: false,
+    drawText: false,
+    drawPolyline: false,
+
+    // Edit
+    cutPolygon: false,
+    dragMode: false,
+    editMode: false,
+    rotateMode: false
+  });
 }
 
 function disableInteraction() {
@@ -83,6 +177,8 @@ defineExpose({ resizeMap });
 
 onMounted(async () => {
   await initMap();
+  // Clear all markers on mount
+  removeAllMarkers();
 });
 
 onUpdated(async () => {
diff --git a/frontend/src/components/housing/submission/SubmissionForm.vue b/frontend/src/components/housing/submission/SubmissionForm.vue
index 4a90e5a0..3ed5fd95 100644
--- a/frontend/src/components/housing/submission/SubmissionForm.vue
+++ b/frontend/src/components/housing/submission/SubmissionForm.vue
@@ -324,6 +324,7 @@ onMounted(async () => {
     locality: submission.locality,
     province: submission.province,
     locationPIDs: submission.locationPIDs,
+    locationPIDsAuto: submission.locationPIDsAuto,
     latitude: submission.latitude,
     longitude: submission.longitude,
     geomarkUrl: submission.geomarkUrl,
@@ -669,7 +670,13 @@ onMounted(async () => {
         :options="YES_NO_LIST"
       />
       <TextArea
-        class="col-span-12"
+        class="col-12"
+        name="locationPIDsAuto"
+        label="Auto Generated Location PID(s)"
+        :disabled="!editable"
+      />
+      <TextArea
+        class="col-12"
         name="projectLocationDescription"
         label="Additional information about location"
         :disabled="!editable"
diff --git a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
index 48f91ebe..d1608200 100644
--- a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
+++ b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
@@ -85,6 +85,12 @@ type SubmissionForm = {
   addressSearch?: string;
 } & SubmissionIntake;
 
+type PinUpdateEvent = {
+  longitude: number;
+  latitude: number;
+  address: string;
+};
+
 // Props
 const {
   activityId = undefined,
@@ -117,6 +123,7 @@ const assistanceAssignedEnquiryId: Ref<string | undefined> = ref(undefined);
 const autoSaveRef: Ref<InstanceType<typeof FormAutosave> | null> = ref(null);
 const editable: Ref<boolean> = ref(true);
 const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
+const geoJSON: Ref<string | undefined> = ref(undefined);
 const geomarkAccordionIndex: Ref<number | undefined> = ref(undefined);
 const initialFormValues: Ref<any | undefined> = ref(undefined);
 const isSubmittable: Ref<boolean> = ref(false);
@@ -568,6 +575,27 @@ watch(
     if (activeStep.value === 3) isSubmittable.value = true;
   }
 );
+function onPolygonUpdate(data: any) {
+  formRef.value?.setFieldValue('location.geoJSON', data.geoJSON);
+  geoJSON.value = data.geoJSON;
+  clearAddress();
+  // locationPIDs.value = data.PID;
+}
+function onPinUpdate(pinUpdateEvent: PinUpdateEvent) {
+  const addressSplit = pinUpdateEvent.address.split(',');
+  formRef.value?.setFieldValue('location.streetAddress', addressSplit[0]);
+  formRef.value?.setFieldValue('location.locality', addressSplit[1]);
+  formRef.value?.setFieldValue('location.province', addressSplit[2]);
+  formRef.value?.setFieldValue('location.latitude', pinUpdateEvent.latitude);
+  formRef.value?.setFieldValue('location.longitude', pinUpdateEvent.longitude);
+}
+function clearAddress() {
+  formRef.value?.setFieldValue('location.streetAddress', null);
+  formRef.value?.setFieldValue('location.locality', null);
+  formRef.value?.setFieldValue('location.province', null);
+  formRef.value?.setFieldValue('location.latitude', null);
+  formRef.value?.setFieldValue('location.longitude', null);
+}
 </script>
 
 <template>
@@ -1398,11 +1426,69 @@ watch(
                   </div>
                 </div>
                 <Map
+                  v-if="values.location?.projectLocation !== ProjectLocation.PIN_OR_DRAW"
                   ref="mapRef"
                   :disabled="!editable"
                   :latitude="mapLatitude"
                   :longitude="mapLongitude"
                 />
+                <div v-if="values.location?.projectLocation === ProjectLocation.PIN_OR_DRAW">
+                  <Map
+                    ref="mapRef"
+                    :pin-or-draw="true"
+                    :disabled="!editable"
+                    :latitude="mapLatitude"
+                    :longitude="mapLongitude"
+                    @map:polygon-updated="onPolygonUpdate"
+                    @map:pin-updated="onPinUpdate"
+                  />
+                  <Card class="no-shadow">
+                    <template #content>
+                      <div class="grid grid-cols-12 gap-4 nested-grid">
+                        <InputText
+                          class="col-span-4"
+                          name="location.streetAddress"
+                          disabled
+                          placeholder="Street address"
+                        />
+                        <InputText
+                          class="col-span-4"
+                          name="location.locality"
+                          disabled
+                          placeholder="Locality"
+                        />
+                        <InputText
+                          class="col-span-4"
+                          name="location.province"
+                          disabled
+                          placeholder="Province"
+                        />
+                        <InputNumber
+                          class="col-span-4"
+                          name="location.latitude"
+                          disabled
+                          :help-text="
+                            values.location?.projectLocation === ProjectLocation.LOCATION_COORDINATES
+                              ? 'Provide a coordinate between 48 and 60'
+                              : ''
+                          "
+                          placeholder="Latitude"
+                        />
+                        <InputNumber
+                          class="col-span-4"
+                          name="location.longitude"
+                          disabled
+                          :help-text="
+                            values.location?.projectLocation === ProjectLocation.LOCATION_COORDINATES
+                              ? 'Provide a coordinate between -114 and -139'
+                              : ''
+                          "
+                          placeholder="Longitude"
+                        />
+                      </div>
+                    </template>
+                  </Card>
+                </div>
               </template>
             </Card>
             <Card>
diff --git a/frontend/src/components/housing/submission/SubmissionIntakeSchema.ts b/frontend/src/components/housing/submission/SubmissionIntakeSchema.ts
index e2ef1531..d13ae130 100644
--- a/frontend/src/components/housing/submission/SubmissionIntakeSchema.ts
+++ b/frontend/src/components/housing/submission/SubmissionIntakeSchema.ts
@@ -142,7 +142,8 @@ export const submissionIntakeSchema = object({
       otherwise: () => number().nullable().min(-139).max(-114).label('Longitude')
     }),
     ltsaPIDLookup: string().max(255).nullable().label('Parcel ID'),
-    geomarkUrl: string().max(255).label('Geomark web service url')
+    geomarkUrl: string().max(255).label('Geomark web service url'),
+    getJSON: mixed().nullable().label('geoJSON')
   }),
   [IntakeFormCategory.PERMITS]: object({
     hasAppliedProvincialPermits: string().oneOf(YES_NO_UNSURE_LIST).required().label('Applied permits')
diff --git a/frontend/src/services/externalApiService.ts b/frontend/src/services/externalApiService.ts
index 534bf011..d7daf071 100644
--- a/frontend/src/services/externalApiService.ts
+++ b/frontend/src/services/externalApiService.ts
@@ -21,5 +21,13 @@ export default {
         ...ADDRESS_CODER_QUERY_PARAMS
       }
     });
+  },
+
+  async getNearestOccupant(longitude: string, lattitude: string) {
+    return geocoderAxios().get('/occupants/nearest.json', {
+      params: {
+        point: `${longitude},${lattitude}`
+      }
+    });
   }
 };
diff --git a/frontend/src/types/Submission.ts b/frontend/src/types/Submission.ts
index b9660355..6e7ccfe6 100644
--- a/frontend/src/types/Submission.ts
+++ b/frontend/src/types/Submission.ts
@@ -15,6 +15,7 @@ export type Submission = {
   companyNameRegistered: string;
   consentToFeedback?: boolean;
   isDevelopedInBC: string;
+  geoJSON?: string;
   projectName: string;
   projectDescription: string;
   projectLocationDescription: string;
@@ -36,6 +37,7 @@ export type Submission = {
   locality: string;
   province: string;
   locationPIDs: string;
+  locationPIDsAuto?: string;
   latitude: number;
   longitude: number;
   geomarkUrl: string;
diff --git a/frontend/src/utils/constants/housing.ts b/frontend/src/utils/constants/housing.ts
index a1d9def5..46737b45 100644
--- a/frontend/src/utils/constants/housing.ts
+++ b/frontend/src/utils/constants/housing.ts
@@ -106,7 +106,11 @@ export const PERMIT_STATUS_LIST = [
   PermitStatus.COMPLETED
 ];
 
-export const PROJECT_LOCATION_LIST = [ProjectLocation.STREET_ADDRESS, ProjectLocation.LOCATION_COORDINATES];
+export const PROJECT_LOCATION_LIST = [
+  ProjectLocation.LOCATION_COORDINATES,
+  ProjectLocation.STREET_ADDRESS,
+  ProjectLocation.PIN_OR_DRAW
+];
 
 export const QUEUE_PRIORITY = [1, 2, 3];
 
diff --git a/frontend/src/utils/enums/housing.ts b/frontend/src/utils/enums/housing.ts
index 40d08ccd..c9e2e7e2 100644
--- a/frontend/src/utils/enums/housing.ts
+++ b/frontend/src/utils/enums/housing.ts
@@ -103,7 +103,8 @@ export enum ProjectRelationship {
 
 export enum ProjectLocation {
   STREET_ADDRESS = 'Street address',
-  LOCATION_COORDINATES = 'Location coordinates'
+  LOCATION_COORDINATES = 'Location coordinates',
+  PIN_OR_DRAW = 'Pin or draw your location'
 }
 
 export enum SubmissionType {
diff --git a/frontend/tests/unit/components/housing/projects/ProjectsList.spec.ts b/frontend/tests/unit/components/housing/projects/ProjectsList.spec.ts
index e82ad162..4349a2da 100644
--- a/frontend/tests/unit/components/housing/projects/ProjectsList.spec.ts
+++ b/frontend/tests/unit/components/housing/projects/ProjectsList.spec.ts
@@ -92,6 +92,7 @@ const testSubmission: Submission = {
   locality: 'Anytown',
   province: 'BC',
   locationPIDs: '123456789',
+  locationPIDsAuto: '123456789',
   latitude: 49.2827,
   longitude: -123.1207,
   geomarkUrl: 'http://example.com/geomark',

From 9253ec1a2ed18740c35bfa1eed17e7b2ab21b6f8 Mon Sep 17 00:00:00 2001
From: Sanjay Babu <sanjaytkbabu@gmail.com>
Date: Thu, 30 Jan 2025 11:01:58 -0800
Subject: [PATCH 02/10] Backend - OpenMaps api path added to values, proj4
 dependency added, migration added to add geoJSON and locationPIDSAuto
 columns, models, types, validators updated

---
 .github/environments/values.dev.yaml          |  1 +
 .github/environments/values.prod.yaml         |  1 +
 .github/environments/values.test.yaml         |  1 +
 app/config/custom-environment-variables.json  |  3 +
 app/package-lock.json                         | 26 ++++++
 app/package.json                              |  2 +
 app/src/controllers/index.ts                  |  1 +
 app/src/controllers/map.ts                    | 19 ++++
 app/src/controllers/submission.ts             |  1 +
 .../20250130000000_021-advanced-map.ts        | 18 ++++
 app/src/db/models/submission.ts               |  3 +
 app/src/db/prisma/schema.prisma               |  1 +
 app/src/routes/v1/index.ts                    |  3 +
 app/src/routes/v1/map.ts                      | 23 +++++
 app/src/services/index.ts                     |  1 +
 app/src/services/map.ts                       | 89 +++++++++++++++++++
 app/src/services/submission.ts                |  6 +-
 app/src/types/Submission.ts                   |  2 +
 app/src/types/SubmissionIntake.ts             |  1 +
 charts/pcns/values.yaml                       |  2 +
 frontend/src/components/housing/maps/Map.vue  |  6 +-
 .../housing/submission/SubmissionForm.vue     | 17 ++--
 .../submission/SubmissionIntakeForm.vue       | 25 ++++--
 frontend/src/services/index.ts                |  1 +
 frontend/src/services/mapService.ts           | 13 +++
 frontend/src/types/Submission.ts              |  3 +-
 .../housing/projects/ProjectsList.spec.ts     |  1 -
 .../housing/submission/SubmissionForm.spec.ts |  4 +-
 28 files changed, 252 insertions(+), 22 deletions(-)
 create mode 100644 app/src/controllers/map.ts
 create mode 100644 app/src/db/migrations/20250130000000_021-advanced-map.ts
 create mode 100644 app/src/routes/v1/map.ts
 create mode 100644 app/src/services/map.ts
 create mode 100644 frontend/src/services/mapService.ts

diff --git a/.github/environments/values.dev.yaml b/.github/environments/values.dev.yaml
index 17b13a0d..1dfe9615 100644
--- a/.github/environments/values.dev.yaml
+++ b/.github/environments/values.dev.yaml
@@ -28,6 +28,7 @@ config:
     SERVER_OBJECTSTORAGE_KEY: dev
     SERVER_OIDC_AUTHORITY: https://dev.loginproxy.gov.bc.ca/auth/realms/standard
     SERVER_OIDC_PUBLICKEY: MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAuy7zfh2ZgpDV5mH/aXyLDTddZK81rGakJcTy4KvCNOkDDxt1KAhW02lmbCo8YhHCOzjNZBp1+Vi6QiMRgBqAe2GTPZYEiV70aXfROGZe3Nvwcjbtki6HoyRte3SpqLJEIPL2F+hjJkw1UPGnjPTWZkEx9p74b9i3BjuE8RnjJ0Sza2MWw83zoQUZEJRGiopSL0yuVej6t2LO2btVdVf7QuZfPt9ehkcQYlPKpVvJA+pfeqPAdnNt7OjEIeYxinjurZr8Z04hz8UhkRefcWlSbFzFQYmL7O7iArjW0bsSvq8yNUd5r0KCOQkFduwZy26yTzTxj8OLFT91fEmbBBl4rQIDAQAB
+    SERVER_OPENMAPS_APIPATH: https://openmaps.gov.bc.ca
     SERVER_PORT: "8080"
     SERVER_SSO_APIPATH: https://api.loginproxy.gov.bc.ca/api/v1
     SERVER_SSO_TOKENURL: https://loginproxy.gov.bc.ca/auth/realms/standard/protocol/openid-connect/token
diff --git a/.github/environments/values.prod.yaml b/.github/environments/values.prod.yaml
index 4218904d..926a31c4 100644
--- a/.github/environments/values.prod.yaml
+++ b/.github/environments/values.prod.yaml
@@ -28,6 +28,7 @@ config:
     SERVER_OBJECTSTORAGE_KEY: shas
     SERVER_OIDC_AUTHORITY: https://loginproxy.gov.bc.ca/auth/realms/standard
     SERVER_OIDC_PUBLICKEY: MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAmHiuPKOkpkq4GXN1ktr23rJtDl6Vdu/Y37ZAd3PnQ8/IDfAODvy1Y81aAUZicKe9egolv+OTRANN3yOg+TAbRhkeXLE5p/473EK0aQ0NazTCuWo6Am3oDQ7Yt8x0pw56/qcLtkTuXNyo5EnVV2Z2BzCnnaL31JOhyitolku0DNT6GDoRBmT4o2ItqEVHk5nM25cf1t2zbwI2790W6if1B2qVRkxxivS8tbH7nYC61Is3XCPockKptkH22cm2ZQJmtYd5sZKuXaGsvtyzHmn8/l0Kd1xnHmUu4JNuQ67YiNZGu3hOkrF0Js3BzAk1Qm4kvYRaxbJFCs/qokLZ4Z0W9wIDAQAB
+    SERVER_OPENMAPS_APIPATH: https://openmaps.gov.bc.ca
     SERVER_PORT: "8080"
     SERVER_SSO_APIPATH: https://api.loginproxy.gov.bc.ca/api/v1
     SERVER_SSO_TOKENURL: https://loginproxy.gov.bc.ca/auth/realms/standard/protocol/openid-connect/token
diff --git a/.github/environments/values.test.yaml b/.github/environments/values.test.yaml
index f7df52ea..86ea261e 100644
--- a/.github/environments/values.test.yaml
+++ b/.github/environments/values.test.yaml
@@ -28,6 +28,7 @@ config:
     SERVER_OBJECTSTORAGE_KEY: shas
     SERVER_OIDC_AUTHORITY: https://test.loginproxy.gov.bc.ca/auth/realms/standard
     SERVER_OIDC_PUBLICKEY: MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAiFdv9GA83uHuy8Eu9yiZHGGF9j6J8t7FkbcpaN81GDjwbjsIJ0OJO9dKRAx6BAtTC4ubJTBJMPvQER5ikOhIeBi4o25fg61jpgsU6oRZHkCXc9gX6mrjMjbsPaf3/bjjYxP5jicBDJQeD1oRa24+tiGggoQ7k6gDEN+cRYqqNpzC/GQbkUPk8YsgroncEgu8ChMh/3ERsLV2zorchMANUq76max16mHrhtWIQxrb/STpSt4JuSlUzzBV/dcXjJe5gywZHe0jAutFhNqjHzHdgyaC4RAd3eYQo+Kl/JOgy2AZrnx+CiPmvOJKe9tAW4k4H087ng8aVE40v4HW/FEbnwIDAQAB
+    SERVER_OPENMAPS_APIPATH: https://openmaps.gov.bc.ca
     SERVER_PORT: "8080"
     SERVER_SSO_APIPATH: https://api.loginproxy.gov.bc.ca/api/v1
     SERVER_SSO_TOKENURL: https://loginproxy.gov.bc.ca/auth/realms/standard/protocol/openid-connect/token
diff --git a/app/config/custom-environment-variables.json b/app/config/custom-environment-variables.json
index 17a58d52..d1a590a9 100644
--- a/app/config/custom-environment-variables.json
+++ b/app/config/custom-environment-variables.json
@@ -81,6 +81,9 @@
       "clientSecret": "SERVER_OIDC_CLIENTSECRET",
       "publicKey": "SERVER_OIDC_PUBLICKEY"
     },
+    "openMaps": {
+      "apiPath": "SERVER_OPENMAPS_APIPATH"
+    },
     "port": "SERVER_PORT",
     "sso": {
       "apiPath": "SERVER_SSO_APIPATH",
diff --git a/app/package-lock.json b/app/package-lock.json
index f3dfe30e..eea80c14 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -10,6 +10,7 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@prisma/client": "^6.0.1",
+        "@types/proj4": "^2.5.5",
         "api-problem": "^9.0.2",
         "axios": "^1.7.9",
         "compression": "^1.7.5",
@@ -24,6 +25,7 @@
         "jsonwebtoken": "^9.0.2",
         "knex": "^3.1.0",
         "pg": "^8.13.1",
+        "proj4": "^2.15.0",
         "ts-node": "^10.9.2",
         "uuid": "^11.0.3",
         "winston": "^3.17.0",
@@ -1860,6 +1862,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/@types/proj4": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/@types/proj4/-/proj4-2.5.5.tgz",
+      "integrity": "sha512-y4tHUVVoMEOm2nxRLQ2/ET8upj/pBmoutGxFw2LZJTQWPgWXI+cbxVEUFFmIzr/bpFR83hGDOTSXX6HBeObvZA=="
+    },
     "node_modules/@types/qs": {
       "version": "6.9.17",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.17.tgz",
@@ -8456,6 +8463,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mgrs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
+      "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA=="
+    },
     "node_modules/micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -9295,6 +9307,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/proj4": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.15.0.tgz",
+      "integrity": "sha512-LqCNEcPdI03BrCHxPLj29vsd5afsm+0sV1H/O3nTDKrv8/LA01ea1z4QADDMjUqxSXWnrmmQDjqFm1J/uZ5RLw==",
+      "dependencies": {
+        "mgrs": "1.0.0",
+        "wkt-parser": "^1.4.0"
+      }
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -11105,6 +11126,11 @@
         "node": ">= 12.0.0"
       }
     },
+    "node_modules/wkt-parser": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.4.0.tgz",
+      "integrity": "sha512-qpwO7Ihds/YYDTi1aADFTI1Sm9YC/tTe3SHD24EeIlZxy7Ik6a1b4HOz7jAi0xdUAw487duqpo8OGu+Tf4nwlQ=="
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
diff --git a/app/package.json b/app/package.json
index b9170c3e..16e0d9b4 100644
--- a/app/package.json
+++ b/app/package.json
@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "@prisma/client": "^6.0.1",
+    "@types/proj4": "^2.5.5",
     "api-problem": "^9.0.2",
     "axios": "^1.7.9",
     "compression": "^1.7.5",
@@ -67,6 +68,7 @@
     "jsonwebtoken": "^9.0.2",
     "knex": "^3.1.0",
     "pg": "^8.13.1",
+    "proj4": "^2.15.0",
     "ts-node": "^10.9.2",
     "uuid": "^11.0.3",
     "winston": "^3.17.0",
diff --git a/app/src/controllers/index.ts b/app/src/controllers/index.ts
index 0faa2eaf..816eb775 100644
--- a/app/src/controllers/index.ts
+++ b/app/src/controllers/index.ts
@@ -3,6 +3,7 @@ export { default as atsController } from './ats';
 export { default as contactController } from './contact';
 export { default as documentController } from './document';
 export { default as enquiryController } from './enquiry';
+export { default as mapController } from './map';
 export { default as noteController } from './note';
 export { default as permitController } from './permit';
 export { default as permitNoteController } from './permitNote';
diff --git a/app/src/controllers/map.ts b/app/src/controllers/map.ts
new file mode 100644
index 00000000..b1ecd0fe
--- /dev/null
+++ b/app/src/controllers/map.ts
@@ -0,0 +1,19 @@
+import { mapService, submissionService } from '../services';
+import type { NextFunction, Request, Response } from 'express';
+
+const controller = {
+  getPIDs: async (req: Request<{ submissionId: string }>, res: Response, next: NextFunction) => {
+    try {
+      const submission = await submissionService.getSubmission(req.params.submissionId);
+
+      let response;
+      if (submission?.geoJSON) response = await mapService.getPIDs(submission?.geoJSON);
+
+      res.status(200).json(response);
+    } catch (e: unknown) {
+      next(e);
+    }
+  }
+};
+
+export default controller;
diff --git a/app/src/controllers/submission.ts b/app/src/controllers/submission.ts
index fa695133..460f4a05 100644
--- a/app/src/controllers/submission.ts
+++ b/app/src/controllers/submission.ts
@@ -113,6 +113,7 @@ const controller = {
         naturalDisaster: data.location.naturalDisaster,
         projectLocation: data.location.projectLocation,
         projectLocationDescription: data.location.projectLocationDescription,
+        geoJSON: data.location.geoJSON,
         locationPIDs: data.location.ltsaPIDLookup,
         latitude: data.location.latitude,
         longitude: data.location.longitude,
diff --git a/app/src/db/migrations/20250130000000_021-advanced-map.ts b/app/src/db/migrations/20250130000000_021-advanced-map.ts
new file mode 100644
index 00000000..478e0fc4
--- /dev/null
+++ b/app/src/db/migrations/20250130000000_021-advanced-map.ts
@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+import type { Knex } from 'knex';
+
+export async function up(knex: Knex): Promise<void> {
+  return Promise.resolve().then(() =>
+    knex.schema.alterTable('submission', function (table) {
+      table.json('geo_json');
+    })
+  );
+}
+
+export async function down(knex: Knex): Promise<void> {
+  return Promise.resolve().then(() =>
+    knex.schema.alterTable('submission', function (table) {
+      table.dropColumn('geo_json');
+    })
+  );
+}
diff --git a/app/src/db/models/submission.ts b/app/src/db/models/submission.ts
index 627fd3dc..bf277628 100644
--- a/app/src/db/models/submission.ts
+++ b/app/src/db/models/submission.ts
@@ -56,6 +56,8 @@ export default {
       consent_to_feedback: input.consentToFeedback,
       location_pids: input.locationPIDs,
       company_name_registered: input.companyNameRegistered,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      geo_json: input.geoJSON as any,
       single_family_units: input.singleFamilyUnits,
       has_rental_units: input.hasRentalUnits,
       street_address: input.streetAddress,
@@ -110,6 +112,7 @@ export default {
       projectName: input.project_name,
       projectDescription: input.project_description,
       companyNameRegistered: input.company_name_registered,
+      geoJSON: input.geo_json,
       singleFamilyUnits: input.single_family_units,
       hasRentalUnits: input.has_rental_units,
       streetAddress: input.street_address,
diff --git a/app/src/db/prisma/schema.prisma b/app/src/db/prisma/schema.prisma
index d2e1d8fc..a64eb053 100644
--- a/app/src/db/prisma/schema.prisma
+++ b/app/src/db/prisma/schema.prisma
@@ -293,6 +293,7 @@ model submission {
   housing_coop_description           String?
   submission_type                    String?
   consent_to_feedback                Boolean   @default(false)
+  geo_json                           Json?     @db.Json
   activity                           activity  @relation(fields: [activity_id], references: [activity_id], onDelete: Cascade, map: "submission_activity_id_foreign")
   user                               user?     @relation(fields: [assigned_user_id], references: [user_id], onDelete: Cascade, map: "submission_assigned_user_id_foreign")
 
diff --git a/app/src/routes/v1/index.ts b/app/src/routes/v1/index.ts
index bde2d3bd..b51d2310 100644
--- a/app/src/routes/v1/index.ts
+++ b/app/src/routes/v1/index.ts
@@ -8,6 +8,7 @@ import contact from './contact';
 import docs from './docs';
 import document from './document';
 import enquiry from './enquiry';
+import map from './map';
 import note from './note';
 import permit from './permit';
 import reporting from './reporting';
@@ -32,6 +33,7 @@ router.get('/', (_req, res) => {
       '/docs',
       '/document',
       '/enquiry',
+      '/map',
       '/note',
       '/permit',
       '/reporting',
@@ -50,6 +52,7 @@ router.use('/ats', ats);
 router.use('/contact', contact);
 router.use('/document', document);
 router.use('/enquiry', enquiry);
+router.use('/map', map);
 router.use('/note', note);
 router.use('/permit', permit);
 router.use('/reporting', reporting);
diff --git a/app/src/routes/v1/map.ts b/app/src/routes/v1/map.ts
new file mode 100644
index 00000000..0c8f702e
--- /dev/null
+++ b/app/src/routes/v1/map.ts
@@ -0,0 +1,23 @@
+import express from 'express';
+
+import { mapController } from '../../controllers';
+import { hasAuthorization } from '../../middleware/authorization';
+import { requireSomeAuth } from '../../middleware/requireSomeAuth';
+import { requireSomeGroup } from '../../middleware/requireSomeGroup';
+import { Action, Resource } from '../../utils/enums/application';
+
+import type { NextFunction, Request, Response } from 'express';
+
+const router = express.Router();
+router.use(requireSomeAuth);
+router.use(requireSomeGroup);
+
+router.get(
+  '/pids/:submissionId',
+  hasAuthorization(Resource.SUBMISSION, Action.READ),
+  (req: Request<{ submissionId: string }>, res: Response, next: NextFunction): void => {
+    mapController.getPIDs(req, res, next);
+  }
+);
+
+export default router;
diff --git a/app/src/services/index.ts b/app/src/services/index.ts
index 9f4bcf57..f351e957 100644
--- a/app/src/services/index.ts
+++ b/app/src/services/index.ts
@@ -8,6 +8,7 @@ export { default as draftService } from './draft';
 export { default as emailService } from './email';
 export { default as enquiryService } from './enquiry';
 export { default as initiativeService } from './initiative';
+export { default as mapService } from './map';
 export { default as noteService } from './note';
 export { default as permitService } from './permit';
 export { default as permitNoteService } from './permitNote';
diff --git a/app/src/services/map.ts b/app/src/services/map.ts
new file mode 100644
index 00000000..4d0f0d1b
--- /dev/null
+++ b/app/src/services/map.ts
@@ -0,0 +1,89 @@
+import axios from 'axios';
+import config from 'config';
+import proj4 from 'proj4';
+
+import type { AxiosInstance, AxiosRequestConfig } from 'axios';
+
+/**
+ * @function openMapsAxios
+ * Returns an Axios instance for the CHEFS API
+ * @param {AxiosRequestConfig} options Axios request config options
+ * @returns {AxiosInstance} An axios instance
+ */
+function openMapsAxios(options: AxiosRequestConfig = {}): AxiosInstance {
+  return axios.create({
+    baseURL: config.get('server.openMaps.apiPath'),
+    timeout: 10000,
+    ...options
+  });
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getPolygonArray(geoJSON: any) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const polygonArray = geoJSON?.geometry?.coordinates[0]?.map((c: any) => {
+    return { lat: c[1], lng: c[0] };
+  });
+  return polygonArray;
+}
+
+const service = {
+  /**
+   * @function getParcelDataFromPMBC
+   * DataBC’s Open Web Services
+   * Accessing geographic data via WMS/WFS
+   * Services Provided by OCIO - Digital Platforms & Data - Data Systems & Services
+   * ref: https://docs.geoserver.org/main/en/user/services/wfs/reference.html#getfeature
+   * ref: https://catalogue.data.gov.bc.ca/dataset/parcelmap-bc-parcel-fabric
+   * @returns parcel data in JSON
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getPIDs: async (geoJSON: any) => {
+    const polygon = getPolygonArray(geoJSON);
+    // close polygon by re-adding first point to end of array
+    // define the source and destination layer types
+    // leaflet map layer
+    const source = proj4.Proj('EPSG:4326'); // gps format of leaflet map
+    // projection (BC Parcel data layer)
+    proj4.defs(
+      'EPSG:3005',
+      // eslint-disable-next-line max-len
+      'PROJCS["NAD83 / BC Albers", GEOGCS["NAD83", DATUM["North_American_Datum_1983", SPHEROID["GRS 1980",6378137,298.257222101, AUTHORITY["EPSG","7019"]], TOWGS84[0,0,0,0,0,0,0], AUTHORITY["EPSG","6269"]], PRIMEM["Greenwich",0, AUTHORITY["EPSG","8901"]], UNIT["degree",0.0174532925199433, AUTHORITY["EPSG","9122"]], AUTHORITY["EPSG","4269"]], PROJECTION["Albers_Conic_Equal_Area"], PARAMETER["standard_parallel_1",50], PARAMETER["standard_parallel_2",58.5], PARAMETER["latitude_of_center",45], PARAMETER["longitude_of_center",-126], PARAMETER["false_easting",1000000], PARAMETER["false_northing",0], UNIT["metre",1, AUTHORITY["EPSG","9001"]], AXIS["Easting",EAST], AXIS["Northing",NORTH], AUTHORITY["EPSG","3005"]]'
+    );
+    const dest = proj4.Proj('EPSG:3005');
+
+    // convert lat/long for WFS query
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const result = polygon.map((point: any) => {
+      //@ts-expect-error insufficient type definitions
+      return proj4(source, dest, { x: point.lng, y: point.lat });
+    });
+
+    // build query string for WFS request
+    let query = '';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    result.forEach((point: any, index: any, array: any) => {
+      query = query.concat(point.x, ' ', point.y);
+      if (index < array.length - 1) query = query.concat(', ');
+    });
+
+    let params =
+      // eslint-disable-next-line max-len
+      '/geo/pub/wfs?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&outputFormat=json&typeName=WHSE_CADASTRE.PMBC_PARCEL_FABRIC_POLY_SVW&CQL_FILTER=INTERSECTS(SHAPE, POLYGON ((query)))';
+
+    params = params.replace('query', query);
+
+    const response = await openMapsAxios().get(params);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const parcelData = response.data.features?.map((f: any) => f.properties);
+
+    const PIDs = parcelData
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .map((p: any) => p.PID_FORMATTED)
+      .filter((pid: string) => pid && pid.trim().length > 0)
+      .join(', ');
+
+    return PIDs;
+  }
+};
+
+export default service;
diff --git a/app/src/services/submission.ts b/app/src/services/submission.ts
index 8e92b3f6..2fe7e6a5 100644
--- a/app/src/services/submission.ts
+++ b/app/src/services/submission.ts
@@ -35,6 +35,7 @@ const service = {
    */
   createSubmission: async (data: Partial<Submission>) => {
     const response = await prisma.submission.create({
+      // @ts-expect-error 2322
       data: { ...submission.toPrismaModel(data as Submission), created_at: data.createdAt, created_by: data.createdBy },
       include: {
         activity: {
@@ -48,7 +49,7 @@ const service = {
         }
       }
     });
-
+    // @ts-expect-error 2322
     return submission.fromPrismaModelWithContact(response);
   },
 
@@ -357,6 +358,7 @@ const service = {
   updateSubmission: async (data: Submission) => {
     try {
       const result = await prisma.submission.update({
+        // @ts-expect-error 2322
         data: { ...submission.toPrismaModel(data), updated_at: data.updatedAt, updated_by: data.updatedBy },
         where: {
           submission_id: data.submissionId
@@ -373,7 +375,7 @@ const service = {
           }
         }
       });
-
+      // @ts-expect-error 2322
       return submission.fromPrismaModelWithContact(result);
     } catch (e: unknown) {
       throw e;
diff --git a/app/src/types/Submission.ts b/app/src/types/Submission.ts
index cd09cfc6..da14f9ad 100644
--- a/app/src/types/Submission.ts
+++ b/app/src/types/Submission.ts
@@ -12,6 +12,8 @@ export type Submission = {
   locationPIDs: string | null;
   companyNameRegistered: string | null;
   consentToFeedback: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  geoJSON: any;
   projectName: string | null;
   projectDescription: string | null;
   singleFamilyUnits: string | null;
diff --git a/app/src/types/SubmissionIntake.ts b/app/src/types/SubmissionIntake.ts
index f6d5f470..fd41c81f 100644
--- a/app/src/types/SubmissionIntake.ts
+++ b/app/src/types/SubmissionIntake.ts
@@ -38,6 +38,7 @@ export type SubmissionIntake = {
     naturalDisaster?: string;
     projectLocation?: string;
     projectLocationDescription?: string;
+    geoJSON?: string | null;
     ltsaPIDLookup?: string;
     latitude?: number | null;
     longitude?: number | null;
diff --git a/charts/pcns/values.yaml b/charts/pcns/values.yaml
index 056394b9..5abb9f78 100644
--- a/charts/pcns/values.yaml
+++ b/charts/pcns/values.yaml
@@ -167,6 +167,8 @@ config:
     SERVER_OIDC_AUTHORITY: ~
     SERVER_OIDC_PUBLICKEY: ~
 
+    SERVER_OPENMAPS_APIPATH: ~
+
     SERVER_PORT: "8080"
 
     SERVER_SSO_APIPATH: ~
diff --git a/frontend/src/components/housing/maps/Map.vue b/frontend/src/components/housing/maps/Map.vue
index 0d4b9bdd..1500ac3a 100644
--- a/frontend/src/components/housing/maps/Map.vue
+++ b/frontend/src/components/housing/maps/Map.vue
@@ -43,7 +43,7 @@ const toast = useToast();
 const oldLayer = ref<L.Layer | undefined>(undefined);
 
 // Emits
-const emit = defineEmits(['map:polygonUpdated', 'map:pinUpdated']);
+const emit = defineEmits(['map:polygonUpdated', 'map:pinUpdated', 'map:erased']);
 
 async function initMap() {
   L.Icon.Default.prototype = new L.Icon(MAP_ICON_OPTIONS_RED);
@@ -94,6 +94,10 @@ async function initMap() {
         toast.error('Error', e.message);
       }
     });
+    // On erase
+    map.on('pm:remove', () => {
+      emit('map:erased');
+    });
     initControls();
   }
 }
diff --git a/frontend/src/components/housing/submission/SubmissionForm.vue b/frontend/src/components/housing/submission/SubmissionForm.vue
index 3ed5fd95..1047c5bf 100644
--- a/frontend/src/components/housing/submission/SubmissionForm.vue
+++ b/frontend/src/components/housing/submission/SubmissionForm.vue
@@ -20,7 +20,7 @@ import ATSUserLinkModal from '@/components/user/ATSUserLinkModal.vue';
 import ATSUserCreateModal from '@/components/user/ATSUserCreateModal.vue';
 import ATSUserDetailsModal from '@/components/user/ATSUserDetailsModal.vue';
 import { Button, Message, useConfirm, useToast } from '@/lib/primevue';
-import { submissionService, userService } from '@/services';
+import { mapService, submissionService, userService } from '@/services';
 import { useSubmissionStore } from '@/store';
 import { YES_NO_LIST, YES_NO_UNSURE_LIST } from '@/utils/constants/application';
 import {
@@ -242,7 +242,8 @@ const onSubmit = async (values: any) => {
         'contactPhoneNumber',
         'contactEmail',
         'contactApplicantRelationship',
-        'contactPreference'
+        'contactPreference',
+        'locationPIDsAuto'
       ]
     );
 
@@ -292,6 +293,8 @@ onMounted(async () => {
     assigneeOptions.value = (await userService.searchUsers({ userId: [submission.assignedUserId] })).data;
   }
 
+  const locationPIDsAuto = (await mapService.getPIDs(submission.submissionId)).data;
+
   // Default form values
   initialFormValues.value = {
     activityId: submission.activityId,
@@ -324,7 +327,7 @@ onMounted(async () => {
     locality: submission.locality,
     province: submission.province,
     locationPIDs: submission.locationPIDs,
-    locationPIDsAuto: submission.locationPIDsAuto,
+    locationPIDsAuto: locationPIDsAuto,
     latitude: submission.latitude,
     longitude: submission.longitude,
     geomarkUrl: submission.geomarkUrl,
@@ -670,13 +673,13 @@ onMounted(async () => {
         :options="YES_NO_LIST"
       />
       <TextArea
-        class="col-12"
+        class="col-span-12"
         name="locationPIDsAuto"
-        label="Auto Generated Location PID(s)"
-        :disabled="!editable"
+        label="Auto generated location PID(s)"
+        :disabled="true"
       />
       <TextArea
-        class="col-12"
+        class="col-span-12"
         name="projectLocationDescription"
         label="Additional information about location"
         :disabled="!editable"
diff --git a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
index d1608200..5c2b398d 100644
--- a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
+++ b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
@@ -123,7 +123,6 @@ const assistanceAssignedEnquiryId: Ref<string | undefined> = ref(undefined);
 const autoSaveRef: Ref<InstanceType<typeof FormAutosave> | null> = ref(null);
 const editable: Ref<boolean> = ref(true);
 const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
-const geoJSON: Ref<string | undefined> = ref(undefined);
 const geomarkAccordionIndex: Ref<number | undefined> = ref(undefined);
 const initialFormValues: Ref<any | undefined> = ref(undefined);
 const isSubmittable: Ref<boolean> = ref(false);
@@ -575,12 +574,12 @@ watch(
     if (activeStep.value === 3) isSubmittable.value = true;
   }
 );
+
 function onPolygonUpdate(data: any) {
   formRef.value?.setFieldValue('location.geoJSON', data.geoJSON);
-  geoJSON.value = data.geoJSON;
   clearAddress();
-  // locationPIDs.value = data.PID;
 }
+
 function onPinUpdate(pinUpdateEvent: PinUpdateEvent) {
   const addressSplit = pinUpdateEvent.address.split(',');
   formRef.value?.setFieldValue('location.streetAddress', addressSplit[0]);
@@ -588,13 +587,19 @@ function onPinUpdate(pinUpdateEvent: PinUpdateEvent) {
   formRef.value?.setFieldValue('location.province', addressSplit[2]);
   formRef.value?.setFieldValue('location.latitude', pinUpdateEvent.latitude);
   formRef.value?.setFieldValue('location.longitude', pinUpdateEvent.longitude);
+  clearGeoJSON();
 }
+
 function clearAddress() {
-  formRef.value?.setFieldValue('location.streetAddress', null);
-  formRef.value?.setFieldValue('location.locality', null);
-  formRef.value?.setFieldValue('location.province', null);
-  formRef.value?.setFieldValue('location.latitude', null);
-  formRef.value?.setFieldValue('location.longitude', null);
+  formRef.value?.resetField('location.streetAddress');
+  formRef.value?.resetField('location.locality');
+  formRef.value?.resetField('location.province');
+  formRef.value?.resetField('location.latitude');
+  formRef.value?.resetField('location.longitude');
+}
+
+function clearGeoJSON() {
+  formRef.value?.resetField('location.geoJSON');
 }
 </script>
 
@@ -1439,6 +1444,10 @@ function clearAddress() {
                     :disabled="!editable"
                     :latitude="mapLatitude"
                     :longitude="mapLongitude"
+                    @map:erased="
+                      clearGeoJSON();
+                      clearAddress();
+                    "
                     @map:polygon-updated="onPolygonUpdate"
                     @map:pin-updated="onPinUpdate"
                   />
diff --git a/frontend/src/services/index.ts b/frontend/src/services/index.ts
index d6197fd5..18824b57 100644
--- a/frontend/src/services/index.ts
+++ b/frontend/src/services/index.ts
@@ -7,6 +7,7 @@ export { default as contactService } from './contactService';
 export { default as documentService } from './documentService';
 export { default as enquiryService } from './enquiryService';
 export { default as externalApiService } from './externalApiService';
+export { default as mapService } from './mapService';
 export { default as noteService } from './noteService';
 export { default as permitService } from './permitService';
 export { default as reportingService } from './reportingService';
diff --git a/frontend/src/services/mapService.ts b/frontend/src/services/mapService.ts
new file mode 100644
index 00000000..dda27252
--- /dev/null
+++ b/frontend/src/services/mapService.ts
@@ -0,0 +1,13 @@
+import { appAxios } from './interceptors';
+
+export default {
+  /**
+   * @function getPIDs
+   * getPIDs - Get the PIDs for a submission
+   * @returns {Promise<data | null>} The result of calling the get api
+   */
+
+  getPIDs(submissionId: string) {
+    return appAxios().get(`map/pids/${submissionId}`);
+  }
+};
diff --git a/frontend/src/types/Submission.ts b/frontend/src/types/Submission.ts
index 6e7ccfe6..7f6ecf03 100644
--- a/frontend/src/types/Submission.ts
+++ b/frontend/src/types/Submission.ts
@@ -15,7 +15,7 @@ export type Submission = {
   companyNameRegistered: string;
   consentToFeedback?: boolean;
   isDevelopedInBC: string;
-  geoJSON?: string;
+  geoJSON?: any;
   projectName: string;
   projectDescription: string;
   projectLocationDescription: string;
@@ -37,7 +37,6 @@ export type Submission = {
   locality: string;
   province: string;
   locationPIDs: string;
-  locationPIDsAuto?: string;
   latitude: number;
   longitude: number;
   geomarkUrl: string;
diff --git a/frontend/tests/unit/components/housing/projects/ProjectsList.spec.ts b/frontend/tests/unit/components/housing/projects/ProjectsList.spec.ts
index 4349a2da..e82ad162 100644
--- a/frontend/tests/unit/components/housing/projects/ProjectsList.spec.ts
+++ b/frontend/tests/unit/components/housing/projects/ProjectsList.spec.ts
@@ -92,7 +92,6 @@ const testSubmission: Submission = {
   locality: 'Anytown',
   province: 'BC',
   locationPIDs: '123456789',
-  locationPIDsAuto: '123456789',
   latitude: 49.2827,
   longitude: -123.1207,
   geomarkUrl: 'http://example.com/geomark',
diff --git a/frontend/tests/unit/components/housing/submission/SubmissionForm.spec.ts b/frontend/tests/unit/components/housing/submission/SubmissionForm.spec.ts
index c4192a13..d158dc33 100644
--- a/frontend/tests/unit/components/housing/submission/SubmissionForm.spec.ts
+++ b/frontend/tests/unit/components/housing/submission/SubmissionForm.spec.ts
@@ -1,7 +1,7 @@
 import SubmissionForm from '@/components/housing/submission/SubmissionForm.vue';
 import { ApplicationStatus } from '@/utils/enums/housing';
 import { GroupName } from '@/utils/enums/application';
-import { userService } from '@/services';
+import { mapService, userService } from '@/services';
 import { createTestingPinia } from '@pinia/testing';
 import PrimeVue from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
@@ -11,9 +11,11 @@ import type { Submission, IDIRAttribute, BasicBCeIDAttribute, BusinessBCeIDAttri
 
 import type { AxiosResponse } from 'axios';
 
+const getPIDs = vi.spyOn(mapService, 'getPIDs');
 const useUserService = vi.spyOn(userService, 'searchUsers');
 
 useUserService.mockResolvedValue({ data: [{ fullName: 'dummyName' }] } as AxiosResponse);
+getPIDs.mockResolvedValue({ data: { pids: ['123456789'] } } as AxiosResponse);
 
 const currentDate = new Date().toISOString();
 

From c45a34d55c8731d9dd11e6df76d5e372d6ae7831 Mon Sep 17 00:00:00 2001
From: Sanjay Babu <sanjaytkbabu@gmail.com>
Date: Fri, 31 Jan 2025 15:17:19 -0800
Subject: [PATCH 03/10] tests

---
 .../tests/unit/service/mapService.spec.ts     | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 frontend/tests/unit/service/mapService.spec.ts

diff --git a/frontend/tests/unit/service/mapService.spec.ts b/frontend/tests/unit/service/mapService.spec.ts
new file mode 100644
index 00000000..35ed8f42
--- /dev/null
+++ b/frontend/tests/unit/service/mapService.spec.ts
@@ -0,0 +1,33 @@
+import mapService from '@/services/mapService';
+import { appAxios } from '@/services/interceptors';
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn()
+  })
+}));
+
+const testSubmissionId = 'submission123';
+
+const getSpy = vi.fn();
+
+vi.mock('@/services/interceptors');
+vi.mocked(appAxios).mockReturnValue({
+  get: getSpy
+} as any);
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('mapService', () => {
+  describe('getPIDs', () => {
+    it('calls with given data', () => {
+      mapService.getPIDs(testSubmissionId);
+
+      expect(getSpy).toHaveBeenCalledTimes(1);
+      expect(getSpy).toHaveBeenCalledWith(`map/pids/${testSubmissionId}`);
+    });
+  });
+});

From f17ec53f71b73009cfa3b4540174dff6d1319792 Mon Sep 17 00:00:00 2001
From: Kyle Morel <kyle.1.morel@gov.bc.ca>
Date: Tue, 4 Feb 2025 11:00:33 -0800
Subject: [PATCH 04/10] Update types to remove ts 2322 error

---
 ....ts => 20250130000000_022-advanced-map.ts} |  0
 app/src/db/models/submission.ts               |  3 +--
 app/src/services/map.ts                       |  5 +++++
 app/src/services/submission.ts                | 21 +++++++++++++------
 app/src/types/Submission.ts                   |  5 +++--
 frontend/src/services/mapService.ts           |  1 -
 6 files changed, 24 insertions(+), 11 deletions(-)
 rename app/src/db/migrations/{20250130000000_021-advanced-map.ts => 20250130000000_022-advanced-map.ts} (100%)

diff --git a/app/src/db/migrations/20250130000000_021-advanced-map.ts b/app/src/db/migrations/20250130000000_022-advanced-map.ts
similarity index 100%
rename from app/src/db/migrations/20250130000000_021-advanced-map.ts
rename to app/src/db/migrations/20250130000000_022-advanced-map.ts
diff --git a/app/src/db/models/submission.ts b/app/src/db/models/submission.ts
index bf277628..9ef1b3da 100644
--- a/app/src/db/models/submission.ts
+++ b/app/src/db/models/submission.ts
@@ -56,8 +56,7 @@ export default {
       consent_to_feedback: input.consentToFeedback,
       location_pids: input.locationPIDs,
       company_name_registered: input.companyNameRegistered,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      geo_json: input.geoJSON as any,
+      geo_json: input.geoJSON,
       single_family_units: input.singleFamilyUnits,
       has_rental_units: input.hasRentalUnits,
       street_address: input.streetAddress,
diff --git a/app/src/services/map.ts b/app/src/services/map.ts
index 4d0f0d1b..c441f23b 100644
--- a/app/src/services/map.ts
+++ b/app/src/services/map.ts
@@ -17,6 +17,7 @@ function openMapsAxios(options: AxiosRequestConfig = {}): AxiosInstance {
     ...options
   });
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getPolygonArray(geoJSON: any) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -36,19 +37,23 @@ const service = {
    * ref: https://catalogue.data.gov.bc.ca/dataset/parcelmap-bc-parcel-fabric
    * @returns parcel data in JSON
    */
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getPIDs: async (geoJSON: any) => {
     const polygon = getPolygonArray(geoJSON);
+
     // close polygon by re-adding first point to end of array
     // define the source and destination layer types
     // leaflet map layer
     const source = proj4.Proj('EPSG:4326'); // gps format of leaflet map
+
     // projection (BC Parcel data layer)
     proj4.defs(
       'EPSG:3005',
       // eslint-disable-next-line max-len
       'PROJCS["NAD83 / BC Albers", GEOGCS["NAD83", DATUM["North_American_Datum_1983", SPHEROID["GRS 1980",6378137,298.257222101, AUTHORITY["EPSG","7019"]], TOWGS84[0,0,0,0,0,0,0], AUTHORITY["EPSG","6269"]], PRIMEM["Greenwich",0, AUTHORITY["EPSG","8901"]], UNIT["degree",0.0174532925199433, AUTHORITY["EPSG","9122"]], AUTHORITY["EPSG","4269"]], PROJECTION["Albers_Conic_Equal_Area"], PARAMETER["standard_parallel_1",50], PARAMETER["standard_parallel_2",58.5], PARAMETER["latitude_of_center",45], PARAMETER["longitude_of_center",-126], PARAMETER["false_easting",1000000], PARAMETER["false_northing",0], UNIT["metre",1, AUTHORITY["EPSG","9001"]], AXIS["Easting",EAST], AXIS["Northing",NORTH], AUTHORITY["EPSG","3005"]]'
     );
+
     const dest = proj4.Proj('EPSG:3005');
 
     // convert lat/long for WFS query
diff --git a/app/src/services/submission.ts b/app/src/services/submission.ts
index 2fe7e6a5..d6b78b24 100644
--- a/app/src/services/submission.ts
+++ b/app/src/services/submission.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-useless-catch */
 import axios from 'axios';
 import config from 'config';
+import { Prisma } from '@prisma/client';
 
 import prisma from '../db/dataConnection';
 import { submission } from '../db/models';
@@ -34,9 +35,14 @@ const service = {
    * @returns {Promise<Partial<Submission>>} The result of running the transaction
    */
   createSubmission: async (data: Partial<Submission>) => {
+    const s = submission.toPrismaModel(data as Submission);
     const response = await prisma.submission.create({
-      // @ts-expect-error 2322
-      data: { ...submission.toPrismaModel(data as Submission), created_at: data.createdAt, created_by: data.createdBy },
+      data: {
+        ...s,
+        geo_json: s.geo_json as Prisma.InputJsonValue,
+        created_at: data.createdAt,
+        created_by: data.createdBy
+      },
       include: {
         activity: {
           include: {
@@ -49,7 +55,6 @@ const service = {
         }
       }
     });
-    // @ts-expect-error 2322
     return submission.fromPrismaModelWithContact(response);
   },
 
@@ -357,9 +362,14 @@ const service = {
    */
   updateSubmission: async (data: Submission) => {
     try {
+      const s = submission.toPrismaModel(data);
       const result = await prisma.submission.update({
-        // @ts-expect-error 2322
-        data: { ...submission.toPrismaModel(data), updated_at: data.updatedAt, updated_by: data.updatedBy },
+        data: {
+          ...s,
+          geo_json: s.geo_json as Prisma.InputJsonValue,
+          updated_at: data.updatedAt,
+          updated_by: data.updatedBy
+        },
         where: {
           submission_id: data.submissionId
         },
@@ -375,7 +385,6 @@ const service = {
           }
         }
       });
-      // @ts-expect-error 2322
       return submission.fromPrismaModelWithContact(result);
     } catch (e: unknown) {
       throw e;
diff --git a/app/src/types/Submission.ts b/app/src/types/Submission.ts
index da14f9ad..ed4efdc2 100644
--- a/app/src/types/Submission.ts
+++ b/app/src/types/Submission.ts
@@ -1,3 +1,5 @@
+import { Prisma } from '@prisma/client';
+
 import { IStamps } from '../interfaces/IStamps';
 
 import type { Contact } from './Contact';
@@ -12,8 +14,7 @@ export type Submission = {
   locationPIDs: string | null;
   companyNameRegistered: string | null;
   consentToFeedback: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  geoJSON: any;
+  geoJSON: Prisma.JsonValue;
   projectName: string | null;
   projectDescription: string | null;
   singleFamilyUnits: string | null;
diff --git a/frontend/src/services/mapService.ts b/frontend/src/services/mapService.ts
index dda27252..d6110158 100644
--- a/frontend/src/services/mapService.ts
+++ b/frontend/src/services/mapService.ts
@@ -6,7 +6,6 @@ export default {
    * getPIDs - Get the PIDs for a submission
    * @returns {Promise<data | null>} The result of calling the get api
    */
-
   getPIDs(submissionId: string) {
     return appAxios().get(`map/pids/${submissionId}`);
   }

From 668de0781f4b1134cba796f01e6c6a823c8c82ee Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Fri, 14 Feb 2025 18:17:42 -0800
Subject: [PATCH 05/10] Add ability for map component to redraw previous
 geoJSON

---
 frontend/src/components/housing/maps/Map.vue  | 80 ++++++++++++-------
 .../submission/SubmissionIntakeForm.vue       |  4 +-
 2 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/housing/maps/Map.vue b/frontend/src/components/housing/maps/Map.vue
index 1500ac3a..11c6f123 100644
--- a/frontend/src/components/housing/maps/Map.vue
+++ b/frontend/src/components/housing/maps/Map.vue
@@ -22,11 +22,13 @@ import type { Ref } from 'vue';
 // Props
 const {
   disabled = false,
+  geoJsonData = undefined,
   latitude = undefined,
   longitude = undefined,
   pinOrDraw = false
 } = defineProps<{
   disabled?: boolean;
+  geoJsonData?: GeoJSON;
   latitude?: number;
   longitude?: number;
   pinOrDraw?: boolean;
@@ -35,6 +37,9 @@ const {
 // Constants
 const POINT = 'Point';
 
+// Emits
+const emit = defineEmits(['map:polygonUpdated', 'map:pinUpdated', 'map:erased']);
+
 // Actions
 let marker: L.Marker;
 let map: L.Map;
@@ -42,8 +47,21 @@ const geoJSON: Ref<GeoJSON | undefined> = ref(undefined);
 const toast = useToast();
 const oldLayer = ref<L.Layer | undefined>(undefined);
 
-// Emits
-const emit = defineEmits(['map:polygonUpdated', 'map:pinUpdated', 'map:erased']);
+const drawControlOptions = {
+  position: 'topleft' as L.ControlPosition,
+
+  // Create
+  drawCircleMarker: false,
+  drawCircle: false,
+  drawText: false,
+  drawPolyline: false,
+
+  // Edit
+  cutPolygon: false,
+  dragMode: false,
+  editMode: false,
+  rotateMode: false
+};
 
 async function initMap() {
   L.Icon.Default.prototype = new L.Icon(MAP_ICON_OPTIONS_RED);
@@ -87,9 +105,7 @@ async function initMap() {
           emit('map:polygonUpdated', { geoJSON: geoJSON.value });
         }
         // Zoom in
-        if (geo.getBounds) map.fitBounds(geo.getBounds());
-        //@ts-ignore - insufficient type definitions
-        else map.flyTo(geo.getLatLng(), 17);
+        zoomToGeometry(geo);
       } catch (e: any) {
         toast.error('Error', e.message);
       }
@@ -98,7 +114,6 @@ async function initMap() {
     map.on('pm:remove', () => {
       emit('map:erased');
     });
-    initControls();
   }
 }
 
@@ -125,25 +140,9 @@ async function getNearestOccupant(longitude: string, latitude: string) {
   });
 }
 
-function initControls() {
-  map.pm.addControls({
-    position: 'topleft',
-
-    // Create
-    drawCircleMarker: false,
-    drawCircle: false,
-    drawText: false,
-    drawPolyline: false,
-
-    // Edit
-    cutPolygon: false,
-    dragMode: false,
-    editMode: false,
-    rotateMode: false
-  });
-}
-
 function disableInteraction() {
+  map.pm.removeControls();
+
   map.dragging.disable();
   map.touchZoom.disable();
   map.doubleClickZoom.disable();
@@ -154,6 +153,8 @@ function disableInteraction() {
 }
 
 function enableInteraction() {
+  map.pm.addControls(drawControlOptions);
+
   map.dragging.enable();
   map.touchZoom.enable();
   map.doubleClickZoom.enable();
@@ -166,7 +167,14 @@ function enableInteraction() {
 // Map component will be misaligned if mounted while not visible. Trigger resize to fix on show
 // Parent component needs to trigger nextTick().then(() => mapRef?.value?.resizeMap()
 function resizeMap() {
-  if (map) map.invalidateSize();
+  if (map) {
+    map.invalidateSize();
+    map.eachLayer((layer) => {
+      if (layer instanceof L.GeoJSON) {
+        zoomToGeometry(layer);
+      }
+    });
+  }
 }
 
 function setAddressMarker(coords: any) {
@@ -177,10 +185,28 @@ function setAddressMarker(coords: any) {
   map.addLayer(marker);
 }
 
+function zoomToGeometry(geoObject: L.GeoJSON) {
+  // Zoom in
+  if (geoObject.getBounds) map.fitBounds(geoObject.getBounds());
+  //@ts-ignore - insufficient type definitions
+  else map.flyTo(geo.getLatLng(), 17);
+}
+
+async function drawGeoJson() {
+  const geo = L.geoJSON(geoJsonData) as L.GeoJSON;
+  geo.addTo(map);
+  return geo;
+}
+
 defineExpose({ resizeMap });
 
 onMounted(async () => {
   await initMap();
+
+  if (geoJsonData) drawGeoJson();
+  if (disabled) disableInteraction();
+  else enableInteraction();
+
   // Clear all markers on mount
   removeAllMarkers();
 });
@@ -195,8 +221,8 @@ onUpdated(async () => {
 
 watch(
   () => disabled,
-  (val) => {
-    if (val) disableInteraction();
+  () => {
+    if (disabled) disableInteraction();
     else enableInteraction();
   }
 );
diff --git a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
index 5c2b398d..85c0bc17 100644
--- a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
+++ b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
@@ -539,7 +539,8 @@ onBeforeMount(async () => {
           longitude: response?.longitude,
           ltsaPIDLookup: response?.locationPIDs,
           geomarkUrl: response?.geomarkUrl,
-          projectLocationDescription: response?.projectLocationDescription
+          projectLocationDescription: response?.projectLocationDescription,
+          geoJSON: response?.geoJSON
         },
         appliedPermits: permits
           .filter((x: Permit) => x.status === PermitStatus.APPLIED)
@@ -1442,6 +1443,7 @@ function clearGeoJSON() {
                     ref="mapRef"
                     :pin-or-draw="true"
                     :disabled="!editable"
+                    :geo-json-data="values.location.geoJSON"
                     :latitude="mapLatitude"
                     :longitude="mapLongitude"
                     @map:erased="

From 9f647e9e9ee5a0b5500295a711a9b29e54c5fca1 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Tue, 18 Feb 2025 17:57:35 -0800
Subject: [PATCH 06/10] Initial unit tests

---
 .../unit/components/housing/maps/Map.spec.ts  | 116 ++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 frontend/tests/unit/components/housing/maps/Map.spec.ts

diff --git a/frontend/tests/unit/components/housing/maps/Map.spec.ts b/frontend/tests/unit/components/housing/maps/Map.spec.ts
new file mode 100644
index 00000000..d893aba9
--- /dev/null
+++ b/frontend/tests/unit/components/housing/maps/Map.spec.ts
@@ -0,0 +1,116 @@
+import { createTestingPinia } from '@pinia/testing';
+//@ts-ignore - Needed for mocks
+import * as L from 'leaflet';
+import '@geoman-io/leaflet-geoman-free';
+import { nextTick } from 'vue';
+
+// import 'leaflet/dist/leaflet.css';
+import PrimeVue from 'primevue/config';
+import ToastService from 'primevue/toastservice';
+import { mount, shallowMount } from '@vue/test-utils';
+
+import Map from '@/components/housing/maps/Map.vue';
+
+const disableInteractionMock = vi.fn();
+const enableInteractionMock = vi.fn();
+
+vi.mock('leaflet', async (importOriginal) => {
+  const mod = await importOriginal(); // type is inferred
+  return {
+    //@ts-ignore - insufficient type definitions
+    ...mod,
+    // replace some exports
+    map: vi.fn().mockImplementation(() => ({
+      setMaxBounds: () => vi.fn(),
+      on: () => vi.fn(),
+      invalidateSize: () => vi.fn(),
+      pm: {
+        addControls: vi.fn(),
+        removeControls: vi.fn()
+      },
+      boxZoom: {
+        enable: enableInteractionMock,
+        disable: disableInteractionMock
+      },
+      keyboard: {
+        enable: enableInteractionMock,
+        disable: disableInteractionMock
+      },
+      dragging: {
+        enable: enableInteractionMock,
+        disable: disableInteractionMock
+      },
+      touchZoom: {
+        enable: enableInteractionMock,
+        disable: disableInteractionMock
+      },
+      doubleClickZoom: {
+        enable: enableInteractionMock,
+        disable: disableInteractionMock
+      },
+      scrollWheelZoom: {
+        enable: enableInteractionMock,
+        disable: disableInteractionMock
+      },
+      eachLayer: () => vi.fn()
+    }))
+  };
+});
+
+vi.mock('@geoman-io/leaflet-geoman-free');
+
+const defaultTestProps = {
+  disabled: false,
+  geoJsonData: undefined,
+  latitude: undefined,
+  longitude: undefined,
+  pinOrDraw: false
+};
+const wrapperSettings = (defaultProps = defaultTestProps) => ({
+  props: defaultProps,
+  global: {
+    plugins: [
+      () =>
+        createTestingPinia({
+          initialState: {
+            auth: {
+              user: {}
+            }
+          }
+        }),
+      PrimeVue,
+      ToastService
+    ],
+    stubs: ['font-awesome-icon', 'router-link']
+  }
+});
+
+describe('ProjectsList.vue', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the component with the provided props', async () => {
+    const wrapper = mount(Map, wrapperSettings());
+    await nextTick();
+
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('calls enableInteraction function when not disabled', async () => {
+    mount(Map, wrapperSettings());
+    await nextTick();
+
+    expect(enableInteractionMock).toHaveBeenCalledTimes(6);
+  });
+
+  it('does not call disableInteraction function when not disabled', async () => {
+    const wrapper = mount(Map, wrapperSettings());
+    await nextTick();
+
+    wrapper.setProps({ disabled: true });
+    await nextTick();
+
+    expect(disableInteractionMock).toHaveBeenCalledTimes(6);
+  });
+});

From 37b9bd66d6cee7c7a45e9166483cfb44088d0fb2 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Wed, 19 Feb 2025 13:30:56 -0800
Subject: [PATCH 07/10] Rename mapping related migration due to rebase

Remove merge conflict marker
---
 ...022-advanced-map.ts => 20250219000000_025-advanced-map.ts} | 0
 frontend/src/components/housing/maps/Map.vue                  | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename app/src/db/migrations/{20250130000000_022-advanced-map.ts => 20250219000000_025-advanced-map.ts} (100%)

diff --git a/app/src/db/migrations/20250130000000_022-advanced-map.ts b/app/src/db/migrations/20250219000000_025-advanced-map.ts
similarity index 100%
rename from app/src/db/migrations/20250130000000_022-advanced-map.ts
rename to app/src/db/migrations/20250219000000_025-advanced-map.ts
diff --git a/frontend/src/components/housing/maps/Map.vue b/frontend/src/components/housing/maps/Map.vue
index 11c6f123..32472e09 100644
--- a/frontend/src/components/housing/maps/Map.vue
+++ b/frontend/src/components/housing/maps/Map.vue
@@ -185,9 +185,9 @@ function setAddressMarker(coords: any) {
   map.addLayer(marker);
 }
 
-function zoomToGeometry(geoObject: L.GeoJSON) {
+function zoomToGeometry(geo: L.GeoJSON) {
   // Zoom in
-  if (geoObject.getBounds) map.fitBounds(geoObject.getBounds());
+  if (geo.getBounds) map.fitBounds(geo.getBounds());
   //@ts-ignore - insufficient type definitions
   else map.flyTo(geo.getLatLng(), 17);
 }

From 80b17562d08a40516463053edb4d63d3b5551336 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Wed, 19 Feb 2025 18:19:34 -0800
Subject: [PATCH 08/10] Some small fixes, more test

---
 frontend/src/components/housing/maps/Map.vue  |   3 +-
 .../unit/components/housing/maps/Map.spec.ts  | 123 ++++++++++++++++--
 2 files changed, 113 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/housing/maps/Map.vue b/frontend/src/components/housing/maps/Map.vue
index 32472e09..b3cc6d88 100644
--- a/frontend/src/components/housing/maps/Map.vue
+++ b/frontend/src/components/housing/maps/Map.vue
@@ -186,13 +186,14 @@ function setAddressMarker(coords: any) {
 }
 
 function zoomToGeometry(geo: L.GeoJSON) {
+  if (!geo) return;
   // Zoom in
   if (geo.getBounds) map.fitBounds(geo.getBounds());
   //@ts-ignore - insufficient type definitions
   else map.flyTo(geo.getLatLng(), 17);
 }
 
-async function drawGeoJson() {
+function drawGeoJson() {
   const geo = L.geoJSON(geoJsonData) as L.GeoJSON;
   geo.addTo(map);
   return geo;
diff --git a/frontend/tests/unit/components/housing/maps/Map.spec.ts b/frontend/tests/unit/components/housing/maps/Map.spec.ts
index d893aba9..1559ff47 100644
--- a/frontend/tests/unit/components/housing/maps/Map.spec.ts
+++ b/frontend/tests/unit/components/housing/maps/Map.spec.ts
@@ -1,18 +1,33 @@
 import { createTestingPinia } from '@pinia/testing';
-//@ts-ignore - Needed for mocks
+// Needed to be imported before mocking
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 import * as L from 'leaflet';
 import '@geoman-io/leaflet-geoman-free';
 import { nextTick } from 'vue';
 
-// import 'leaflet/dist/leaflet.css';
+import Map from '@/components/housing/maps/Map.vue';
+import { externalApiService } from '@/services';
+import { mount } from '@vue/test-utils';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
-import { mount, shallowMount } from '@vue/test-utils';
 
-import Map from '@/components/housing/maps/Map.vue';
+import type { AxiosResponse } from 'axios';
+import type { GeoJSON } from 'geojson';
+
+type Props = {
+  disabled?: boolean;
+  geoJsonData?: GeoJSON;
+  latitude?: number;
+  longitude?: number;
+  pinOrDraw?: boolean;
+};
 
 const disableInteractionMock = vi.fn();
+const eachLayerMock = vi.fn();
 const enableInteractionMock = vi.fn();
+const invalidateSizeMock = vi.fn();
+const onMock = vi.fn();
+const setMaxBoundsMock = vi.fn();
 
 vi.mock('leaflet', async (importOriginal) => {
   const mod = await importOriginal(); // type is inferred
@@ -21,9 +36,11 @@ vi.mock('leaflet', async (importOriginal) => {
     ...mod,
     // replace some exports
     map: vi.fn().mockImplementation(() => ({
-      setMaxBounds: () => vi.fn(),
-      on: () => vi.fn(),
-      invalidateSize: () => vi.fn(),
+      addLayer: () => vi.fn(),
+      eachLayer: () => eachLayerMock,
+      invalidateSize: () => invalidateSizeMock,
+      on: () => onMock,
+      setMaxBounds: () => setMaxBoundsMock,
       pm: {
         addControls: vi.fn(),
         removeControls: vi.fn()
@@ -52,21 +69,42 @@ vi.mock('leaflet', async (importOriginal) => {
         enable: enableInteractionMock,
         disable: disableInteractionMock
       },
-      eachLayer: () => vi.fn()
+      tapHold: {
+        enable: enableInteractionMock,
+        disable: disableInteractionMock
+      }
     }))
   };
 });
 
 vi.mock('@geoman-io/leaflet-geoman-free');
 
-const defaultTestProps = {
+const getNearestOccupantSpy = vi.spyOn(externalApiService, 'getNearestOccupant');
+
+const testGeoJson: GeoJSON = {
+  type: 'Feature',
+  properties: {},
+  geometry: {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [-123.370564, 48.428039],
+        [-123.370564, 48.428565],
+        [-123.369663, 48.428565],
+        [-123.369663, 48.428039],
+        [-123.370564, 48.428039]
+      ]
+    ]
+  }
+};
+const defaultTestProps: Props = {
   disabled: false,
   geoJsonData: undefined,
   latitude: undefined,
   longitude: undefined,
   pinOrDraw: false
 };
-const wrapperSettings = (defaultProps = defaultTestProps) => ({
+const wrapperSettings = (defaultProps: Props = defaultTestProps) => ({
   props: defaultProps,
   global: {
     plugins: [
@@ -101,7 +139,7 @@ describe('ProjectsList.vue', () => {
     mount(Map, wrapperSettings());
     await nextTick();
 
-    expect(enableInteractionMock).toHaveBeenCalledTimes(6);
+    expect(enableInteractionMock).toHaveBeenCalledTimes(7);
   });
 
   it('does not call disableInteraction function when not disabled', async () => {
@@ -111,6 +149,67 @@ describe('ProjectsList.vue', () => {
     wrapper.setProps({ disabled: true });
     await nextTick();
 
-    expect(disableInteractionMock).toHaveBeenCalledTimes(6);
+    expect(disableInteractionMock).toHaveBeenCalledTimes(7);
+  });
+
+  it('getNearestOccupant fcn calls externalApiService', async () => {
+    const addressString = 'address string';
+
+    getNearestOccupantSpy.mockResolvedValue({
+      data: {
+        properties: {
+          occupantAliasAddress: addressString
+        }
+      }
+    } as AxiosResponse);
+    const newProps: Props = {
+      ...defaultTestProps,
+      latitude: 45,
+      longitude: -130
+    };
+    const wrapper = mount(Map, wrapperSettings(newProps));
+    await nextTick();
+
+    //@ts-ignore - wrapper.vm functions not exposed for typing
+    wrapper.vm.getNearestOccupant(newProps.longitude, newProps.latitude);
+    await nextTick();
+
+    expect(getNearestOccupantSpy).toHaveBeenCalledTimes(1);
+    expect(getNearestOccupantSpy).toHaveBeenCalledWith(newProps.longitude, newProps.latitude);
+  });
+
+  it('getNearestOccupant fcn returns properly formatted data', async () => {
+    const addressString = 'address string2';
+
+    getNearestOccupantSpy.mockResolvedValue({
+      data: {
+        properties: {
+          occupantAliasAddress: addressString
+        }
+      }
+    } as AxiosResponse);
+    const newProps: Props = {
+      ...defaultTestProps,
+      latitude: 45,
+      geoJsonData: testGeoJson,
+      longitude: -130
+    };
+    const wrapper = mount(Map, wrapperSettings(newProps));
+    await nextTick();
+
+    //@ts-ignore - wrapper.vm functions not exposed for typing
+    wrapper.vm.getNearestOccupant(newProps.longitude, newProps.latitude);
+    await nextTick();
+
+    // Listen to emits
+    const pinUpdatedEmit = wrapper.emitted('map:pinUpdated');
+
+    // Emitted once
+    expect(pinUpdatedEmit).toHaveLength(1);
+    expect(pinUpdatedEmit?.[0]?.[0]).toMatchObject({
+      latitude: newProps.latitude,
+      longitude: newProps.longitude,
+      address: addressString
+    });
   });
 });

From cb101596528a2164dbd8517484d65e906c24f188 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Thu, 20 Feb 2025 17:40:34 -0800
Subject: [PATCH 09/10] Restructure lat/long pin handling, improved layer
 handling

---
 ....ts => 20250219000000_026-advanced-map.ts} |  0
 frontend/src/components/housing/maps/Map.vue  | 44 ++++++++++---------
 .../submission/SubmissionIntakeForm.vue       | 40 +++++++++--------
 3 files changed, 44 insertions(+), 40 deletions(-)
 rename app/src/db/migrations/{20250219000000_025-advanced-map.ts => 20250219000000_026-advanced-map.ts} (100%)

diff --git a/app/src/db/migrations/20250219000000_025-advanced-map.ts b/app/src/db/migrations/20250219000000_026-advanced-map.ts
similarity index 100%
rename from app/src/db/migrations/20250219000000_025-advanced-map.ts
rename to app/src/db/migrations/20250219000000_026-advanced-map.ts
diff --git a/frontend/src/components/housing/maps/Map.vue b/frontend/src/components/housing/maps/Map.vue
index b3cc6d88..36bd141c 100644
--- a/frontend/src/components/housing/maps/Map.vue
+++ b/frontend/src/components/housing/maps/Map.vue
@@ -3,7 +3,7 @@ import * as L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import '@geoman-io/leaflet-geoman-free';
 import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
-import { onMounted, onUpdated, ref, watch } from 'vue';
+import { onMounted, ref, toRaw, watch } from 'vue';
 
 import { useToast } from '@/lib/primevue';
 import { externalApiService } from '@/services';
@@ -23,14 +23,10 @@ import type { Ref } from 'vue';
 const {
   disabled = false,
   geoJsonData = undefined,
-  latitude = undefined,
-  longitude = undefined,
   pinOrDraw = false
 } = defineProps<{
   disabled?: boolean;
   geoJsonData?: GeoJSON;
-  latitude?: number;
-  longitude?: number;
   pinOrDraw?: boolean;
 }>();
 
@@ -86,7 +82,7 @@ async function initMap() {
 
         if (oldLayer.value) {
           //@ts-ignore - insufficient type definitions
-          map.removeLayer(oldLayer.value);
+          map.removeLayer(toRaw(oldLayer.value));
           oldLayer.value = undefined;
         }
         oldLayer.value = e.layer;
@@ -102,7 +98,7 @@ async function initMap() {
         } else {
           geoJSON.value = geo.toGeoJSON();
 
-          emit('map:polygonUpdated', { geoJSON: geoJSON.value });
+          emit('map:polygonUpdated', { geoJSON: toRaw(geoJSON.value) });
         }
         // Zoom in
         zoomToGeometry(geo);
@@ -114,6 +110,7 @@ async function initMap() {
     map.on('pm:remove', () => {
       emit('map:erased');
     });
+    enableDrawControls();
   }
 }
 
@@ -141,8 +138,7 @@ async function getNearestOccupant(longitude: string, latitude: string) {
 }
 
 function disableInteraction() {
-  map.pm.removeControls();
-
+  if (pinOrDraw) disableDrawControls();
   map.dragging.disable();
   map.touchZoom.disable();
   map.doubleClickZoom.disable();
@@ -152,9 +148,12 @@ function disableInteraction() {
   if (map.tapHold) map.tapHold.disable();
 }
 
-function enableInteraction() {
-  map.pm.addControls(drawControlOptions);
+function disableDrawControls() {
+  map.pm.removeControls();
+}
 
+function enableInteraction() {
+  if (pinOrDraw) enableDrawControls();
   map.dragging.enable();
   map.touchZoom.enable();
   map.doubleClickZoom.enable();
@@ -164,6 +163,10 @@ function enableInteraction() {
   if (map.tapHold) map.tapHold.enable();
 }
 
+function enableDrawControls() {
+  map.pm.addControls(drawControlOptions);
+}
+
 // Map component will be misaligned if mounted while not visible. Trigger resize to fix on show
 // Parent component needs to trigger nextTick().then(() => mapRef?.value?.resizeMap()
 function resizeMap() {
@@ -183,6 +186,7 @@ function setAddressMarker(coords: any) {
   const redIcon = new L.Icon(MAP_ICON_OPTIONS_RED);
   marker = L.marker(coords, { icon: redIcon });
   map.addLayer(marker);
+  oldLayer.value = marker;
 }
 
 function zoomToGeometry(geo: L.GeoJSON) {
@@ -196,14 +200,13 @@ function zoomToGeometry(geo: L.GeoJSON) {
 function drawGeoJson() {
   const geo = L.geoJSON(geoJsonData) as L.GeoJSON;
   geo.addTo(map);
-  return geo;
+  oldLayer.value = geo;
 }
 
-defineExpose({ resizeMap });
+defineExpose({ resizeMap, pinToMap });
 
 onMounted(async () => {
   await initMap();
-
   if (geoJsonData) drawGeoJson();
   if (disabled) disableInteraction();
   else enableInteraction();
@@ -212,13 +215,12 @@ onMounted(async () => {
   removeAllMarkers();
 });
 
-onUpdated(async () => {
-  if (latitude && longitude) {
-    const addressLocation = { lat: latitude, lng: longitude };
-    map.flyTo(addressLocation, 17);
-    setAddressMarker(addressLocation);
-  }
-});
+function pinToMap(lat: number, lng: number) {
+  if (!(lat && lng)) return;
+  const addressLocation = { lat: lat, lng: lng };
+  map.flyTo(addressLocation, 17);
+  setAddressMarker(addressLocation);
+}
 
 watch(
   () => disabled,
diff --git a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
index 85c0bc17..eb60d275 100644
--- a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
+++ b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
@@ -252,8 +252,7 @@ async function onAddressSelect(e: SelectChangeEvent) {
     const properties = e.value?.properties;
     const geometry = e.value?.geometry;
 
-    mapLatitude.value = geometry.coordinates[1];
-    mapLongitude.value = geometry.coordinates[0];
+    mapRef?.value?.pinToMap(geometry.coordinates[1], geometry.coordinates[0]);
 
     formRef.value?.setFieldValue(
       'location.streetAddress',
@@ -263,17 +262,18 @@ async function onAddressSelect(e: SelectChangeEvent) {
     formRef.value?.setFieldValue('location.latitude', geometry?.coordinates[1]);
     formRef.value?.setFieldValue('location.longitude', geometry?.coordinates[0]);
     formRef.value?.setFieldValue('location.province', properties?.provinceCode);
+    clearGeoJSON();
   }
 }
 
-async function onLatLongInputClick() {
+async function onLatLongInput() {
   const validLat = (await formRef?.value?.validateField('location.latitude'))?.valid;
   const validLong = (await formRef?.value?.validateField('location.longitude'))?.valid;
 
   if (validLat && validLong) {
     const location = formRef?.value?.values?.location;
-    mapLatitude.value = location.latitude;
-    mapLongitude.value = location.longitude;
+    if (mapRef.value?.pinToMap) mapRef.value.pinToMap(location.latitude, location.longitude);
+    clearGeoJSON();
   }
 }
 
@@ -320,12 +320,13 @@ function onPermitsHasAppliedChange(e: string, fieldsLength: number, push: Functi
 async function onSaveDraft(data: GenericObject, isAutoSave: boolean = false, showToast: boolean = true) {
   autoSaveRef.value?.stopAutoSave();
 
+  const draftData = omit(data, ['addressSearch']);
   let response;
   try {
     response = await submissionService.updateDraft({
       draftId: draftId,
-      activityId: data.activityId,
-      data: data
+      activityId: draftData.activityId,
+      data: draftData
     });
 
     syncFormAndRoute(response?.data.activityId, response?.data.draftId);
@@ -558,7 +559,7 @@ onBeforeMount(async () => {
     await nextTick();
 
     // Move map pin
-    onLatLongInputClick();
+    onLatLongInput();
   } catch (e) {
     router.replace({ name: RouteName.HOUSING_SUBMISSION_INTAKE });
   }
@@ -577,30 +578,31 @@ watch(
 );
 
 function onPolygonUpdate(data: any) {
-  formRef.value?.setFieldValue('location.geoJSON', data.geoJSON);
   clearAddress();
+  formRef.value?.setFieldValue('location.geoJSON', data.geoJSON);
 }
 
 function onPinUpdate(pinUpdateEvent: PinUpdateEvent) {
   const addressSplit = pinUpdateEvent.address.split(',');
+  clearAddress();
+  clearGeoJSON();
   formRef.value?.setFieldValue('location.streetAddress', addressSplit[0]);
   formRef.value?.setFieldValue('location.locality', addressSplit[1]);
   formRef.value?.setFieldValue('location.province', addressSplit[2]);
   formRef.value?.setFieldValue('location.latitude', pinUpdateEvent.latitude);
   formRef.value?.setFieldValue('location.longitude', pinUpdateEvent.longitude);
-  clearGeoJSON();
 }
 
 function clearAddress() {
-  formRef.value?.resetField('location.streetAddress');
-  formRef.value?.resetField('location.locality');
-  formRef.value?.resetField('location.province');
-  formRef.value?.resetField('location.latitude');
-  formRef.value?.resetField('location.longitude');
+  formRef.value?.setFieldValue('location.streetAddress', null);
+  formRef.value?.setFieldValue('location.locality', null);
+  formRef.value?.setFieldValue('location.province', null);
+  formRef.value?.setFieldValue('location.latitude', null);
+  formRef.value?.setFieldValue('location.longitude', null);
 }
 
 function clearGeoJSON() {
-  formRef.value?.resetField('location.geoJSON');
+  formRef.value?.setFieldValue('location.geoJSON', null);
 }
 </script>
 
@@ -1402,7 +1404,7 @@ function clearGeoJSON() {
                             :disabled="!editable"
                             help-text="Provide a coordinate between 48 and 60"
                             placeholder="Latitude"
-                            @keyup.enter="onLatLongInputClick"
+                            @keyup.enter="onLatLongInput"
                           />
                           <InputNumber
                             class="col-span-4"
@@ -1410,14 +1412,14 @@ function clearGeoJSON() {
                             :disabled="!editable"
                             help-text="Provide a coordinate between -114 and -139"
                             placeholder="Longitude"
-                            @keyup.enter="onLatLongInputClick"
+                            @keyup.enter="onLatLongInput"
                           />
                           <div class="col-span-4">
                             <Button
                               class="lat-long-btn"
                               label="Show on map"
                               :disabled="!editable"
-                              @click="onLatLongInputClick"
+                              @click="onLatLongInput"
                             />
                           </div>
                         </div>

From 94c2b028ec57af8d0819413fd8d8c8b2574a8383 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Mon, 24 Feb 2025 14:04:25 -0800
Subject: [PATCH 10/10] Add button to download geoJson

---
 .../housing/submission/SubmissionForm.vue     |  34 +++++
 .../housing/submission/SubmissionForm.spec.ts | 133 +++++++++++++++++-
 2 files changed, 160 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/housing/submission/SubmissionForm.vue b/frontend/src/components/housing/submission/SubmissionForm.vue
index 1047c5bf..a051cbd7 100644
--- a/frontend/src/components/housing/submission/SubmissionForm.vue
+++ b/frontend/src/components/housing/submission/SubmissionForm.vue
@@ -3,6 +3,8 @@ import { Form } from 'vee-validate';
 import { computed, onMounted, ref } from 'vue';
 import { boolean, number, object, string } from 'yup';
 
+import { formatDateFilename } from '@/utils/formatters';
+
 import {
   CancelButton,
   Checkbox,
@@ -68,6 +70,7 @@ const assigneeOptions: Ref<Array<User>> = ref([]);
 const atsUserLinkModalVisible: Ref<boolean> = ref(false);
 const atsUserDetailsModalVisible: Ref<boolean> = ref(false);
 const atsUserCreateModalVisible: Ref<boolean> = ref(false);
+const geoJson = ref(null);
 const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
 const initialFormValues: Ref<any | undefined> = ref(undefined);
 const showCancelMessage: Ref<boolean> = ref(false);
@@ -216,6 +219,26 @@ function onReOpen() {
   });
 }
 
+const onSaveGeoJson = () => {
+  if (!geoJson.value) return;
+
+  const file = new Blob([JSON.stringify(geoJson.value, null, 2)], {
+    type: 'application/geo+json'
+  });
+
+  const downloadLink = URL.createObjectURL(file);
+  const downloadElement = document.createElement('a');
+  downloadElement.href = downloadLink;
+
+  const currentDateTime = formatDateFilename(new Date().toISOString());
+  const projectName = submissionStore?.getSubmission?.projectName ?? '';
+  const projectActivityId = submissionStore?.getSubmission?.activityId ?? '';
+
+  downloadElement.download = `${currentDateTime}_${projectName}_${projectActivityId}.geojson`;
+  downloadElement.click();
+  URL.revokeObjectURL(downloadLink);
+};
+
 const onSubmit = async (values: any) => {
   try {
     // Convert contact fields into contacts array object then remove form keys from data
@@ -295,6 +318,8 @@ onMounted(async () => {
 
   const locationPIDsAuto = (await mapService.getPIDs(submission.submissionId)).data;
 
+  if (submission.geoJSON) geoJson.value = submission.geoJSON;
+
   // Default form values
   initialFormValues.value = {
     activityId: submission.activityId,
@@ -678,6 +703,15 @@ onMounted(async () => {
         label="Auto generated location PID(s)"
         :disabled="true"
       />
+      <Button
+        v-if="geoJson"
+        id="download-geojson"
+        class="col-start-1 col-span-2 mb-2"
+        aria-label="Download GeoJSON"
+        @click="onSaveGeoJson"
+      >
+        Download GeoJSON
+      </Button>
       <TextArea
         class="col-span-12"
         name="projectLocationDescription"
diff --git a/frontend/tests/unit/components/housing/submission/SubmissionForm.spec.ts b/frontend/tests/unit/components/housing/submission/SubmissionForm.spec.ts
index d158dc33..77902a84 100644
--- a/frontend/tests/unit/components/housing/submission/SubmissionForm.spec.ts
+++ b/frontend/tests/unit/components/housing/submission/SubmissionForm.spec.ts
@@ -1,3 +1,5 @@
+import { nextTick } from 'vue';
+
 import SubmissionForm from '@/components/housing/submission/SubmissionForm.vue';
 import { ApplicationStatus } from '@/utils/enums/housing';
 import { GroupName } from '@/utils/enums/application';
@@ -10,12 +12,13 @@ import { mount } from '@vue/test-utils';
 import type { Submission, IDIRAttribute, BasicBCeIDAttribute, BusinessBCeIDAttribute } from '@/types';
 
 import type { AxiosResponse } from 'axios';
+// import { geoJSON } from 'leaflet';
 
-const getPIDs = vi.spyOn(mapService, 'getPIDs');
-const useUserService = vi.spyOn(userService, 'searchUsers');
+const getPIDsSpy = vi.spyOn(mapService, 'getPIDs');
+const searchUsersSpy = vi.spyOn(userService, 'searchUsers');
 
-useUserService.mockResolvedValue({ data: [{ fullName: 'dummyName' }] } as AxiosResponse);
-getPIDs.mockResolvedValue({ data: { pids: ['123456789'] } } as AxiosResponse);
+searchUsersSpy.mockResolvedValue({ data: [{ fullName: 'dummyName' }] } as AxiosResponse);
+getPIDsSpy.mockResolvedValue({ data: { pids: ['123456789'] } } as AxiosResponse);
 
 const currentDate = new Date().toISOString();
 
@@ -120,9 +123,10 @@ const testSubmission: Submission = {
   updatedAt: currentDate
 };
 
-const wrapperSettings = (testSubmissionProp = testSubmission) => ({
+const wrapperSettings = (testSubmissionProp = testSubmission, editableProp = true) => ({
   props: {
-    submission: testSubmissionProp
+    submission: testSubmissionProp,
+    editable: editableProp
   },
   global: {
     plugins: [
@@ -147,8 +151,123 @@ describe('SubmissionForm.vue', () => {
     vi.clearAllMocks();
   });
 
-  it('renders the component with the provided props', () => {
+  it('renders the component with the provided props', async () => {
     const wrapper = mount(SubmissionForm, wrapperSettings());
+    await nextTick();
+
     expect(wrapper).toBeTruthy();
   });
+
+  it('renders the correct amount of dropdowns', async () => {
+    const wrapper = mount(SubmissionForm, wrapperSettings());
+    // Note: <Form> component's v-if does not settle until after two nextTick() calls.
+    // Both will be required if the DOM querying is required.
+    await nextTick();
+    await nextTick();
+
+    const elements = wrapper.findAll('.p-select-dropdown');
+    expect(elements.length).toBe(19);
+  });
+
+  it('renders the correct amount of input components', async () => {
+    const wrapper = mount(SubmissionForm, wrapperSettings());
+    await nextTick();
+    await nextTick();
+
+    // includes datepicker and input mask components, but not dropdowns
+    const elements = wrapper.findAll('.p-inputtext');
+    expect(elements.length).toBe(21);
+  });
+
+  it('renders the correct amount of datepickers components', async () => {
+    const wrapper = mount(SubmissionForm, wrapperSettings());
+    await nextTick();
+    await nextTick();
+
+    const elements = wrapper.findAll('.p-datepicker-input');
+    expect(elements.length).toBe(1);
+  });
+
+  it('renders the correct amount of input mask components (phone number)', async () => {
+    const wrapper = mount(SubmissionForm, wrapperSettings());
+    await nextTick();
+    await nextTick();
+
+    const elements = wrapper.findAll('.p-inputmask');
+    expect(elements.length).toBe(1);
+  });
+
+  it('renders the correct amount of text area components', async () => {
+    const wrapper = mount(SubmissionForm, wrapperSettings());
+    await nextTick();
+    await nextTick();
+
+    const elements = wrapper.findAll('textarea');
+    expect(elements.length).toBe(4);
+  });
+
+  it('searches for users onMount', async () => {
+    const mountSubmission = { ...testSubmission, assignedUserId: 'testAssignedUseId' };
+    const wrapper = mount(SubmissionForm, wrapperSettings(mountSubmission));
+    await nextTick();
+
+    expect(wrapper.isVisible()).toBeTruthy();
+    expect(searchUsersSpy).toHaveBeenCalledTimes(1);
+    expect(searchUsersSpy).toHaveBeenCalledWith({ userId: [mountSubmission.assignedUserId] });
+  });
+
+  it('gets PIDs onMount', async () => {
+    // const mountSubmission = { ...testSubmission, assignedUserId: 'testAssignedUseId' };
+    const wrapper = mount(SubmissionForm, wrapperSettings());
+    await nextTick();
+
+    expect(wrapper.isVisible()).toBeTruthy();
+    expect(getPIDsSpy).toHaveBeenCalledTimes(1);
+    expect(getPIDsSpy).toHaveBeenCalledWith(testSubmission.submissionId);
+  });
+
+  it('there are correct numbers of disabled components when editable prop is false', async () => {
+    const wrapper = mount(SubmissionForm, wrapperSettings(undefined, false));
+    await nextTick();
+    await nextTick();
+
+    const elements = wrapper.findAll('.p-disabled');
+    expect(wrapper.vm.$props?.editable).toBe(false);
+    expect(elements.length).toBe(23);
+  });
+
+  it('geojson download btn not visible when no geojson', async () => {
+    const modifiedSubmission = { ...testSubmission, geoJSON: undefined };
+
+    const wrapper = mount(SubmissionForm, wrapperSettings(modifiedSubmission, false));
+    await nextTick();
+    await nextTick();
+
+    expect(wrapper.find('#download-geojson').exists()).toBe(false);
+  });
+
+  it('geojson download btn visible when geojson is in submission', async () => {
+    const modifiedSubmission = { ...testSubmission, geoJSON: {} };
+
+    const wrapper = mount(SubmissionForm, wrapperSettings(modifiedSubmission, false));
+    await nextTick();
+    await nextTick();
+
+    const downloadBtn = wrapper.find('#download-geojson');
+    expect(downloadBtn.exists()).toBe(true);
+    expect(downloadBtn.isVisible()).toBe(true);
+  });
+
+  it('geojson download btn visible when geojson is in submission', async () => {
+    const testGeoJson = { feature: 'POINT', data: 'test' };
+    const modifiedSubmission = { ...testSubmission, geoJSON: testGeoJson };
+
+    const wrapper = mount(SubmissionForm, wrapperSettings(modifiedSubmission, false));
+    await nextTick();
+    await nextTick();
+
+    const downloadBtn = wrapper.find('#download-geojson');
+    expect(downloadBtn.exists()).toBe(true);
+    expect(downloadBtn.isVisible()).toBe(true);
+  });
 });