adding the map

BesLogic · Mar 23, 2024 · 035f34d · 035f34d
1 parent f5f48ba
commit 035f34d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/canopeum_frontend/index.html b/canopeum_frontend/index.html
@@ -17,6 +17,10 @@
     rel="stylesheet"
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
   />
+  <link
+    href='https://unpkg.com/[email protected]/dist/maplibre-gl.css'
+    rel='stylesheet'
+  />
 </head>
 
 <body>

diff --git a/canopeum_frontend/src/pages/Map.tsx b/canopeum_frontend/src/pages/Map.tsx
@@ -1,8 +1,22 @@
+import ReactMap from 'react-map-gl/maplibre';
+
 const Map = () => (
-  <div className='container mt-2 d-flex flex-column gap-2'>
-    <div className='bg-white rounded-2 px-3 py-2'>
-      <h1>Map</h1>
+  <div className='container-fluid p-0'>
+    <div className="row m-0">
+      <div className="col-4 mt-3" style={{ height: 'calc(100vh - 4.4rem)', overflowY: 'scroll' }} />
+      <div className="col-8 d-flex p-0" style={{ height: 'calc(100vh - 3.4rem)' }}>
+        <ReactMap
+          initialViewState={{
+            longitude: -70,
+            latitude: 50,
+            zoom: 10
+          }}
+          mapStyle="https://api.maptiler.com/maps/basic-v2/style.json?key=fSPw19J7BbjcbrS5b5u6"
+          style={{ width: '100%', height: '100%' }}
+        />
+      </div>
     </div>
+
   </div>
 )
 export default Map