diff --git a/src/assets/location_marker.svg b/src/assets/location_marker.svg new file mode 100644 index 0000000..18d2ed1 --- /dev/null +++ b/src/assets/location_marker.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/Map/MapControls.scss b/src/components/Map/MapControls.scss new file mode 100644 index 0000000..aeaff6c --- /dev/null +++ b/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; +} diff --git a/src/components/Map/index.js b/src/components/Map/index.js index 7a98ae4..c888842 100644 --- a/src/components/Map/index.js +++ b/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 (
-
+ {props.showMarker && } +
); }; diff --git a/src/components/Map/index.module.scss b/src/components/Map/index.module.scss index e563e80..f6a7ca3 100644 --- a/src/components/Map/index.module.scss +++ b/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; } diff --git a/src/index.scss b/src/index.scss index 851ae0e..c694c23 100644 --- a/src/index.scss +++ b/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; -}