project location map

package.json

@@ -47,7 +47,7 @@
     "interactjs": "^1.10.11",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.5.25",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.8.0",
     "leaflet-draw": "^1.0.4",
     "moment": "^2.24.0",
     "node-sass": "^4.12.0",

src/scss/_custom.scss

@@ -160,3 +160,7 @@
   border-radius: 12px;
 }
  
+.leaflet-container {
+  width: 100%;
+  height: 50vh;
+}

src/views/DashboardPMOV1/index.js

@@ -3,36 +3,13 @@ import { Row, Col, Collapse } from 'antd';
 import TableDashboardV1 from './tableDashboardv1';
 import { ProjectTypeChart } from './chartDashboard';
 import { ProjectPhaseChart } from './projectPhaseChart';
+import ProjectMap from './projectMap';
 import axios from 'axios'
 import { BASE_OSPRO } from '../../const/ApiConst';
 import { formatRibuanDecimal } from '../../const/CustomFunc.js';
 
-
 const { Panel } = Collapse;
 
-function BoxDashboard({ value, title, secondaryTitle, icon, bgColor, valFSize = '1.0rem', fSize = '0.7rem' }) {
-  return (
-    <>
-      <div style={{ backgroundColor: bgColor, height: 58 }} class='box-dashboard-pm'>
-        <Row>
-          <Col span={4}>
-            <div class='box-icon'>
-              {icon}
-            </div>
-          </Col>
-          <Col span={20}>
-            <div class='box-content'>
-              <div style={{ fontSize: valFSize }} class='text-box'>{value}</div>
-              <div style={{ fontSize: fSize }} class='text-box'>{title.toUpperCase()}</div>
-              <div style={{ fontSize: '0.6rem' }} class='text-box-secondary'>{secondaryTitle && secondaryTitle.toUpperCase()}</div>
-            </div>
-          </Col>
-        </Row>
-      </div>
-    </>
-  )
-}
-
 function BoxDashboardNoIcon({ value, title, secondaryTitle, bgColor, valFSize = '1.0rem', fSize = '0.7rem' }) {
   return (
     <>
@@ -51,7 +28,6 @@ function BoxDashboardNoIcon({ value, title, secondaryTitle, bgColor, valFSize =
   )
 }
 
-
 const DashboardPM = () => {
   const [PROJECTCOUNT, SET_PROJECTCOUNT] = useState(0)
   const [PROJECTBUDGETTOTAL, SET_PROJECTBUDGETTOTAL] = useState(0)
@@ -63,6 +39,7 @@ const DashboardPM = () => {
   const [PROJECTPHASES, SET_PROJECTPHASES] = useState([])
   const [PROJECTSBYPHASE, SET_PROJECTSBYPHASE] = useState([])
   const [PROJECTSONDANGER, SET_PROJECTSONDANGER] = useState(0)
+  const [PROJECTLOCATIONS, SET_PROJECTLOCATIONS] = useState([])
 
   const [PROJECTTYPES, SET_PROJECTTYPES] = useState([])
   const [PROJECTSBYTYPE, SET_PROJECTSBYTYPE] = useState([])
@@ -78,6 +55,7 @@ const DashboardPM = () => {
   const getProjectInfos = async () => {
     const URL = `${BASE_OSPRO}/api/project/list`
     const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
+    let markers = []
 
     SET_PROJECTCOUNT(result.data.totalRecord)
     result.data.totalActualCost != undefined ? SET_PROJECTCOSTTOTAL(result.data.totalActualCost) : SET_PROJECTCOSTTOTAL(0)
@@ -90,6 +68,16 @@ const DashboardPM = () => {
     result.data.projectsByType != undefined ? SET_PROJECTSBYTYPE(result.data.projectsByType) : SET_PROJECTSBYTYPE([])
     result.data.projectsOnDanger != undefined ? SET_PROJECTSONDANGER(result.data.projectsOnDanger) : SET_PROJECTSONDANGER(0)
 
+    for (let i = 0; i < result.data.totalRecord; i++) {
+      if (typeof (result.data.data[i].geolocation) == 'object' && result.data.data[i].geolocation.length > 0) {
+        markers.push({
+          lat: result.data.data[i].geolocation[0].lat,
+          lon: result.data.data[i].geolocation[0].lon,
+          label: result.data.data[i].area_kerja + "\n" + result.data.data[i].nama
+        })
+      }
+    }
+    SET_PROJECTLOCATIONS(markers)
   }
 
   useEffect(() => {
@@ -164,11 +152,10 @@ const DashboardPM = () => {
         <Row style={{ marginTop: '15px' }}>
           <Col span={24} style={{ margin: '0px 0px 0px 0px' }}>
             <Collapse>
-
               <Panel header="More Information" key="1">
                 <Row style={{ margin: '10px 10px 0px 10px' }}>
                   <Col span={8} >
-                    <Row></Row>
+                    <ProjectMap markers={PROJECTLOCATIONS} />
                   </Col>
                   <Col span={8}>
                     <ProjectPhaseChart projectPhases={PROJECTPHASES} projectsByPhase={PROJECTSBYPHASE} />
@@ -192,4 +179,3 @@ const DashboardPM = () => {
 }
 
 export default DashboardPM;
-

src/views/DashboardPMOV1/projectMap.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import icon from 'leaflet/dist/images/marker-icon.png';
+import iconShadow from 'leaflet/dist/images/marker-shadow.png';
+import L from 'leaflet';
+import { MapContainer, Marker, TileLayer, Popup } from 'react-leaflet'
+import 'leaflet/dist/leaflet.css';
+
+const defaultMapPosition = [-6.1753924, 106.8271528]
+
+const DefaultIcon = L.icon({
+  iconUrl: icon,
+  shadowUrl: iconShadow,
+  iconSize: [15, 25],
+  shadowSize: [0, 0],
+});
+L.Marker.prototype.options.icon = DefaultIcon;
+
+const ProjectMap = ({ markers }) => {
+  return (
+    <MapContainer
+      center={defaultMapPosition}
+      zoom={5}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      {markers.map(({ lat, lon, label }) => (
+        <Marker position={[lat, lon]}>
+          <Popup>
+            {label}
+          </Popup>
+        </Marker>
+      ))}
+    </MapContainer>
+  );
+}
+
+export default ProjectMap;