diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js
index 45858167ec21d5699c827a127ff727af5ff76789..33b5d8359045f645983be1558dd3d55324d4f5c0 100644
--- a/src/components/DrawTools.js
+++ b/src/components/DrawTools.js
@@ -83,7 +83,7 @@ class DrawTools extends Component {
 							repeatMode: true, // allows using the tool again after finishing the previous shape
 							shapeOptions: {
 								color: '#f9f10c',
-								opacity: 1
+								opacity: 1 // affects the outline only. for some reason it wasn't at full opacity, so this is needed for more clarity
 							}
 						},
 						rectangle: {
diff --git a/src/components/UserMap.js b/src/components/UserMap.js
index 1ec4c484d990b5b29ff443a7840a86e2517bda78..2a5d9d1afa7614a66277b141fe0b4127e0809c7c 100644
--- a/src/components/UserMap.js
+++ b/src/components/UserMap.js
@@ -6,6 +6,7 @@ import {
   Marker,
   Popup
 } from 'react-leaflet'
+import L from 'leaflet'
 import DrawTools from './DrawTools.js'
 
 class UserMap extends Component {
@@ -14,7 +15,8 @@ class UserMap extends Component {
     this.state = {
       ownLat: null,
       ownLng: null,
-      mapUrl: 'https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg'
+      mapUrl: 'https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg',
+      bounds: L.latLngBounds(18.786621, 59.337183)
     }
 
     this.watchPositionId = null;
@@ -77,13 +79,27 @@ class UserMap extends Component {
     return JSON.stringify(geoJSON);
   }
 
+  testers = (asd) => {
+    console.log(asd.target.getZoom());
+  }
+
   render() {
     return (
-      <Map className='map' center={this.props.position} zoom={this.props.zoom}>
+      <Map 
+        className='map'
+        center={this.props.position}
+        zoom={this.props.zoom}
+        minZoom='7'
+        maxZoom='17'
+        // onzoomend={this.testers} // getting the zoom level
+        maxBounds={this.props.bounds}
+        maxBoundsViscosity='1'
+        zoomControl={false} /* remove the default zoom control button at the top left corner */>
         <TileLayer
           attribution='&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
           url={this.props.mapUrl}
         />
+        
         <ZoomControl position='topright' />
 		    <DrawTools position={this.props.position} />
         <Marker position={this.props.position}>