Use Leaflet

src/App.js

@@ -12,11 +12,15 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 
-import { ComposableMap, Geographies, Geography, ZoomableGroup } from "react-simple-maps"
+// Leaflet
+import { MapContainer } from 'react-leaflet/MapContainer'
+import { TileLayer } from 'react-leaflet/TileLayer'
+import { Marker } from 'react-leaflet/Marker'
+import { Popup } from 'react-leaflet/Popup'
 
 function RoomResearch() {
   return <>
-    <div style={{padding: '24px'}}>
+    <div style={{ padding: '24px' }}>
       <Typography component="h2" variant="h5" gutterBottom>
         Rechercher une salle
       </Typography>
@@ -78,20 +82,17 @@ function TopBar() {
 }
 
 function Map() {
-  const geoUrl = "https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json";
-  return (
-    <ComposableMap>
-      <ZoomableGroup center={[0, -20]} zoom={1}>
-        <Geographies geography={geoUrl}>
-          {({ geographies }) =>
-            geographies.map((geo) => (
-              <Geography key={geo.rsmKey} geography={geo} />
-            ))
-          }
-        </Geographies>
-      </ZoomableGroup>
-    </ComposableMap>
-  )
+  return <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} style={{flexGrow: '1'}}>
+    <TileLayer
+      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    />
+    <Marker position={[51.505, -0.09]}>
+      <Popup>
+        A pretty CSS3 popup. <br /> Easily customizable.
+      </Popup>
+    </Marker>
+  </MapContainer>
 }
 
 export default function App() {