Display map full-screen

src/App.js

@@ -11,11 +11,14 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
+import Grid from '@mui/material/Grid';
 
+import { ComposableMap, Geographies, Geography, ZoomableGroup } from "react-simple-maps"
+import { autocompleteClasses } from '@mui/material';
 
 function RoomResearch() {
   return <>
-    <Container maxWidth="sm">
+    <Container style={{ width: '20%' }}>
       <Typography component="h2" variant="h5" gutterBottom>
         Rechercher une salle
       </Typography>
@@ -78,10 +81,38 @@ function TopBar() {
   </>
 }
 
+function Map() {
+  const geoUrl = "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json";
+  // <Box height='100%' border='1px solid red'>
+  return (
+    <ComposableMap style={{ height: "100%", width: '100%' }} >
+      <ZoomableGroup center={[0, 0]} zoom={9}>
+        <Geographies geography={geoUrl}>
+          {({ geographies }) =>
+            geographies.map((geo) => (
+              <Geography key={geo.rsmKey} geography={geo} />
+            ))
+          }
+        </Geographies>
+      </ZoomableGroup>
+    </ComposableMap>
+
+  )
+}
+
 export default function App() {
   return <>
     <TopBar />
+    <Map />
+
+    {/*<Box height="100vh" display="flex" flexDirection="column">
+  <Box>Filter</Box>
+  <Box flex={1} overflow="auto">
+    {Array.from(Array(100)).map((v, i) => (
+      <div key={i}>Testing {i}</div>
+    ))}
+  </Box>
+</Box>*/}
 
-    <RoomResearch />
   </>
 }