diff --git a/app/frontend/src/components/designer/FormDesigner.vue b/app/frontend/src/components/designer/FormDesigner.vue
index 8be4e901a..a40bcb83b 100644
--- a/app/frontend/src/components/designer/FormDesigner.vue
+++ b/app/frontend/src/components/designer/FormDesigner.vue
@@ -184,7 +184,7 @@ export default {
               simplefile: this.form.userType !== this.ID_MODE.PUBLIC,
               bcaddress: true,
               simplebcaddress: true,
-              MapComponent: true,
+              map: true,
             },
           },
         },
diff --git a/components/package-lock.json b/components/package-lock.json
index 98a073220..0b324868f 100644
--- a/components/package-lock.json
+++ b/components/package-lock.json
@@ -12,6 +12,7 @@
         "@bcgov/smk": "^1.2.1",
         "autocompleter": "^7.0.1",
         "formiojs": "^4.14.6",
+        "leaflet": "^1.9.4",
         "lodash": "^4.17.21",
         "native-promise-only": "^0.8.1",
         "path-browserify": "^1.0.1",
@@ -4380,6 +4381,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "node_modules/liftoff": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-3.1.0.tgz",
diff --git a/components/package.json b/components/package.json
index 70e717b89..759daf3ae 100755
--- a/components/package.json
+++ b/components/package.json
@@ -50,6 +50,7 @@
     "@bcgov/smk": "^1.2.1",
     "autocompleter": "^7.0.1",
     "formiojs": "^4.14.6",
+    "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "native-promise-only": "^0.8.1",
     "path-browserify": "^1.0.1",
diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts
index 9b5bf00a2..4afa3f19b 100644
--- a/components/src/components/Map/Component.ts
+++ b/components/src/components/Map/Component.ts
@@ -2,55 +2,53 @@ import { Components } from 'formiojs';
 const FieldComponent = (Components as any).components.field;
 // import MapService from './services/MapService';
 
-const CENTER = [48.41939025932759,-123.37029576301576]
+const CENTER = [48.41939025932759, -123.37029576301576];
 
-class Component extends (FieldComponent as any) {
-    static schema(...extend) {
-        return FieldComponent.schema({
-            type: 'map',
-            label: 'Map',
-            key: 'map',
-            input: true,
-            ...extend,
-        });
-    }
-    static get builderInfo() {
-        return {
-            title: 'Map',
-            group: 'basic',
-            icon: 'map',
-            weight: 70,
-            schema: Component.schema(),
-        };
-    }
-    
-    render() {
-        return super.render(        
-        `
+export default class Component extends (FieldComponent as any) {
+  static schema(...extend) {
+    return FieldComponent.schema({
+      type: 'map',
+      label: 'Map',
+      key: 'map',
+      input: true,
+      ...extend,
+    });
+  }
+  static get builderInfo() {
+    return {
+      title: 'Map',
+      group: 'basic',
+      icon: 'map',
+      weight: 70,
+      schema: Component.schema(),
+    };
+  }
+
+  render() {
+    return super.render(
+      `
         <div id="mapContainer" style="height:400px; z-index:1;"></div>
         
         `
-        )
-    }
-    attach(element) {
-        const superAttach = super.attach(element);
-        this.loadMap();
-        return superAttach
-    }
-    loadMap() {
-        const mapContainer = document.getElementById("mapContainer");
-        const form = document.getElementsByClassName("formio")
-        const drawOptions = {
-            circlemarker:false,
-            polygon: false,
-            polyline: false,
-            rectangle:false
-        }
-        // MapService({mapContainer, drawOptions, center:CENTER, form})
-
-    }
-
+    );
+  }
+  attach(element) {
+    const superAttach = super.attach(element);
+    this.loadMap();
+    return superAttach;
+  }
+  loadMap() {
+    const mapContainer = document.getElementById('mapContainer');
+    const form = document.getElementsByClassName('formio');
+    const drawOptions = {
+      circlemarker: false,
+      polygon: false,
+      polyline: false,
+      rectangle: false,
+    };
+    // MapService({mapContainer, drawOptions, center:CENTER, form})
+  }
 }
 
 // Components.addComponent('map', MapComponent);
-export default Component;
+export {};
diff --git a/components/src/components/index.ts b/components/src/components/index.ts
index 13289e107..ae1f2cf05 100755
--- a/components/src/components/index.ts
+++ b/components/src/components/index.ts
@@ -45,7 +45,7 @@ import simplesignatureadvanced from './SimpleSignatureAdvanced/Component';
 import simplebuttonadvanced from './SimpleButtonAdvanced/Component';
 import bcaddress from './BCAddress/Component';
 import simplebcaddress from './SimpleBCAddress/Component';
-import MapComponent from './Map/Component';
+import map from './Map/Component';
 
 export default {
   orgbook,
@@ -95,5 +95,5 @@ export default {
   simplebuttonadvanced,
   bcaddress,
   simplebcaddress,
-  MapComponent,
+  map,
 };