From 04a7d2fb10a907821df0cdf99b5340ed912f09ed Mon Sep 17 00:00:00 2001 From: RyanBirtch-aot Date: Tue, 15 Oct 2024 18:39:54 +0000 Subject: [PATCH] Adding form and location popups --- components/src/components/Map/Component.ts | 2 ++ .../Map/editForm/Component.edit.data.ts | 9 +++++ .../src/components/Map/services/MapService.ts | 34 +++++++++---------- 3 files changed, 27 insertions(+), 18 deletions(-) diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts index 1a031b8b6..c3fb06650 100644 --- 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 index d047abf33..ac89cb0b3 100644 --- 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 index edfd9b732..3cccb849b 100644 --- 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) {