Only one marker for submission
') + .openOn(map); + } else { + drawnItems.addLayer(layer); + } + this.bindPopupToLayer(layer); + options.onDrawnItemsChange(drawnItems.getLayers()); + }); + } + } + + initializeMap(options: MapServiceOptions) { + let { mapContainer, center, drawOptions, form, defaultZoom } = options; + if (drawOptions.rectangle) { + drawOptions.rectangle.showArea = false; + } + const map = L.map(mapContainer).setView( + center, + defaultZoom || DEFAULT_MAP_ZOOM + ); + L.tileLayer(DEFAULT_MAP_LAYER_URL, { + attribution: DEFAULT_LAYER_ATTRIBUTION, + }).addTo(map); + + // Initialize Draw Layer + let drawnItems = new L.FeatureGroup(); + map.addLayer(drawnItems); + + // Add Drawing Controllers + let drawControl = new L.Control.Draw({ + draw: drawOptions, + edit: { + featureGroup: drawnItems, + }, + }); + + if (form && form[0]?.classList.contains('formbuilder')) { + map.dragging.disable(); + map.scrollWheelZoom.disable(); + } + + // Attach Controls to map + map.addControl(drawControl); + return { map, drawnItems }; + } + + bindPopupToLayer(layer: L.Layer) { + if (layer instanceof L.Marker) { + layer + .bindPopup( + `(${layer.getLatLng().lat.toFixed(DECIMALS_LATLNG)},${layer + .getLatLng() + .lng.toFixed(DECIMALS_LATLNG)})
` + ) + .openPopup(); + } else if (layer instanceof L.Circle) { + layer + .bindPopup( + `(${layer.getLatLng().lat.toFixed(DECIMALS_LATLNG)},${layer + .getLatLng() + .lng.toFixed(DECIMALS_LATLNG)})
` + ) + .openPopup(); + } else if (layer instanceof L.Rectangle || layer instanceof L.Polygon) { + const bounds = layer.getBounds(); + const center = bounds.getCenter(); + layer + .bindPopup( + `(${center.lat.toFixed(DECIMALS_LATLNG)},${center.lng.toFixed( + DECIMALS_LATLNG + )})
` + ) + .openPopup(); + } + } + + loadDrawnItems(items: any) { + const { drawnItems } = this; + + // Ensure drawnItems is defined before attempting to clear layers + if (!drawnItems) { + console.error('drawnItems is undefined'); + return; + } + + drawnItems.clearLayers(); + + // Check if items is an array + if (!Array.isArray(items)) { + items = [items]; + } + + items.forEach((item) => { + let layer; + if (item.type === 'marker') { + layer = L.marker(item.latlng); + } else if (item.type === 'rectangle') { + layer = L.rectangle(item.bounds); + } else if (item.type === 'circle') { + layer = L.circle(item.latlng, { radius: item.radius }); + } else if (item.type === 'polygon') { + layer = L.polygon(item.latlngs); + } else if (item.type === 'polyline') { + layer = L.polyline(item.latlngs); + } + + if (layer) { + drawnItems.addLayer(layer); + this.bindPopupToLayer(layer); + } + }); + } +} + +export default MapService; diff --git a/components/src/components/index.ts b/components/src/components/index.ts index 8361f59d1..ae1f2cf05 100755 --- a/components/src/components/index.ts +++ b/components/src/components/index.ts @@ -45,6 +45,7 @@ import simplesignatureadvanced from './SimpleSignatureAdvanced/Component'; import simplebuttonadvanced from './SimpleButtonAdvanced/Component'; import bcaddress from './BCAddress/Component'; import simplebcaddress from './SimpleBCAddress/Component'; +import map from './Map/Component'; export default { orgbook, @@ -93,5 +94,6 @@ export default { simplesignatureadvanced, simplebuttonadvanced, bcaddress, - simplebcaddress + simplebcaddress, + map, }; diff --git a/components/webpack.config.js b/components/webpack.config.js index c82fc573d..446560860 100755 --- a/components/webpack.config.js +++ b/components/webpack.config.js @@ -1,6 +1,14 @@ const path = require('path'); module.exports = { + module: { + rules: [ + { + test: /\.css$/i, + use: ["css-loader"], + }, + ], + }, entry: path.join(path.resolve(__dirname, 'lib'), 'index.js'), output: { library: 'BcGovFormioComponents',