Only ${options.numPoints} features per submission
` + ) + .addTo(map); + } else { + drawnItems.addLayer(layer); + } + this.bindPopupToLayer(layer); + options.onDrawnItemsChange(drawnItems.getLayers()); + }); + map.on(L.Draw.Event.DELETED, (e) => { + options.onDrawnItemsChange(drawnItems.getLayers()); + }); + map.on(L.Draw.Event.EDITSTOP, (e) => { + options.onDrawnItemsChange(drawnItems.getLayers()); + }); + map.on('resize', () => { + map.invalidateSize(); + }); + } + } + + initializeMap(options: MapServiceOptions) { + const { + mapContainer, + center, + drawOptions, + form, + defaultZoom, + readOnlyMap, + viewMode, + myLocation, + bcGeocoder, + } = 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 + + // if the user chooses it to be read-only, and the + const map = L.map(mapContainer, { + zoomAnimation: viewMode, + }).setView(center, defaultZoom || DEFAULT_MAP_ZOOM); + L.tileLayer(DEFAULT_MAP_LAYER_URL, { + attribution: DEFAULT_LAYER_ATTRIBUTION, + }).addTo(map); + + // Initialize Draw Layer + 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 = ''; + 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); + } + + if (bcGeocoder) { + const geocoderControl = new (GeoSearch.GeoSearchControl as any)({ + provider: new BCGeocoderProvider(), + style: 'bar', + position: 'bottomleft', + showMarker: false, + }); + map.addControl(geocoderControl); + map.on('geosearch/showlocation', (e) => { + L.popup() + .setLatLng([(e as any).location.y, (e as any).location.x]) + .setContent(`${(e as any).location.label}`) + .openOn(map); + }); + } + + // Add Drawing Controllers + if (!readOnlyMap) { + if (!viewMode) { + const drawControl = new L.Control.Draw({ + draw: drawOptions, + edit: { + featureGroup: drawnItems, + }, + }); + map.addControl(drawControl); + } + } + + // Checking to see if the map should be interactable + const componentEditNode = + document.getElementsByClassName(COMPONENT_EDIT_CLASS); + if (form) { + if (form[0]?.classList.contains('formbuilder')) { + map.invalidateSize(); + map.dragging.disable(); + map.scrollWheelZoom.disable(); + if (this.hasChildNode(componentEditNode[0], mapContainer)) { + map.dragging.enable(); + map.scrollWheelZoom.enable(); + } + } + } + return { map, drawnItems }; + } + bindPopupToLayer(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) { + const { drawnItems } = this; + if (!drawnItems) { + console.error('drawnItems is undefined'); + return; + } + drawnItems.clearLayers(); + if (!Array.isArray(items)) { + items = [items]; + } + items.forEach((item) => { + let layer; + if (item.type === 'marker') { + layer = L.marker(item.coordinates); + } else if (item.type === 'rectangle') { + layer = L.rectangle(item.bounds); + } else if (item.type === 'circle') { + layer = L.circle(item.coordinates, { radius: item.radius }); + } else if (item.type === 'polygon') { + layer = L.polygon(item.coordinates); + } else if (item.type === 'polyline') { + layer = L.polyline(item.coordinates); + } + if (layer) { + drawnItems.addLayer(layer); + this.bindPopupToLayer(layer); + } + }); + } + + hasChildNode(parent, targetNode) { + if (parent === targetNode) { + return true; + } + for (let i = 0; i < parent?.childNodes?.length; i++) { + if (this.hasChildNode(parent.childNodes[i], targetNode)) { + return true; + } + } + return false; + } +} +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',