Added My Location button

components/src/components/Map/Component.ts

@@ -55,7 +55,7 @@ export default class Component extends (FieldComponent as any) {
   loadMap() {
     const mapContainer = document.getElementById(`map-${this.componentID}`);
     const form = document.getElementsByClassName('formio');
-    let drawOptions = {
+    const drawOptions = {
       marker: false,
       circlemarker: false,
       polygon: false,
@@ -72,8 +72,14 @@ export default class Component extends (FieldComponent as any) {
       drawOptions[this.component.markerType] = true; // set marker type from user choice
     }
 
-    const { numPoints, defaultZoom, readOnlyMap, center, defaultValue } =
-      this.component;
+    const {
+      numPoints,
+      defaultZoom,
+      readOnlyMap,
+      center,
+      defaultValue,
+      myLocation,
+    } = this.component;
 
     const { readOnly: viewMode } = this.options;
 
@@ -95,6 +101,7 @@ export default class Component extends (FieldComponent as any) {
       defaultValue,
       onDrawnItemsChange: this.saveDrawnItems.bind(this),
       viewMode,
+      myLocation,
     });
 
     // Load existing data if available
@@ -147,8 +154,6 @@ export default class Component extends (FieldComponent as any) {
     // Additional logic to render the saved data on the map if necessary
     if (this.mapService && value && value.features) {
       try {
-        //const parsedValue = JSON.parse(value);
-
         this.mapService.loadDrawnItems(value.features);
       } catch (error) {
         console.error('Failed to parse value:', error);

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

@@ -76,5 +76,13 @@ export default {
       type: 'simplecheckbox',
       input: true,
     },
+    {
+      label: 'Submitter "My Location" button',
+      description:
+        'This allows for the user to center the map on their location.',
+      key: 'myLocation',
+      type: 'simplecheckbox',
+      input: true,
+    },
   ],
 };

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

@@ -25,6 +25,7 @@ interface MapServiceOptions {
   readOnlyMap?: boolean;
   onDrawnItemsChange: (items: any) => void; // Support both single and multiple items
   viewMode?: boolean;
+  myLocation?: boolean;
 }
 
 class MapService {
@@ -38,6 +39,7 @@ class MapService {
     if (options.mapContainer) {
       const { map, drawnItems } = this.initializeMap(options);
       this.map = map;
+
       // this.map = map;
       this.drawnItems = drawnItems;
 
@@ -46,7 +48,7 @@ class MapService {
       setTimeout(() => window.dispatchEvent(new Event('resize')), 0);
       // Event listener for drawn objects
       map.on('draw:created', (e) => {
-        let layer = e.layer;
+        const layer = e.layer;
         if (drawnItems.getLayers().length === options.numPoints) {
           L.popup()
             .setLatLng(layer.getLatLng())
@@ -71,22 +73,23 @@ class MapService {
   }
 
   initializeMap(options: MapServiceOptions) {
-    let {
+    const {
       mapContainer,
       center,
       drawOptions,
       form,
       defaultZoom,
       readOnlyMap,
       viewMode,
+      myLocation,
     } = options;
 
     if (drawOptions.rectangle) {
       drawOptions.rectangle.showArea = false;
     }
-    //Check to see if there is the formio read only class in the current page, and set notEditable to true if the map is inside a read-only page
+    // Check to see if there is the formio read only class in the current page, and set notEditable to true if the map is inside a read-only page
 
-    //if the user chooses it to be read-only, and the
+    // if the user chooses it to be read-only, and the
     const map = L.map(mapContainer, {
       zoomAnimation: viewMode,
     }).setView(center, defaultZoom || DEFAULT_MAP_ZOOM);
@@ -95,14 +98,58 @@ class MapService {
     }).addTo(map);
 
     // Initialize Draw Layer
-    let drawnItems = new L.FeatureGroup();
+    const drawnItems = new L.FeatureGroup();
 
     map.addLayer(drawnItems);
 
+    if (myLocation) {
+      const myLocationButton = L.Control.extend({
+        options: {
+          position: 'bottomright',
+        },
+        onAdd(map) {
+          const container = L.DomUtil.create(
+            'div',
+            'leaflet-bar leaflet-control'
+          );
+          const button = L.DomUtil.create(
+            'a',
+            'leaflet-control-button',
+            container
+          );
+          button.innerHTML = '<i class="fa fa-location-arrow"></i>';
+          L.DomEvent.disableClickPropagation(button);
+          L.DomEvent.on(button, 'click', () => {
+            if ('geolocation' in navigator) {
+              navigator.geolocation.getCurrentPosition((position) => {
+                map.setView(
+                  [position.coords.latitude, position.coords.longitude],
+                  14
+                );
+                L.popup()
+                  .setLatLng([
+                    position.coords.latitude,
+                    position.coords.longitude,
+                  ])
+                  .setContent(
+                    `(${position.coords.latitude}, ${position.coords.longitude})`
+                  )
+                  .openOn(map);
+              });
+            }
+          });
+          container.title = 'Click to center the map on your location';
+          return container;
+        },
+      });
+      const myLocationControl = new myLocationButton();
+      myLocationControl.addTo(map);
+    }
+
     // Add Drawing Controllers
     if (!readOnlyMap) {
       if (!viewMode) {
-        let drawControl = new L.Control.Draw({
+        const drawControl = new L.Control.Draw({
           draw: drawOptions,
           edit: {
             featureGroup: drawnItems,