From 5a41d021c9385cd2e2aab41f5e151e00928ceea1 Mon Sep 17 00:00:00 2001 From: RyanBirtch-aot Date: Mon, 23 Sep 2024 18:37:42 +0000 Subject: [PATCH 1/2] Added My Location button --- components/src/components/Map/Component.ts | 11 ++++- .../Map/editForm/Component.edit.data.ts | 8 +++ .../src/components/Map/services/MapService.ts | 49 +++++++++++++++++++ 3 files changed, 66 insertions(+), 2 deletions(-) diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts index 2c5d35127..7275147e0 100644 --- a/components/src/components/Map/Component.ts +++ b/components/src/components/Map/Component.ts @@ -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 diff --git a/components/src/components/Map/editForm/Component.edit.data.ts b/components/src/components/Map/editForm/Component.edit.data.ts index 74f60d61f..29d343100 100644 --- a/components/src/components/Map/editForm/Component.edit.data.ts +++ b/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, + }, ], }; diff --git a/components/src/components/Map/services/MapService.ts b/components/src/components/Map/services/MapService.ts index 0f522eb95..9e3ac9ef0 100644 --- a/components/src/components/Map/services/MapService.ts +++ b/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; @@ -79,7 +81,9 @@ class MapService { defaultZoom, readOnlyMap, viewMode, + myLocation, } = options; + console.log(options); if (drawOptions.rectangle) { drawOptions.rectangle.showArea = false; @@ -99,6 +103,51 @@ class MapService { map.addLayer(drawnItems); + if (myLocation) { + const myLocationButton = L.Control.extend({ + options: { + position: 'topright', + }, + onAdd: function (map) { + var container = L.DomUtil.create( + 'div', + 'leaflet-bar leaflet-control' + ); + var button = L.DomUtil.create( + 'a', + 'leaflet-control-button', + container + ); + button.innerHTML = ''; + L.DomEvent.disableClickPropagation(button); + L.DomEvent.on(button, 'click', function () { + 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; + }, + onRemove: function (map) {}, + }); + var myLocationControl = new myLocationButton(); + myLocationControl.addTo(map); + } + // Add Drawing Controllers if (!readOnlyMap) { if (!viewMode) { From 73395f559fb1e43012bc1f1260676db1a95ef216 Mon Sep 17 00:00:00 2001 From: RyanBirtch-aot Date: Mon, 23 Sep 2024 19:21:03 +0000 Subject: [PATCH 2/2] linting fixes --- components/src/components/Map/Component.ts | 4 +-- .../src/components/Map/services/MapService.ts | 26 +++++++++---------- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts index 7275147e0..bc92c7f8f 100644 --- a/components/src/components/Map/Component.ts +++ b/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, @@ -154,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); diff --git a/components/src/components/Map/services/MapService.ts b/components/src/components/Map/services/MapService.ts index 9e3ac9ef0..360eee268 100644 --- a/components/src/components/Map/services/MapService.ts +++ b/components/src/components/Map/services/MapService.ts @@ -48,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()) @@ -73,7 +73,7 @@ class MapService { } initializeMap(options: MapServiceOptions) { - let { + const { mapContainer, center, drawOptions, @@ -83,14 +83,13 @@ class MapService { viewMode, myLocation, } = options; - console.log(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); @@ -99,28 +98,28 @@ 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: 'topright', + position: 'bottomright', }, - onAdd: function (map) { - var container = L.DomUtil.create( + onAdd(map) { + const container = L.DomUtil.create( 'div', 'leaflet-bar leaflet-control' ); - var button = L.DomUtil.create( + const button = L.DomUtil.create( 'a', 'leaflet-control-button', container ); button.innerHTML = ''; L.DomEvent.disableClickPropagation(button); - L.DomEvent.on(button, 'click', function () { + L.DomEvent.on(button, 'click', () => { if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition((position) => { map.setView( @@ -142,16 +141,15 @@ class MapService { container.title = 'Click to center the map on your location'; return container; }, - onRemove: function (map) {}, }); - var myLocationControl = new myLocationButton(); + 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,