added resize handle

pieterprovoost · Sep 5, 2024 · 26f75b3 · 26f75b3
1 parent 40df30c
commit 26f75b3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/src/App.js b/src/App.js
@@ -44,10 +44,21 @@ function App() {
 
   const groupRef = useRef();
 
+  const ensureResize = function(mapRef) {
+    const resizeObserver = new ResizeObserver(() => {
+      mapRef.invalidateSize();
+    });
+    const container = document.getElementById("map");
+    if (container) {
+      resizeObserver.observe(container);
+    }
+  }
+
   const displayMap = useMemo(
     () => (
       <MapContainer
         id="map"
+        whenReady={(mapRef) => ensureResize(mapRef.target)}
         center={[10, 0]}
         zoom={1}
         scrollWheelZoom={true}

diff --git a/src/index.css b/src/index.css
@@ -19,6 +19,7 @@ html, body {
   width: 100%;
   height: 450px;
   background-color: #eeeeee;
+  resize: vertical;
 }
 
 textarea {
@@ -37,3 +38,9 @@ code {
   border: 0 !important;
   border-radius: 5px;
 }
+
+#map::-webkit-resizer {
+  background-color: "none";
+  border-bottom: 4px double black;
+  padding-right: 20px;
+}