airqo-platform · Baalmart · Feb 2, 2024 · Jan 23, 2024 · Jan 23, 2024 · Feb 2, 2024
diff --git a/platform/package.json b/platform/package.json
@@ -18,6 +18,7 @@
     "@reduxjs/toolkit": "^1.9.2",
     "@svgr/webpack": "^6.4.0",
     "@tailwindcss/typography": "^0.5.9",
+    "@tippyjs/react": "^4.2.6",
     "autoprefixer": "^10.4.12",
     "axios": "^1.4.0",
     "daisyui": "^2.47.0",
@@ -31,6 +32,7 @@
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.7.1",
     "jwt-decode": "^3.1.2",
+    "mapbox-gl": "^3.1.0",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.40",
     "next": "^12.2.4",
@@ -41,8 +43,9 @@
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-calendar": "^4.0.0",
-    "react-country-flag": "^3.1.0",
     "react-dom": "^18.2.0",
+    "react-map-gl": "^7.1.7",
+    "react-mapbox-gl": "^5.1.1",
     "react-redux": "^8.0.5",
     "react-tailwindcss-datepicker": "^1.4.2",
     "recharts": "^2.5.0",
@@ -52,6 +55,7 @@
     "sass": "^1.54.3",
     "tailwindcss": "^3.1.8",
     "timezones.json": "^1.7.1",
+    "tippy.js": "^6.3.7",
     "underscore": "^1.13.6"
   },
   "devDependencies": {

diff --git a/platform/public/icons/LocationIcon.js b/platform/public/icons/LocationIcon.js
@@ -8,20 +8,20 @@ const LocationIcon = ({ width, height, fill, strokeWidth }) => {
       height={height || '20'}
       viewBox='0 0 20 20'
       fill='none'>
-      <g clip-path='url(#clip0_9880_13588)'>
+      <g clipPath='url(#clip0_9880_13588)'>
         <path
           d='M10.0026 10.8268C11.3833 10.8268 12.5026 9.70754 12.5026 8.32682C12.5026 6.94611 11.3833 5.82682 10.0026 5.82682C8.62189 5.82682 7.5026 6.94611 7.5026 8.32682C7.5026 9.70754 8.62189 10.8268 10.0026 10.8268Z'
           stroke={fill || '#536A87'}
-          stroke-width='1.5'
-          stroke-linecap='round'
-          stroke-linejoin='round'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+          strokeLinejoin='round'
         />
         <path
           d='M10.0026 18.3268C13.3359 14.9935 16.6693 12.0087 16.6693 8.32682C16.6693 4.64492 13.6845 1.66016 10.0026 1.66016C6.32071 1.66016 3.33594 4.64492 3.33594 8.32682C3.33594 12.0087 6.66927 14.9935 10.0026 18.3268Z'
           stroke={fill || '#536A87'}
-          stroke-width='1.5'
-          stroke-linecap='round'
-          stroke-linejoin='round'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+          strokeLinejoin='round'
         />
       </g>
       <defs>

diff --git a/platform/public/icons/SideBar/world_Icon.js b/platform/public/icons/SideBar/world_Icon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const world_Icon = ({ width, height, fill }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width || 24}
+      height={height || 24}
+      viewBox='0 0 24 24'
+      fill='none'>
+      <path
+        d='M15 2.458A9.996 9.996 0 0012 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10c0-1.715-.432-3.33-1.193-4.74M17 5.75h.005M10.5 21.888v-2.203a.5.5 0 01.12-.325l2.486-2.9a.5.5 0 00-.131-.76l-2.857-1.632a.499.499 0 01-.186-.187L8.07 10.62a.5.5 0 00-.478-.25l-5.528.492M21 6c0 2.21-2 4-4 6-2-2-4-3.79-4-6a4 4 0 018 0zm-3.75-.25a.25.25 0 11-.5 0 .25.25 0 01.5 0z'
+        stroke={fill || '#145FFF'}
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default world_Icon;
diff --git a/platform/public/icons/map/downArrow.js b/platform/public/icons/map/downArrow.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const downArrow = ({ width, height, fill }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width || '24'}
+      height={height || '24'}
+      viewBox='0 0 24 24'
+      fill='none'>
+      <path
+        d='M6 9L12 15L18 9'
+        stroke={fill || '#536A87'}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default downArrow;
diff --git a/platform/public/icons/map/gpsIcon.js b/platform/public/icons/map/gpsIcon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const gpsIcon = ({ width, height, fill }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width || '24'}
+      height={height || '24'}
+      viewBox='0 0 24 24'
+      fill='none'>
+      <path
+        d='M20 12C20 16.4183 16.4183 20 12 20M20 12C20 7.58172 16.4183 4 12 4M20 12H22M12 20C7.58172 20 4 16.4183 4 12M12 20V22M4 12C4 7.58172 7.58172 4 12 4M4 12H2M12 4V2M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z'
+        stroke={fill || '#536A87'}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default gpsIcon;
diff --git a/platform/public/icons/map/homeIcon.js b/platform/public/icons/map/homeIcon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const homeIcon = ({ width, height, fill }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width || '24'}
+      height={height || '24'}
+      viewBox='0 0 24 24'
+      fill='none'>
+      <path
+        d='M12.9823 2.76278C12.631 2.48953 12.4553 2.3529 12.2613 2.30038C12.0902 2.25404 11.9098 2.25404 11.7387 2.30038C11.5447 2.3529 11.369 2.48953 11.0177 2.76278L4.23539 8.0379C3.78202 8.39052 3.55534 8.56683 3.39203 8.78764C3.24737 8.98322 3.1396 9.20356 3.07403 9.43783C3 9.7023 3 9.98948 3 10.5638V17.7988C3 18.9189 3 19.4789 3.21799 19.9067C3.40973 20.2831 3.71569 20.589 4.09202 20.7808C4.51984 20.9988 5.0799 20.9988 6.2 20.9988H8.2C8.48003 20.9988 8.62004 20.9988 8.727 20.9443C8.82108 20.8963 8.89757 20.8198 8.9455 20.7258C9 20.6188 9 20.4788 9 20.1988V13.5988C9 13.0387 9 12.7587 9.10899 12.5448C9.20487 12.3566 9.35785 12.2036 9.54601 12.1078C9.75992 11.9988 10.0399 11.9988 10.6 11.9988H13.4C13.9601 11.9988 14.2401 11.9988 14.454 12.1078C14.6422 12.2036 14.7951 12.3566 14.891 12.5448C15 12.7587 15 13.0387 15 13.5988V20.1988C15 20.4788 15 20.6188 15.0545 20.7258C15.1024 20.8198 15.1789 20.8963 15.273 20.9443C15.38 20.9988 15.52 20.9988 15.8 20.9988H17.8C18.9201 20.9988 19.4802 20.9988 19.908 20.7808C20.2843 20.589 20.5903 20.2831 20.782 19.9067C21 19.4789 21 18.9189 21 17.7988V10.5638C21 9.98948 21 9.7023 20.926 9.43783C20.8604 9.20356 20.7526 8.98322 20.608 8.78764C20.4447 8.56683 20.218 8.39052 19.7646 8.03791L12.9823 2.76278Z'
+        stroke={fill || '#536A87'}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default homeIcon;
diff --git a/platform/public/icons/map/layerIcon.js b/platform/public/icons/map/layerIcon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const layerIcon = ({ width, height, fill }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width || '24'}
+      height={height || '24'}
+      viewBox='0 0 24 24'
+      fill='none'>
+      <path
+        d='M7 11.9996L2 14.4996L11.6422 19.3207C11.7734 19.3863 11.839 19.4191 11.9078 19.432C11.9687 19.4434 12.0313 19.4434 12.0922 19.432C12.161 19.4191 12.2266 19.3863 12.3578 19.3207L22 14.4996L17 11.9996M2 9.49958L11.6422 4.67846C11.7734 4.61287 11.839 4.58008 11.9078 4.56717C11.9687 4.55574 12.0313 4.55574 12.0922 4.56717C12.161 4.58008 12.2266 4.61287 12.3578 4.67846L22 9.49958L12.3578 14.3207C12.2266 14.3863 12.161 14.4191 12.0922 14.432C12.0313 14.4434 11.9687 14.4434 11.9078 14.432C11.839 14.4191 11.7734 14.3863 11.6422 14.3207L2 9.49958Z'
+        stroke={fill || '#536A87'}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default layerIcon;
diff --git a/platform/public/icons/map/menuIcon.js b/platform/public/icons/map/menuIcon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const menuIcon = ({ width, height, fill }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width || '24'}
+      height={height || '24'}
+      viewBox='0 0 24 24'
+      fill='none'>
+      <path
+        d='M3 12H21M3 6H21M3 18H15'
+        stroke={fill || '#536A87'}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default menuIcon;
diff --git a/platform/public/icons/map/minusIcon.js b/platform/public/icons/map/minusIcon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const minusIcon = ({ width, height, fill }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width || '24'}
+      height={height || '24'}
+      viewBox='0 0 24 24'
+      fill='none'>
+      <path
+        d='M5 12H19'
+        stroke={fill || '#536A87'}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default minusIcon;
diff --git a/platform/public/icons/map/plusIcon.js b/platform/public/icons/map/plusIcon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const plusIcon = ({ width, height, fill }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width || '24'}
+      height={height || '24'}
+      viewBox='0 0 24 24'
+      fill='none'>
+      <path
+        d='M12 5V19M5 12H19'
+        stroke={fill || '#536A87'}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default plusIcon;
diff --git a/platform/public/icons/map/refreshIcon.js b/platform/public/icons/map/refreshIcon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const refreshIcon = ({ width, height, fill }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width || '24'}
+      height={height || '24'}
+      viewBox='0 0 24 24'
+      fill='none'>
+      <path
+        d='M20.452 12.8927C20.1742 15.5026 18.6954 17.9483 16.2484 19.3611C12.1829 21.7083 6.98442 20.3153 4.63721 16.2499L4.38721 15.8168M3.54515 11.1066C3.82295 8.49674 5.30174 6.05102 7.74873 4.63825C11.8142 2.29104 17.0127 3.68398 19.3599 7.74947L19.6099 8.18248M3.49219 18.0657L4.22424 15.3336L6.95629 16.0657M17.0414 7.93364L19.7735 8.66569L20.5055 5.93364'
+        stroke={fill || '#536A87'}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default refreshIcon;
diff --git a/platform/public/icons/map/shareIcon.js b/platform/public/icons/map/shareIcon.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const shareIcon = ({ width, height, fill }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width || '24'}
+      height={height || '24'}
+      viewBox='0 0 24 24'
+      fill='none'>
+      <path
+        d='M9.99825 13C10.4277 13.5741 10.9756 14.0491 11.6048 14.3929C12.234 14.7367 12.9298 14.9411 13.6449 14.9923C14.36 15.0435 15.0778 14.9403 15.7496 14.6897C16.4214 14.4392 17.0314 14.047 17.5382 13.54L20.5382 10.54C21.449 9.59695 21.953 8.33394 21.9416 7.02296C21.9302 5.71198 21.4044 4.45791 20.4773 3.53087C19.5503 2.60383 18.2962 2.07799 16.9853 2.0666C15.6743 2.0552 14.4113 2.55918 13.4682 3.46997L11.7482 5.17997M13.9982 11C13.5688 10.4258 13.0209 9.95078 12.3917 9.60703C11.7625 9.26327 11.0667 9.05885 10.3516 9.00763C9.63645 8.95641 8.91866 9.0596 8.2469 9.31018C7.57514 9.56077 6.96513 9.9529 6.45825 10.46L3.45825 13.46C2.54746 14.403 2.04348 15.666 2.05488 16.977C2.06627 18.288 2.59211 19.542 3.51915 20.4691C4.44619 21.3961 5.70026 21.9219 7.01124 21.9333C8.32222 21.9447 9.58524 21.4408 10.5282 20.53L12.2382 18.82'
+        stroke={fill || '#536A87'}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default shareIcon;
diff --git a/platform/public/icons/map/upArrow.js b/platform/public/icons/map/upArrow.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const upArrow = ({ width, height, fill }) => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width || '24'}
+      height={height || '24'}
+      viewBox='0 0 24 24'
+      fill='none'>
+      <path
+        d='M18 15L12 9L6 15'
+        stroke={fill || '#536A87'}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  );
+};
+
+export default upArrow;
diff --git a/platform/src/common/components/Layout/index.jsx b/platform/src/common/components/Layout/index.jsx
@@ -13,11 +13,18 @@ import { useDispatch, useSelector } from 'react-redux';
 import { fetchUserChecklists } from '@/lib/store/services/checklists/CheckData';
 import { updateCards } from '@/lib/store/services/checklists/CheckList';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 
-const Layout = ({ pageTitle = 'AirQo Analytics', children, topbarTitle, noBorderBottom }) => {
+const Layout = ({
+  pageTitle = 'AirQo Analytics',
+  children,
+  topbarTitle,
+  noBorderBottom,
+  noTopNav = true,
+}) => {
   // Constants
   const MAX_WIDTH = '(max-width: 1024px)';
-
+  const router = useRouter();
   const dispatch = useDispatch();
   const chartData = useSelector((state) => state.chart);
   const userInfo = useSelector((state) => state.login.userInfo);
@@ -78,6 +85,14 @@ const Layout = ({ pageTitle = 'AirQo Analytics', children, topbarTitle, noBorder
 
   useEffect(fetchData, [dispatch, userInfo]);
 
+  useEffect(() => {
+    if (router.pathname === '/map') {
+      setCollapsed(true);
+    } else {
+      setCollapsed(false);
+    }
+  }, [router.pathname]);
+
   useEffect(() => {
     localStorage.setItem('collapsed', collapsed);
   }, [collapsed]);
@@ -114,14 +129,16 @@ const Layout = ({ pageTitle = 'AirQo Analytics', children, topbarTitle, noBorder
             />
           </div>
           <div className='w-full overflow-x-hidden'>
-            <TopBar
-              topbarTitle={topbarTitle}
-              noBorderBottom={noBorderBottom}
-              toggleDrawer={toggleDrawer}
-              setToggleDrawer={setToggleDrawer}
-              collapsed={collapsed}
-              setCollapsed={setCollapsed}
-            />
+            {noTopNav && (
+              <TopBar
+                topbarTitle={topbarTitle}
+                noBorderBottom={noBorderBottom}
+                toggleDrawer={toggleDrawer}
+                setToggleDrawer={setToggleDrawer}
+                collapsed={collapsed}
+                setCollapsed={setCollapsed}
+              />
+            )}
             {children}
           </div>
         </div>