+ Lots of work was done but specifically within the GlobalMap.jsx

+ Two new component files were also added
+ Some slight adjustments to Theme.jsx

client/src/components/Canvas/CanvasComponents/MapButtonControls.jsx

@@ -0,0 +1,47 @@
+import { useMap } from "react-leaflet";
+import L from "leaflet";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+// props contain title of btn (which can be an icon), the onClick fn (what should happen)
+// when the settings btn is clicked, and it's positioning with the default being topright
+export default function MapButtonControls({settingsBtn, position = "topright"}) {
+  const map = useMap(); // retrieves the map instance that is mounted
+  const [container, setContainer] = useState(null);
+
+  useEffect(() => {
+    // extending the leaflet control class
+    const customControl = L.Control.extend({
+      onAdd: () => {
+        // create button element with className 'leaflet-bar'
+        const dv = L.DomUtil.create("div", "layer-selector");
+        dv.style.cursor = "pointer";
+
+        // prevent map interactions when clicking on settings btn
+        L.DomEvent.disableClickPropagation(dv);
+        // L.DomEvent.on(dv, "click", onClick);  // pass your own onClick fn
+
+        // pass button to container for react to render
+        setContainer(dv);
+        return dv;
+      },
+      onRemove: () => {
+        setContainer(null);
+      }
+    });
+
+    // instantiate new customControl object
+    const control = new customControl({ position });
+    // method inside og class that we extended above
+    control.addTo(map);
+
+    return () => {
+      control.remove();
+    };
+  }, [map, position, settingsBtn ]);
+
+  return container ? createPortal(
+    settingsBtn,
+    container)
+    : null;
+}