![\\\\\\\"Responsive](\\\\\\\"https://geoportal.survey.gov.bn/images/icons/SP_Status.png\\\\\\\"){kind=icon}
\\\\n\\\\t\\\\t\\\\t\\\\t![](\"/images/buy.png\")
';\n button.setAttribute('title', 'Purchase');\n var element = document.createElement('div');\n element.className = 'change-purchasep ol-unselectable ol-control';\n element.appendChild(button);\n Control.call(this, {\n element: element,\n target: options.target\n });\n button.addEventListener('click', this.handleLayersInfo.bind(this), false);\n }\n\n if (Control) PurchaseControl.__proto__ = Control;\n PurchaseControl.prototype = Object.create(Control && Control.prototype);\n PurchaseControl.prototype.constructor = PurchaseControl;\n\n PurchaseControl.prototype.handleLayersInfo = function handleLayersInfo() {\n //this.getMap().getView().setRotation(0);\n let map_panel_arr = document.getElementsByClassName(_environment.default.W3O_openlayers.ol_map_panel);\n map_panel_arr[0].style.cursor = \"grab\"; // console.log('Just change the mouse cursor to purchase...');\n };\n\n return PurchaseControl;\n }(_control.Control);\n\n let MeasureInfoControl = function (Control) {\n function MeasureInfoControl(opt_options) {\n var options = opt_options || {};\n var button = document.createElement('button');\n button.innerHTML = '';\n button.setAttribute('title', 'Length Measure');\n var element = document.createElement('div');\n element.className = 'change-measurep ol-unselectable ol-control';\n element.appendChild(button);\n Control.call(this, {\n element: element,\n target: options.target\n });\n button.addEventListener('click', this.handleMeasureInfo.bind(this), false);\n }\n\n if (Control) MeasureInfoControl.__proto__ = Control;\n MeasureInfoControl.prototype = Object.create(Control && Control.prototype);\n MeasureInfoControl.prototype.constructor = MeasureInfoControl;\n\n MeasureInfoControl.prototype.handleMeasureInfo = function handleMeasureInfo() {\n //this.getMap().getView().setRotation(0);\n let map_panel_arr = document.getElementsByClassName(_environment.default.W3O_openlayers.ol_map_panel);\n map_panel_arr[0].style.cursor = \"crosshair\"; // console.log('Just change the mouse cursor to Measure...');\n };\n\n return MeasureInfoControl;\n }(_control.Control);\n\n let ClearMeasureInfoControl = function (Control) {\n function ClearMeasureInfoControl(opt_options) {\n var options = opt_options || {};\n var button = document.createElement('button');\n button.innerHTML = '';\n button.setAttribute('title', 'Erase All Measures');\n var element = document.createElement('div');\n element.className = 'change-erasemeasurep ol-unselectable ol-control';\n element.appendChild(button);\n Control.call(this, {\n element: element,\n target: options.target\n });\n button.addEventListener('click', this.handleClearMeasureInfo.bind(this), false);\n }\n\n if (Control) ClearMeasureInfoControl.__proto__ = Control;\n ClearMeasureInfoControl.prototype = Object.create(Control && Control.prototype);\n ClearMeasureInfoControl.prototype.constructor = ClearMeasureInfoControl;\n\n ClearMeasureInfoControl.prototype.handleClearMeasureInfo = function handleClearMeasureInfo() {\n //this.getMap().getView().setRotation(0);\n let map_panel_arr = document.getElementsByClassName(_environment.default.W3O_openlayers.ol_map_panel);\n map_panel_arr[0].style.cursor = \"not-allowed\"; // console.log('Just change the mouse cursor to Not Allowed...');\n // measureSource and measureVectorLayer not setup yet.\n //// console.log(this.get('measureSource'));\n //// console.log(this.get('measureVectorLayer'));\n\n let map1 = this.getMap();\n map1.dispatchEvent('singleclick');\n };\n\n return ClearMeasureInfoControl;\n }(_control.Control);\n\n let OpenNLUMPLegendControl = function (Control) {\n function OpenNLUMPLegendControl(opt_options) {\n var options = opt_options || {};\n var button = document.createElement('button');\n button.innerHTML = '';\n button.setAttribute('title', 'Master Plan Legends');\n var element = document.createElement('div');\n element.className = 'change-nlumplegendp ol-unselectable ol-control';\n element.appendChild(button);\n Control.call(this, {\n element: element,\n target: options.target\n });\n button.addEventListener('click', this.handleClearMeasureInfo.bind(this), false);\n }\n\n if (Control) OpenNLUMPLegendControl.__proto__ = Control;\n OpenNLUMPLegendControl.prototype = Object.create(Control && Control.prototype);\n OpenNLUMPLegendControl.prototype.constructor = OpenNLUMPLegendControl;\n\n OpenNLUMPLegendControl.prototype.handleClearMeasureInfo = function handleClearMeasureInfo() {\n //this.getMap().getView().setRotation(0);\n let map_panel_arr = document.getElementsByClassName(_environment.default.W3O_openlayers.ol_map_panel);\n map_panel_arr[0].style.cursor = \"help\"; // console.log('Just change the mouse cursor to help...');\n // measureSource and measureVectorLayer not setup yet.\n //// console.log(this.get('measureSource'));\n //// console.log(this.get('measureVectorLayer'));\n\n let map1 = this.getMap();\n map1.dispatchEvent('singleclick');\n map_panel_arr[0].style.cursor = \"default\";\n };\n\n return OpenNLUMPLegendControl;\n }(_control.Control);\n\n let OpenScaleControl = function (Control) {\n function OpenScaleControl(opt_options) {\n var options = opt_options || {};\n var button = document.createElement('button');\n button.innerHTML = '';\n button.setAttribute('title', 'Select scale');\n var element = document.createElement('div');\n element.className = 'change-scalep ol-unselectable ol-control';\n element.appendChild(button);\n Control.call(this, {\n element: element,\n target: options.target\n });\n button.addEventListener('click', this.handleClearMeasureInfo.bind(this), false);\n }\n\n if (Control) OpenScaleControl.__proto__ = Control;\n OpenScaleControl.prototype = Object.create(Control && Control.prototype);\n OpenScaleControl.prototype.constructor = OpenScaleControl;\n\n OpenScaleControl.prototype.handleClearMeasureInfo = function handleClearMeasureInfo() {\n //this.getMap().getView().setRotation(0);\n let map_panel_arr = document.getElementsByClassName(_environment.default.W3O_openlayers.ol_map_panel);\n map_panel_arr[0].style.cursor = \"text\"; // console.log('Just change the mouse cursor to text...');\n // measureSource and measureVectorLayer not setup yet.\n //// console.log(this.get('measureSource'));\n //// console.log(this.get('measureVectorLayer'));\n\n let map1 = this.getMap();\n map1.dispatchEvent('singleclick');\n map_panel_arr[0].style.cursor = \"default\";\n };\n\n return OpenScaleControl;\n }(_control.Control);\n\n let MobileGuideControl = function (Control) {\n function MobileGuideControl(opt_options) {\n var options = opt_options || {};\n var button = document.createElement('button');\n button.innerHTML = '';\n button.setAttribute('title', 'Open Mobile Guide');\n var element = document.createElement('div');\n element.className = 'change-guidep ol-unselectable ol-control';\n element.appendChild(button);\n Control.call(this, {\n element: element,\n target: options.target\n });\n button.addEventListener('click', this.handleClearMeasureInfo.bind(this), false);\n }\n\n if (Control) MobileGuideControl.__proto__ = Control;\n MobileGuideControl.prototype = Object.create(Control && Control.prototype);\n MobileGuideControl.prototype.constructor = MobileGuideControl;\n\n MobileGuideControl.prototype.handleClearMeasureInfo = function handleClearMeasureInfo() {\n //this.getMap().getView().setRotation(0);\n let map_panel_arr = document.getElementsByClassName(_environment.default.W3O_openlayers.ol_map_panel);\n map_panel_arr[0].style.cursor = \"wait\"; // console.log('Just change the mouse cursor to wait...');\n // measureSource and measureVectorLayer not setup yet.\n //// console.log(this.get('measureSource'));\n //// console.log(this.get('measureVectorLayer'));\n\n let map1 = this.getMap();\n map1.dispatchEvent('singleclick');\n map_panel_arr[0].style.cursor = \"default\";\n };\n\n return MobileGuideControl;\n }(_control.Control);\n\n let defaultMapZoom;\n\n if (_environment.default.W3O_openlayers.deployment == 'RAD') {\n defaultMapZoom = 10;\n } else {\n defaultMapZoom = 3; // Change default map zoom when it open from mobile device\n\n if (this.get('isMobile') === 'Yes') {\n defaultMapZoom = 1.5;\n }\n }\n\n let pointerControls = [new LayersInfoControl(), new MeasureInfoControl(), //new PurchaseControl(),\n new PointerControl(), new ClearMeasureInfoControl() // new OpenNLUMPLegendControl() //NLUMP legend disabled (request by Survey)\n ];\n\n if (this.get('isMobile') === 'Yes') {\n pointerControls.push(new OpenScaleControl());\n pointerControls.push(new MobileGuideControl());\n pointerControls.push(new PurchaseControl());\n } else {\n if (_environment.default.W3O_openlayers.deployment === 'GEOPORTAL') {\n pointerControls.push(new OpenNLUMPLegendControl());\n pointerControls.push(new PurchaseControl());\n }\n }\n\n const map = new _ol.Map({\n controls: (0, _control.defaults)().extend(pointerControls),\n target: 'map',\n layers: this.get('initActiveLayers'),\n view: new _ol.View({\n projection: this.get('defaultProjection'),\n center: this.get('defaultCenter'),\n zoom: defaultMapZoom,\n // need to have different zoom for Geoportal or RAD TODO\n rotation: 0,\n enableRotation: false\n })\n }); //map.addOverlay(mapOverlay1);\n\n map.addControl(new _control.ScaleLine({\n units: 'metric'\n }));\n /* map.addControl(new MousePosition({\n coordinateFormat: c => parseInt(c[0], 10) + ', ' + parseInt(c[1], 10),\n undefinedHTML: ''\n })); */\n\n map.addControl(new _MousePosition.default({\n coordinateFormat: (0, _coordinate.createStringXY)(4),\n undefinedHTML: ''\n }));\n const mousePositionControl = new _MousePosition.default({\n coordinateFormat: (0, _coordinate.createStringXY)(4),\n // projection: 'EPSG:4326',\n // comment the following two lines to have the mouse position\n // be placed within the map.\n className: 'custom-mouse-position',\n target: document.getElementById('mouse-position'),\n undefinedHTML: ' '\n }); //map.addControl(mousePositionControl);\n\n this.set('map', map);\n const initialExtent = null;\n this.set('initialExtent', initialExtent); // console.log('hoichong ol-mapservice getOmap map initialextent done');\n\n this.initVectorSource(map); // console.log('hoichong ol-mapservice getOmap map initVectorSource done');\n\n var currZoom = map.getView().getZoom(); // console.log('hoichong ol-mapservice getOmap map currZoom: ' +currZoom);\n\n map.on('moveend', function (e) {\n var newZoom = map.getView().getZoom();\n\n if (currZoom != newZoom) {\n // console.log('Inside ol-mapservice moveend event, zoom end, new zoom: ' + newZoom);\n currZoom = newZoom; //var dpi = 25.4 / 0.28;\n\n const dpi = 96; // var cScale = this.calcMapScale(map,dpi); // calcMapScale is not a function (maybe because in an event callback)\n\n let unit = map.getView().getProjection().getUnits();\n let resolution = map.getView().getResolution();\n const inchesPerMetre = 39.37;\n let cScale = resolution * proj.METERS_PER_UNIT[unit] * inchesPerMetre * dpi; // console.log('Inside ol-mapservice moveend event, zoom end, new scale & resolution : ' + cScale + ' ' + resolution);\n // console.log(proj.METERS_PER_UNIT[unit] + ' ' + inchesPerMetre);\n //let zoom1 = map.getView().getZoom();\n //// console.log(zoom1);\n //// console.log(map.getView().getResolutionForZoom(zoom1));\n\n let scaleRoundVal = Math.ceil(cScale); // scaleElement = document.getElementById('inputScale');\n\n document.getElementById('inputScale').value = scaleRoundVal.toString();\n\n let _c_srs = map.getView().getProjection().getCode(); // console.log('Get SRS ' + _c_srs);\n\n\n function controlLayerEye(layer, currentScale) {\n let ltitle = 'Canvas';\n\n if (layer.values_.title !== undefined) {\n ltitle = layer.values_.title.replace(/\\s+/g, '');\n }\n\n let elementId = \"layer-item-id-\".concat(ltitle); // id of the layer input element (not the eye icon) \n\n let eyeId = \"layer-item-eye-id-\".concat(ltitle); // id of the layer eye icon \n // console.log('elementId ' + elementId); \n\n if (layer.values_.minScale !== undefined && layer.values_.minScale >= 0) {\n if (currentScale > layer.values_.maxScale || currentScale < layer.values_.minScale) {\n document.getElementById(elementId).disabled = true;\n document.getElementById(eyeId).classList.add(\"right-icon-lock\"); // console.log('just disable this checkbox');\n } else {\n document.getElementById(elementId).disabled = false;\n document.getElementById(eyeId).classList.remove(\"right-icon-lock\"); // console.log('just enable this checkbox');\n }\n }\n }\n\n if (_c_srs == 'EPSG:4326') {\n const layers1 = map.getLayers().getArray().concat().reverse().map(layer => {\n //// console.log(layer);\n controlLayerEye(layer, cScale);\n\n if (layer.get('exclusive') == true) {// console.log('Inside ol-mapservice moveend event, EXCLUSIVE OVERRIDE');\n } else {\n if (layer.get('visiType') == 'Manual') {// console.log('Inside ol-mapservice moveend event, MANUAL OVERRIDE');\n // console.log(layer.values_.title);\n } else {\n let maxScale = layer.get('maxScale');\n let minScale = layer.get('minScale'); // console.log('Inside ol-mapservice moveend event, zoom end, layer visibility for 4326 : ' + layer.getVisible() + ' ' + minScale + ' ' + maxScale);\n\n if (Boolean(maxScale)) {\n if (minScale <= cScale && cScale < maxScale) {\n layer.setVisible(true);\n } else {\n layer.setVisible(false);\n }\n } else {\n layer.setVisible(true);\n }\n }\n }\n });\n } else {\n const layers = map.getLayers().getArray().concat().reverse().map(layer => {\n controlLayerEye(layer, cScale);\n\n if (layer.get('exclusive') == true) {// console.log('Inside ol-mapservice moveend event, EXCLUSIVE OVERRIDE');\n } else {\n if (layer.get('visiType') == 'Manual') {// console.log('Inside ol-mapservice moveend event, MANUAL OVERRIDE');\n // console.log(layer.values_.title);\n } else {\n let maxRes = layer.getMaxResolution();\n let minRes = layer.getMinResolution(); // console.log('Inside ol-mapservice moveend event, zoom end, layer visibility : ' + layer.getVisible() + ' ' + minRes + ' ' + maxRes);\n // console.log(layer);\n\n if (minRes <= resolution && resolution < maxRes) {\n layer.setVisible(true);\n } else {\n layer.setVisible(false);\n }\n }\n }\n });\n }\n }\n });\n _jquery.default.fn.popover.Constructor.Default.whiteList.table = [];\n _jquery.default.fn.popover.Constructor.Default.whiteList.tr = [];\n _jquery.default.fn.popover.Constructor.Default.whiteList.td = [];\n _jquery.default.fn.popover.Constructor.Default.whiteList.th = [];\n _jquery.default.fn.popover.Constructor.Default.whiteList.div = [];\n _jquery.default.fn.popover.Constructor.Default.whiteList.tbody = [];\n _jquery.default.fn.popover.Constructor.Default.whiteList.thead = [];\n _jquery.default.fn.popover.Constructor.Default.whiteList.h2 = [];\n _jquery.default.fn.popover.Constructor.Default.whiteList.h3 = [];\n _jquery.default.fn.popover.Constructor.Default.whiteList.button = ['data-toggle', 'data-target'];\n _jquery.default.fn.popover.Constructor.Default.whiteList.ul = [];\n _jquery.default.fn.popover.Constructor.Default.whiteList.li = [];\n _jquery.default.fn.popover.Constructor.Default.whiteList.div = ['data-parent'];\n _jquery.default.fn.popover.Constructor.Default.whiteList.a = ['target', 'href', 'title', 'rel', 'data-toggle']; // console.log('hoichong ol-mapservice getOmap map popover setup done');\n // Popup showing the position the user clicked\n\n let popup = new _Overlay.default({\n element: document.getElementById('popup'),\n stopEvent: false\n });\n map.addOverlay(popup); // console.log('hoichong ol-mapservice getOmap map addOverlay popup done');\n\n map.getViewport().addEventListener('contextmenu', async function (evt) {\n evt.preventDefault(); // console.log('Captured RIGHT CLICK ...');\n // console.log(map.getEventCoordinate(evt));\n // console.log(evt.coordinate); // work only for left single click or left dbl click\n\n let tcoordinate = map.getEventCoordinate(evt); // Remove code that are duplicate in the \"left single click\" event method.\n // See below.\n });\n let MEASURE_ACTIVE_FLAG = false;\n let measureSrcArray = [];\n let measureVLayerArray = [];\n let measureOutOverlayArray = [];\n map.on('singleclick', async function (evt) {\n evt.preventDefault(); // console.log('Captured SINGLE CLICK TOP LINE ...');\n\n let map_panel_arr = document.getElementsByClassName(_environment.default.W3O_openlayers.ol_map_panel); // console.log(map_panel_arr[0].style.cursor);\n\n let mouse_pointer_type = map_panel_arr[0].style.cursor; // console.log(mouse_pointer_type);\n\n if (mouse_pointer_type === 'grab' && !self.isLoading) {\n // console.log('Captured SINGLE CLICK for POINTER...');\n // console.log(map.getEventCoordinate(evt));\n // console.log(evt.coordinate); // work only for left single click or left dbl click\n let tcoordinate = evt.coordinate;\n let view1 = map.getView();\n var viewResolution = view1.getResolution();\n let layers1 = map.getLayers();\n let layerfilterArr = [];\n let geodetic_layer = [];\n layers1.forEach(layer => {\n // console.log('ol-mapservice map single click');\n // console.log(layer.get('title'));\n // console.log(layer);\n let layerkeys = {};\n\n if (layer.get('layer_info')) {\n let wms_url = layer.get('source').url_;\n let wms_arr = wms_url.split(\"/\");\n let wfs_url = \"/\".concat(wms_arr[3], \"/\").concat(wms_arr[4], \"/\").concat(wms_arr[5]);\n layerfilterArr.push({\n type: layer.get('layer_info').type,\n fields: layer.get('layer_info').fields,\n layer_info: layer.get('layer_info'),\n wms_url: \"\".concat(self.store.adapterFor('application').get('erdasHost')).concat(wfs_url),\n target_layer: layer.get('source').params_.LAYERS\n });\n }\n\n if (layer.get('title') === 'Control Point') {\n let wms_url = layer.get('source').url_;\n let wms_arr = wms_url.split(\"/\");\n let wfs_url = \"/\".concat(wms_arr[3], \"/\").concat(wms_arr[4], \"/\").concat(wms_arr[5]);\n geodetic_layer.push({\n title: layer.get('title'),\n type: layer.get('layer_info').type,\n fields: layer.get('layer_info').fields,\n layer_info: layer.get('layer_info'),\n wms_url: \"\".concat(self.store.adapterFor('application').get('erdasHost')).concat(wfs_url),\n target_layer: layer.get('source').params_.LAYERS\n });\n }\n });\n let wfs1 = '';\n let layer1 = '';\n let scoord1 = ''; // console.log('Coordinate of click: ' + tcoordinate);\n\n let arr = [\"one\", \"two\", \"three\", \"four\", \"five\"];\n arr.includes(\"two\"); //returns true \n\n let st1 = 'Lots'; // let fetchfeatureArr = [\"Lots\", \"TOL\", \"Gazette\", \"Kampung\"];\n\n let fetchResultArr = [];\n\n async function fetchFeatureInLayer(st1) {\n wfs1 = st1.wms_url;\n layer1 = st1.target_layer;\n scoord1 = tcoordinate; // console.log({wfs1, layer1, scoord1});\n //Show popover with loading\n\n self.isLoading = true;\n let element = popup.getElement();\n (0, _jquery.default)(element).popover('dispose');\n popup.setPosition(tcoordinate);\n (0, _jquery.default)(element).popover({\n placement: 'top',\n animation: false,\n html: true,\n title: 'Purchase Info',\n content: \"Loading Data...\"\n });\n (0, _jquery.default)(element).popover('show');\n let fetchRes1 = await self.fetchNearbyWfsObjects(wfs1, layer1, scoord1, st1);\n self.isLoading = false; // console.log('Fetch results from fetchNearbyWfsObjects');\n // console.log(fetchRes1);\n\n return fetchRes1;\n } // console.log('---layerfilterArr---');\n // console.log(layerfilterArr);\n\n\n for (const st1 of layerfilterArr) {\n let ffr1 = await fetchFeatureInLayer(st1);\n fetchResultArr.push(ffr1);\n }\n\n ; // console.log('All Layers feature that need to fetch...');\n // console.log(fetchResultArr);\n //Fetch geodetic layer info selected\n\n let wfs1_geodetic = geodetic_layer[0].wms_url;\n let layer1_geodetic = geodetic_layer[0].target_layer;\n let st1_geodetic = geodetic_layer[0];\n let fetchRes1_within = await self.fetchWithinWfsObjects(wfs1_geodetic, layer1_geodetic, tcoordinate, st1_geodetic); // console.log('fetchRes1_within');\n // console.log(fetchRes1_within);\n // console.log('fetchRes1_within length');\n // console.log(fetchRes1_within.length);\n\n let tablebodystart1 = '';\n let tablebodyend1 = '';\n let tablebody1 = '';\n let tablebody2 = '';\n let tablebody3 = '';\n let navstart1 = '![\"Loading\"](\"/images/ajax-loader.gif\")
');\n\n if (!self.get('authObject').get('isAuthenticated')) {\n window.location.replace(\"\".concat(self.store.adapterFor('application').get('host'), \"/login\"));\n return;\n }\n\n let is_public = \"No\";\n let is_internal = self.get('authObject.data.user.is_internal');\n let is_cash = self.get('authObject.data.user.receive_cash_payment');\n let is_mobile = this.get('isMobile') === 'Yes' ? true : false;\n\n if (is_internal === false && is_cash === false) {\n is_public = \"Yes\";\n }\n\n if (is_mobile === true) {\n is_public = \"Yes\";\n }\n /*\n If not internal user, then just proceed to the shopping card page for payment process\n If internal user, generate RSO directly without going through payment\n */\n\n\n if (!is_internal) {\n let url_rsoexport = \"\".concat(self.store.adapterFor('application').get('serverHost')).concat(self.store.adapterFor('application').get('namespace'), \"/rsosheets/doRSOExport\");\n let response = await _axios.default.post(url_rsoexport, {\n rso_type,\n ...rso_params,\n user: self.get(\"authObject.data.user.id\"),\n is_public\n }).catch(error => {\n alert(\"An error occured while preparing RSO Sheet's order, \".concat(error.response.data));\n return null;\n });\n\n if (response) {\n window.location.replace(\"\".concat(self.store.adapterFor('application').get('host'), \"/shopping-cart\"));\n }\n } else {\n let randomDigit = Math.random().toString().substring(2, 7);\n let order_number = \"SSDI-STAFF-\".concat(moment().format(\"YYYY-MM-DD\"), \"-\").concat(randomDigit, \"-RSO\");\n let image_name = Math.random().toString().substring(2, 12);\n let generate_type = \"pdf\";\n let is_internal = true;\n let url_rsogenerate = \"\".concat(self.store.adapterFor('application').get('serverHost')).concat(self.store.adapterFor('application').get('namespace'), \"/rsosheets/generateRSOSheet\");\n let response = await _axios.default.post(url_rsogenerate, {\n rso_type,\n ...rso_params,\n order_number,\n image_name,\n generate_type,\n is_internal,\n erdashost_url: self.store.adapterFor('application').get('erdasHost'),\n is_public\n }).catch(error => {\n alert(\"An error occured while generating RSO Sheet, \".concat(error.response.data));\n return null;\n });\n\n if (response.data) {\n let {\n base64,\n fileName,\n type\n } = response.data;\n let blob;\n\n try {\n blob = this.dataURItoBlob(base64);\n } catch (e) {\n // source: https://stackoverflow.com/a/21797381\n let binary_string = window.atob(base64);\n let len = binary_string.length;\n let bytes = new Uint8Array(len);\n\n for (let i = 0; i < len; i++) {\n bytes[i] = binary_string.charCodeAt(i);\n }\n\n let arrayBuffer = bytes.buffer;\n blob = new Blob([arrayBuffer], {\n type\n });\n }\n\n let blobUrl = URL.createObjectURL(blob);\n let a = document.createElement('a');\n a.href = blobUrl;\n a.download = fileName || blobUrl.split('/').pop();\n a.click();\n } //Enable button\n\n\n (0, _jquery.default)(rso_button).html(\"\".concat(rsoButtonName));\n }\n };\n\n const gdtButtonLogic = async (gdt_type, gdt_params, gdt_button, gdtButtonName) => {\n //Disable button (to prevent accident multiple clicks)\n (0, _jquery.default)(gdt_button).off('click');\n (0, _jquery.default)(gdt_button).addClass(\"disabled\");\n (0, _jquery.default)(gdt_button).prepend('');\n\n if (!self.get('authObject').get('isAuthenticated')) {\n window.location.replace(\"\".concat(self.store.adapterFor('application').get('host'), \"/login\"));\n return;\n }\n\n let is_public = \"No\";\n let is_internal = self.get('authObject.data.user.is_internal');\n let is_cash = self.get('authObject.data.user.receive_cash_payment');\n let is_mobile = this.get('isMobile') === 'Yes' ? true : false;\n\n if (is_internal === false && is_cash === false) {\n is_public = \"Yes\";\n }\n\n if (is_mobile === true) {\n is_public = \"Yes\";\n }\n /*\n If not internal user, then just proceed to the shopping card page for payment process\n If internal user, generate RSO directly without going through payment\n */\n\n\n if (!is_internal) {\n let url_gdtexport = \"\".concat(self.store.adapterFor('application').get('serverHost')).concat(self.store.adapterFor('application').get('namespace'), \"/geodetics/doGeodeticExport\");\n let response = await _axios.default.post(url_gdtexport, { ...gdt_params,\n user: self.get(\"authObject.data.user.id\"),\n is_public\n }).catch(error => {\n alert(\"An error occured while preparing Geodetic Sheet's order, \".concat(error.response.data));\n return null;\n });\n\n if (response) {\n window.location.replace(\"\".concat(self.store.adapterFor('application').get('host'), \"/shopping-cart\"));\n }\n } else {\n let randomDigit = Math.random().toString().substring(2, 7);\n let order_number = \"SSDI-STAFF-\".concat(moment().format(\"YYYY-MM-DD\"), \"-\").concat(randomDigit, \"-GDT\");\n let image_name = Math.random().toString().substring(2, 12);\n let generate_type = \"pdf\";\n let is_internal = true;\n let url_gdtgenerate = \"\".concat(self.store.adapterFor('application').get('serverHost')).concat(self.store.adapterFor('application').get('namespace'), \"/geodetics/generateGeodeticSheet\");\n let response = await _axios.default.post(url_gdtgenerate, { ...gdt_params,\n order_number,\n image_name,\n generate_type,\n is_internal,\n erdashost_url: self.store.adapterFor('application').get('erdasHost'),\n is_public\n }).catch(error => {\n alert(\"An error occured while generating Geodetic Sheet, \".concat(error.response.data));\n return null;\n });\n\n if (response.data) {\n let {\n base64,\n fileName,\n type\n } = response.data;\n let blob;\n\n try {\n blob = this.dataURItoBlob(base64);\n } catch (e) {\n // source: https://stackoverflow.com/a/21797381\n let binary_string = window.atob(base64);\n let len = binary_string.length;\n let bytes = new Uint8Array(len);\n\n for (let i = 0; i < len; i++) {\n bytes[i] = binary_string.charCodeAt(i);\n }\n\n let arrayBuffer = bytes.buffer;\n blob = new Blob([arrayBuffer], {\n type\n });\n }\n\n let blobUrl = URL.createObjectURL(blob);\n let a = document.createElement('a');\n a.href = blobUrl;\n a.download = fileName || blobUrl.split('/').pop();\n a.click();\n } //Enable button\n\n\n (0, _jquery.default)(gdt_button).html(\"\".concat(gdtButtonName));\n }\n }; // Adding click action logic to RSO buttons (only can be run after the button rendered)\n\n\n if (_environment.default.W3O_openlayers.deployment == 'GEOPORTAL') {\n const rsoButtonDivLogic = async () => {\n let rso_button_a1 = document.createElement('div');\n let rso_button_a1_ophoto = document.createElement('div');\n let rso_button_a1_internal = document.createElement('div');\n let rso_button_na = document.createElement('div');\n let rsoButtonName;\n (0, _jquery.default)(rso_button_na).addClass(\"text-center mt-2\").html(\"RSO unavailable\");\n (0, _jquery.default)(rso_button_a1).addClass(\"col-11 col-sm-8 col-lg-5 mb-1 btn mx-lg-1 btn-sm btn-secondary\").html(\"Without Orthophoto (A1) B$\".concat(rso_price.a1_without_rso)).on(\"click\", async function () {\n let rso_params = {\n rso_ref\n };\n rso_params.with_orthophoto = false;\n rsoButtonName = \"Without Orthophoto (A1) B$\".concat(rso_price.a1_without_rso);\n await rsoButtonLogic('A1', rso_params, rso_button_a1, rsoButtonName);\n });\n (0, _jquery.default)(rso_button_a1_ophoto).addClass(\"col-11 col-sm-8 col-lg-5 btn btn-sm mb-1 mx-lg-1 btn-primary\").html(\"With Orthophoto (A1) B$\".concat(rso_price.a1_with_rso)).on(\"click\", async function () {\n let rso_params = {\n rso_ref\n };\n rso_params.with_orthophoto = true;\n rsoButtonName = \"With Orthophoto (A1) B$\".concat(rso_price.a1_with_rso);\n await rsoButtonLogic('A1', rso_params, rso_button_a1_ophoto, rsoButtonName);\n });\n (0, _jquery.default)(rso_button_a1_internal).addClass(\"col-11 col-sm-8 col-lg-5 btn btn-sm mb-1 mx-lg-1 btn-primary\").html(\"Generate RSO (A1)\").on(\"click\", async function () {\n let rso_params = {\n rso_ref\n };\n rso_params.with_orthophoto = false;\n rsoButtonName = 'Generate RSO (A1)';\n await rsoButtonLogic('A1', rso_params, rso_button_a1_internal, rsoButtonName);\n });\n\n if (rso_exist) {\n (0, _jquery.default)(rso_button_a1).appendTo((0, _jquery.default)(\"#purchase_rso_a1\"));\n (0, _jquery.default)(rso_button_a1_ophoto).appendTo((0, _jquery.default)(\"#purchase_rso_a1\"));\n } else {\n (0, _jquery.default)(rso_button_na).appendTo((0, _jquery.default)(\"#purchase_rso_a1\"));\n }\n\n let rso_button_a3 = document.createElement('div');\n let rso_button_a3_ophoto = document.createElement('div');\n let rso_button_a3_internal = document.createElement('div');\n (0, _jquery.default)(rso_button_a3).addClass(\"col-11 col-sm-8 col-lg-5 mb-1 btn mx-lg-1 btn-sm btn-secondary\").html(\"Without Orthophoto (A3) B$\".concat(rso_price.a3_without_rso)).on(\"click\", async function () {\n let rso_params = {\n lot_type,\n lot_num,\n book_code\n };\n rso_params.with_orthophoto = false;\n rsoButtonName = \"Without Orthophoto (A3) B$\".concat(rso_price.a3_without_rso);\n await rsoButtonLogic('A3', rso_params, rso_button_a3, rsoButtonName);\n });\n (0, _jquery.default)(rso_button_a3_ophoto).addClass(\"col-11 col-sm-8 col-lg-5 mb-1 btn mx-lg-1 btn-sm btn-primary\").html(\"With Orthophoto (A3) B$\".concat(rso_price.a3_with_rso)).on(\"click\", async function () {\n let rso_params = {\n lot_type,\n lot_num,\n book_code\n };\n rso_params.with_orthophoto = true;\n rsoButtonName = \"With Orthophoto (A3) B$\".concat(rso_price.a3_with_rso);\n await rsoButtonLogic('A3', rso_params, rso_button_a3_ophoto, rsoButtonName);\n });\n (0, _jquery.default)(rso_button_a3_internal).addClass(\"col-11 col-sm-8 col-lg-5 mb-1 btn mx-lg-1 btn-sm btn-primary\").html(\"Generate RSO (A3)\").on(\"click\", async function () {\n let rso_params = {\n lot_type,\n lot_num,\n book_code\n };\n rso_params.with_orthophoto = false;\n rsoButtonName = 'Generate RSO (A3)';\n await rsoButtonLogic('A3', rso_params, rso_button_a3_internal, rsoButtonName);\n });\n\n if (lot_exist) {\n (0, _jquery.default)(rso_button_a3).appendTo((0, _jquery.default)(\"#purchase_rso_a3\"));\n (0, _jquery.default)(rso_button_a3_ophoto).appendTo((0, _jquery.default)(\"#purchase_rso_a3\"));\n } else {\n (0, _jquery.default)(rso_button_na).appendTo((0, _jquery.default)(\"#purchase_rso_a3\"));\n }\n };\n\n const gdtButtonDivLogic = async () => {\n let gdt_button = document.createElement('div');\n let gdt_button_ophoto = document.createElement('div');\n let gdt_button_internal = document.createElement('div');\n let gdt_button_na = document.createElement('div');\n let gdtButtonName;\n (0, _jquery.default)(gdt_button_na).addClass(\"text-center mt-2\").html(\"Geodetic unavailable\");\n (0, _jquery.default)(gdt_button).addClass(\"col-11 col-sm-8 col-lg-5 mb-1 btn mx-lg-1 btn-sm btn-secondary\").html(\"Coordinates with height B$\".concat(gdt_price.a4_with_gdt)).on(\"click\", async function () {\n let gdt_params = {\n ctl_pnt\n };\n gdt_params.with_height = true;\n gdtButtonName = \"Coordinates with height B$\".concat(gdt_price.a4_with_gdt);\n await gdtButtonLogic('A4', gdt_params, gdt_button, gdtButtonName);\n });\n (0, _jquery.default)(gdt_button_ophoto).addClass(\"col-11 col-sm-8 col-lg-5 btn btn-sm mb-1 mx-lg-1 btn-primary\").html(\"Coordinates only B$\".concat(gdt_price.a4_without_gdt)).on(\"click\", async function () {\n let gdt_params = {\n ctl_pnt\n };\n gdt_params.with_height = false;\n gdtButtonName = \"Coordinates only B$\".concat(gdt_price.a4_without_gdt);\n await gdtButtonLogic('A4', gdt_params, gdt_button_ophoto, gdtButtonName);\n }); // $(gdt_button_internal).addClass(\"col-11 col-sm-8 col-lg-5 btn btn-sm mb-1 mx-lg-1 btn-primary\")\n // .html(`Generate Geodetic (A4)`)\n // .on(\"click\", async function(){\n // let gdt_params = {ctl_pnt}\n // gdt_params.with_height = false;\n // gdtButtonName = 'Generate Geodetic (A4)';\n // await gdtButtonLogic('A4', gdt_params, gdt_button_internal, gdtButtonName);\n // });\n\n if (gdt_exist) {\n (0, _jquery.default)(gdt_button).appendTo((0, _jquery.default)(\"#purchase_gdt\"));\n (0, _jquery.default)(gdt_button_ophoto).appendTo((0, _jquery.default)(\"#purchase_gdt\"));\n } else {\n (0, _jquery.default)(gdt_button_na).appendTo((0, _jquery.default)(\"#purchase_gdt\"));\n }\n };\n\n await rsoButtonDivLogic();\n await gdtButtonDivLogic();\n }\n }\n\n if (mouse_pointer_type === 'pointer' && !self.isLoading) {\n // console.log('Captured SINGLE CLICK for POINTER...');\n // console.log(map.getEventCoordinate(evt));\n // console.log(evt.coordinate); // work only for left single click or left dbl click\n let tcoordinate = evt.coordinate;\n let view1 = map.getView();\n var viewResolution = view1.getResolution();\n let layers1 = map.getLayers();\n let layerfilterArr = [];\n layers1.forEach(layer => {\n // console.log('ol-mapservice map single click');\n // console.log(layer.get('title'));\n // console.log(layer);\n //let layerkeys = layer.values_.info;\n let layerkeys = {}; //match the type and names, then push the layer array into layerfilterArr\n // if (layer.get('title') === 'Lots'){\n // layerfilterArr.push({type: 'Lots', fields: layer.get('layer_info')});\n // } else if (layer.get('title') === 'Kampung Names'){\n // layerfilterArr.push({type: 'Kampung', fields: layer.get('layer_info')});\n // }\n //just push layer_info into the array\n\n if (layer.get('layer_info')) {\n let wms_url = layer.get('source').url_;\n let wms_arr = wms_url.split(\"/\");\n let wfs_url = \"/\".concat(wms_arr[3], \"/\").concat(wms_arr[4], \"/\").concat(wms_arr[5]);\n layerfilterArr.push({\n type: layer.get('layer_info').type,\n fields: layer.get('layer_info').fields,\n layer_info: layer.get('layer_info'),\n wms_url: \"\".concat(self.store.adapterFor('application').get('erdasHost')).concat(wfs_url),\n target_layer: layer.get('source').params_.LAYERS\n });\n } // layerfilterArr.push(layerkeys);\n\n /* if (layer.get('title') == 'Lots') {\n let wmsSource1 = layer.get('source');\n // console.log(wmsSource1);\n let url = wmsSource1.getGetFeatureInfoUrl(\n tcoordinate, viewResolution, 'EPSG:5247', {\n 'INFO_FORMAT': 'text/xml'\n });\n // console.log(url);\n } */\n\n }); // layerfilterArr = [\n // {type: 'Lots', fields: ['OBJECTID','LOTNUM','BOOKCODE','DISTCODE','VC_RSO_NUM']}, \n // {type: 'Kampung', fields: ['OBJECTID','DISTCODE','KGCODE','KG_NAME','MUKIM_NAME']}\n // ];\n // // console.log('debug layerfilterArr');\n // // console.log(layerfilterArr);\n\n let wfs1 = '';\n let layer1 = '';\n let scoord1 = ''; // console.log('Coordinate of click: ' + tcoordinate);\n\n let arr = [\"one\", \"two\", \"three\", \"four\", \"five\"];\n arr.includes(\"two\"); //returns true \n\n let st1 = 'Lots'; // let fetchfeatureArr = [\"Lots\", \"TOL\", \"Gazette\", \"Kampung\"];\n\n let fetchResultArr = [];\n\n async function fetchFeatureInLayer(st1) {\n // switch (st1) {\n // case 'Lots': //swfs1,slayer1,ssrs1,sattr1,sstr1\n // wfs1 = `${self.store.adapterFor('application').get('erdasHost')}/erdas-apollo/vector/LOTS3`;\n // layer1 = 'MV_LOTS3';\n // scoord1 = tcoordinate;\n // break;\n // case 'TOL': //swfs1,slayer1,ssrs1,sattr1,sstr1\n // wfs1 = `${self.store.adapterFor('application').get('erdasHost')}/erdas-apollo/vector/GDBD`;\n // layer1 = 'TOL';\n // scoord1 = tcoordinate;\n // break;\n // case 'Gazette': //swfs1,slayer1,ssrs1,sattr1,sstr1\n // wfs1 = `${self.store.adapterFor('application').get('erdasHost')}/erdas-apollo/vector/GAZETTE3`;\n // layer1 = 'MV_GAZETTE1';\n // scoord1 = tcoordinate;\n // break;\n // case 'Kampung': //swfs1,slayer1,ssrs1,sattr1,sstr1\n // wfs1 = `${self.store.adapterFor('application').get('erdasHost')}/erdas-apollo/vector/GDBD_BR10`;\n // layer1 = 'KAMPUNG_P';\n // scoord1 = tcoordinate;\n // break;\n // default:\n // // console.log('Error Encountered in Fetch Feature Case Switch');\n // }\n wfs1 = st1.wms_url;\n layer1 = st1.target_layer;\n scoord1 = tcoordinate; // console.log({wfs1, layer1, scoord1});\n //Show popover with loading\n\n self.isLoading = true;\n let element = popup.getElement();\n (0, _jquery.default)(element).popover('dispose');\n popup.setPosition(tcoordinate);\n (0, _jquery.default)(element).popover({\n placement: 'top',\n animation: false,\n html: true,\n title: 'Geo Info',\n content: \"Loading Data...\"\n });\n (0, _jquery.default)(element).popover('show');\n let fetchRes1 = await self.fetchNearbyWfsObjects(wfs1, layer1, scoord1, st1);\n self.isLoading = false;\n /* try {\n fetchRes1 = await self.fetchNearbyWfsObjects(wfs1, layer1, scoord1, st1);\n } catch(err) {\n console.error(err); \n } */\n // console.log('Fetch results from fetchNearbyWfsObjects');\n // console.log(fetchRes1);\n\n return fetchRes1;\n } // console.log('---layerfilterArr---');\n // console.log(layerfilterArr);\n\n\n for (const st1 of layerfilterArr) {\n let ffr1 = await fetchFeatureInLayer(st1);\n fetchResultArr.push(ffr1);\n }\n\n ; // console.log('All Layers feature that need to fetch...');\n // console.log(fetchResultArr);\n\n let tablebodystart1 = '';\n let tablebodyend1 = '';\n let tablebody1 = '';\n let navstart1 = '| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
');\n\n if (!self.get('authObject').get('isAuthenticated')) {\n window.location.replace(\"\".concat(self.store.adapterFor('application').get('host'), \"/login\"));\n return;\n }\n\n let url_xlsgenerate = \"\".concat(self.store.adapterFor('application').get('serverHost')).concat(self.store.adapterFor('application').get('namespace'), \"/rsosheets/doXLSExport\");\n let response = await _axios.default.post(url_xlsgenerate, { ...xls_params,\n erdashost_url: self.store.adapterFor('application').get('erdasHost')\n }).catch(error => {\n alert(\"An error occured while generating Excels, \".concat(error.response.data));\n return null;\n });\n\n if (response.data) {\n let {\n base64,\n fileName,\n type\n } = response.data;\n let blob;\n\n try {\n blob = this.dataURItoBlob(base64);\n } catch (e) {\n // source: https://stackoverflow.com/a/21797381\n let binary_string = window.atob(base64);\n let len = binary_string.length;\n let bytes = new Uint8Array(len);\n\n for (let i = 0; i < len; i++) {\n bytes[i] = binary_string.charCodeAt(i);\n }\n\n let arrayBuffer = bytes.buffer;\n blob = new Blob([arrayBuffer], {\n type\n });\n }\n\n let blobUrl = URL.createObjectURL(blob);\n let a = document.createElement('a');\n a.href = blobUrl;\n a.download = fileName || blobUrl.split('/').pop();\n a.click();\n } //Enable button\n\n\n (0, _jquery.default)(xls_button).html(\"\".concat(xlsButtonName));\n };\n\n if (_environment.default.W3O_openlayers.deployment == 'GEOPORTAL') {\n let xls_button = document.createElement('div');\n (0, _jquery.default)(xls_button).addClass(\"btn mx-lg-1 btn-sm btn-primary\").html(\"Excels\").on(\"click\", async function () {\n // alert(objectid_lot);\n let xls_params = {\n objectid_lot\n }; // rso_params.with_orthophoto = false;\n\n let xlsButtonName = \"Excels\";\n await xlsButtonLogic(xls_params, xls_button, xlsButtonName);\n });\n (0, _jquery.default)(xls_button).appendTo((0, _jquery.default)(\"#generate_xls\"));\n } // if (ENV.W3O_openlayers.deployment == 'GEOPORTAL') {\n // let rso_button = document.createElement('div');\n // $(rso_button).addClass(\"btn btn-sm btn-primary\")\n // .html(`Purchase RSO (${rso_type})`)\n // .on(\"click\", async function(){\n // let url = `${self.store.adapterFor('application').get('host')}/shopping-cart`;\n // let url_featureexport = `${self.store.adapterFor('application').get('serverHost')}${self.store.adapterFor('application').get('namespace')}/rsosheets/doRSOExport`;\n // let response = await axios.post(\n // url_featureexport,\n // {\n // rso_ref,\n // rso_type,\n // lot_type,\n // lot_num,\n // book_code,\n // user: self.get(\"authObject.data.user.id\")\n // }\n // ).catch((error) => {\n // alert(`An error occured while preparing RSO Sheet's order, ${error.response.data}`);\n // return null;\n // });\n // if (response) {\n // window.location.replace(`${self.store.adapterFor('application').get('host')}/shopping-cart`);\n // }\n // })\n // .appendTo($(\"#purchase_rso\"));\n // }\n\n });\n } // if pointer \n\n\n if (mouse_pointer_type === 'crosshair' && !self.isLoading) {\n // console.log('Captured SINGLE CLICK for MEASURE ...');\n if (MEASURE_ACTIVE_FLAG === false) {\n // console.log(map.getEventCoordinate(evt));\n // console.log(evt.coordinate); // work only for left single click or left dbl click\n let tcoordinate = evt.coordinate;\n let view1 = map.getView();\n var viewResolution = view1.getResolution();\n let layers1 = map.getLayers();\n let layerfilterArr = [];\n let measureSource = new _Vector2.default();\n let measureVectorLayer = new _Vector.default({\n source: measureSource,\n zIndex: 150,\n style: new _style.Style({\n fill: new _style.Fill({\n color: 'rgba(255, 255, 255, 0.2)'\n }),\n stroke: new _style.Stroke({\n color: '#ffcc33',\n width: 2\n }),\n image: new _style.Circle({\n radius: 7,\n fill: new _style.Fill({\n color: '#ffcc33'\n })\n })\n })\n });\n measureSrcArray.push(measureSource);\n measureVLayerArray.push(measureVectorLayer);\n self.set('measureSource', measureSrcArray);\n self.set('measureVectorLayer', measureVLayerArray);\n /**\n * Currently drawn feature.\n * @type {import(\"../src/ol/Feature.js\").default}\n */\n\n let sketch;\n /**\n * The measure tooltip element.\n * @type {HTMLElement}\n */\n\n let measureTooltipElement;\n /**\n * Overlay to show the measurement.\n * @type {Overlay}\n */\n\n let measureTooltip;\n /**\n * Message to show when the user is drawing a line.\n * @type {string}\n */\n\n let continueLineMsg = 'Click to continue drawing the line';\n /**\n * Message to show when the user is drawing a polygon.\n * @type {string}\n */\n\n let continuePolygonMsg = 'Click to continue drawing the polygon';\n /**\n * Handle pointer move.\n * @param {import(\"../src/ol/MapBrowserEvent\").default} evt The event.\n */\n\n /* var pointerMoveHandler = function(evt) {\n if (evt.dragging) {\n // console.log('Measure tool, pointerMoveHandler evt dragging...');\n return;\n }\n var helpMsg = 'Click to start drawing';\n if (sketch) {\n // console.log('Measure tool, pointerMoveHandler if sketch...');\n var geom = sketch.getGeometry();\n if (geom instanceof Polygon) {\n helpMsg = continuePolygonMsg;\n } else if (geom instanceof LineString) {\n helpMsg = continueLineMsg;\n }\n }\n helpTooltipElement.innerHTML = helpMsg;\n helpTooltip.setPosition(evt.coordinate);\n helpTooltipElement.classList.remove('hidden');\n }; */\n //map.on('pointermove', pointerMoveHandler);\n //maybe not needed as we do not want to show tooltips\n\n var draw; // global so we can remove it later\n\n /**\n * Format length output.\n * @param {LineString} line The line.\n * @return {string} The formatted length.\n */\n\n let formatLength = function (line) {\n var length = (0, _sphere.getLength)(line);\n var output;\n\n if (length > 100) {\n output = Math.round(length / 1000 * 100) / 100 + ' ' + 'km';\n } else {\n output = Math.round(length * 100) / 100 + ' ' + 'm';\n }\n\n return output;\n };\n /**\n * Format area output.\n * @param {Polygon} polygon The polygon.\n * @return {string} Formatted area.\n */\n\n\n let formatArea = function (polygon) {\n var area = (0, _sphere.getArea)(polygon);\n var output;\n\n if (area > 10000) {\n output = Math.round(area / 1000000 * 100) / 100 + ' ' + 'km2';\n } else {\n output = Math.round(area * 100) / 100 + ' ' + 'm2';\n }\n\n return output;\n };\n\n function addInteractionMeasure() {\n // console.log('MEASURE - addInteractionMeasure ...');\n //let type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');\n let type = 'LineString';\n draw = new _interaction.Draw({\n source: measureSource,\n type: type,\n style: new _style.Style({\n fill: new _style.Fill({\n color: 'rgba(255, 255, 255, 0.2)'\n }),\n stroke: new _style.Stroke({\n color: 'rgba(255, 255, 255, 0.5)',\n lineDash: [10, 10],\n width: 2\n }),\n image: new _style.Circle({\n radius: 5,\n stroke: new _style.Stroke({\n color: 'rgba(255, 255, 255, 0.7)'\n }),\n fill: new _style.Fill({\n color: 'rgba(255, 255, 255, 0.2)'\n })\n })\n })\n });\n map.addInteraction(draw);\n map.addLayer(measureVectorLayer);\n let listener;\n let drawstartListenerKey = draw.once('drawstart', function (evt) {\n let c_srs = view1.getProjection().getCode(); // set sketch\n // console.log('Measure tool, drawstart handler...');\n\n sketch = evt.feature; // console.log(sketch);\n\n /** @type {import(\"../src/ol/coordinate.js\").Coordinate|undefined} */\n\n var tooltipCoord = evt.coordinate;\n listener = sketch.getGeometry().on('change', function (evt) {\n var geom = evt.target;\n var output;\n\n if (geom instanceof _geom.Polygon) {\n output = formatArea(geom);\n tooltipCoord = geom.getInteriorPoint().getCoordinates();\n } else if (geom instanceof _geom.LineString) {\n // console.log('Measure LineString object');\n // console.log(geom);\n let clone_geom = null;\n\n if (c_srs == \"EPSG:4326\") {\n clone_geom = geom.clone();\n clone_geom.transform(c_srs, 'EPSG:32650'); // console.log(clone_geom);\n\n output = formatLength(clone_geom);\n } else {\n output = formatLength(geom);\n } // console.log('Measure tool, drawstart handler, output is: ' +output);\n\n\n tooltipCoord = geom.getLastCoordinate();\n }\n\n measureTooltipElement.innerHTML = output;\n measureTooltip.setPosition(tooltipCoord);\n });\n });\n let drawendListenerKey = draw.once('drawend', function () {\n // console.log('Measure tool, drawend handler...');\n measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';\n measureTooltip.setOffset([0, -7]); // unset sketch\n\n sketch = null; // unset tooltip so that a new one can be created\n\n measureTooltipElement = null;\n createMeasureTooltip();\n (0, _Observable.unByKey)(listener);\n (0, _Observable.unByKey)(drawstartListenerKey);\n (0, _Observable.unByKey)(drawendListenerKey);\n map.removeInteraction(draw);\n mouse_pointer_type = 'default';\n let map_panel_arr2 = document.getElementsByClassName(_environment.default.W3O_openlayers.ol_map_panel);\n map_panel_arr2[0].style.cursor = \"default\"; //draw = null;\n\n MEASURE_ACTIVE_FLAG = false; // console.log('Measure tool, drawend handler COMPLETED...');\n });\n } // func addInteraction \n\n\n addInteractionMeasure();\n createMeasureTooltip();\n MEASURE_ACTIVE_FLAG = true; // to prevent multiple setup of draw event \n\n /**\n * Creates a new measure tooltip\n */\n\n function createMeasureTooltip() {\n if (measureTooltipElement) {\n measureTooltipElement.parentNode.removeChild(measureTooltipElement);\n }\n\n measureTooltipElement = document.createElement('div');\n measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';\n measureTooltip = new _Overlay.default({\n id: 'measure_overlay_2',\n element: measureTooltipElement,\n offset: [0, -15],\n positioning: 'bottom-center'\n });\n map.addOverlay(measureTooltip);\n measureOutOverlayArray.push(measureTooltip);\n self.set('measureOutputOverlay', measureOutOverlayArray);\n }\n } // if MEASURE_ACTIVE_FLAG\n\n } // if crosshair \n\n\n if (mouse_pointer_type === 'not-allowed' && !self.isLoading) {\n // console.log(\"Clear Measure Info tool ...\");\n // console.log(self.get('measureSource'));\n // console.log(self.get('measureVectorLayer'));\n // console.log(self.get('measureOutputOverlay'));\n let ms2 = self.get('measureSource');\n let outovly2 = self.get('measureOutputOverlay');\n ms2.forEach(source1 => source1.clear());\n outovly2.forEach(overlay1 => map.removeOverlay(overlay1)); // console.log(\"is there a map here...\");\n //// console.log(map);\n //// console.log(map.getOverlays());\n\n measureSrcArray.splice(0, measureSrcArray.length);\n measureVLayerArray.splice(0, measureVLayerArray.length);\n measureOutOverlayArray.splice(0, measureOutOverlayArray.length);\n mouse_pointer_type = 'default';\n let map_panel_arr2 = document.getElementsByClassName(_environment.default.W3O_openlayers.ol_map_panel);\n map_panel_arr2[0].style.cursor = \"default\";\n } // if not-allowed\n\n\n if (mouse_pointer_type === 'help' && !self.isLoading) {\n // console.log(\"Open or close Master Plan legends ...\");\n // Get the modal\n let modal = document.getElementById(\"nlumpModal\"); // Get the button that closes the modal\n\n let closebtn = document.getElementById(\"nlumpCloseBtn\");\n\n if ((0, _jquery.default)(modal).css('display') === 'none') {\n (0, _jquery.default)(modal).css(\"display\", \"block\");\n } else {\n (0, _jquery.default)(modal).css(\"display\", \"none\");\n }\n\n (0, _jquery.default)(closebtn).on('click', function () {\n (0, _jquery.default)(modal).css(\"display\", \"none\");\n });\n } // if not-allowed\n\n\n if (mouse_pointer_type === 'text' && !self.isLoading) {\n // console.log(\"Open or close Scales selection ...\");\n // Get the modal\n let modal = document.getElementById(\"scaleModal\"); // Get the button that closes the modal\n\n let closebtn = document.getElementById(\"scaleCloseBtn\");\n\n if ((0, _jquery.default)(modal).css('display') === 'none') {\n (0, _jquery.default)(modal).css(\"display\", \"block\");\n } else {\n (0, _jquery.default)(modal).css(\"display\", \"none\");\n }\n\n (0, _jquery.default)(closebtn).on('click', function () {\n (0, _jquery.default)(modal).css(\"display\", \"none\");\n });\n } // if not-allowed\n\n\n if (mouse_pointer_type === 'wait' && !self.isLoading) {\n // console.log(\"Open or close Mobile Guide selection ...\");\n window.open(\"\".concat(self.store.adapterFor('application').get('host'), \"/pdf/GeoportalMobileGuide.pdf\"), '_blank'); // // Get the modal\n // let modal = document.getElementById(\"scaleModal\");\n // // Get the button that closes the modal\n // let closebtn = document.getElementById(\"scaleCloseBtn\");\n // if($(modal).css('display') === 'none'){\n // $(modal).css(\"display\",\"block\");\n // } else {\n // $(modal).css(\"display\",\"none\");\n // }\n // $(closebtn).on('click', function(){\n // $(modal).css(\"display\",\"none\");\n // });\n } // if not-allowed\n\n });\n (0, _jquery.default)(document).on(\"click\", \".popover .close\", function () {\n (0, _jquery.default)(this).parents(\".popover\").popover('hide');\n });\n this.set('firstLoaded', true);\n return map;\n },\n\n getInitLayers(code) {\n let res1 = null;\n\n if (code == '5247') {\n res1 = this.get('initLayersG');\n } else if (code == '4326') {\n res1 = this.get('initLayersW');\n } else {\n res1 = this.get('initLayersT');\n }\n\n return res1;\n },\n\n getOinitialextent(map) {\n const initextent = this.get('initialExtent');\n return initextent;\n },\n\n getOlayers(map) {\n const store = this.get('store'); // console.log('ol-mapservice getOlayers...'); \n // this is likely the cause of the error - cannot fetch layers inside LG\n // console.log(map.getLayers().getArray().concat());\n\n const layers = map.getLayers().getArray().concat().reverse().map(function (layer) {\n if (layer.getLayers) {\n let layerC = store.createRecord('ol-layer', {\n layer\n });\n const layersArray = layer.getLayers().getArray();\n const layersCArr = layersArray.map(layer => store.createRecord('ol-layer', {\n layer\n })); //const layersCArr = [];\n\n let compositeLayer = layerC;\n compositeLayer.group_array = layersCArr; //compositeLayer.group_class = layerC;\n //return {group_class: layerC, group_array: layersCArr};\n\n return compositeLayer;\n } else {\n return store.createRecord('ol-layer', {\n layer\n });\n }\n }); // console.log('ol-mapservice getOlayers... after process by...');\n // console.log(layers);\n\n this.set('layers', layers);\n return layers;\n },\n\n clearSearchResults() {\n // console.log('Clear Search Results');\n const map = this.get('map');\n let layers1 = map.getLayers();\n layers1.forEach(element => {//// console.log(element);\n //// console.log(element.getProperties());\n //// console.log(element.get('title'));\n });\n },\n\n prepSearchResults(features) {\n // console.log('Prep Search Results');\n // console.log('Each feature properties...')\n features.forEach(element => {// console.log(element.getProperties());\n // console.log(element.getGeometry());\n // console.log(element.getStyle());\n // console.log('feature lot num: ' + element.get('LOTNUM'));\n });\n },\n\n async fetchNearbyWfsObjects(swfs1, slayer1, scoord1, stype) {\n let fetchresults = null;\n const map = this.get('map');\n\n let _s_srs = map.getView().getProjection().getCode(); // console.log('ol-mapservice fetchwfsobjects srs found : ' + _s_srs);\n\n\n let searchCoordCal = '';\n\n if (_s_srs == 'EPSG:4326') {\n //const carray = scoord1.split(\",\");\n // console.log(scoord1);\n const carray5247 = (0, proj.transform)(scoord1, 'EPSG:4326', 'EPSG:5247'); // console.log(carray5247);\n // let x1 = carray5247[0] - 1772.3470206865; // hack to fix proj4.js bug in handling omerc\n // let y1 = carray5247[1] + 1901.6041742575;\n\n let x1 = carray5247[0];\n let y1 = carray5247[1];\n searchCoordCal = [x1, y1];\n _s_srs = 'EPSG:5247';\n } else if (_s_srs == 'EPSG:29873') {\n // console.log(scoord1);\n const carray5247 = (0, proj.transform)(scoord1, 'EPSG:29873', 'EPSG:5247'); // console.log(carray5247);\n // let x1 = carray5247[0] - 1432.1054073741; // hack to fix proj4.js bug in handling omerc\n // let y1 = carray5247[1] + 1917.4047292559;\n\n let x1 = carray5247[0];\n let y1 = carray5247[1];\n searchCoordCal = [x1, y1];\n _s_srs = 'EPSG:5247';\n } else {\n searchCoordCal = scoord1;\n }\n\n let fetchxmlStr = '\\\\n\\\\t\\\\t\\\\t\\\\t