map component

src/components/Map/index.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useRef } from "react";
+import OSM from "ol/Map";
+import View from "ol/View";
+import TileLayer from "ol/layer/Tile";
+import XYZ from "ol/source/XYZ";
+import styles from "./index.module.scss";
+
+export const Map = (props) => {
+    const mapRef = useRef(null);
+
+    useEffect(() => {
+        const view = new View({
+            center: props.center ?? [0, 0],
+            zoom: props.zoom ?? 3,
+        });
+        const layer = new TileLayer({
+            source: new XYZ({
+                url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+            }),
+        });
+        const el = mapRef.current;
+        new OSM({
+            target: el,
+            view: view,
+            layers: [layer],
+        });
+        view.on("change:center", () => {
+            if (typeof props.onCenterChange === "function") props.onCenterChange(view.getCenter());
+        });
+        return () => {
+            el.innerHTML = "";
+        };
+    }, [props]);
+
+    return (
+        <div style={{ width: props.width, height: props.height }} className={styles.container}>
+            <div ref={mapRef} className={styles.map}></div>
+        </div>
+    );
+};

src/components/Map/index.module.scss

@@ -0,0 +1,10 @@
+.container {
+    position: relative;
+}
+.map {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

src/index.scss

@@ -6,3 +6,17 @@ $bg: #ffffff;
     margin: 0;
     padding: 0;
 }
+
+.ol-zoom-in,
+.ol-zoom-out {
+    padding: 3px;
+    margin: 2px;
+    background: $bggray;
+    border: none;
+    border-radius: 3px;
+    font-size: 1.2rem;
+}
+
+.ol-rotate {
+    visibility: hidden;
+}