Adding form and location popups

RyanBirtch-aot · Oct 15, 2024 · 04a7d2f · 04a7d2f
1 parent 47d32a5
commit 04a7d2f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts
@@ -91,6 +91,7 @@ export default class Component extends (FieldComponent as any) {
       center,
       defaultValue,
       myLocation,
+      bcGeocoder,
     } = this.component;
 
     const { readOnly: viewMode } = this.options;
@@ -114,6 +115,7 @@ export default class Component extends (FieldComponent as any) {
       onDrawnItemsChange: this.saveDrawnItems.bind(this),
       viewMode,
       myLocation,
+      bcGeocoder,
     });
 
     // Load existing data if available

diff --git a/components/src/components/Map/editForm/Component.edit.data.ts b/components/src/components/Map/editForm/Component.edit.data.ts
@@ -106,5 +106,14 @@ export default {
       input: true,
       defaultValue: true,
     },
+    {
+      label: 'Enable BC Address Autocomplete',
+      description:
+        'This allows for the user to enter an address and have results appear in a dropdown. The user can then select the result which fits best and have the map center on that location',
+      key: 'bcGeocoder',
+      type: 'simplecheckboxadvanced',
+      input: true,
+      defaultValue: true,
+    },
   ],
 };
diff --git a/components/src/components/Map/services/MapService.ts b/components/src/components/Map/services/MapService.ts
@@ -29,7 +29,7 @@ interface MapServiceOptions {
   onDrawnItemsChange: (items: any) => void; // Support both single and multiple items
   viewMode?: boolean;
   myLocation?: boolean;
-  geocoder: any;
+  bcGeocoder: boolean;
 }
 
 class MapService {
@@ -86,6 +86,7 @@ class MapService {
       readOnlyMap,
       viewMode,
       myLocation,
+      bcGeocoder,
     } = options;
 
     if (drawOptions.rectangle) {
@@ -150,23 +151,20 @@ class MapService {
       myLocationControl.addTo(map);
     }
 
-    //Geocoder Control
-    // const geoControl = new GeoSearch.GeoSearchControl({
-
-    // })
-    const geocoderControl = new (GeoSearch.GeoSearchControl as any)({
-      provider: new BCGeocoderProvider(),
-      style: 'bar',
-      position: 'bottomleft',
-    });
-
-    // const geocoderControl = new (GeoSearch.GeoSearchControl as any)({
-    //   provider: new GeoSearch.OpenStreetMapProvider(),
-    //   style: 'bar',
-    //   position: 'bottomleft',
-    // });
-
-    map.addControl(geocoderControl);
+    if (bcGeocoder) {
+      const geocoderControl = new (GeoSearch.GeoSearchControl as any)({
+        provider: new BCGeocoderProvider(),
+        style: 'bar',
+        position: 'bottomleft',
+      });
+      map.addControl(geocoderControl);
+      map.on('geosearch/showlocation', (e) => {
+        L.popup()
+          .setLatLng([(e as any).location.y, (e as any).location.x])
+          .setContent(`${(e as any).location.label}`)
+          .openOn(map);
+      });
+    }
 
     // Add Drawing Controllers
     if (!readOnlyMap) {