Basic Openlayers map.

src/components/ExploreContainer.css

@@ -1,24 +0,0 @@
-.container {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-.container p {
-  font-size: 16px;
-  line-height: 22px;
-  color: #8c8c8c;
-  margin: 0;
-}
-
-.container a {
-  text-decoration: none;
-}

src/components/ExploreContainer.tsx

@@ -1,14 +0,0 @@
-import './ExploreContainer.css';
-
-interface ContainerProps { }
-
-const ExploreContainer: React.FC<ContainerProps> = () => {
-  return (
-    <div className="container">
-      <strong>Ready to create an app?</strong>
-      <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-    </div>
-  );
-};
-
-export default ExploreContainer;

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