\r\n // {/*
*/}\r\n // {/*
*/}\r\n //
{item.properties['address']}
\r\n //
{ item.properties['displayName']}
\r\n //
{item.properties['displayAddress']}
\r\n //
\r\n //
\r\n //
\r\n //
\r\n //
\r\n //
\r\n //
\r\n //
\r\n // \r\n //));\r\n\r\n const renderedResults = results.map((item, i) => ( \r\n
\r\n ));\r\n return (\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {/*
*/}\r\n {/*
*/}\r\n
\r\n {\r\n (resultsCount > 0) ? ( \r\n
\r\n
\r\n \r\n {renderedResults}\r\n {/* {{isLoading ? : renderedResults}}*/}\r\n \r\n
\r\n
\r\n ) :\r\n (\r\n
\r\n
\r\n \r\n {/*{isLoading ? : }*/}\r\n
\r\n
\r\n )\r\n }\r\n
\r\n )\r\n }\r\n\r\n}\r\n\r\nexport default Scanner;","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport * as turf from '@turf/turf';\r\nimport { getAllShops, getDirection } from \"./../api/apiService\";\r\nimport { removeVieTones, removeSpecName, removeSpecAddress } from \"./utils/strConverter\";\r\nimport { addSpecAddressRule, onlyUnique, aggregateKeyList, aggregateKey } from \"./utils/strConverter\";\r\nimport LoadingSpinner from \"./LoadingSpinner\";\r\nimport Scanner from \"./Scanner\";\r\nimport mapRadarBlue from \"./../img/map-radar-blue.png\";\r\nimport \"./index.css\";\r\n\r\nclass ScannerCtrl extends React.Component {\r\n constructor(props) {\r\n super(props); \r\n this.onClick = this.onClick.bind(this);\r\n this.initSpinner = this.initSpinner.bind(this);\r\n this.initGeoLoc = this.initGeoLoc.bind(this);\r\n this.initMarker = this.initMarker.bind(this); \r\n this.handleDirection = this.handleDirection.bind(this);\r\n this.handleSelection = this.handleSelection.bind(this);\r\n }\r\n\r\n onClick(e) {\r\n console.log('clicked');\r\n }\r\n\r\n initGeoLoc() {\r\n const map = this.props.map;\r\n const geo = this.props.geo;\r\n //const mapResult = this.props.mapResult;\r\n //const mapSource = this.props.mapSource;\r\n try {\r\n map.removeControl(geo);\r\n }\r\n catch { }\r\n\r\n map.addControl(geo, 'top-right');\r\n\r\n //try {\r\n // map.removeControl(mapResult);\r\n //}\r\n //catch { }\r\n //map.addControl(mapResult, \"top-left\");\r\n\r\n //this.setState({ isDirectMode: true, });\r\n\r\n // Set an event listener that fires when a geolocate event occurs. \r\n //geo.on('geolocate', (e) => {\r\n // let lng = e.coords.longitude;\r\n // let lat = e.coords.latitude;\r\n // //let updatedValue = {};\r\n // //updatedValue = { lng: lng, lat: lat };\r\n // //this.setState({\r\n // // currentCoords: updatedValue,\r\n // // currentLng: lng,\r\n // // currentLat: lat,\r\n // //});\r\n\r\n // //if (this.state.isDirectMode) {\r\n // map.setZoom(13.4);\r\n // const srcMarker = this.props.marker;\r\n // srcMarker.current.remove();\r\n // srcMarker.current.setLngLat([lng, lat]).addTo(map);\r\n // //}\r\n\r\n // var from = [lng, lat];\r\n // //var to = [this.state.destLng, this.state.destLat];\r\n // //var distance = this.getDistance(from, to);\r\n // //console.log(`Distance: ${distance} km`);\r\n // var searchRadius = this.makeRadius(from, 1500);\r\n // //map.getSource('search-radius').setData(searchRadius);\r\n // //var featuresInBuffer = this.spatialJoin(this.state.hightlightResults, searchRadius);\r\n // map.getSource('confirmed-points-data').setData(searchRadius);\r\n \r\n //});\r\n\r\n //const srcMarker = this.props.marker;\r\n //const { lng, lat } = map.getCenter();\r\n //srcMarker.current.remove();\r\n //srcMarker.current.setLngLat([lng, lat]).addTo(map);\r\n }\r\n\r\n initMarker(arrLngLat) {\r\n //const srcMarker = this.props.srcMarkerScan;\r\n //if (srcMarker)\r\n // srcMarker.current.setLngLat([lng, lat]);\r\n const map = this.props.map;\r\n const srcMarker = this.props.srcMarker;\r\n const srcMarkerScan = this.props.srcMarkerScan;\r\n const selectMarker = this.props.selectMarker;\r\n if (!arrLngLat) { \r\n if (selectMarker)\r\n selectMarker.remove();\r\n if (srcMarker)\r\n srcMarker.remove();\r\n\r\n const { lng, lat } = map.getCenter();\r\n srcMarkerScan.remove();\r\n srcMarkerScan.setLngLat([lng, lat]).addTo(map);\r\n }\r\n else {\r\n if (selectMarker)\r\n selectMarker.remove();\r\n if (srcMarker)\r\n srcMarker.remove();\r\n\r\n //TODO: recheck\r\n srcMarkerScan.remove();\r\n srcMarkerScan.setLngLat(arrLngLat).addTo(map);\r\n\r\n //Reset Map Layer & Source\r\n if (map.getLayer(\"route\")) {\r\n map.removeLayer(\"route\");\r\n }\r\n if (map.getSource(\"route-data\")) {\r\n map.removeSource(\"route-data\");\r\n }\r\n map.addSource('route-data', {\r\n 'type': 'geojson',\r\n 'data': {\r\n 'type': 'Feature',\r\n 'properties': {},\r\n 'geometry': {\r\n 'type': 'LineString',\r\n 'coordinates': []\r\n }\r\n }\r\n });\r\n map.addLayer({\r\n 'id': 'route',\r\n 'type': 'line',\r\n 'source': 'route-data',\r\n 'layout': {\r\n 'line-join': 'round',\r\n 'line-cap': 'round',\r\n },\r\n 'paint': {\r\n 'line-color': '#0A95FF',\r\n 'line-width': 5,\r\n 'line-opacity': 0.75\r\n }\r\n });\r\n }\r\n }\r\n\r\n initSpinner(isDisplayed) {\r\n const map = this.props.map;\r\n const spinner = this.props.spinner;\r\n const { lng, lat } = map.getCenter();\r\n if (isDisplayed) {\r\n //const spinnerNode = document.createElement('div');\r\n //spinnerNode.style.cssText = 'width:0px; height:0px; margin: 0px 0px 0px 0px;border-radius:10px; border:0px solid #ddd; box-shadow: 0px 0px 5px 4px rgba(67,60,67,.16)';\r\n //spinnerNode.style.zIndex = 1005;\r\n //ReactDOM.render(
, spinnerNode);\r\n //spinner.setLngLat([lng, lat]).setDOMContent(spinnerNode).addTo(map);\r\n spinner.setLngLat([lng, lat]).addTo(map);\r\n } else {\r\n spinner.remove();\r\n }\r\n }\r\n\r\n\r\n //makeRadius(lngLatArray, radiusInMeters) {\r\n // var point = turf.point(lngLatArray);\r\n // var options = { units: 'meters' };\r\n // var buffered = turf.buffer(point, radiusInMeters, options);\r\n // return buffered;\r\n //}\r\n\r\n //spatialJoin(sourceGeoJSON, filterFeature) {\r\n // // Loop through all the features in the source geojson and return the ones that \r\n // // are inside the filter feature (buffered radius) and are confirmed landing sites\r\n // //console.log(sourceGeoJSON);\r\n // var joined = sourceGeoJSON.features.filter(function (feature) {\r\n // //return turf.booleanPointInPolygon(feature, filterFeature) && feature.properties.isConfirmed === 'yes'; \r\n // return turf.booleanPointInPolygon(feature, filterFeature);\r\n // });\r\n // return joined;\r\n //}\r\n\r\n //handleScanner(name) {\r\n // this.fetchShops();\r\n // //this.initDirections('');\r\n // const gaEventTracker = this.props.useGAEventTracker('Map');\r\n // //gaEventTracker(`Shop [${name}]`);\r\n // gaEventTracker(`Shop Scanner`);\r\n //}\r\n\r\n handleSelection(arrLngLat) {\r\n const map = this.props.map;\r\n const destMarkerScan = this.props.destMarkerScan;\r\n destMarkerScan.remove();\r\n destMarkerScan.setLngLat(arrLngLat).addTo(map);\r\n }\r\n\r\n handleDirection(isStart, lng, lat) {\r\n const map = this.props.map;\r\n // Revert\r\n const selectMarker = this.props.selectMarker;\r\n const srcMarker = this.props.srcMarker;\r\n const srcMarkerScan = this.props.srcMarkerScan;\r\n const destMarkerScan = this.props.destMarkerScan;\r\n if (lng === 0 || lat === 0) {\r\n selectMarker.remove();\r\n srcMarker.remove();\r\n srcMarkerScan.remove();\r\n destMarkerScan.remove();\r\n return;\r\n }\r\n\r\n if (!isStart) {\r\n srcMarker.remove();\r\n //srcMarkerScan.remove();\r\n // Remove previous markers \r\n //mapMarkers.forEach((marker) => marker.remove());\r\n //mapMarkers = [];\r\n selectMarker.remove();\r\n selectMarker.setLngLat([lng, lat]).addTo(map);\r\n\r\n //if (map.getLayer(\"search-radius\")) {\r\n // map.removeLayer(\"search-radius\");\r\n //}\r\n //// Reset Map Source\r\n //if (map.getSource(\"radius-points-data\")) {\r\n // map.removeSource(\"radius-points-data\");\r\n //}\r\n\r\n //map.addSource(\"radius-points-data\", {\r\n // type: \"geojson\",\r\n // data: {\r\n // type: \"FeatureCollection\",\r\n // features: [],\r\n // },\r\n //});\r\n\r\n //map.addLayer({\r\n // id: 'search-radius',\r\n // source: \"radius-points-data\",\r\n // //source: {\r\n // // type: 'geojson',\r\n // // data: { \"type\": \"FeatureCollection\", \"features\": [] }\r\n // //},\r\n // type: 'fill',\r\n // paint: {\r\n // 'fill-color': '#D33B37',\r\n // 'fill-opacity': 0.1\r\n // }\r\n //});\r\n }\r\n else {\r\n srcMarker.remove();\r\n srcMarkerScan.remove();\r\n srcMarker.setLngLat([lng, lat]).addTo(map);\r\n selectMarker.remove();\r\n }\r\n }\r\n onAdd() {\r\n //const scannerNode = document.createElement(\"div\");\r\n this.container = document.createElement(\"div\");\r\n //this.container.className = 'custom-control';\r\n //this.map = map;\r\n ReactDOM.render(
, this.container);\r\n //const resulteNode = document.createElement(\"div\");\r\n //ReactDOM.render(
, scannerNode);\r\n return this.container;\r\n }\r\n\r\n onRemove() {\r\n this.container.parentNode.removeChild(this.container);\r\n //this.map = undefined;\r\n }\r\n\r\n //resetSource(name, data) {\r\n // const map = this.props.map;\r\n // map.getSource(name).setData(data);\r\n //}\r\n\r\n //async fetchShops() {\r\n // const map = this.props.map;\r\n // const spinner = this.props.spinner;\r\n // //spinner.current\r\n // // .setLngLat([map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)])\r\n // // .addTo(map);\r\n\r\n // //this.setState({\r\n // // isLoading: true\r\n // //});\r\n\r\n // await getAllShops(\"shops?q=\" + 'ha noi')\r\n // .then((item) => {\r\n // //this.setState({\r\n // // results: item.data,\r\n // // firstLoad: false\r\n // //});\r\n\r\n // //this.drawMap(this.state.query);\r\n // this.drawMap(item.data);\r\n // //console.log(item.data);\r\n // //this.setState({\r\n // // isLoading: false,\r\n // // firstLoad: false\r\n // //});\r\n\r\n // spinner.current.remove();\r\n // })\r\n // .catch(() => {\r\n // //setErrorMessage(\"Unable to fetch list\");\r\n // //this.setState({\r\n // // isLoading: false,\r\n // // firstLoad: false\r\n // //});\r\n // spinner.current.remove();\r\n // });\r\n //}\r\n\r\n //drawMap(data) {\r\n // //console.log(\"Data: \" + data);\r\n // //this.setState({\r\n // // isLoading: true\r\n // //});\r\n // const map = this.props.map;\r\n // const popup = this.props.popup;\r\n // const marker = this.props.marker;\r\n // //const spinner = this.props.spinner;\r\n // //const results = this.state.results;\r\n // const results = data;\r\n // //const directions = this.state.directions;\r\n // var highlightMarkers, usualgeoJSON, highlightgeoJSON;\r\n // popup.current.remove();\r\n // marker.current.remove();\r\n // //if (popup.current.isOpen()) popup.current.remove(); \r\n // //console.log(\"Data: \" + results);\r\n // const jsonMarkers = JSON.stringify(data);\r\n // //console.log(\"Data: \" + jsonMarkers);\r\n\r\n // //const jsonDirections = JSON.stringify(directions.routes[0].geometry);\r\n // //console.log(\"Directions: \" + jsonDirections);\r\n\r\n // //if (vendor && vendor.trim() !== \"\") {\r\n // //if (data) {\r\n // // //highlightMarkers = this.getFilterCentersSuggestions(jsonMarkers, vendor);\r\n // // highlightMarkers = this.getSuggestions(jsonMarkers, 'ha noi');\r\n // // //console.log(\"Return Count: \" + highlightMarkers.length);\r\n // // //this.setState({\r\n // // // query: vendor,\r\n // // // //results: res.body, \r\n // // // firstLoad: false,\r\n // // // filteredList: highlightMarkers,\r\n // // //});\r\n // // //console.log(\"Filtered Data: \" + filteredData);\r\n\r\n // // // highlightMarkers = markers.List.filter(\r\n // // // (m) =>\r\n // // // vendor &&\r\n // // // m?.Address.trim().toLowerCase().includes(vendor.trim().toLowerCase())\r\n // // // );\r\n // // // usualMarkers = markers.filter(\r\n // // // (m) => m.ShopName.toLowerCase() !== vendor.toLowerCase()\r\n // // //);\r\n\r\n // // //usualMarkers = markers;\r\n // // //console.log(usualMarkers);\r\n // //} else {\r\n // // //usualMarkers = markers;\r\n // // //console.log(usualMarkers); \r\n // //}\r\n\r\n // usualgeoJSON = this.genFeatureListFromGeoData(jsonMarkers);\r\n // const jsonFilteredMarkers = JSON.stringify(highlightMarkers);\r\n // highlightgeoJSON = this.genFeatureListFromGeoList(jsonFilteredMarkers);\r\n // //highlightgeoJSON = this.genFeatureListFromGeoData(highlightMarkers);\r\n\r\n // map.getSource(\"custom-points-data\").setData(usualgeoJSON);\r\n // // map.getSource(\"usual-points-data\").setData(usualgeoJSON);\r\n // map.getSource(\"hightlight-points-data\").setData(highlightgeoJSON);\r\n // //const routeFeature = {\r\n // // 'type': 'Feature',\r\n // // 'properties': {},\r\n // // 'geometry': directions.routes[0].geometry,\r\n // //};\r\n // //map.getSource(\"route-data\").setData(routeFeature);\r\n\r\n // map.getSource(\"route-data\").setData({\r\n // 'type': 'LineString',\r\n // 'coordinates': []\r\n // });\r\n\r\n // // // clearing layers\r\n // // if (map.getLayer(\"shops\")) {\r\n // // map.removeLayer(\"shops\");\r\n // // }\r\n // // if (map.getSource(\"shops\")) {\r\n // // map.removeSource(\"shops\");\r\n // // }\r\n // // if (map.getLayer(\"shops-highlight\")) {\r\n // // map.removeLayer(\"shopss-highlight\");\r\n // // }\r\n // // if (map.getSource(\"shops-highlight\")) {\r\n // // map.removeSource(\"shops-highlight\");\r\n // // }\r\n\r\n // // map\r\n // // .addSource(\"shops\", {\r\n // // type: \"geojson\",\r\n // // data: usualgeoJSON,\r\n // // })\r\n // // .addLayer({\r\n // // id: \"shops\",\r\n // // type: \"circle\",\r\n // // interactive: true,\r\n // // source: \"trucks\",\r\n // // paint: {\r\n // // \"circle-radius\": 8,\r\n // // \"circle-color\": \"rgba(253,237,57,1)\",\r\n // // },\r\n // // });\r\n\r\n // // if (highlightMarkers) {\r\n // // map\r\n // // .addSource(\"shops-highlight\", {\r\n // // type: \"geojson\",\r\n // // data: highlightgeoJSON,\r\n // // })\r\n // // .addLayer({\r\n // // id: \"shops-highlight\",\r\n // // type: \"circle\",\r\n // // interactive: true,\r\n // // source: \"shops-highlight\",\r\n // // paint: {\r\n // // \"circle-radius\": 8,\r\n // // \"circle-color\": \"rgba(164,65,99,1)\",\r\n // // },\r\n // // });\r\n // // }\r\n\r\n // //this.setState({\r\n // // isLoading: false\r\n // //});\r\n //}\r\n\r\n //getSuggestions(jsonMarkers, termsString) {\r\n // const markers = JSON.parse(jsonMarkers);\r\n // termsString = removeSpecName(termsString.trim().toLowerCase());\r\n // var key = addSpecAddressRule(termsString.trim().toLowerCase());\r\n // const terms = removeVieTones(key).split(\" \");\r\n // const aggrFilterList = aggregateKeyList(terms);\r\n // //for (let i = 0; i < aggrFilterList.length; i++) {\r\n // // console.log(aggrFilterList[i]);\r\n // //}\r\n\r\n // var data = markers.filter((p) =>\r\n // aggrFilterList.every((term) => [\r\n // //removeVieTones(p.ShopName).toLowerCase().trim(),\r\n // //removeVieTones(p.ShopName).split(\" \"),\r\n // //removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim(),\r\n // removeVieTones(p.Province).toLowerCase().trim(),\r\n // removeVieTones(p.District).toLowerCase().trim(),\r\n // removeVieTones(p.Ward).toLowerCase().trim(),\r\n // removeVieTones(p.Ward).toLowerCase().trim() + \" \" + removeVieTones(p.Province).toLowerCase().trim(),\r\n // removeVieTones(p.Street).toLowerCase().trim(),\r\n // removeVieTones(p.Street).toLowerCase().trim() + \" \" + removeVieTones(p.Province).toLowerCase().trim(),\r\n // removeVieTones(p.Street).toLowerCase().trim() + \" \" + removeVieTones(p.District).toLowerCase().trim(),\r\n // removeVieTones(p.Street).toLowerCase().trim() + \" \" + removeVieTones(p.Ward).toLowerCase().trim(),\r\n // removeVieTones(p.Address).toLowerCase().trim()\r\n // //removeVieTones(removeSpecAddress(p.ShopAddress)).toLowerCase().trim()\r\n // ]\r\n // .some((f) => removeVieTones(f).toLowerCase().trim().match(term))\r\n // ));\r\n\r\n // //const key1 = removeVieTones(removeSpecName(key));\r\n // //console.log(key1);\r\n // //const terms1 = removeVieTones(key1).split(\" \");\r\n // //const aggrFilterList1 = aggregateKeyList(terms1); \r\n\r\n // var data2 = markers.filter((p) =>\r\n // aggrFilterList.every((term) => [\r\n // removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim(),\r\n // removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Province).toLowerCase().trim(),\r\n // removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.District).toLowerCase().trim(),\r\n // removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Ward).toLowerCase().trim(),\r\n // removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Street).toLowerCase().trim(),\r\n // //removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Address).toLowerCase().trim()\r\n // ]\r\n // .some((f) => removeVieTones(f).toLowerCase().trim().includes(term))\r\n // ));\r\n\r\n // var data3 = markers.filter((p) =>\r\n // aggrFilterList.every((term) => [\r\n // //removeVieTones(p.Name).toLowerCase().trim(), \r\n // //removeVieTones(removeSpecAddress(p.Address)).toLowerCase().trim(),\r\n // removeVieTones(removeSpecAddress(p.ShopAddress)).toLowerCase().trim()\r\n // ]\r\n // .some((f) => removeVieTones(f).toLowerCase().trim().includes(term))\r\n // ));\r\n\r\n\r\n // //var filterdShops = [];\r\n // ////var shopsByProvince = markers.filter((p) =>\r\n // //// aggrFilterList.every((key) => [ \r\n // //// removeVieTones(p.Province).toLowerCase().trim()]\r\n // //// .some((item) => removeVieTones(item != null && item.trim() != \"\" ? item.toLowerCase().trim() : \"\").match(key))\r\n // //// ));\r\n\r\n // ////var shopsByProvince = markers.filter((p) =>\r\n // //// aggrFilterList.every((key) => removeVieTones(p.Province != null && p.Province.trim() != \"\" ? p.Province.toLowerCase().trim() : \"\").toLowerCase().trim().match(key)));\r\n\r\n // //var shopsByProvince = markers.filter((p) =>\r\n // // aggrFilterList.every((term) => [\r\n // // removeVieTones(p.Province).toLowerCase().trim()\r\n // // ].some((f) => removeVieTones(f).trim().toLowerCase().match(term))\r\n // // ));\r\n\r\n // //console.log(\"Total Count: \" + markers.length);\r\n // //console.log(\"Province Count: \" + shopsByProvince.length);\r\n // //var sJsonProvince = JSON.stringify(shopsByProvince);\r\n // ////console.log(sJsonProvince);\r\n // //var oJsonProvince = JSON.parse(sJsonProvince);\r\n // //var shopsByDistrict = markers.filter((p) =>\r\n // // aggrFilterList.every((term) => [\r\n // // removeVieTones(p.District).toLowerCase().trim()\r\n // // ].some((f) => removeVieTones(f).trim().toLowerCase().match(term))\r\n // // ));\r\n // //console.log(\"District Count: \" + shopsByDistrict.length);\r\n // //var sJsonDistrict = JSON.stringify(shopsByDistrict);\r\n // //var oJsonDistrict = JSON.parse(sJsonDistrict);\r\n // //var shopsByWard = markers.filter((p) =>\r\n // // aggrFilterList.every((key) =>\r\n // // removeVieTones(p.Ward != null && p.Ward.trim() != \"\" ? p.Ward.toLowerCase().trim() : \"\").toLowerCase().trim().match(key)\r\n // // ));\r\n // //console.log(\"Ward Count: \" + shopsByWard.length);\r\n // //var sJsonWard = JSON.stringify(shopsByWard);\r\n // //var oJsonWard = JSON.parse(sJsonWard);\r\n // //var shopsByStreet = markers.filter((p) =>\r\n // // aggrFilterList.every((key) =>\r\n // // removeVieTones(p.Street != null && p.Street.trim() != \"\" ? p.Street.toLowerCase().trim() : \"\").toLowerCase().trim().match(key)\r\n // // ));\r\n // //console.log(\"Street Count: \" + shopsByStreet.length);\r\n // ////var shopsByProvince = markers.filter((p) =>\r\n // //// aggrFilterList.every((key) => [ \r\n // //// removeVieTones(p.Province).toLowerCase().trim()]\r\n // //// .some((item) => removeVieTones(item != null && item.trim() != \"\" ? item.toLowerCase().trim() : \"\") === key)\r\n // //// ));\r\n\r\n // ////var shopsByDistrict = data.filter((p) =>\r\n // //// aggrFilterList.every((key) => [\r\n // //// removeVieTones(p.District).toLowerCase().trim()]\r\n // //// .some((item) => removeVieTones(item.trim().toLowerCase()).equals(key))\r\n // //// ));\r\n\r\n // ////var shopsByWard = data.filter((p) =>\r\n // //// aggrFilterList.every((key) => [\r\n // //// removeVieTones(p.Ward).toLowerCase().trim()]\r\n // //// .some((item) => removeVieTones(item.trim().toLowerCase()).equals(key))\r\n // //// ));\r\n\r\n // ////var shopsByStreet = data.filter((p) =>\r\n // //// aggrFilterList.every((key) => [\r\n // //// removeVieTones(p.Street).toLowerCase().trim()]\r\n // //// .some((item) => removeVieTones(item.trim().toLowerCase()).equals(key))\r\n // //// ));\r\n\r\n // //filterdShops = filterdShops.concat(shopsByStreet, shopsByWard, shopsByDistrict, shopsByProvince );\r\n // ////filterdShops = filterdShops.concat(shopsByProvince);\r\n\r\n // ////const data = markers.filter((p) =>\r\n // //// aggrFilterList.every((term) => [\r\n // //// removeVieTones(p.ShopName).toLowerCase().trim(),\r\n // //// removeVieTones(p.Province).toLowerCase().trim(),\r\n // //// removeVieTones(p.District).toLowerCase().trim(),\r\n // //// removeVieTones(p.Ward).toLowerCase().trim(),\r\n // //// removeVieTones(p.Street).toLowerCase().trim(),\r\n // //// //removeVieTones(removeSpecAddress(p.Address)).toLowerCase().trim()\r\n // //// ]\r\n // //// .some((f) => removeVieTones(f.trim().toLowerCase()).equals(term))\r\n // //// ));\r\n\r\n // ////const data = markers.filter((p) =>\r\n // //// aggrFilterList.every((term) => [\r\n // //// removeVieTones(p.Province).toLowerCase().trim()\r\n // //// ]\r\n // //// .some((f) => removeVieTones(f.trim().toLowerCase()).includes(term))\r\n // //// ));\r\n\r\n // ////const data = markers;\r\n\r\n // ////const dataByWard = markers.filter((p) =>\r\n // //// aggrFilterList.every((term) => [ removeVieTones(p.Ward).toLowerCase().trim()]\r\n // //// .some((f) => removeVieTones(f.trim().toLowerCase()).equals(term))\r\n // //// ));\r\n\r\n // data = data.concat(data2).concat(data3);\r\n // //data = data3.concat(data2).concat(data);\r\n // data = data.filter(onlyUnique);\r\n // return data;\r\n // //return sortData(data, \"Province\", \"asc\");\r\n // //return sortData(filterdShops, \"Province\", \"asc\");\r\n // //return filterdShops;\r\n //}\r\n\r\n //async initDirections(name) {\r\n // const map = this.props.map;\r\n // const spinner = this.props.spinner;\r\n // const geoLocate = this.props.geoLocate;\r\n // const srcMarker = this.props.marker;\r\n // const results = this.state.results;\r\n // //const directions = this.state.directions;\r\n // var highlightMarkers;\r\n // this.props.handleToggler();\r\n\r\n // spinner.current\r\n // .setLngLat([map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)])\r\n // .addTo(map);\r\n\r\n // try {\r\n // map.removeControl(geoLocate.current);\r\n // }\r\n // catch { }\r\n\r\n // map.addControl(geoLocate.current, 'top-right');\r\n\r\n // this.setState({ isDirectMode: true, });\r\n\r\n // // Set an event listener that fires when a geolocate event occurs. \r\n // geoLocate.current.on('geolocate', (e) => {\r\n // let lng = e.coords.longitude;\r\n // let lat = e.coords.latitude;\r\n // let updatedValue = {};\r\n // updatedValue = { lng: lng, lat: lat };\r\n // this.setState({\r\n // currentCoords: updatedValue,\r\n // currentLng: lng,\r\n // currentLat: lat,\r\n // });\r\n\r\n // if (this.state.isDirectMode) {\r\n // const srcMarker = this.props.marker;\r\n // srcMarker.current.remove();\r\n // srcMarker.current.setLngLat([lng, lat]).addTo(map);\r\n // }\r\n // });\r\n\r\n // //geoLocate.current.trigger();\r\n\r\n // this.setState({\r\n // isLoading: true\r\n // });\r\n\r\n // const jsonMarkers = JSON.stringify(results);\r\n // var _destLng, _destLat = \"\";\r\n // if (name && name.trim() !== \"\") {\r\n // highlightMarkers = this.getSuggestions(jsonMarkers, name);\r\n\r\n // if (highlightMarkers.length === 1) {\r\n // //console.log(\"* Dest Marker: \" + JSON.stringify(highlightMarkers)); \r\n // } else {\r\n // highlightMarkers = this.getSuggestions(jsonMarkers, name + ' ' + this.state.query);\r\n // }\r\n\r\n // var selectLoc = JSON.parse(JSON.stringify(highlightMarkers));\r\n\r\n // selectLoc.map((p) => {\r\n // _destLng = p.Longitude;\r\n // _destLat = p.Latitude;\r\n // this.setState({\r\n // destLng: p.Longitude,\r\n // destLat: p.Latitude,\r\n // startLng: p.Longitude,\r\n // startLat: p.Latitude,\r\n // });\r\n // });\r\n\r\n // //await getDirection(`${_destLng},${_destLat}`, `${_destLng},${_destLat}`)\r\n // // .then((item) => {\r\n // // this.setState({\r\n // // directions: item.data,\r\n // // firstLoad: false,\r\n // // isDirectInit: true,\r\n // // });\r\n // // //this.redrawMap(this.state.query);\r\n // // this.redrawDirections(name);\r\n // // this.setState({\r\n // // isLoading: false,\r\n // // firstLoad: false\r\n // // });\r\n\r\n // // //const map = this.props.map;\r\n // // //const spinner = this.props.spinner;\r\n // // spinner.current.remove();\r\n // // })\r\n // // .catch(() => {\r\n // // //setErrorMessage(\"Unable to fetch list\");\r\n // // this.setState({\r\n // // isLoading: false,\r\n // // firstLoad: false\r\n // // });\r\n // // });\r\n\r\n // this.props.handleDirection(true, map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4));\r\n // //const srcMarker = this.props.marker;\r\n // //Show direct guideline (popup) \r\n\r\n // map.on(\"moveend\", async () => {\r\n // if (!map) return;\r\n // console.log('moveend');\r\n // this.setState({ currentZoom: map.getZoom().toFixed(1) });\r\n // //console.log(\"Current zoom: \" + map.getZoom().toFixed(1)); \r\n // // Get new center coordinates \r\n // const { lng, lat } = map.getCenter();\r\n // const srcMarker = this.props.marker;\r\n // srcMarker.current.setLngLat([lng, lat]);\r\n // this.setState({\r\n // startLng: lng,\r\n // startLat: lat,\r\n // //isDirectInit: (this.state.startLng === this.state.destLng && this.state.startLat === this.state.destLat)?true:false,\r\n // });\r\n // });\r\n\r\n // //map.on(\"load\", () => {\r\n // // if (!map) return;\r\n // // this.addRadarButton(map);\r\n // //});\r\n\r\n // //map.on(\"resize\", async () => {\r\n // // map.setSize(13.5);\r\n // // console.log(13.5);\r\n // //});\r\n\r\n // //radarButton.current.getElement().addEventListener('onClick', (e) => {\r\n // // const centerPosition = {\r\n // // center: [map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)],\r\n // // };\r\n // // map.flyTo(centerPosition);\r\n // //});\r\n\r\n\r\n // srcMarker.current.getElement().addEventListener('click', (e) => {\r\n // let isDirInit = (this.state.startLng === this.state.destLng && this.state.startLat === this.state.destLat) ? true : false;\r\n // if (isDirInit) {\r\n // return;\r\n // }\r\n // this.setState({ isDirectPoint: true });\r\n\r\n // this.props.handleDirection(false, this.state.startLng, this.state.startLat);\r\n\r\n // //getDirection(`${this.state.startLng},${this.state.startLat}`, `${this.state.destLng},${this.state.destLat}`)\r\n // // .then((item) => {\r\n // // this.setState({\r\n // // directions: item.data,\r\n // // firstLoad: false,\r\n // // });\r\n // // //this.redrawMap(this.state.query);\r\n // // this.redrawDirections(name);\r\n // // //this.setMapCenter([this.state.startLng, this.state.startLat]);\r\n // // //this.props.handleZoom(this.state.currentZoom);\r\n // // this.setState({\r\n // // isLoading: false,\r\n // // firstLoad: false\r\n // // });\r\n\r\n // // //const map = this.props.map;\r\n // // //const spinner = this.props.spinner;\r\n // // spinner.current.remove();\r\n // // //srcMarker.current.setLngLat([map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)]);\r\n // // })\r\n // // .catch(() => {\r\n // // //setErrorMessage(\"Unable to fetch list\");\r\n // // this.setState({\r\n // // isLoading: false,\r\n // // firstLoad: false,\r\n // // });\r\n // // });\r\n\r\n // this.setState({\r\n // isDirectMode: false,\r\n // });\r\n // });\r\n\r\n // this.setState({\r\n // isLoading: false,\r\n // firstLoad: false\r\n // });\r\n\r\n // //const map = this.props.map;\r\n // //const spinner = this.props.spinner;\r\n // spinner.current.remove();\r\n // } else {\r\n // // do nothing\r\n // }\r\n //}\r\n\r\n}\r\n\r\nexport default ScannerCtrl;","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport * as turf from '@turf/turf';\r\nimport { getAllShops, getDirection } from \"./../api/apiService\";\r\nimport { removeVieTones, removeSpecName, removeSpecAddress } from \"./utils/strConverter\";\r\nimport { addSpecAddressRule, onlyUnique, aggregateKeyList, aggregateKey } from \"./utils/strConverter\";\r\nimport LoadingSpinner from \"./LoadingSpinner\";\r\nimport Scanner from \"./Scanner\";\r\n//import mapRadarBlue from \"./../img/map-radar-blue.png\";\r\nimport search from \"./../img/search-blue.png\";\r\nimport \"./index.css\";\r\n\r\nclass SearchButton extends React.Component {\r\n constructor(props) {\r\n super(props); \r\n //this.onClick = this.onClick.bind(this);\r\n this.initGeoLoc = this.initGeoLoc.bind(this);\r\n this.initMarker = this.initMarker.bind(this);\r\n this.initSpinner = this.initSpinner.bind(this);\r\n }\r\n\r\n //onClick(e) {\r\n // console.log('clicked');\r\n //}\r\n\r\n initGeoLoc() {\r\n const map = this.props.map;\r\n const geo = this.props.geo;\r\n const mapResult = this.props.mapResult;\r\n //const mapSource = this.props.mapSource;\r\n try {\r\n map.removeControl(geo);\r\n }\r\n catch { }\r\n\r\n map.addControl(geo, 'top-right');\r\n\r\n //try {\r\n // map.removeControl(mapResult);\r\n //}\r\n //catch { }\r\n //map.addControl(mapResult, \"top-left\");\r\n\r\n //this.setState({ isDirectMode: true, });\r\n\r\n // Set an event listener that fires when a geolocate event occurs. \r\n //geo.on('geolocate', (e) => {\r\n // let lng = e.coords.longitude;\r\n // let lat = e.coords.latitude;\r\n // //let updatedValue = {};\r\n // //updatedValue = { lng: lng, lat: lat };\r\n // //this.setState({\r\n // // currentCoords: updatedValue,\r\n // // currentLng: lng,\r\n // // currentLat: lat,\r\n // //});\r\n\r\n // //if (this.state.isDirectMode) {\r\n // map.setZoom(13.4);\r\n // const srcMarker = this.props.marker;\r\n // srcMarker.current.remove();\r\n // srcMarker.current.setLngLat([lng, lat]).addTo(map);\r\n // //}\r\n\r\n // var from = [lng, lat];\r\n // //var to = [this.state.destLng, this.state.destLat];\r\n // //var distance = this.getDistance(from, to);\r\n // //console.log(`Distance: ${distance} km`);\r\n // var searchRadius = this.makeRadius(from, 1500);\r\n // //map.getSource('search-radius').setData(searchRadius);\r\n // //var featuresInBuffer = this.spatialJoin(this.state.hightlightResults, searchRadius);\r\n // map.getSource('confirmed-points-data').setData(searchRadius);\r\n \r\n //});\r\n\r\n //const srcMarker = this.props.marker;\r\n //const { lng, lat } = map.getCenter();\r\n //srcMarker.current.remove();\r\n //srcMarker.current.setLngLat([lng, lat]).addTo(map);\r\n }\r\n\r\n makeRadius(lngLatArray, radiusInMeters) {\r\n var point = turf.point(lngLatArray);\r\n var options = { units: 'meters' };\r\n var buffered = turf.buffer(point, radiusInMeters, options);\r\n return buffered;\r\n }\r\n\r\n spatialJoin(sourceGeoJSON, filterFeature) {\r\n // Loop through all the features in the source geojson and return the ones that \r\n // are inside the filter feature (buffered radius) and are confirmed landing sites\r\n //console.log(sourceGeoJSON);\r\n var joined = sourceGeoJSON.features.filter(function (feature) {\r\n //return turf.booleanPointInPolygon(feature, filterFeature) && feature.properties.isConfirmed === 'yes'; \r\n return turf.booleanPointInPolygon(feature, filterFeature);\r\n });\r\n return joined;\r\n }\r\n\r\n initMarker(arrLngLat) {\r\n //const srcMarker = this.props.marker;\r\n //if (srcMarker)\r\n // srcMarker.current.setLngLat([lng, lat]);\r\n const map = this.props.map;\r\n const srcMarker = this.props.srcMarker;\r\n if (!arrLngLat) {\r\n const { lng, lat } = map.getCenter();\r\n srcMarker.remove();\r\n srcMarker.setLngLat([lng, lat]).addTo(map);\r\n }\r\n else {\r\n srcMarker.remove();\r\n srcMarker.setLngLat(arrLngLat).addTo(map);\r\n }\r\n }\r\n\r\n initSpinner(isDisplayed) {\r\n const map = this.props.map;\r\n const spinner = this.props.spinner;\r\n const { lng, lat } = map.getCenter();\r\n if (isDisplayed) {\r\n spinner.current\r\n //.setLngLat([map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)])\r\n .setLngLat([lng, lat]).addTo(map);\r\n } else {\r\n spinner.current.remove();\r\n }\r\n }\r\n\r\n handleScanner(name) {\r\n this.fetchShops();\r\n //this.initDirections('');\r\n const gaEventTracker = this.props.useGAEventTracker('Map');\r\n //gaEventTracker(`Shop [${name}]`);\r\n gaEventTracker(`Shop Scanner`);\r\n }\r\n\r\n onAdd() {\r\n const map = this.props.map; \r\n const geo = this.props.geo;\r\n const geoScan = this.props.geoScan;\r\n const searcher = this.props.searcher;\r\n const scanner = this.props.scanner;\r\n const srcMarker = this.props.srcMarker;\r\n const srcMarkerScan = this.props.srcMarkerScan;\r\n const destMarkerScan = this.props.destMarkerScan;\r\n //const selectMarkerScan = this.props.selectMarkerScan;\r\n const selectMarker = this.props.selectMarker;\r\n //const scannerNode = document.createElement(\"div\");\r\n this.container = document.createElement(\"div\");\r\n this.container.className = \"mapboxgl-ctrl mapboxgl-ctrl-group\";\r\n this.container.innerHTML = `
`;\r\n this.container.addEventListener(\"contextmenu\", (e) => e.preventDefault());\r\n this.container.addEventListener(\"click\", () => {\r\n if (srcMarker)\r\n srcMarker.remove(); \r\n if (srcMarkerScan)\r\n srcMarkerScan.remove();\r\n if (destMarkerScan)\r\n destMarkerScan.remove();\r\n if (selectMarker)\r\n selectMarker.remove();\r\n //if (selectMarkerScan)\r\n // selectMarkerScan.remove();\r\n \r\n try { \r\n map.removeControl(searcher); \r\n }\r\n catch { }\r\n try {\r\n map.removeControl(scanner);\r\n }\r\n catch { }\r\n\r\n //try {\r\n // map.removeControl(btnSearcher);\r\n //}\r\n //catch { }\r\n //try {\r\n // map.removeControl(btnScanner);\r\n //}\r\n //catch { }\r\n\r\n try {\r\n map.removeControl(geo); \r\n }\r\n catch { }\r\n try { \r\n map.removeControl(geoScan);\r\n }\r\n catch { }\r\n\r\n map.addControl(searcher, \"top-left\");\r\n //map.addControl(searcher, \"bottom-left\");\r\n this.props.initGUI(map, true);\r\n \r\n\r\n if (map.getLayer(\"hightlight-points-layer\"))\r\n map.removeLayer(\"hightlight-points-layer\");\r\n \r\n if (map.getSource(\"hightlight-points-data\"))\r\n map.removeSource(\"hightlight-points-data\"); \r\n\r\n map.addSource(\"hightlight-points-data\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: [],\r\n },\r\n });\r\n\r\n map.addLayer({\r\n id: \"hightlight-points-layer\",\r\n source: \"hightlight-points-data\",\r\n type: \"symbol\",\r\n layout: {\r\n // full list of icons here: https://labs.mapbox.com/maki-icons\r\n \"icon-image\": 'mapMarker', // this will put little croissants on our map\r\n \"icon-padding\": 0,\r\n \"icon-allow-overlap\": true,\r\n 'icon-size': 0.3\r\n }, \r\n });\r\n\r\n if (map.getLayer(\"search-radius\"))\r\n map.removeLayer(\"search-radius\");\r\n \r\n if (map.getSource(\"radius-points-data\")) \r\n map.removeSource(\"radius-points-data\"); \r\n \r\n map.addSource(\"radius-points-data\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: [],\r\n },\r\n });\r\n\r\n map.addLayer({\r\n id: 'search-radius',\r\n source: \"radius-points-data\",\r\n //source: {\r\n // type: 'geojson',\r\n // data: { \"type\": \"FeatureCollection\", \"features\": [] }\r\n //},\r\n type: 'fill',\r\n paint: {\r\n 'fill-color': '#D33B37',\r\n 'fill-opacity': 0.1\r\n }\r\n });\r\n\r\n if (map.getLayer(\"confirmed-points-layer\")) {\r\n map.removeLayer(\"confirmed-points-layer\");\r\n }\r\n \r\n if (map.getSource(\"confirmed-points-data\")) {\r\n map.removeSource(\"confirmed-points-data\");\r\n }\r\n\r\n map.addSource(\"confirmed-points-data\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: [],\r\n },\r\n });\r\n\r\n map.addLayer({\r\n id: \"confirmed-points-layer\",\r\n source: \"confirmed-points-data\",\r\n type: \"symbol\",\r\n layout: {\r\n // full list of icons here: https://labs.mapbox.com/maki-icons\r\n \"icon-image\": 'mapMarker1', // this will put little croissants on our map\r\n \"icon-padding\": 0,\r\n \"icon-allow-overlap\": true,\r\n 'icon-size': 0.3\r\n },\r\n });\r\n\r\n //DIRECT\r\n if (map.getLayer(\"route\")) {\r\n map.removeLayer(\"route\");\r\n }\r\n if (map.getSource(\"route-data\")) {\r\n map.removeSource(\"route-data\");\r\n }\r\n \r\n map.addSource('route-data', {\r\n 'type': 'geojson',\r\n 'data': {\r\n 'type': 'Feature',\r\n 'properties': {},\r\n 'geometry': {\r\n 'type': 'LineString',\r\n 'coordinates': []\r\n }\r\n }\r\n });\r\n\r\n map.addLayer({\r\n 'id': 'route',\r\n 'type': 'line',\r\n 'source': 'route-data',\r\n 'layout': {\r\n 'line-join': 'round',\r\n 'line-cap': 'round',\r\n },\r\n 'paint': {\r\n 'line-color': '#0A95FF',\r\n 'line-width': 5,\r\n 'line-opacity': 0.75\r\n }\r\n });\r\n });\r\n\r\n return this.container;\r\n }\r\n\r\n onRemove() {\r\n this.container.parentNode.removeChild(this.container);\r\n //this.map = undefined;\r\n }\r\n\r\n resetSource(name, data) {\r\n const map = this.props.map;\r\n map.getSource(name).setData(data);\r\n }\r\n\r\n async fetchShops() {\r\n const map = this.props.map;\r\n const spinner = this.props.spinner;\r\n //spinner.current\r\n // .setLngLat([map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)])\r\n // .addTo(map);\r\n\r\n //this.setState({\r\n // isLoading: true\r\n //});\r\n\r\n await getAllShops(\"shops?q=\" + 'ha noi')\r\n .then((item) => {\r\n //this.setState({\r\n // results: item.data,\r\n // firstLoad: false\r\n //});\r\n\r\n //this.drawMap(this.state.query);\r\n this.drawMap(item.data);\r\n //console.log(item.data);\r\n //this.setState({\r\n // isLoading: false,\r\n // firstLoad: false\r\n //});\r\n\r\n spinner.current.remove();\r\n })\r\n .catch(() => {\r\n //setErrorMessage(\"Unable to fetch list\");\r\n //this.setState({\r\n // isLoading: false,\r\n // firstLoad: false\r\n //});\r\n spinner.current.remove();\r\n });\r\n }\r\n\r\n drawMap(data) {\r\n //console.log(\"Data: \" + data);\r\n //this.setState({\r\n // isLoading: true\r\n //});\r\n const map = this.props.map;\r\n const popup = this.props.popup;\r\n const marker = this.props.marker;\r\n //const spinner = this.props.spinner;\r\n //const results = this.state.results;\r\n const results = data;\r\n //const directions = this.state.directions;\r\n var highlightMarkers, usualgeoJSON, highlightgeoJSON;\r\n popup.current.remove();\r\n marker.current.remove();\r\n //if (popup.current.isOpen()) popup.current.remove(); \r\n //console.log(\"Data: \" + results);\r\n const jsonMarkers = JSON.stringify(data);\r\n //console.log(\"Data: \" + jsonMarkers);\r\n\r\n //const jsonDirections = JSON.stringify(directions.routes[0].geometry);\r\n //console.log(\"Directions: \" + jsonDirections);\r\n\r\n //if (vendor && vendor.trim() !== \"\") {\r\n //if (data) {\r\n // //highlightMarkers = this.getFilterCentersSuggestions(jsonMarkers, vendor);\r\n // highlightMarkers = this.getSuggestions(jsonMarkers, 'ha noi');\r\n // //console.log(\"Return Count: \" + highlightMarkers.length);\r\n // //this.setState({\r\n // // query: vendor,\r\n // // //results: res.body, \r\n // // firstLoad: false,\r\n // // filteredList: highlightMarkers,\r\n // //});\r\n // //console.log(\"Filtered Data: \" + filteredData);\r\n\r\n // // highlightMarkers = markers.List.filter(\r\n // // (m) =>\r\n // // vendor &&\r\n // // m?.Address.trim().toLowerCase().includes(vendor.trim().toLowerCase())\r\n // // );\r\n // // usualMarkers = markers.filter(\r\n // // (m) => m.ShopName.toLowerCase() !== vendor.toLowerCase()\r\n // //);\r\n\r\n // //usualMarkers = markers;\r\n // //console.log(usualMarkers);\r\n //} else {\r\n // //usualMarkers = markers;\r\n // //console.log(usualMarkers); \r\n //}\r\n\r\n usualgeoJSON = this.genFeatureListFromGeoData(jsonMarkers);\r\n const jsonFilteredMarkers = JSON.stringify(highlightMarkers);\r\n highlightgeoJSON = this.genFeatureListFromGeoList(jsonFilteredMarkers);\r\n //highlightgeoJSON = this.genFeatureListFromGeoData(highlightMarkers);\r\n\r\n map.getSource(\"custom-points-data\").setData(usualgeoJSON);\r\n // map.getSource(\"usual-points-data\").setData(usualgeoJSON);\r\n map.getSource(\"hightlight-points-data\").setData(highlightgeoJSON);\r\n //const routeFeature = {\r\n // 'type': 'Feature',\r\n // 'properties': {},\r\n // 'geometry': directions.routes[0].geometry,\r\n //};\r\n //map.getSource(\"route-data\").setData(routeFeature);\r\n\r\n map.getSource(\"route-data\").setData({\r\n 'type': 'LineString',\r\n 'coordinates': []\r\n });\r\n\r\n // // clearing layers\r\n // if (map.getLayer(\"shops\")) {\r\n // map.removeLayer(\"shops\");\r\n // }\r\n // if (map.getSource(\"shops\")) {\r\n // map.removeSource(\"shops\");\r\n // }\r\n // if (map.getLayer(\"shops-highlight\")) {\r\n // map.removeLayer(\"shopss-highlight\");\r\n // }\r\n // if (map.getSource(\"shops-highlight\")) {\r\n // map.removeSource(\"shops-highlight\");\r\n // }\r\n\r\n // map\r\n // .addSource(\"shops\", {\r\n // type: \"geojson\",\r\n // data: usualgeoJSON,\r\n // })\r\n // .addLayer({\r\n // id: \"shops\",\r\n // type: \"circle\",\r\n // interactive: true,\r\n // source: \"trucks\",\r\n // paint: {\r\n // \"circle-radius\": 8,\r\n // \"circle-color\": \"rgba(253,237,57,1)\",\r\n // },\r\n // });\r\n\r\n // if (highlightMarkers) {\r\n // map\r\n // .addSource(\"shops-highlight\", {\r\n // type: \"geojson\",\r\n // data: highlightgeoJSON,\r\n // })\r\n // .addLayer({\r\n // id: \"shops-highlight\",\r\n // type: \"circle\",\r\n // interactive: true,\r\n // source: \"shops-highlight\",\r\n // paint: {\r\n // \"circle-radius\": 8,\r\n // \"circle-color\": \"rgba(164,65,99,1)\",\r\n // },\r\n // });\r\n // }\r\n\r\n //this.setState({\r\n // isLoading: false\r\n //});\r\n }\r\n\r\n getSuggestions(jsonMarkers, termsString) {\r\n const markers = JSON.parse(jsonMarkers);\r\n termsString = removeSpecName(termsString.trim().toLowerCase());\r\n var key = addSpecAddressRule(termsString.trim().toLowerCase());\r\n const terms = removeVieTones(key).split(\" \");\r\n const aggrFilterList = aggregateKeyList(terms);\r\n //for (let i = 0; i < aggrFilterList.length; i++) {\r\n // console.log(aggrFilterList[i]);\r\n //}\r\n\r\n var data = markers.filter((p) =>\r\n aggrFilterList.every((term) => [\r\n //removeVieTones(p.ShopName).toLowerCase().trim(),\r\n //removeVieTones(p.ShopName).split(\" \"),\r\n //removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim(),\r\n removeVieTones(p.Province).toLowerCase().trim(),\r\n removeVieTones(p.District).toLowerCase().trim(),\r\n removeVieTones(p.Ward).toLowerCase().trim(),\r\n removeVieTones(p.Ward).toLowerCase().trim() + \" \" + removeVieTones(p.Province).toLowerCase().trim(),\r\n removeVieTones(p.Street).toLowerCase().trim(),\r\n removeVieTones(p.Street).toLowerCase().trim() + \" \" + removeVieTones(p.Province).toLowerCase().trim(),\r\n removeVieTones(p.Street).toLowerCase().trim() + \" \" + removeVieTones(p.District).toLowerCase().trim(),\r\n removeVieTones(p.Street).toLowerCase().trim() + \" \" + removeVieTones(p.Ward).toLowerCase().trim(),\r\n removeVieTones(p.Address).toLowerCase().trim()\r\n //removeVieTones(removeSpecAddress(p.ShopAddress)).toLowerCase().trim()\r\n ]\r\n .some((f) => removeVieTones(f).toLowerCase().trim().match(term))\r\n ));\r\n\r\n //const key1 = removeVieTones(removeSpecName(key));\r\n //console.log(key1);\r\n //const terms1 = removeVieTones(key1).split(\" \");\r\n //const aggrFilterList1 = aggregateKeyList(terms1); \r\n\r\n var data2 = markers.filter((p) =>\r\n aggrFilterList.every((term) => [\r\n removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim(),\r\n removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Province).toLowerCase().trim(),\r\n removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.District).toLowerCase().trim(),\r\n removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Ward).toLowerCase().trim(),\r\n removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Street).toLowerCase().trim(),\r\n //removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Address).toLowerCase().trim()\r\n ]\r\n .some((f) => removeVieTones(f).toLowerCase().trim().includes(term))\r\n ));\r\n\r\n var data3 = markers.filter((p) =>\r\n aggrFilterList.every((term) => [\r\n //removeVieTones(p.Name).toLowerCase().trim(), \r\n //removeVieTones(removeSpecAddress(p.Address)).toLowerCase().trim(),\r\n removeVieTones(removeSpecAddress(p.ShopAddress)).toLowerCase().trim()\r\n ]\r\n .some((f) => removeVieTones(f).toLowerCase().trim().includes(term))\r\n ));\r\n\r\n\r\n //var filterdShops = [];\r\n ////var shopsByProvince = markers.filter((p) =>\r\n //// aggrFilterList.every((key) => [ \r\n //// removeVieTones(p.Province).toLowerCase().trim()]\r\n //// .some((item) => removeVieTones(item != null && item.trim() != \"\" ? item.toLowerCase().trim() : \"\").match(key))\r\n //// ));\r\n\r\n ////var shopsByProvince = markers.filter((p) =>\r\n //// aggrFilterList.every((key) => removeVieTones(p.Province != null && p.Province.trim() != \"\" ? p.Province.toLowerCase().trim() : \"\").toLowerCase().trim().match(key)));\r\n\r\n //var shopsByProvince = markers.filter((p) =>\r\n // aggrFilterList.every((term) => [\r\n // removeVieTones(p.Province).toLowerCase().trim()\r\n // ].some((f) => removeVieTones(f).trim().toLowerCase().match(term))\r\n // ));\r\n\r\n //console.log(\"Total Count: \" + markers.length);\r\n //console.log(\"Province Count: \" + shopsByProvince.length);\r\n //var sJsonProvince = JSON.stringify(shopsByProvince);\r\n ////console.log(sJsonProvince);\r\n //var oJsonProvince = JSON.parse(sJsonProvince);\r\n //var shopsByDistrict = markers.filter((p) =>\r\n // aggrFilterList.every((term) => [\r\n // removeVieTones(p.District).toLowerCase().trim()\r\n // ].some((f) => removeVieTones(f).trim().toLowerCase().match(term))\r\n // ));\r\n //console.log(\"District Count: \" + shopsByDistrict.length);\r\n //var sJsonDistrict = JSON.stringify(shopsByDistrict);\r\n //var oJsonDistrict = JSON.parse(sJsonDistrict);\r\n //var shopsByWard = markers.filter((p) =>\r\n // aggrFilterList.every((key) =>\r\n // removeVieTones(p.Ward != null && p.Ward.trim() != \"\" ? p.Ward.toLowerCase().trim() : \"\").toLowerCase().trim().match(key)\r\n // ));\r\n //console.log(\"Ward Count: \" + shopsByWard.length);\r\n //var sJsonWard = JSON.stringify(shopsByWard);\r\n //var oJsonWard = JSON.parse(sJsonWard);\r\n //var shopsByStreet = markers.filter((p) =>\r\n // aggrFilterList.every((key) =>\r\n // removeVieTones(p.Street != null && p.Street.trim() != \"\" ? p.Street.toLowerCase().trim() : \"\").toLowerCase().trim().match(key)\r\n // ));\r\n //console.log(\"Street Count: \" + shopsByStreet.length);\r\n ////var shopsByProvince = markers.filter((p) =>\r\n //// aggrFilterList.every((key) => [ \r\n //// removeVieTones(p.Province).toLowerCase().trim()]\r\n //// .some((item) => removeVieTones(item != null && item.trim() != \"\" ? item.toLowerCase().trim() : \"\") === key)\r\n //// ));\r\n\r\n ////var shopsByDistrict = data.filter((p) =>\r\n //// aggrFilterList.every((key) => [\r\n //// removeVieTones(p.District).toLowerCase().trim()]\r\n //// .some((item) => removeVieTones(item.trim().toLowerCase()).equals(key))\r\n //// ));\r\n\r\n ////var shopsByWard = data.filter((p) =>\r\n //// aggrFilterList.every((key) => [\r\n //// removeVieTones(p.Ward).toLowerCase().trim()]\r\n //// .some((item) => removeVieTones(item.trim().toLowerCase()).equals(key))\r\n //// ));\r\n\r\n ////var shopsByStreet = data.filter((p) =>\r\n //// aggrFilterList.every((key) => [\r\n //// removeVieTones(p.Street).toLowerCase().trim()]\r\n //// .some((item) => removeVieTones(item.trim().toLowerCase()).equals(key))\r\n //// ));\r\n\r\n //filterdShops = filterdShops.concat(shopsByStreet, shopsByWard, shopsByDistrict, shopsByProvince );\r\n ////filterdShops = filterdShops.concat(shopsByProvince);\r\n\r\n ////const data = markers.filter((p) =>\r\n //// aggrFilterList.every((term) => [\r\n //// removeVieTones(p.ShopName).toLowerCase().trim(),\r\n //// removeVieTones(p.Province).toLowerCase().trim(),\r\n //// removeVieTones(p.District).toLowerCase().trim(),\r\n //// removeVieTones(p.Ward).toLowerCase().trim(),\r\n //// removeVieTones(p.Street).toLowerCase().trim(),\r\n //// //removeVieTones(removeSpecAddress(p.Address)).toLowerCase().trim()\r\n //// ]\r\n //// .some((f) => removeVieTones(f.trim().toLowerCase()).equals(term))\r\n //// ));\r\n\r\n ////const data = markers.filter((p) =>\r\n //// aggrFilterList.every((term) => [\r\n //// removeVieTones(p.Province).toLowerCase().trim()\r\n //// ]\r\n //// .some((f) => removeVieTones(f.trim().toLowerCase()).includes(term))\r\n //// ));\r\n\r\n ////const data = markers;\r\n\r\n ////const dataByWard = markers.filter((p) =>\r\n //// aggrFilterList.every((term) => [ removeVieTones(p.Ward).toLowerCase().trim()]\r\n //// .some((f) => removeVieTones(f.trim().toLowerCase()).equals(term))\r\n //// ));\r\n\r\n data = data.concat(data2).concat(data3);\r\n //data = data3.concat(data2).concat(data);\r\n data = data.filter(onlyUnique);\r\n return data;\r\n //return sortData(data, \"Province\", \"asc\");\r\n //return sortData(filterdShops, \"Province\", \"asc\");\r\n //return filterdShops;\r\n }\r\n\r\n async initDirections(name) {\r\n const map = this.props.map;\r\n const spinner = this.props.spinner;\r\n const geoLocate = this.props.geoLocate;\r\n const srcMarker = this.props.marker;\r\n const results = this.state.results;\r\n //const directions = this.state.directions;\r\n var highlightMarkers;\r\n this.props.handleToggler();\r\n\r\n spinner.current\r\n .setLngLat([map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)])\r\n .addTo(map);\r\n\r\n try {\r\n map.removeControl(geoLocate.current);\r\n }\r\n catch { }\r\n\r\n map.addControl(geoLocate.current, 'top-right');\r\n\r\n this.setState({ isDirectMode: true, });\r\n\r\n // Set an event listener that fires when a geolocate event occurs. \r\n geoLocate.current.on('geolocate', (e) => {\r\n let lng = e.coords.longitude;\r\n let lat = e.coords.latitude;\r\n let updatedValue = {};\r\n updatedValue = { lng: lng, lat: lat };\r\n this.setState({\r\n currentCoords: updatedValue,\r\n currentLng: lng,\r\n currentLat: lat,\r\n });\r\n\r\n if (this.state.isDirectMode) {\r\n const srcMarker = this.props.marker;\r\n srcMarker.current.remove();\r\n srcMarker.current.setLngLat([lng, lat]).addTo(map);\r\n }\r\n });\r\n\r\n //geoLocate.current.trigger();\r\n\r\n this.setState({\r\n isLoading: true\r\n });\r\n\r\n const jsonMarkers = JSON.stringify(results);\r\n var _destLng, _destLat = \"\";\r\n if (name && name.trim() !== \"\") {\r\n highlightMarkers = this.getSuggestions(jsonMarkers, name);\r\n\r\n if (highlightMarkers.length === 1) {\r\n //console.log(\"* Dest Marker: \" + JSON.stringify(highlightMarkers)); \r\n } else {\r\n highlightMarkers = this.getSuggestions(jsonMarkers, name + ' ' + this.state.query);\r\n }\r\n\r\n var selectLoc = JSON.parse(JSON.stringify(highlightMarkers));\r\n\r\n selectLoc.map((p) => {\r\n _destLng = p.Longitude;\r\n _destLat = p.Latitude;\r\n this.setState({\r\n destLng: p.Longitude,\r\n destLat: p.Latitude,\r\n startLng: p.Longitude,\r\n startLat: p.Latitude,\r\n });\r\n });\r\n\r\n //await getDirection(`${_destLng},${_destLat}`, `${_destLng},${_destLat}`)\r\n // .then((item) => {\r\n // this.setState({\r\n // directions: item.data,\r\n // firstLoad: false,\r\n // isDirectInit: true,\r\n // });\r\n // //this.redrawMap(this.state.query);\r\n // this.redrawDirections(name);\r\n // this.setState({\r\n // isLoading: false,\r\n // firstLoad: false\r\n // });\r\n\r\n // //const map = this.props.map;\r\n // //const spinner = this.props.spinner;\r\n // spinner.current.remove();\r\n // })\r\n // .catch(() => {\r\n // //setErrorMessage(\"Unable to fetch list\");\r\n // this.setState({\r\n // isLoading: false,\r\n // firstLoad: false\r\n // });\r\n // });\r\n\r\n this.props.handleDirection(true, map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4));\r\n //const srcMarker = this.props.marker;\r\n //Show direct guideline (popup) \r\n\r\n map.on(\"moveend\", async () => {\r\n if (!map) return;\r\n console.log('moveend');\r\n this.setState({ currentZoom: map.getZoom().toFixed(1) });\r\n //console.log(\"Current zoom: \" + map.getZoom().toFixed(1)); \r\n // Get new center coordinates \r\n const { lng, lat } = map.getCenter();\r\n const srcMarker = this.props.marker;\r\n srcMarker.current.setLngLat([lng, lat]);\r\n this.setState({\r\n startLng: lng,\r\n startLat: lat,\r\n //isDirectInit: (this.state.startLng === this.state.destLng && this.state.startLat === this.state.destLat)?true:false,\r\n });\r\n });\r\n\r\n //map.on(\"load\", () => {\r\n // if (!map) return;\r\n // this.addRadarButton(map);\r\n //});\r\n\r\n //map.on(\"resize\", async () => {\r\n // map.setSize(13.5);\r\n // console.log(13.5);\r\n //});\r\n\r\n //radarButton.current.getElement().addEventListener('onClick', (e) => {\r\n // const centerPosition = {\r\n // center: [map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)],\r\n // };\r\n // map.flyTo(centerPosition);\r\n //});\r\n\r\n this.setState({\r\n isLoading: false,\r\n firstLoad: false\r\n });\r\n\r\n //const map = this.props.map;\r\n //const spinner = this.props.spinner;\r\n spinner.current.remove();\r\n } else {\r\n // do nothing\r\n }\r\n }\r\n\r\n}\r\n\r\nexport default SearchButton;","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport * as turf from '@turf/turf';\r\nimport { getAllShops, getDirection } from \"./../api/apiService\";\r\nimport { removeVieTones, removeSpecName, removeSpecAddress } from \"./utils/strConverter\";\r\nimport { addSpecAddressRule, onlyUnique, aggregateKeyList, aggregateKey } from \"./utils/strConverter\";\r\nimport LoadingSpinner from \"./LoadingSpinner\";\r\nimport Scanner from \"./Scanner\";\r\nimport mapRadarBlue from \"./../img/map-radar-blue.png\";\r\nimport \"./index.css\";\r\n\r\nclass ScannerButton extends React.Component {\r\n constructor(props) {\r\n super(props); \r\n //this.onClick = this.onClick.bind(this);\r\n this.initGeoLoc = this.initGeoLoc.bind(this);\r\n this.initMarker = this.initMarker.bind(this);\r\n this.initSpinner = this.initSpinner.bind(this);\r\n }\r\n\r\n //onClick(e) {\r\n // console.log('clicked');\r\n //}\r\n\r\n initGeoLoc() {\r\n const map = this.props.map;\r\n const geo = this.props.geo;\r\n const mapResult = this.props.mapResult;\r\n //const mapSource = this.props.mapSource;\r\n try {\r\n map.removeControl(geo);\r\n }\r\n catch { }\r\n\r\n map.addControl(geo, 'top-right');\r\n\r\n //try {\r\n // map.removeControl(mapResult);\r\n //}\r\n //catch { }\r\n //map.addControl(mapResult, \"top-left\");\r\n\r\n //this.setState({ isDirectMode: true, });\r\n\r\n // Set an event listener that fires when a geolocate event occurs. \r\n //geo.on('geolocate', (e) => {\r\n // let lng = e.coords.longitude;\r\n // let lat = e.coords.latitude;\r\n // //let updatedValue = {};\r\n // //updatedValue = { lng: lng, lat: lat };\r\n // //this.setState({\r\n // // currentCoords: updatedValue,\r\n // // currentLng: lng,\r\n // // currentLat: lat,\r\n // //});\r\n\r\n // //if (this.state.isDirectMode) {\r\n // map.setZoom(13.4);\r\n // const srcMarker = this.props.marker;\r\n // srcMarker.current.remove();\r\n // srcMarker.current.setLngLat([lng, lat]).addTo(map);\r\n // //}\r\n\r\n // var from = [lng, lat];\r\n // //var to = [this.state.destLng, this.state.destLat];\r\n // //var distance = this.getDistance(from, to);\r\n // //console.log(`Distance: ${distance} km`);\r\n // var searchRadius = this.makeRadius(from, 1500);\r\n // //map.getSource('search-radius').setData(searchRadius);\r\n // //var featuresInBuffer = this.spatialJoin(this.state.hightlightResults, searchRadius);\r\n // map.getSource('confirmed-points-data').setData(searchRadius);\r\n \r\n //});\r\n\r\n //const srcMarker = this.props.marker;\r\n //const { lng, lat } = map.getCenter();\r\n //srcMarker.current.remove();\r\n //srcMarker.current.setLngLat([lng, lat]).addTo(map);\r\n }\r\n\r\n makeRadius(lngLatArray, radiusInMeters) {\r\n var point = turf.point(lngLatArray);\r\n var options = { units: 'meters' };\r\n var buffered = turf.buffer(point, radiusInMeters, options);\r\n return buffered;\r\n }\r\n\r\n spatialJoin(sourceGeoJSON, filterFeature) {\r\n // Loop through all the features in the source geojson and return the ones that \r\n // are inside the filter feature (buffered radius) and are confirmed landing sites\r\n //console.log(sourceGeoJSON);\r\n var joined = sourceGeoJSON.features.filter(function (feature) {\r\n //return turf.booleanPointInPolygon(feature, filterFeature) && feature.properties.isConfirmed === 'yes'; \r\n return turf.booleanPointInPolygon(feature, filterFeature);\r\n });\r\n return joined;\r\n }\r\n\r\n initMarker(arrLngLat) {\r\n //const srcMarker = this.props.marker;\r\n //if (srcMarker)\r\n // srcMarker.current.setLngLat([lng, lat]);\r\n const map = this.props.map;\r\n const srcMarker = this.props.srcMarker;\r\n if (!arrLngLat) {\r\n const { lng, lat } = map.getCenter();\r\n srcMarker.remove();\r\n srcMarker.setLngLat([lng, lat]).addTo(map);\r\n }\r\n else {\r\n srcMarker.remove();\r\n srcMarker.setLngLat(arrLngLat).addTo(map);\r\n }\r\n }\r\n\r\n initSpinner(isDisplayed) {\r\n const map = this.props.map;\r\n const spinner = this.props.spinner;\r\n const { lng, lat } = map.getCenter();\r\n if (isDisplayed) {\r\n spinner.current\r\n //.setLngLat([map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)])\r\n .setLngLat([lng, lat]).addTo(map);\r\n } else {\r\n spinner.current.remove();\r\n }\r\n }\r\n\r\n handleScanner(name) {\r\n this.fetchShops();\r\n //Add geo\r\n //const geoScan = this.props.geoScan;\r\n //geoScan.trigger();\r\n //this.initDirections('');\r\n const gaEventTracker = this.props.useGAEventTracker('Map');\r\n //gaEventTracker(`Shop [${name}]`);\r\n gaEventTracker(`Shop Scanner`);\r\n }\r\n\r\n onAdd() {\r\n const map = this.props.map;\r\n //const geoLocate = this.props.geoLocate;\r\n const geo = this.props.geo;\r\n const geoScan = this.props.geoScan;\r\n const searcher = this.props.searcher;\r\n const scanner = this.props.scanner;\r\n //const btnSearcher = this.props.btnSearcher;\r\n //const btnScanner = this.props.btnScanner;\r\n const srcMarker = this.props.srcMarker;\r\n const srcMarkerScan = this.props.srcMarkerScan;\r\n const destMarkerScan = this.props.destMarkerScan;\r\n //const scannerNode = document.createElement(\"div\");\r\n this.container = document.createElement(\"div\");\r\n this.container.className = \"mapboxgl-ctrl mapboxgl-ctrl-group\";\r\n this.container.innerHTML = `
`;\r\n this.container.addEventListener(\"contextmenu\", (e) => e.preventDefault());\r\n this.container.addEventListener(\"click\", () => {\r\n srcMarker.remove();\r\n srcMarkerScan.remove();\r\n destMarkerScan.remove();\r\n try {\r\n map.removeControl(searcher); \r\n }\r\n catch { }\r\n try { \r\n map.removeControl(scanner); \r\n }\r\n catch { }\r\n\r\n //try {\r\n // map.removeControl(btnSearcher);\r\n //}\r\n //catch { }\r\n //try {\r\n // map.removeControl(btnScanner);\r\n //}\r\n //catch { }\r\n\r\n try {\r\n map.removeControl(geo);\r\n }\r\n catch { }\r\n try {\r\n map.removeControl(geoScan);\r\n }\r\n catch { }\r\n\r\n //map.addControl(scanner, \"top-left\");\r\n map.addControl(scanner, \"top-left\");\r\n //map.addControl(btnSearcher, \"top-right\");\r\n this.props.initGUI(map, false);\r\n\r\n // Hightlight data\r\n if (map.getLayer(\"hightlight-points-layer\")) {\r\n map.removeLayer(\"hightlight-points-layer\");\r\n }\r\n if (map.getSource(\"hightlight-points-data\")) {\r\n map.removeSource(\"hightlight-points-data\");\r\n }\r\n\r\n map.addSource(\"hightlight-points-data\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: [],\r\n },\r\n });\r\n\r\n map.addLayer({\r\n id: \"hightlight-points-layer\",\r\n source: \"hightlight-points-data\",\r\n type: \"symbol\",\r\n layout: {\r\n // full list of icons here: https://labs.mapbox.com/maki-icons\r\n \"icon-image\": 'mapMarker', // this will put little croissants on our map\r\n \"icon-padding\": 0,\r\n \"icon-allow-overlap\": true,\r\n 'icon-size': 0.3\r\n },\r\n });\r\n\r\n // Custom data\r\n if (map.getLayer(\"custom-points-layer\")) {\r\n map.removeLayer(\"custom-points-layer\");\r\n }\r\n if (map.getSource(\"custom-points-data\")) {\r\n map.removeSource(\"custom-points-data\");\r\n }\r\n\r\n map.addSource(\"custom-points-data\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: [],\r\n },\r\n });\r\n // Add the layer, and reference the data source above by name\r\n map.addLayer({\r\n id: \"custom-points-layer\",\r\n source: \"custom-points-data\",\r\n // type: \"symbol\",\r\n // layout: {\r\n // // full list of icons here: https://labs.mapbox.com/maki-icons\r\n // \"icon-image\": \"bakery-15\", // this will put little croissants on our map\r\n // \"icon-padding\": 0,\r\n // \"icon-allow-overlap\": true,\r\n // },\r\n type: \"circle\",\r\n interactive: true,\r\n paint: {\r\n \"circle-radius\": 10,\r\n //\"circle-color\": \"#F2A400\",\r\n \"circle-color\": \"#F98C0D\",\r\n //\"circle-color\": \"rgba(253,237,57,1)\",\r\n //\"circle-color\": \"rgba(164,65,99,1)\",\r\n },\r\n });\r\n\r\n });\r\n \r\n return this.container;\r\n }\r\n\r\n onRemove() {\r\n this.container.parentNode.removeChild(this.container);\r\n //this.map = undefined;\r\n }\r\n\r\n resetSource(name, data) {\r\n const map = this.props.map;\r\n map.getSource(name).setData(data);\r\n }\r\n\r\n async fetchShops() {\r\n const map = this.props.map;\r\n const spinner = this.props.spinner;\r\n //spinner.current\r\n // .setLngLat([map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)])\r\n // .addTo(map);\r\n\r\n //this.setState({\r\n // isLoading: true\r\n //});\r\n\r\n await getAllShops(\"shops?q=\" + 'ha noi')\r\n .then((item) => {\r\n //this.setState({\r\n // results: item.data,\r\n // firstLoad: false\r\n //});\r\n\r\n //this.drawMap(this.state.query);\r\n this.drawMap(item.data);\r\n //console.log(item.data);\r\n //this.setState({\r\n // isLoading: false,\r\n // firstLoad: false\r\n //});\r\n\r\n spinner.current.remove();\r\n })\r\n .catch(() => {\r\n //setErrorMessage(\"Unable to fetch list\");\r\n //this.setState({\r\n // isLoading: false,\r\n // firstLoad: false\r\n //});\r\n spinner.current.remove();\r\n });\r\n }\r\n\r\n drawMap(data) {\r\n //console.log(\"Data: \" + data);\r\n //this.setState({\r\n // isLoading: true\r\n //});\r\n const map = this.props.map;\r\n const popup = this.props.popup;\r\n const marker = this.props.marker;\r\n //const spinner = this.props.spinner;\r\n //const results = this.state.results;\r\n const results = data;\r\n //const directions = this.state.directions;\r\n var highlightMarkers, usualgeoJSON, highlightgeoJSON;\r\n popup.current.remove();\r\n marker.current.remove();\r\n //if (popup.current.isOpen()) popup.current.remove(); \r\n //console.log(\"Data: \" + results);\r\n const jsonMarkers = JSON.stringify(data);\r\n //console.log(\"Data: \" + jsonMarkers);\r\n\r\n //const jsonDirections = JSON.stringify(directions.routes[0].geometry);\r\n //console.log(\"Directions: \" + jsonDirections);\r\n\r\n //if (vendor && vendor.trim() !== \"\") {\r\n //if (data) {\r\n // //highlightMarkers = this.getFilterCentersSuggestions(jsonMarkers, vendor);\r\n // highlightMarkers = this.getSuggestions(jsonMarkers, 'ha noi');\r\n // //console.log(\"Return Count: \" + highlightMarkers.length);\r\n // //this.setState({\r\n // // query: vendor,\r\n // // //results: res.body, \r\n // // firstLoad: false,\r\n // // filteredList: highlightMarkers,\r\n // //});\r\n // //console.log(\"Filtered Data: \" + filteredData);\r\n\r\n // // highlightMarkers = markers.List.filter(\r\n // // (m) =>\r\n // // vendor &&\r\n // // m?.Address.trim().toLowerCase().includes(vendor.trim().toLowerCase())\r\n // // );\r\n // // usualMarkers = markers.filter(\r\n // // (m) => m.ShopName.toLowerCase() !== vendor.toLowerCase()\r\n // //);\r\n\r\n // //usualMarkers = markers;\r\n // //console.log(usualMarkers);\r\n //} else {\r\n // //usualMarkers = markers;\r\n // //console.log(usualMarkers); \r\n //}\r\n\r\n usualgeoJSON = this.genFeatureListFromGeoData(jsonMarkers);\r\n const jsonFilteredMarkers = JSON.stringify(highlightMarkers);\r\n highlightgeoJSON = this.genFeatureListFromGeoList(jsonFilteredMarkers);\r\n //highlightgeoJSON = this.genFeatureListFromGeoData(highlightMarkers);\r\n\r\n map.getSource(\"custom-points-data\").setData(usualgeoJSON);\r\n // map.getSource(\"usual-points-data\").setData(usualgeoJSON);\r\n map.getSource(\"hightlight-points-data\").setData(highlightgeoJSON);\r\n //const routeFeature = {\r\n // 'type': 'Feature',\r\n // 'properties': {},\r\n // 'geometry': directions.routes[0].geometry,\r\n //};\r\n //map.getSource(\"route-data\").setData(routeFeature);\r\n\r\n map.getSource(\"route-data\").setData({\r\n 'type': 'LineString',\r\n 'coordinates': []\r\n });\r\n\r\n // // clearing layers\r\n // if (map.getLayer(\"shops\")) {\r\n // map.removeLayer(\"shops\");\r\n // }\r\n // if (map.getSource(\"shops\")) {\r\n // map.removeSource(\"shops\");\r\n // }\r\n // if (map.getLayer(\"shops-highlight\")) {\r\n // map.removeLayer(\"shopss-highlight\");\r\n // }\r\n // if (map.getSource(\"shops-highlight\")) {\r\n // map.removeSource(\"shops-highlight\");\r\n // }\r\n\r\n // map\r\n // .addSource(\"shops\", {\r\n // type: \"geojson\",\r\n // data: usualgeoJSON,\r\n // })\r\n // .addLayer({\r\n // id: \"shops\",\r\n // type: \"circle\",\r\n // interactive: true,\r\n // source: \"trucks\",\r\n // paint: {\r\n // \"circle-radius\": 8,\r\n // \"circle-color\": \"rgba(253,237,57,1)\",\r\n // },\r\n // });\r\n\r\n // if (highlightMarkers) {\r\n // map\r\n // .addSource(\"shops-highlight\", {\r\n // type: \"geojson\",\r\n // data: highlightgeoJSON,\r\n // })\r\n // .addLayer({\r\n // id: \"shops-highlight\",\r\n // type: \"circle\",\r\n // interactive: true,\r\n // source: \"shops-highlight\",\r\n // paint: {\r\n // \"circle-radius\": 8,\r\n // \"circle-color\": \"rgba(164,65,99,1)\",\r\n // },\r\n // });\r\n // }\r\n\r\n //this.setState({\r\n // isLoading: false\r\n //});\r\n }\r\n\r\n getSuggestions(jsonMarkers, termsString) {\r\n const markers = JSON.parse(jsonMarkers);\r\n termsString = removeSpecName(termsString.trim().toLowerCase());\r\n var key = addSpecAddressRule(termsString.trim().toLowerCase());\r\n const terms = removeVieTones(key).split(\" \");\r\n const aggrFilterList = aggregateKeyList(terms);\r\n //for (let i = 0; i < aggrFilterList.length; i++) {\r\n // console.log(aggrFilterList[i]);\r\n //}\r\n\r\n var data = markers.filter((p) =>\r\n aggrFilterList.every((term) => [\r\n //removeVieTones(p.ShopName).toLowerCase().trim(),\r\n //removeVieTones(p.ShopName).split(\" \"),\r\n //removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim(),\r\n removeVieTones(p.Province).toLowerCase().trim(),\r\n removeVieTones(p.District).toLowerCase().trim(),\r\n removeVieTones(p.Ward).toLowerCase().trim(),\r\n removeVieTones(p.Ward).toLowerCase().trim() + \" \" + removeVieTones(p.Province).toLowerCase().trim(),\r\n removeVieTones(p.Street).toLowerCase().trim(),\r\n removeVieTones(p.Street).toLowerCase().trim() + \" \" + removeVieTones(p.Province).toLowerCase().trim(),\r\n removeVieTones(p.Street).toLowerCase().trim() + \" \" + removeVieTones(p.District).toLowerCase().trim(),\r\n removeVieTones(p.Street).toLowerCase().trim() + \" \" + removeVieTones(p.Ward).toLowerCase().trim(),\r\n removeVieTones(p.Address).toLowerCase().trim()\r\n //removeVieTones(removeSpecAddress(p.ShopAddress)).toLowerCase().trim()\r\n ]\r\n .some((f) => removeVieTones(f).toLowerCase().trim().match(term))\r\n ));\r\n\r\n //const key1 = removeVieTones(removeSpecName(key));\r\n //console.log(key1);\r\n //const terms1 = removeVieTones(key1).split(\" \");\r\n //const aggrFilterList1 = aggregateKeyList(terms1); \r\n\r\n var data2 = markers.filter((p) =>\r\n aggrFilterList.every((term) => [\r\n removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim(),\r\n removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Province).toLowerCase().trim(),\r\n removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.District).toLowerCase().trim(),\r\n removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Ward).toLowerCase().trim(),\r\n removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Street).toLowerCase().trim(),\r\n //removeVieTones(aggregateKey(p.ShopName)).toLowerCase().trim() + \" \" + removeVieTones(p.Address).toLowerCase().trim()\r\n ]\r\n .some((f) => removeVieTones(f).toLowerCase().trim().includes(term))\r\n ));\r\n\r\n var data3 = markers.filter((p) =>\r\n aggrFilterList.every((term) => [\r\n //removeVieTones(p.Name).toLowerCase().trim(), \r\n //removeVieTones(removeSpecAddress(p.Address)).toLowerCase().trim(),\r\n removeVieTones(removeSpecAddress(p.ShopAddress)).toLowerCase().trim()\r\n ]\r\n .some((f) => removeVieTones(f).toLowerCase().trim().includes(term))\r\n ));\r\n\r\n\r\n //var filterdShops = [];\r\n ////var shopsByProvince = markers.filter((p) =>\r\n //// aggrFilterList.every((key) => [ \r\n //// removeVieTones(p.Province).toLowerCase().trim()]\r\n //// .some((item) => removeVieTones(item != null && item.trim() != \"\" ? item.toLowerCase().trim() : \"\").match(key))\r\n //// ));\r\n\r\n ////var shopsByProvince = markers.filter((p) =>\r\n //// aggrFilterList.every((key) => removeVieTones(p.Province != null && p.Province.trim() != \"\" ? p.Province.toLowerCase().trim() : \"\").toLowerCase().trim().match(key)));\r\n\r\n //var shopsByProvince = markers.filter((p) =>\r\n // aggrFilterList.every((term) => [\r\n // removeVieTones(p.Province).toLowerCase().trim()\r\n // ].some((f) => removeVieTones(f).trim().toLowerCase().match(term))\r\n // ));\r\n\r\n //console.log(\"Total Count: \" + markers.length);\r\n //console.log(\"Province Count: \" + shopsByProvince.length);\r\n //var sJsonProvince = JSON.stringify(shopsByProvince);\r\n ////console.log(sJsonProvince);\r\n //var oJsonProvince = JSON.parse(sJsonProvince);\r\n //var shopsByDistrict = markers.filter((p) =>\r\n // aggrFilterList.every((term) => [\r\n // removeVieTones(p.District).toLowerCase().trim()\r\n // ].some((f) => removeVieTones(f).trim().toLowerCase().match(term))\r\n // ));\r\n //console.log(\"District Count: \" + shopsByDistrict.length);\r\n //var sJsonDistrict = JSON.stringify(shopsByDistrict);\r\n //var oJsonDistrict = JSON.parse(sJsonDistrict);\r\n //var shopsByWard = markers.filter((p) =>\r\n // aggrFilterList.every((key) =>\r\n // removeVieTones(p.Ward != null && p.Ward.trim() != \"\" ? p.Ward.toLowerCase().trim() : \"\").toLowerCase().trim().match(key)\r\n // ));\r\n //console.log(\"Ward Count: \" + shopsByWard.length);\r\n //var sJsonWard = JSON.stringify(shopsByWard);\r\n //var oJsonWard = JSON.parse(sJsonWard);\r\n //var shopsByStreet = markers.filter((p) =>\r\n // aggrFilterList.every((key) =>\r\n // removeVieTones(p.Street != null && p.Street.trim() != \"\" ? p.Street.toLowerCase().trim() : \"\").toLowerCase().trim().match(key)\r\n // ));\r\n //console.log(\"Street Count: \" + shopsByStreet.length);\r\n ////var shopsByProvince = markers.filter((p) =>\r\n //// aggrFilterList.every((key) => [ \r\n //// removeVieTones(p.Province).toLowerCase().trim()]\r\n //// .some((item) => removeVieTones(item != null && item.trim() != \"\" ? item.toLowerCase().trim() : \"\") === key)\r\n //// ));\r\n\r\n ////var shopsByDistrict = data.filter((p) =>\r\n //// aggrFilterList.every((key) => [\r\n //// removeVieTones(p.District).toLowerCase().trim()]\r\n //// .some((item) => removeVieTones(item.trim().toLowerCase()).equals(key))\r\n //// ));\r\n\r\n ////var shopsByWard = data.filter((p) =>\r\n //// aggrFilterList.every((key) => [\r\n //// removeVieTones(p.Ward).toLowerCase().trim()]\r\n //// .some((item) => removeVieTones(item.trim().toLowerCase()).equals(key))\r\n //// ));\r\n\r\n ////var shopsByStreet = data.filter((p) =>\r\n //// aggrFilterList.every((key) => [\r\n //// removeVieTones(p.Street).toLowerCase().trim()]\r\n //// .some((item) => removeVieTones(item.trim().toLowerCase()).equals(key))\r\n //// ));\r\n\r\n //filterdShops = filterdShops.concat(shopsByStreet, shopsByWard, shopsByDistrict, shopsByProvince );\r\n ////filterdShops = filterdShops.concat(shopsByProvince);\r\n\r\n ////const data = markers.filter((p) =>\r\n //// aggrFilterList.every((term) => [\r\n //// removeVieTones(p.ShopName).toLowerCase().trim(),\r\n //// removeVieTones(p.Province).toLowerCase().trim(),\r\n //// removeVieTones(p.District).toLowerCase().trim(),\r\n //// removeVieTones(p.Ward).toLowerCase().trim(),\r\n //// removeVieTones(p.Street).toLowerCase().trim(),\r\n //// //removeVieTones(removeSpecAddress(p.Address)).toLowerCase().trim()\r\n //// ]\r\n //// .some((f) => removeVieTones(f.trim().toLowerCase()).equals(term))\r\n //// ));\r\n\r\n ////const data = markers.filter((p) =>\r\n //// aggrFilterList.every((term) => [\r\n //// removeVieTones(p.Province).toLowerCase().trim()\r\n //// ]\r\n //// .some((f) => removeVieTones(f.trim().toLowerCase()).includes(term))\r\n //// ));\r\n\r\n ////const data = markers;\r\n\r\n ////const dataByWard = markers.filter((p) =>\r\n //// aggrFilterList.every((term) => [ removeVieTones(p.Ward).toLowerCase().trim()]\r\n //// .some((f) => removeVieTones(f.trim().toLowerCase()).equals(term))\r\n //// ));\r\n\r\n data = data.concat(data2).concat(data3);\r\n //data = data3.concat(data2).concat(data);\r\n data = data.filter(onlyUnique);\r\n return data;\r\n //return sortData(data, \"Province\", \"asc\");\r\n //return sortData(filterdShops, \"Province\", \"asc\");\r\n //return filterdShops;\r\n }\r\n\r\n async initDirections(name) {\r\n const map = this.props.map;\r\n const spinner = this.props.spinner;\r\n const geoLocate = this.props.geoLocate;\r\n const srcMarker = this.props.marker;\r\n const results = this.state.results;\r\n //const directions = this.state.directions;\r\n var highlightMarkers;\r\n this.props.handleToggler();\r\n\r\n spinner.current\r\n .setLngLat([map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)])\r\n .addTo(map);\r\n\r\n try {\r\n map.removeControl(geoLocate.current);\r\n }\r\n catch { }\r\n\r\n map.addControl(geoLocate.current, 'top-right');\r\n\r\n this.setState({ isDirectMode: true, });\r\n\r\n // Set an event listener that fires when a geolocate event occurs. \r\n geoLocate.current.on('geolocate', (e) => {\r\n let lng = e.coords.longitude;\r\n let lat = e.coords.latitude;\r\n let updatedValue = {};\r\n updatedValue = { lng: lng, lat: lat };\r\n this.setState({\r\n currentCoords: updatedValue,\r\n currentLng: lng,\r\n currentLat: lat,\r\n });\r\n\r\n if (this.state.isDirectMode) {\r\n const srcMarker = this.props.marker;\r\n srcMarker.current.remove();\r\n srcMarker.current.setLngLat([lng, lat]).addTo(map);\r\n }\r\n });\r\n\r\n //geoLocate.current.trigger();\r\n\r\n this.setState({\r\n isLoading: true\r\n });\r\n\r\n const jsonMarkers = JSON.stringify(results);\r\n var _destLng, _destLat = \"\";\r\n if (name && name.trim() !== \"\") {\r\n highlightMarkers = this.getSuggestions(jsonMarkers, name);\r\n\r\n if (highlightMarkers.length === 1) {\r\n //console.log(\"* Dest Marker: \" + JSON.stringify(highlightMarkers)); \r\n } else {\r\n highlightMarkers = this.getSuggestions(jsonMarkers, name + ' ' + this.state.query);\r\n }\r\n\r\n var selectLoc = JSON.parse(JSON.stringify(highlightMarkers));\r\n\r\n selectLoc.map((p) => {\r\n _destLng = p.Longitude;\r\n _destLat = p.Latitude;\r\n this.setState({\r\n destLng: p.Longitude,\r\n destLat: p.Latitude,\r\n startLng: p.Longitude,\r\n startLat: p.Latitude,\r\n });\r\n });\r\n\r\n //await getDirection(`${_destLng},${_destLat}`, `${_destLng},${_destLat}`)\r\n // .then((item) => {\r\n // this.setState({\r\n // directions: item.data,\r\n // firstLoad: false,\r\n // isDirectInit: true,\r\n // });\r\n // //this.redrawMap(this.state.query);\r\n // this.redrawDirections(name);\r\n // this.setState({\r\n // isLoading: false,\r\n // firstLoad: false\r\n // });\r\n\r\n // //const map = this.props.map;\r\n // //const spinner = this.props.spinner;\r\n // spinner.current.remove();\r\n // })\r\n // .catch(() => {\r\n // //setErrorMessage(\"Unable to fetch list\");\r\n // this.setState({\r\n // isLoading: false,\r\n // firstLoad: false\r\n // });\r\n // });\r\n\r\n this.props.handleDirection(true, map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4));\r\n //const srcMarker = this.props.marker;\r\n //Show direct guideline (popup) \r\n\r\n map.on(\"moveend\", async () => {\r\n if (!map) return;\r\n console.log('moveend');\r\n this.setState({ currentZoom: map.getZoom().toFixed(1) });\r\n //console.log(\"Current zoom: \" + map.getZoom().toFixed(1)); \r\n // Get new center coordinates \r\n const { lng, lat } = map.getCenter();\r\n const srcMarker = this.props.marker;\r\n srcMarker.current.setLngLat([lng, lat]);\r\n this.setState({\r\n startLng: lng,\r\n startLat: lat,\r\n //isDirectInit: (this.state.startLng === this.state.destLng && this.state.startLat === this.state.destLat)?true:false,\r\n });\r\n });\r\n\r\n //map.on(\"load\", () => {\r\n // if (!map) return;\r\n // this.addRadarButton(map);\r\n //});\r\n\r\n //map.on(\"resize\", async () => {\r\n // map.setSize(13.5);\r\n // console.log(13.5);\r\n //});\r\n\r\n //radarButton.current.getElement().addEventListener('onClick', (e) => {\r\n // const centerPosition = {\r\n // center: [map.getCenter().lng.toFixed(4), map.getCenter().lat.toFixed(4)],\r\n // };\r\n // map.flyTo(centerPosition);\r\n //});\r\n\r\n this.setState({\r\n isLoading: false,\r\n firstLoad: false\r\n });\r\n\r\n //const map = this.props.map;\r\n //const spinner = this.props.spinner;\r\n spinner.current.remove();\r\n } else {\r\n // do nothing\r\n }\r\n }\r\n\r\n}\r\n\r\nexport default ScannerButton;","import React from \"react\";\nimport zalo from \"./../img/zalo-icon-blue.png\";\nimport phone from \"./../img/phone-icon-blue.png\";\n\nconst Popup = ({ feature }) => {\n const { id, displayName, displayAddress, phoneNumber, banner } = feature.properties;\n let zaloCall = \"https://zalo.me/\" + phoneNumber.split(/\\s/).join('');\n let phoneCall = \"tel:\" + phoneNumber.split(/\\s/).join('');\n let urlBanner = banner ? \"https://vinflower.com/wp-content/uploads/iflower/images/banners/\" + banner : \"https://vinflower.com/wp-content/uploads/2023/06/5539763.png\";\n\n return (\n
\n \n
\n
\n
{displayName}
\n
{displayAddress}
\n
\n
\n {/*
*/}\n
\n
\n
\n
\n
\n
\n\n //OLD\n //\n );\n};\n\nexport default Popup;\n","\r\nimport ReactGA from \"react-ga\";\r\n\r\nconst useGAEventTracker = (category=\"Map\") => {\r\n const eventTracker = (action = \"Search Action\", label = \"Search Location\") => {\r\n ReactGA.event({category, action, label});\r\n }\r\n return eventTracker;\r\n}\r\n\r\nexport default useGAEventTracker;\r\n\r\n\r\n\r\n","import ReactDOM from \"react-dom\";\r\nimport React, { useRef, useEffect, useState } from \"react\";\r\nimport mapboxgl from \"mapbox-gl\"; // eslint-disable-line import/no-webpack-loader-syntax\r\nimport logo from \"./../img/iflower-logo.png\";\r\nimport markerImg from \"./../img/marker-1.png\";\r\nimport markerImg1 from \"./../img/marker-1.png\";\r\n//import locMarker from \"./../img/pointer-marker.png\";\r\n//import homeMarker from \"./../img/home-marker.png\";\r\nimport homeMarkerBlue from \"./../img/home-marker-blue.png\";\r\nimport pointerMarkerRed from \"./../img/pointer-marker-red.png\";\r\nimport mapRadarBlue from \"./../img/map-radar-blue.png\";\r\nimport shopMarkerBlue from \"./../img/shop-marker-blue.png\";\r\n\r\n//import { RiMenuLine } from \"react-icons/ri\";\r\n//import { FcFinePrint } from \"react-icons/fc\";\r\n//import Sidebar from \"./Sidebar\";\r\n\r\n//import Result from \"./Result\";\r\n//import Scanner from \"./Scanner\";\r\n//import ResultCtrl from \"./ResultCtrl\";\r\n\r\nimport SearcherCtrl from \"./SearcherCtrl\";\r\nimport ScannerCtrl from \"./ScannerCtrl\";\r\nimport SearchButton from \"./SearchButton\";\r\nimport ScannerButton from \"./ScannerButton\";\r\n\r\nimport Popup from \"./Popup\";\r\nimport \"./index.css\";\r\nimport LoadingSpinner from \"./LoadingSpinner\";\r\nimport useGAEventTracker from './utils/useGAEventTracker';\r\n\r\nimport \"./main.css\";\r\n\r\n\r\n\r\nexport default function Map() {\r\n const mapContainer = useRef(null);\r\n const popUpRef = useRef(new mapboxgl.Popup({ offset: 15 }));\r\n const spinnerRef = useRef(new mapboxgl.Popup({ offset: 0 }));\r\n\r\n // Initialize the geolocate control.\r\n const geoLocateRef = useRef(new mapboxgl.GeolocateControl({\r\n positionOptions: {\r\n enableHighAccuracy: true\r\n },\r\n trackUserLocation: true,\r\n showUserHeading: true, \r\n }));\r\n\r\n const elAppSpinner = document.createElement(\"div\");\r\n const elSpinner = document.createElement(\"div\");\r\n const el = document.createElement(\"div\");\r\n const elMapRadar = document.createElement(\"div\");\r\n const elSrc = document.createElement(\"div\"); //selected home\r\n const elDest = document.createElement(\"div\"); //selected desc\r\n \r\n var directionModeRef = useRef(false);\r\n var btnSearcher = useRef(new SearchButton());\r\n var btnScanner = useRef(new ScannerButton());\r\n \r\n //const gaEventTracker = useGAEventTracker('Map');\r\n //const map = useRef(null);\r\n \r\n const [map, setMap] = useState(null);\r\n const [geo, setGeo] = useState(null);\r\n const [geoScan, setGeoScan] = useState(null);\r\n const [searcher, setSearcher] = useState(null);\r\n const [scanner, setScanner] = useState(null);\r\n\r\n //const [btnSearcher, setBtnSearcher] = useState(null);\r\n //const [btnScanner, setBtnScanner] = useState(null);\r\n\r\n const [spinner, setSpinner] = useState(null);\r\n const [appSpinner, setAppSpinner] = useState(null);\r\n const [popup, setPopup] = useState(null);\r\n\r\n const [isSearchActivated, setIsSearchActivated] = useState(true);\r\n \r\n //const [isScanInit, setIsScanInit] = useState(null);\r\n //const [isSearchInit, setIsSearchInit] = useState(null);\r\n\r\n const [mapResult, setMapResult] = useState(null);\r\n const [selectMarker, setSelectMarker] = useState(null);\r\n const [selectMarkerScan, setSelectMarkerScan] = useState(null);\r\n const [srcMarker, setSrcMarker] = useState(null);\r\n const [srcMarkerScan, setSrcMarkerScan] = useState(null);\r\n const [destMarkerScan, setDestMarkerScan] = useState(null);\r\n const isCollapsed = localStorage.getItem('is-sidebar-collapsed');\r\n const [isExpanded, setIsExpanded] = useState(isCollapsed ? false : true);\r\n \r\n let mapMarkers = [];\r\n const [mapData, setMapData] = useState([]);\r\n const [mapSource, setMapSource] = useState([]);\r\n const [lng, setLng] = useState(105.8388);\r\n const [lat, setLat] = useState(21.0191);\r\n const [zoom, setZoom] = useState(12.5);\r\n\r\n //let currentCoords = useRef({ lng: 0, lat: 0 });\r\n\r\n const initGUI = (map, isSearch) => { \r\n setIsSearchActivated(isSearch);\r\n if (isSearch) { \r\n try {\r\n map.removeControl(btnSearcher);\r\n }\r\n catch { }\r\n map.addControl(btnScanner, \"top-right\");\r\n }\r\n else { \r\n try {\r\n map.removeControl(btnScanner);\r\n }\r\n catch { }\r\n map.addControl(btnSearcher, \"top-right\");\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (process.env.REACT_APP_MAP_ACCESS_TOKEN == null) {\r\n throw new Error(\"You need to have API_ACCESS_TOKEN (env), see README\");\r\n }\r\n mapboxgl.accessToken = process.env.REACT_APP_MAP_ACCESS_TOKEN;\r\n\r\n const initializeMap = ({ setMap, mapContainer }) => {\r\n //if (map) return; // Initialize map only once\r\n console.log(\"Initializing...\");\r\n const map = new mapboxgl.Map({\r\n container: mapContainer.current,\r\n style: \"mapbox://styles/mapbox/streets-v12\", // stylesheet location\r\n //style: 'mapbox://styles/mapbox/light-v11', // style URL\r\n //style: \"mapbox://styles/prakhar/cij2cpsn1004p8ykqqir34jm8\",\r\n center: [lng, lat],\r\n zoom: 12.5,\r\n maxZoom: 19,\r\n minZoom: 6\r\n });\r\n\r\n if (!map) return; // Wait for map to initialize\r\n\r\n elAppSpinner.className = \"loadSpinner\";\r\n //elAppSpinner.style.backgroundImage = `url(${spinnerBlue})`;\r\n elAppSpinner.style.width = `0px`;\r\n elAppSpinner.style.height = `0px`;\r\n elAppSpinner.style.background = 'none';\r\n ReactDOM.render(
, elAppSpinner);\r\n\r\n const appSpinner = new mapboxgl.Marker(elAppSpinner);\r\n setAppSpinner(appSpinner);\r\n\r\n //Show Loading Spinner\r\n // TODO: determine init loc!\r\n //const { lng, lat } = map.getCenter();\r\n \r\n appSpinner.setLngLat([lng, lat]).addTo(map);\r\n\r\n //const spinner = new mapboxgl.Popup({ offset: 0 });\r\n const spinner = new mapboxgl.Marker(elSpinner);\r\n const selectMarker = new mapboxgl.Marker(elSrc);\r\n const srcMarker = new mapboxgl.Marker(el); //pointerMarkerRed\r\n const srcMarkerScan = new mapboxgl.Marker(elMapRadar); //pointerScannerBlue\r\n const destMarkerScan = new mapboxgl.Marker(elDest); // shop Marker\r\n \r\n const popup = new mapboxgl.Popup({ offset: 15 });\r\n const geo = new mapboxgl.GeolocateControl({\r\n positionOptions: {\r\n enableHighAccuracy: true\r\n },\r\n trackUserLocation: true,\r\n showUserHeading: true,\r\n });\r\n\r\n const geoScan = new mapboxgl.GeolocateControl({\r\n positionOptions: {\r\n enableHighAccuracy: true\r\n },\r\n trackUserLocation: true,\r\n showUserHeading: true,\r\n });\r\n\r\n const searcher = new SearcherCtrl({ map: map, geo: geo, geoScan: geoScan, selectMarker: selectMarker, srcMarker: srcMarker, srcMarkerScan: srcMarkerScan, destMarkerScan: destMarkerScan, spinner: spinner, popup: popup, handleRadar: handleRadar, directionModeRef: directionModeRef, geoLocate: geoLocateRef, handleZoom: handleZoom, handleToggler: handleToggler, useGAEventTracker: useGAEventTracker });\r\n\r\n const scanner = new ScannerCtrl({ map: map, geo: geo, geoScan: geoScan, selectMarker: selectMarker, srcMarker: srcMarker, srcMarkerScan: srcMarkerScan, destMarkerScan: destMarkerScan, spinner: spinner, popup: popup, handleRadar: handleRadar, directionModeRef: directionModeRef, geoLocate: geoLocateRef, handleZoom: handleZoom, handleToggler: handleToggler, useGAEventTracker: useGAEventTracker });\r\n\r\n btnSearcher = new SearchButton({ map: map, geo: geo, geoScan: geoScan, searcher: searcher, scanner: scanner, initGUI: initGUI, selectMarker: selectMarker, srcMarker: srcMarker, srcMarkerScan: srcMarkerScan, destMarkerScan: destMarkerScan, handleRadar: handleRadar, spinner: spinnerRef, directionModeRef: directionModeRef, geoLocate: geoLocateRef, handleZoom: handleZoom, handleToggler: handleToggler, useGAEventTracker: useGAEventTracker });\r\n\r\n btnScanner = new ScannerButton({ map: map, geo: geo, geoScan: geoScan, searcher: searcher, scanner: scanner, initGUI: initGUI, selectMarker: selectMarker, srcMarker: srcMarker, srcMarkerScan: srcMarkerScan, destMarkerScan: destMarkerScan, handleRadar: handleRadar, spinner: spinnerRef, directionModeRef: directionModeRef, geoLocate: geoLocateRef, handleZoom: handleZoom, handleToggler: handleToggler, useGAEventTracker: useGAEventTracker });\r\n\r\n //spinner.remove();\r\n map.on(\"load\", () => { \r\n if (!map) return;\r\n //spinner.setLngLat([lng, lat]).addTo(map);\r\n // create spinner node\r\n //const spinner = document.createElement('div');\r\n //spinner.style.cssText = 'width:0px; height:0px; margin: 0px 0px 0px 0px;border-radius:10px; border:0px solid #ddd; box-shadow: 0px 0px 5px 4px rgba(67,60,67,.16)';\r\n //spinner.style.zIndex = 1005;\r\n //ReactDOM.render(
, spinner);\r\n //spinnerRef.current.setLngLat([lng, lat]).setDOMContent(spinner).addTo(map);\r\n //setSpinner(spinner);\r\n\r\n //Show loading spinner\r\n //const { lng, lat } = map.getCenter();\r\n //spinner.setLngLat([lng, lat]).addTo(map);\r\n\r\n setSpinner(spinner);\r\n setPopup(popup);\r\n setSrcMarker(srcMarker);\r\n setSrcMarkerScan(srcMarkerScan);\r\n setDestMarkerScan(destMarkerScan);\r\n setSelectMarker(selectMarker);\r\n setMap(map);\r\n setGeo(geo);\r\n setGeoScan(geoScan); \r\n setSearcher(searcher);\r\n setScanner(scanner);\r\n\r\n //setBtnSearcher(btnSearcher);\r\n //setBtnScanner(btnScanner);\r\n\r\n map.addControl(searcher, \"top-left\");\r\n //map.addControl(scanner, \"top-left\");\r\n //map.addControl(btnSearcher, \"top-right\");\r\n //map.addControl(btnScanner, \"top-right\");\r\n initGUI(map, true);\r\n \r\n // DIRECT\r\n map.addSource('route-data', {\r\n 'type': 'geojson',\r\n 'data': {\r\n 'type': 'Feature',\r\n 'properties': {},\r\n 'geometry': {\r\n 'type': 'LineString',\r\n 'coordinates': []\r\n }\r\n }\r\n });\r\n\r\n map.addLayer({\r\n 'id': 'route',\r\n 'type': 'line',\r\n 'source': 'route-data',\r\n 'layout': {\r\n 'line-join': 'round',\r\n 'line-cap': 'round',\r\n },\r\n 'paint': {\r\n 'line-color': '#0A95FF',\r\n 'line-width': 5,\r\n 'line-opacity': 0.75\r\n }\r\n });\r\n\r\n // Confirmed shop landing sites.\r\n map.addSource(\"confirmed-points-data\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: [],\r\n },\r\n });\r\n\r\n map.loadImage(\r\n markerImg1,\r\n (error, image) => {\r\n if (error) throw error;\r\n // Add the image to the map style.\r\n map.addImage('mapMarker1', image);\r\n // Add the layer, and reference the data source above by name\r\n map.addLayer({\r\n id: \"confirmed-points-layer\",\r\n source: \"confirmed-points-data\",\r\n type: \"symbol\",\r\n layout: {\r\n // full list of icons here: https://labs.mapbox.com/maki-icons\r\n \"icon-image\": 'mapMarker1', // this will put little croissants on our map\r\n \"icon-padding\": 0,\r\n \"icon-allow-overlap\": true,\r\n 'icon-size': 0.3\r\n },\r\n //type: \"circle\",\r\n //interactive: true,\r\n //paint: {\r\n // \"circle-radius\": 12,\r\n // \"circle-color\": \"#F98C0D\",\r\n //},\r\n });\r\n }\r\n );\r\n //map.addLayer({\r\n // id: 'shop-confirmed',\r\n // source: \"confirmed-points-data\",\r\n // //type: 'symbol',\r\n // //layout: {\r\n // // 'icon-image': 'rocket-11',\r\n // // 'icon-size': 1,\r\n // // 'icon-allow-overlap': true\r\n // //}\r\n // type: \"circle\",\r\n // interactive: true,\r\n // paint: {\r\n // \"circle-radius\": 8,\r\n // //\"circle-color\": \"#F2A400\",\r\n // \"circle-color\": \"#D33B37\",\r\n // //\"circle-color\": \"rgba(253,237,57,1)\",\r\n // //\"circle-color\": \"rgba(164,65,99,1)\",\r\n // },\r\n //}); \r\n\r\n map.addSource(\"radius-points-data\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: [],\r\n },\r\n });\r\n\r\n // Draw the shop search radius on the map\r\n map.addLayer({\r\n id: 'search-radius',\r\n source: \"radius-points-data\",\r\n //source: {\r\n // type: 'geojson',\r\n // data: { \"type\": \"FeatureCollection\", \"features\": [] }\r\n //},\r\n type: 'fill',\r\n paint: {\r\n 'fill-color': '#D33B37',\r\n 'fill-opacity': 0.1\r\n }\r\n });\r\n\r\n // CUSTOM\r\n // Add the data source for new a feature collection with no features\r\n map.addSource(\"custom-points-data\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: [],\r\n },\r\n });\r\n // Add the layer, and reference the data source above by name\r\n map.addLayer({\r\n id: \"custom-points-layer\",\r\n source: \"custom-points-data\",\r\n // type: \"symbol\",\r\n // layout: {\r\n // // full list of icons here: https://labs.mapbox.com/maki-icons\r\n // \"icon-image\": \"bakery-15\", // this will put little croissants on our map\r\n // \"icon-padding\": 0,\r\n // \"icon-allow-overlap\": true,\r\n // },\r\n type: \"circle\",\r\n interactive: true,\r\n paint: {\r\n \"circle-radius\": 10,\r\n //\"circle-color\": \"#F2A400\",\r\n \"circle-color\": \"#F98C0D\",\r\n //\"circle-color\": \"rgba(253,237,57,1)\",\r\n //\"circle-color\": \"rgba(164,65,99,1)\",\r\n },\r\n });\r\n\r\n //Add layer to show all shop sighting locations\r\n //map.addLayer({\r\n // id: 'shops',\r\n // source: \"custom-points-data\",\r\n // type: 'circle',\r\n // paint: {\r\n // 'circle-color': '#5555f6',\r\n // 'circle-radius': 8,\r\n // 'circle-opacity': .5\r\n // }\r\n //});\r\n\r\n //USUAL\r\n // Add the data source for new a feature collection with no features\r\n map.addSource(\"usual-points-data\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: [],\r\n },\r\n });\r\n // Add the layer, and reference the data source above by name\r\n map.addLayer({\r\n id: \"usual-points-layer\",\r\n source: \"usual-points-data\",\r\n // type: \"symbol\",\r\n // layout: {\r\n // // full list of icons here: https://labs.mapbox.com/maki-icons\r\n // \"icon-image\": \"bakery-15\", // this will put little croissants on our map\r\n // \"icon-padding\": 0,\r\n // \"icon-allow-overlap\": true,\r\n // },\r\n type: \"circle\",\r\n interactive: true,\r\n paint: {\r\n \"circle-radius\": 10,\r\n \"circle-color\": \"#F98C0D\",\r\n },\r\n });\r\n\r\n //HIGHTLIGHT\r\n // Add the data source for new a feature collection with no features\r\n map.addSource(\"hightlight-points-data\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: [],\r\n },\r\n });\r\n map.loadImage(\r\n markerImg,\r\n (error, image) => {\r\n if (error) throw error;\r\n // Add the image to the map style.\r\n map.addImage('mapMarker', image);\r\n // Add the layer, and reference the data source above by name\r\n map.addLayer({\r\n id: \"hightlight-points-layer\",\r\n source: \"hightlight-points-data\",\r\n type: \"symbol\",\r\n layout: {\r\n // full list of icons here: https://labs.mapbox.com/maki-icons\r\n \"icon-image\": 'mapMarker', // this will put little croissants on our map\r\n \"icon-padding\": 0,\r\n \"icon-allow-overlap\": true,\r\n 'icon-size': 0.3\r\n },\r\n //type: \"circle\",\r\n //interactive: true,\r\n //paint: {\r\n // \"circle-radius\": 12,\r\n // \"circle-color\": \"#F98C0D\",\r\n //},\r\n });\r\n }\r\n );\r\n\r\n //CUSTOMIZE \r\n // Add the layer, and refer\r\n // Empty Source\r\n //const text_points_data_GeoJsonSource = {\r\n // type: 'geojson',\r\n // data: textfeatureCollection //Initially this is empty\r\n // };\r\n\r\n // Add the data source for new a feature collection with no features\r\n map.addSource(\"text-points-data\", {\r\n type: \"geojson\",\r\n data: {\r\n type: \"FeatureCollection\",\r\n features: [],\r\n },\r\n });\r\n\r\n //Create Text Layer with textGeoJsonSource\r\n const sectionTextLayer = {\r\n id: \"sectionTextLayer\",\r\n type: \"symbol\",\r\n source: \"text-points-data\",\r\n interactive: true,\r\n paint: {\r\n \"text-color\": \"rgba(0,0,0,255)\", //Color of your choice\r\n //\"text-color\": \"rgba(164,65,99,1)\", //Color of your choice\r\n //\"text-halo-blur\": textHaloBlur,\r\n //\"text-halo-color\": textHaloColor,\r\n //\"text-halo-width\": textHaloWidth,\r\n //\"text-opacity\": 1\r\n },\r\n layout: {\r\n \"text-field\": ['get', 't'], //This will get \"t\" property from your geojson\r\n //\"text-font\": ['Calibri'],\r\n \"text-size\": ['get', 's'],\r\n \"text-rotation-alignment\": \"auto\",\r\n \"text-allow-overlap\": true,\r\n \"text-anchor\": \"top\"\r\n }\r\n };\r\n\r\n\r\n //Populate Data to Source\r\n const textFeatureList = [];\r\n //const objJson = JSON.parse(textGeoJSONFeature);\r\n textFeatureList.push(\r\n {\r\n type: \"Feature\",\r\n geometry: {\r\n type: \"Point\",\r\n coordinates: [parseFloat(114.9061), parseFloat(14.2901)]\r\n },\r\n properties: {\r\n t: \"BIỂN ĐÔNG\", //Text display on Map\r\n s: 17\r\n }\r\n },\r\n {\r\n type: \"Feature\",\r\n geometry: {\r\n type: \"Point\",\r\n coordinates: [parseFloat(112.8046), parseFloat(16.6072)]\r\n },\r\n properties: {\r\n t: \"Quần đảo Hoàng Sa (Việt Nam)\", //Text display on Map\r\n s: 12\r\n }\r\n },\r\n {\r\n type: \"Feature\",\r\n geometry: {\r\n type: \"Point\",\r\n coordinates: [parseFloat(115.7708), parseFloat(10.6287)]\r\n },\r\n properties: {\r\n t: \"Quần đảo Trường Sa (Việt Nam)\", //Text display on Map\r\n s: 12\r\n }\r\n },\r\n {\r\n type: \"Feature\",\r\n geometry: {\r\n type: \"Point\",\r\n coordinates: [parseFloat(108.0835), parseFloat(20.4965)]\r\n },\r\n properties: {\r\n t: \"VỊNH BẮC BỘ\", //Text display on Map\r\n s: 15\r\n }\r\n },\r\n {\r\n type: \"Feature\",\r\n geometry: {\r\n type: \"Point\",\r\n coordinates: [parseFloat(108.016256), parseFloat(21.195290)]\r\n },\r\n properties: {\r\n t: \"Đ. Bồ Cát\", //Text display on Map\r\n s: 11\r\n }\r\n },\r\n {\r\n type: \"Feature\",\r\n geometry: {\r\n type: \"Point\",\r\n coordinates: [parseFloat(107.728831), parseFloat(20.132233)]\r\n },\r\n properties: {\r\n t: \"Đ. Bạch Long Vỹ\", //Text display on Map\r\n s: 11\r\n }\r\n },\r\n {\r\n type: \"Feature\",\r\n geometry: {\r\n type: \"Point\",\r\n coordinates: [parseFloat(103.4884), parseFloat(9.3097)]\r\n },\r\n properties: {\r\n t: \"Đ. Thổ Chu (Việt Nam)\", //Text display on Map\r\n s: 11\r\n }\r\n }\r\n );\r\n\r\n const textFeatureCollection = {\r\n type: \"FeatureCollection\",\r\n features: textFeatureList\r\n }\r\n\r\n map.getSource(\"text-points-data\").setData(textFeatureCollection);\r\n\r\n //Override base map with Occean Polygon layer\r\n // Add a data source containing GeoJSON data.\r\n map.addSource('eastern-sea-polygon', {\r\n 'type': 'geojson',\r\n 'data': {\r\n 'type': 'Feature',\r\n 'geometry': {\r\n 'type': 'Polygon',\r\n // These coordinates outline\r\n 'coordinates': [\r\n [\r\n [115.6548, 16.3424],\r\n [115.3419, 16.3424],\r\n [114.0761, 11.7272],\r\n [114.4546, 11.7272],\r\n [115.6548, 16.3424]\r\n\r\n ]\r\n ]\r\n }\r\n }\r\n });\r\n map.addSource('gulf-sea-polygon', {\r\n 'type': 'geojson',\r\n 'data': {\r\n 'type': 'Feature',\r\n 'geometry': {\r\n 'type': 'Polygon',\r\n // These coordinates outline\r\n 'coordinates': [\r\n [\r\n [102.5184, 9.8762],\r\n [101.7436, 9.8762],\r\n [101.4207, 9.0768],\r\n [102.7949, 9.0768],\r\n [102.5184, 9.8762]\r\n ]\r\n ]\r\n }\r\n }\r\n });\r\n map.addSource('gulf-northern-polygon', {\r\n 'type': 'geojson',\r\n 'data': {\r\n 'type': 'Feature',\r\n 'geometry': {\r\n 'type': 'Polygon',\r\n // These coordinates outline\r\n 'coordinates': [\r\n [\r\n [108.3600, 20.6863],\r\n [107.2271, 20.6863],\r\n [107.6586, 20.1768],\r\n [108.9433, 20.1768],\r\n [108.3600, 20.6863]\r\n ]\r\n ]\r\n }\r\n }\r\n });\r\n\r\n map.addSource('gulf-northern-polygon-2', {\r\n 'type': 'geojson',\r\n 'data': {\r\n 'type': 'Feature',\r\n 'geometry': {\r\n 'type': 'Polygon',\r\n // These coordinates outline\r\n 'coordinates': [\r\n [\r\n [108.8100, 20.1204],\r\n [107.2177, 20.1204],\r\n [106.5206, 19.1002],\r\n [107.9526, 19.1002],\r\n [108.8100, 20.0105]\r\n ]\r\n ]\r\n }\r\n }\r\n });\r\n\r\n // Add a new layer to visualize the polygon.\r\n map.addLayer({\r\n 'id': 'easternSea',\r\n 'type': 'fill',\r\n 'source': 'eastern-sea-polygon', //reference the data source\r\n 'layout': {},\r\n 'paint': {\r\n 'fill-color': '#66CBFF', // occean blue color fill\r\n 'fill-opacity': 1\r\n }\r\n });\r\n map.addLayer({\r\n 'id': 'gulf-northern',\r\n 'type': 'fill',\r\n 'source': 'gulf-northern-polygon', //reference the data source\r\n 'layout': {},\r\n 'paint': {\r\n 'fill-color': '#99DDFF', // occean blue color fill\r\n 'fill-opacity': 1\r\n }\r\n });\r\n map.addLayer({\r\n 'id': 'gulf-northern-2',\r\n 'type': 'fill',\r\n 'source': 'gulf-northern-polygon-2', //reference the data source\r\n 'layout': {},\r\n 'paint': {\r\n 'fill-color': '#99DDFF', // occean blue color fill\r\n 'fill-opacity': 1\r\n }\r\n });\r\n map.addLayer({\r\n 'id': 'gulf',\r\n 'type': 'fill',\r\n 'source': 'gulf-sea-polygon', //reference the data source\r\n 'layout': {},\r\n 'paint': {\r\n 'fill-color': '#99DDFF', // occean blue color fill\r\n 'fill-opacity': 1\r\n }\r\n });\r\n\r\n //// Add a outline around the polygon to test\r\n //map.addLayer({\r\n // 'id': 'outline2',\r\n // 'type': 'line',\r\n // 'source': 'gulf-northern-polygon',\r\n // 'layout': {},\r\n // 'paint': {\r\n // 'line-color': '#FFF',\r\n // 'line-width': 1\r\n // }\r\n //});\r\n\r\n //End Override Occean\r\n\r\n map.addLayer(sectionTextLayer);\r\n\r\n //Set language\r\n const language = \"vi\";\r\n // Use setLayoutProperty to set the value of a layout property in a style layer.\r\n // The three arguments are the id of the layer, the name of the layout property,\r\n // and the new property value.\r\n map.setLayoutProperty('country-label', 'text-field', ['get', `name_${language}`]);\r\n\r\n elSpinner.className = \"loadSpinner\";\r\n //elSpinner.style.backgroundImage = `url(${spinnerBlue})`;\r\n elSpinner.style.width = `0px`;\r\n elSpinner.style.height = `0px`;\r\n elSpinner.style.background = 'none';\r\n ReactDOM.render(
, elSpinner);\r\n\r\n //elSrc.addEventListener('click', () => {\r\n // //window.alert(`Vị trí hiện tại của bạn: [${currentCoords.lng}, ${currentCoords.lat}]`);\r\n // //console.log(`Vị trí hiện tại của bạn: [${currentCoords.lng}, ${currentCoords.lat}] `);\r\n //});\r\n\r\n // Add marker to map\r\n //const el = document.createElement(\"div\");\r\n el.className = \"marker\";\r\n el.style.backgroundImage = `url(${pointerMarkerRed})`;\r\n el.style.width = `40px`;\r\n el.style.height = `40px`;\r\n el.style.backgroundSize = '100%';\r\n //el.addEventListener('click', () => {\r\n // window.alert(`LOC: [${lng}, ${lat}]`);\r\n //});\r\n\r\n elSrc.className = \"marker\";\r\n elSrc.style.backgroundImage = `url(${homeMarkerBlue})`;\r\n elSrc.style.width = `40px`;\r\n elSrc.style.height = `40px`;\r\n elSrc.style.backgroundSize = '100%';\r\n //elSrc.addEventListener('click', () => {\r\n // //window.alert(`Vị trí hiện tại của bạn: [${currentCoords.lng}, ${currentCoords.lat}]`);\r\n // //console.log(`Vị trí hiện tại của bạn: [${currentCoords.lng}, ${currentCoords.lat}] `);\r\n //});\r\n\r\n elDest.className = \"marker\";\r\n elDest.style.backgroundImage = `url(${shopMarkerBlue})`;\r\n elDest.style.width = `40px`;\r\n elDest.style.height = `40px`;\r\n elDest.style.backgroundSize = '100%';\r\n //elSrc.addEventListener('click', () => {\r\n // //window.alert(`Vị trí hiện tại của bạn: [${currentCoords.lng}, ${currentCoords.lat}]`);\r\n // //console.log(`Vị trí hiện tại của bạn: [${currentCoords.lng}, ${currentCoords.lat}] `);\r\n //});\r\n\r\n elMapRadar.className = \"marker\";\r\n elMapRadar.style.backgroundImage = `url(${mapRadarBlue})`;\r\n elMapRadar.style.width = `40px`;\r\n elMapRadar.style.height = `40px`;\r\n elMapRadar.style.backgroundSize = '100%';\r\n //elMapRadar.addEventListener('click', () => {\r\n // window.alert(`Vị trí hiện tại của bạn: [${currentCoords.lng}, ${currentCoords.lat}]`);\r\n // //console.log(`Vị trí hiện tại của bạn: [${currentCoords.lng}, ${currentCoords.lat}] `);\r\n //});\r\n //map.add(mapRadar, 'top-right');\r\n //mapRadar.addTo(map);\r\n \r\n //var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);\r\n //var topLayer = mblabels.addTo(map);\r\n //topPane.appendChild(topLayer.getContainer());\r\n\r\n //var MyControl = mapboxgl.Control.extend({\r\n // options: {\r\n // position: 'bottomleft'\r\n // },\r\n\r\n // onAdd: function (map) {\r\n // // create the control container with a particular class name\r\n // // ** you can add the image to the div as a background image using css\r\n // //var container = L.DomUtil.create('div', 'my-custom-control');\r\n\r\n // // ... initialize other DOM elements, add listeners, etc.\r\n // //return container;\r\n\r\n // return mapRadar;\r\n // }\r\n //});\r\n\r\n //map.addControl(new MyControl());\r\n //TODO:remove\r\n //currentMarkerRef.current.setLngLat([lng, lat]);\r\n //spinnerRef.current.remove();\r\n\r\n appSpinner.remove();\r\n console.log(\"Loaded!!!\");\r\n });\r\n\r\n //if (!map) return; // wait for map to initialize\r\n map.on(\"move\", () => {\r\n if (!map) return;\r\n setLng(map.getCenter().lng.toFixed(4));\r\n setLat(map.getCenter().lat.toFixed(4));\r\n //if (map.getZoom().toFixed(1) >= 6) {\r\n // //setZoom(map.getZoom().toFixed(1));\r\n //} \r\n //else\r\n // map.setZoom(6.0); \r\n });\r\n\r\n //map.on(\"moveend\", async () => {\r\n // if (!map) return;\r\n // // Get new center coordinates\r\n // const { lng, lat } = map.getCenter();\r\n\r\n // currentMarkerRef.current.setLngLat([lng, lat]);\r\n // //console.log(`${curCoords.lng}, ${curCoords.lat}`);\r\n // //console.log(`GRef Current location: [${currentCoords.lng}, ${currentCoords.lat}] `);\r\n //});\r\n\r\n // Change cursor to pointer when user hovers over a clickable feature\r\n map.on(\"mouseenter\", [\"custom-points-layer\", \"confirmed-points-layer\"], (e) => {\r\n if (!map) return;\r\n if (e.features.length) {\r\n map.getCanvas().style.cursor = \"pointer\";\r\n }\r\n });\r\n\r\n // Reset cursor to default when user is no longer hovering over a clickable feature\r\n map.on(\"mouseleave\", [\"custom-points-layer\", \"confirmed-points-layer\"], () => {\r\n if (!map) return;\r\n map.getCanvas().style.cursor = \"\";\r\n //popUpRef.current.remove();\r\n });\r\n\r\n //map.on(\"mouseenter\", currentMarkerRef.current.id, () => {\r\n // map.getCanvas().style.cursor = \"pointer\";\r\n //});\r\n\r\n //map.on(\"mouseleave\", currentMarkerRef.current.id, () => {\r\n // map.getCanvas().style.cursor = \"default\";\r\n //});\r\n\r\n //map.on('sourcedata', (e) => {\r\n // //if (e.sourceId === \"confirmed-points-data\" && e.isSourceLoaded) {\r\n // if (e.sourceId === \"confirmed-points-data\") {\r\n // const joinedPoints = map.querySourceFeatures(\"confirmed-points-data\");\r\n // console.log(\"Count: \" + joinedPoints.length);\r\n // joinedPoints.map((item, i) => { console.log(\"Props: \" + item.properties['name']); });\r\n // setMapSource(joinedPoints);\r\n\r\n // //const renderedResults = this.props.mapSource.map((item, i) => (
{item.properties['name']}
\r\n // // /*
*/\r\n // //));\r\n \r\n // //const mapResult = new ResultCtrl({ map: map, geo: geo, mapSource: mapSource, selectMarker: selectMarker, srcMarker: srcMarker, getListData: getListData, handleRadar: handleRadar, spinner: spinnerRef, directionModeRef: directionModeRef, marker: currentMarkerRef, geoLocate: geoLocateRef, handleZoom: handleZoom, handleDirection: handleDirection, handleToggler: handleToggler, useGAEventTracker: useGAEventTracker });\r\n // //setMapResult(mapResult);\r\n // //try {\r\n // // map.removeControl(mapResult);\r\n // //}\r\n // //catch { }\r\n // //map.addControl(mapResult, \"top-left\");\r\n // }\r\n //});\r\n\r\n //map.on('click', function (e) { \r\n // // handle Toggler\r\n // if (isExpanded) {\r\n // setIsExpanded(false);\r\n // localStorage.setItem('is-sidebar-collapsed', true);\r\n // }\r\n //});\r\n\r\n // setup popup display on the marker\r\n map.on(\"click\", [\"custom-points-layer\", \"confirmed-points-layer\"], function (e) {\r\n if (!map) return;\r\n \r\n // var features = map.queryRenderedFeatures(e.point, {\r\n // layers: [\"trucks\", \"trucks-highlight\"],\r\n // radius: 10,\r\n // includeGeometry: true,\r\n // });\r\n // if (!features.length) return;\r\n // var feature = features[0];\r\n // new mapboxgl.Popup()\r\n // .setLngLat(feature.geometry.coordinates)\r\n // .setHTML(formatHTMLforMarker(feature.properties))\r\n // .addTo(map);\r\n\r\n //console.log(\"App Message: Selected Object\");\r\n if (e.features.length) {\r\n const feature = e.features[0]; \r\n // create popup node\r\n const popupNode = document.createElement('div');\r\n //popupNode.style.cssText = 'width:200px; height:200px; margin: 10px 0px 0px 0px;border-radius:10px; border:1px solid #2296F4; box-shadow: 0px 0px 5px 4px rgba(67,60,67,.16), z-index:3000';\r\n popupNode.style.zIndex = 2005;\r\n ReactDOM.render(
, popupNode);\r\n // set popup on map\r\n popUpRef.current\r\n .setLngLat(feature.geometry.coordinates)\r\n .setDOMContent(popupNode)\r\n .addTo(map);\r\n //popUpRef.addClassName('classPopup');\r\n }\r\n });\r\n\r\n //spinner.remove();\r\n };\r\n\r\n if (!map) {\r\n initializeMap({ setMap, mapContainer }); \r\n }\r\n }, [map]);\r\n\r\n //const setListData = (data) => {\r\n // setMapData(data);\r\n // console.log(\"setMapData: \" + data);\r\n //}\r\n\r\n //const getListData = () => {\r\n // console.log(\"MapData: \" + this.props.map.getSource(\"confirmed-points-data\")._option.data.features);\r\n // return this.props.map.getSource(\"confirmed-points-data\")._option.data.features;\r\n //}\r\n\r\n const handleToggler = () => {\r\n if (isExpanded) {\r\n setIsExpanded(false);\r\n localStorage.setItem('is-sidebar-collapsed', true); \r\n return;\r\n }\r\n setIsExpanded(true); \r\n localStorage.removeItem('is-sidebar-collapsed');\r\n }\r\n\r\n const handleZoom = (size) => {\r\n //map.setZoom(13.4);\r\n map.flyTo(map.getCenter(), 15.4);\r\n console.log(\"Handle Current zoom: \" + size);\r\n }\r\n\r\n //const handleDirection = (isStart = true, lng = 0, lat = 0) => { \r\n // if (lng === 0 || lat === 0) {\r\n // currentMarkerRef.current.remove(); \r\n // destMarker.current.remove(); \r\n // return;\r\n // }\r\n\r\n // if (!isStart) {\r\n // currentMarkerRef.current.remove();\r\n // // Remove previous markers \r\n // //mapMarkers.forEach((marker) => marker.remove());\r\n // //mapMarkers = [];\r\n // destMarker.current.remove();\r\n // destMarker.current.setLngLat([lng, lat]).addTo(map);\r\n // }\r\n // else {\r\n // //geoLocateRef.current.trigger();\r\n // currentMarkerRef.current.remove();\r\n // currentMarkerRef.current.setLngLat([lng, lat]).addTo(map);\r\n // destMarker.current.remove(); \r\n // }\r\n //}\r\n\r\n const handleRadar = (map, size) => {\r\n map.setZoom(size);\r\n map.flyTo(map.getCenter(), size);\r\n console.log(\"Handle Current zoom: \" + size);\r\n }\r\n\r\n return ( \r\n
\r\n
\r\n
\r\n 
\r\n \r\n \r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* */}\r\n \r\n {/*
*/}\r\n
\r\n \r\n
\r\n
\r\n {/*Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}*/}\r\n
\r\n
Phát triển bởi © iFlower.vn\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n );\r\n}\r\n\r\n\r\n","import React, { useEffect, Component } from 'react';\r\n//import ReactDOM from 'react-dom';\r\nimport { Route } from \"react-router\";\r\nimport { BrowserRouter as Router } from \"react-router-dom\";\r\n//import { BrowserRouter as Router, Route, Routes } from \"react-router-dom\";\r\nimport ReactGA from 'react-ga';\r\n\r\n//import { Home } from './components/pages/Home';\r\n//import { Layout } from './components/pages/Layout';\r\n//import { FetchData } from './components/pages/FetchData';\r\n//import { Counter } from './components/pages/Counter';\r\nimport Map from './components/Map';\r\n//import logo from \"./img/six-logo-orange.png\";\r\n//import six_logo_orange from \"./img/six-logo-orange.png\";\r\n//import iflower_logo_blue from \"./img/iflower-logo-blue.png\";\r\n//import './custom.css'\r\n\r\nReactGA.initialize(process.env.REACT_APP_GA_TRACKING_ID);\r\n\r\n//export default class App extends Component {\r\n// static displayName = App.name; \r\n\r\n// render() {\r\n// return (\r\n// //
\r\n// // \r\n// // \r\n// // \r\n// // \r\n// // \r\n// //\r\n\r\n//
\r\n//
\r\n//
\r\n// \r\n// \r\n//
\r\n// \r\n// {/**/} \r\n\r\n// \r\n// {/**/}\r\n// {/**/}\r\n// {/**/}\r\n// \r\n// \r\n//
\r\n \r\n// {/*
Empowered by SIX
*/}\r\n//
\r\n// );\r\n// }\r\n//}\r\n\r\n//const Home = () => (\r\n//
\r\n//
Home
\r\n// \r\n//);\r\n\r\n//const ContactUs = () => (\r\n//
\r\n// Contact
\r\n// \r\n// \r\n//);\r\n\r\n//const AboutUs = () => (\r\n//
\r\n//
About
\r\n// \r\n//);\r\n\r\n//const FakeText = () => (\r\n//
\r\n// Welcome Contact Us\r\n//
\r\n//);\r\n\r\nconst App = () => {\r\n useEffect(() => {\r\n ReactGA.pageview(window.location.pathname + window.location.search);\r\n }, []);\r\n\r\n return (\r\n
\r\n \r\n {/*} />*/}\r\n {/*} />*/}\r\n {/*} />*/}\r\n \r\n \r\n {/**/}\r\n \r\n \r\n );\r\n}\r\n\r\nexport default App;\r\n","import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport \"mapbox-gl/dist/mapbox-gl.css\";\r\nimport \"./custom.css\";\r\nimport App from \"./App\";\r\n\r\nReactDOM.render(\r\n
\r\n \r\n ,\r\n document.getElementById(\"root\")\r\n);\r\n"],"sourceRoot":""}
\n ![](\"https://vinflower.com/wp-content/uploads/2023/06/5539763.png\")
\n // \n //