From 8e349c9e421bc115a05c172860f9481fcbdca27a Mon Sep 17 00:00:00 2001
From: Jussi Surma-Aho <L4929@student.jamk.fi>
Date: Thu, 13 Jun 2019 17:10:04 +0300
Subject: [PATCH] Removed zoom control at top left corner, added min and max
zoom
---
src/components/DrawTools.js | 2 +-
src/components/UserMap.js | 20 ++++++++++++++++++--
2 files changed, 19 insertions(+), 3 deletions(-)
diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js
index 4585816..33b5d83 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 1ec4c48..2a5d9d1 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='© <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}>
--
GitLab