Adding a (non yet operational) control to get the current location.

src/components/map/Map.tsx

@@ -3,18 +3,36 @@ import OlMap from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
 import Attribution from 'ol/control/Attribution';
-import OSM, { ATTRIBUTION } from 'ol/source/OSM';
+import Rotate from 'ol/control/Rotate';
+import ScaleLine from 'ol/control/ScaleLine';
+import Control from 'ol/control/Control';
+import OSM from 'ol/source/OSM';
 
 import './Map.css';
 import Collection from 'ol/Collection';
+import { createPortal } from 'react-dom';
+import GetLocation from '../get-location';
 
 export interface MapProperties {}
 
 export const Map: React.FC<MapProperties> = (props: MapProperties) => {
   const target = useRef<HTMLDivElement>(null);
 
+  const getLocation = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
-    const controls = new Collection([new Attribution({ collapsible: true })]);
+    // const getLocation = target.current
+    //   ? createPortal(<GetLocation />, target.current)
+    //   : null;
+
+    console.log({ caller: 'Map / useEffect', target, getLocation });
+
+    const controls = new Collection([
+      new Attribution({ collapsible: true }),
+      new Rotate(),
+      new ScaleLine({ bar: true }),
+      new Control({ element: getLocation.current ?? undefined }),
+    ]);
     const map = new OlMap({
       view: new View({
         center: [0, 0],
@@ -30,7 +48,14 @@ export const Map: React.FC<MapProperties> = (props: MapProperties) => {
     });
   }, []);
 
-  return <div ref={target} className='ol-map' />;
+  return (
+    <>
+      <div ref={getLocation}>
+        <GetLocation />
+      </div>
+      <div ref={target} className='ol-map'></div>
+    </>
+  );
 };
 
 export default Map;