Slight refactoring

src/components/map/Map.css

@@ -0,0 +1,17 @@
+.ol-map {
+  position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+.ol-control {
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.4);
+  border-radius: 4px;
+  padding: 2px;
+}
+.ol-full-screen {
+  top: 0.5em;
+  right: 0.5em;
+}

src/components/map/Map.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useRef } from 'react';
+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 './Map.css';
+import Collection from 'ol/Collection';
+
+export interface MapProperties {}
+
+export const Map: React.FC<MapProperties> = (props: MapProperties) => {
+  const target = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const controls = new Collection([new Attribution({ collapsible: true })]);
+    const map = new OlMap({
+      view: new View({
+        center: [0, 0],
+        zoom: 1,
+      }),
+      layers: [
+        new TileLayer({
+          source: new OSM(),
+        }),
+      ],
+      target: target.current ?? undefined,
+      controls,
+    });
+  }, []);
+
+  return <div ref={target} className='ol-map' />;
+};
+
+export default Map;

src/components/map/index.ts

@@ -0,0 +1 @@
+export { default } from './Map';