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 (