Geocoder working for BC

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)) {

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',

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;
+  geocoder: any;
 }
 
 class MapService {
@@ -146,6 +150,24 @@ 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);
+
     // Add Drawing Controllers
     if (!readOnlyMap) {
       if (!viewMode) {