added location marker and map blocking

src/assets/location_marker.svg

@@ -0,0 +1,12 @@
+<svg width="126" height="208" viewBox="0 0 126 208" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="126" height="208"/>
+<path d="M63.1935 0.00966609C15.4004 2.4531 -51.1832 47.3661 63.1935 207.729C177.576 47.3661 110.989 2.4531 63.1935 0.00966609Z" fill="#53D188"/>
+<circle cx="63" cy="67" r="37" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="126" height="208" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/Map/MapControls.scss

@@ -0,0 +1,17 @@
+@import "../../index.scss";
+
+.ol-zoom-in,
+.ol-zoom-out {
+    padding: 3px;
+    margin: 2px;
+    background: $bggray;
+    border: none;
+    border-radius: 3px;
+    font-size: 1.2rem;
+    width: 2rem;
+    height: 2rem;
+}
+
+.ol-rotate {
+    display: none !important;
+}

src/components/Map/index.js

@@ -4,7 +4,19 @@ import View from "ol/View";
 import TileLayer from "ol/layer/Tile";
 import XYZ from "ol/source/XYZ";
 import styles from "./index.module.scss";
+import marker from "../../assets/location_marker.svg";
+import "./MapControls.scss";
 
+/**
+ *
+ * @param {*} props
+ * @param props.center - initial position
+ * @param props.zoom - initial zoom
+ * @param props.onCenterChange - function called on each map move
+ * @param props.width - map width
+ * @param props.height - map height
+ * @param props.blockInteraction - whether interacting with this map should be possible
+ */
 export const Map = (props) => {
     const mapRef = useRef(null);
 
@@ -34,7 +46,8 @@ export const Map = (props) => {
 
     return (
         <div style={{ width: props.width, height: props.height }} className={styles.container}>
-            <div ref={mapRef} className={styles.map}></div>
+            {props.showMarker && <img alt="" src={marker} className={styles.marker}></img>}
+            <div ref={mapRef} className={`${styles.map} ${props.blockInteraction ? styles.block : ""}`}></div>
         </div>
     );
 };

src/components/Map/index.module.scss

@@ -1,5 +1,8 @@
 .container {
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 .map {
     position: absolute;
@@ -7,4 +10,15 @@
     left: 0;
     width: 100%;
     height: 100%;
+    z-index: 0;
+}
+.marker {
+    position: absolute;
+    pointer-events: none;
+    width: 7%;
+    transform: translateY(-50%);
+    z-index: 1;
+}
+.block {
+    pointer-events: none;
 }

src/index.scss

@@ -6,17 +6,3 @@ $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;
-}