Merge pull request #26 from RyanBirtch-aot/my-location-button

Geocoder

app/frontend/package.json

@@ -44,6 +44,7 @@
     "keycloak-js": "^21.1.1",
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.4",
+    "leaflet-geosearch": "^4.0.0",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
     "moment": "^2.29.4",

components/package.json

@@ -54,6 +54,7 @@
     "formiojs": "^4.14.6",
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.4",
+    "leaflet-geosearch": "^4.0.0",
     "lodash": "^4.17.21",
     "native-promise-only": "^0.8.1",
     "path-browserify": "^1.0.1",
@@ -62,6 +63,7 @@
   "devDependencies": {
     "@types/chai": "^4.3.1",
     "@types/ejs": "^3.1.1",
+    "@types/google.maps": "^3.58.1",
     "@types/mocha": "^9.1.1",
     "@types/node": "^16.11.8",
     "@types/sinon": "^10.0.12",

components/src/components/Map/Component.ts

@@ -42,7 +42,7 @@ export default class Component extends (FieldComponent as any) {
 
   render() {
     return super.render(
-      `<div id="map-${this.componentID}" style="height:400px; z-index:1;"></div>`
+      `<div id="map-${this.componentID}" style="height:400px; z-index:1;"> </div>`
     );
   }
 
@@ -57,13 +57,19 @@ export default class Component extends (FieldComponent as any) {
     const form = document.getElementsByClassName('formio');
 
     const drawOptions = {
-      marker: false,
-      circlemarker: false,
-      polygon: false,
-      polyline: false,
-      circle: false,
       rectangle: null,
+      circle: false,
+      polyline: false,
+      polygon: false,
+      circlemarker: false,
+      marker: false,
     };
+    // marker: false,
+    // circlemarker: false,
+    // polygon: false,
+    // polyline: false,
+    // circle: false,
+    // rectangle: null,
     // set marker type from user choice
     if (this.component.markerType) {
       for (const [key, value] of Object.entries(this.component.markerType)) {
@@ -85,6 +91,7 @@ export default class Component extends (FieldComponent as any) {
       center,
       defaultValue,
       myLocation,
+      bcGeocoder,
     } = this.component;
 
     const { readOnly: viewMode } = this.options;
@@ -108,6 +115,7 @@ export default class Component extends (FieldComponent as any) {
       onDrawnItemsChange: this.saveDrawnItems.bind(this),
       viewMode,
       myLocation,
+      bcGeocoder,
     });
 
     // Load existing data if available

components/src/components/Map/editForm/Component.edit.data.ts

@@ -21,13 +21,6 @@ export default {
         'This will be the value for this field, before user interaction.',
       input: true,
     },
-    {
-      label: 'How many Markers per Submission?',
-      key: 'numPoints',
-      type: 'simplenumber',
-      defaultValue: 1,
-      input: true,
-    },
 
     {
       label: 'Default Zoom Level',
@@ -113,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,
+    },
   ],
 };

components/src/components/Map/services/BCGeocoderProvider.ts

@@ -0,0 +1,28 @@
+import { OpenStreetMapProvider } from 'leaflet-geosearch';
+import { EndpointArgument } from 'leaflet-geosearch/dist/providers/provider';
+
+export class BCGeocoderProvider extends OpenStreetMapProvider {
+  endpoint({ query, type }: EndpointArgument): string {
+    console.log(query);
+    return this.getUrl(import.meta.env.VITE_CHEFS_GEO_ADDRESS_APIURL, {
+      addressString: query as string,
+    });
+  }
+  parse({ data }) {
+    return data.features
+      .filter(function (feature) {
+        if (!feature.geometry.coordinates) return false;
+        if (feature.properties.fullAddress == 'BC') return false;
+        return true;
+      })
+      .map(function (feature) {
+        return {
+          x: feature.geometry.coordinates[0],
+          y: feature.geometry.coordinates[1],
+          label: feature.properties.fullAddress,
+          matchPrecision: feature.properties.matchPrecision,
+          raw: feature,
+        };
+      });
+  }
+}

components/src/components/Map/services/MapService.ts

@@ -1,7 +1,10 @@
 import * as L from 'leaflet';
+import * as GeoSearch from 'leaflet-geosearch';
+import { BCGeocoderProvider } from '../services/BCGeocoderProvider';
 import 'leaflet-draw';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-draw/dist/leaflet.draw-src.css';
+import 'leaflet-geosearch/dist/geosearch.css';
 
 const DEFAULT_MAP_LAYER_URL =
   'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
@@ -26,6 +29,7 @@ interface MapServiceOptions {
   onDrawnItemsChange: (items: any) => void; // Support both single and multiple items
   viewMode?: boolean;
   myLocation?: boolean;
+  bcGeocoder: boolean;
 }
 
 class MapService {
@@ -82,6 +86,7 @@ class MapService {
       readOnlyMap,
       viewMode,
       myLocation,
+      bcGeocoder,
     } = options;
 
     if (drawOptions.rectangle) {
@@ -146,6 +151,21 @@ class MapService {
       myLocationControl.addTo(map);
     }
 
+    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) {
       if (!viewMode) {