From df19bec60c600a6a4b3f29fea3e85ab807a3ef15 Mon Sep 17 00:00:00 2001
From: GRZ4NA <grzanatv@gmail.com>
Date: Sat, 2 Oct 2021 01:13:56 +0200
Subject: [PATCH] map component

---
 src/components/Map/index.js          | 40 ++++++++++++++++++++++++++++
 src/components/Map/index.module.scss | 10 +++++++
 src/index.scss                       | 14 ++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 src/components/Map/index.js
 create mode 100644 src/components/Map/index.module.scss

diff --git a/src/components/Map/index.js b/src/components/Map/index.js
new file mode 100644
index 0000000..7a98ae4
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/src/components/Map/index.module.scss b/src/components/Map/index.module.scss
new file mode 100644
index 0000000..e563e80
--- /dev/null
+++ b/src/components/Map/index.module.scss
@@ -0,0 +1,10 @@
+.container {
+    position: relative;
+}
+.map {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
diff --git a/src/index.scss b/src/index.scss
index c694c23..851ae0e 100644
--- a/src/index.scss
+++ b/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;
+}