add minZoom and maxZoom

mariusandra · Sep 19, 2018 · 1050e14 · 1050e14
1 parent 8b3418d
commit 1050e14
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -127,6 +127,10 @@ If you're interested in making a new plugin, check out the code of [pigeon-marke
 
 **zoomSnap** - Snap to discrete zoom increments (14, 15, 16, etc) when scrolling with the mouse or pinching with touch events, Defaults to `true`.
 
+**minZoom** - The lowest zoom level possible. Defaults to `1`
+
+**maxZoom** - The highest zoom level possible. Defaults to `18`
+
 **attribution** - What to show as an [attribution](https://www.openstreetmap.org/copyright). React node or `false` to hide.
 
 **attributionPrefix** - Prefix before attribution. React node or `false` to hide.

diff --git a/demo/demo.js b/demo/demo.js
@@ -86,7 +86,9 @@ export default class App extends Component {
       animating: false,
       zoomSnap: true,
       mouseEvents: true,
-      touchEvents: true
+      touchEvents: true,
+      minZoom: 1,
+      maxZoom: 18
     }
   }
 
@@ -126,7 +128,7 @@ export default class App extends Component {
   }
 
   render () {
-    const { center, zoom, provider, animate, metaWheelZoom, twoFingerDrag, zoomSnap, mouseEvents, touchEvents, animating } = this.state
+    const { center, zoom, provider, animate, metaWheelZoom, twoFingerDrag, zoomSnap, mouseEvents, touchEvents, animating, minZoom, maxZoom } = this.state
 
     return (
       <div style={{textAlign: 'center', marginTop: 50}}>
@@ -146,6 +148,8 @@ export default class App extends Component {
             zoomSnap={zoomSnap}
             mouseEvents={mouseEvents}
             touchEvents={touchEvents}
+            minZoom={minZoom}
+            maxZoom={maxZoom}
             attribution={
               isMapBox(provider)
                 ? <MapboxAttribution />
@@ -192,6 +196,11 @@ export default class App extends Component {
           <button onClick={() => this.setState({ mouseEvents: !mouseEvents })}>{mouseEvents ? '[X] mouse events' : '[ ] mouse events'}</button>
           <button onClick={() => this.setState({ touchEvents: !touchEvents })}>{touchEvents ? '[X] touch events' : '[ ] touch events'}</button>
         </div>
+        <div style={{marginTop: 20}}>
+          minZoom: <input onChange={(e) => this.setState({ minZoom: parseInt(e.target.value) || 1 })} value={minZoom} type='number' style={{ width: 40 }} />
+          {' '}
+          maxZoom: <input onChange={(e) => this.setState({ maxZoom: parseInt(e.target.value) || 18 })} value={maxZoom} type='number' style={{ width: 40 }} />
+        </div>
         <div style={{marginTop: 20}}>
           {Object.keys(markers).map(key => (
             <button key={key} onClick={() => this.setState({ center: markers[key][0], zoom: markers[key][1] })}>{key}</button>

diff --git a/src/index.js b/src/index.js
@@ -77,6 +77,9 @@ export default class Map extends Component {
     animate: PropTypes.bool,
     animateMaxScreens: PropTypes.number,
 
+    minZoom: PropTypes.number,
+    maxZoom: PropTypes.number,
+
     metaWheelZoom: PropTypes.bool,
     metaWheelZoomWarning: PropTypes.string,
     twoFingerDrag: PropTypes.bool,
@@ -106,7 +109,9 @@ export default class Map extends Component {
     mouseEvents: true,
     touchEvents: true,
     warningZIndex: 100,
-    animateMaxScreens: 5
+    animateMaxScreens: 5,
+    minZoom: 1,
+    maxZoom: 18
   }
 
   constructor (props) {
@@ -453,7 +458,7 @@ export default class Map extends Component {
           if (this._lastTap && performanceNow() - this._lastTap < DOUBLE_CLICK_DELAY) {
             event.preventDefault()
             const latLngNow = this.pixelToLatLng(this._touchStartPixel[0])
-            this.setCenterZoomTarget(null, Math.max(1, Math.min(this.state.zoom + 1, 18)), false, latLngNow)
+            this.setCenterZoomTarget(null, Math.max(this.props.minZoom, Math.min(this.state.zoom + 1, this.props.maxZoom)), false, latLngNow)
           } else {
             this._lastTap = performanceNow()
             this.startTrackingMoveEvents(pixel)
@@ -521,7 +526,7 @@ export default class Map extends Component {
 
       const distance = Math.sqrt(Math.pow(t1[0] - t2[0], 2) + Math.pow(t1[1] - t2[1], 2))
 
-      const zoomDelta = Math.min(18, zoom + Math.log2(distance / this._touchStartDistance)) - zoom
+      const zoomDelta = Math.max(this.props.minZoom, Math.min(this.props.maxZoom, zoom + Math.log2(distance / this._touchStartDistance))) - zoom
       const scale = Math.pow(2, zoomDelta)
 
       const centerDiffDiff = [
@@ -541,7 +546,7 @@ export default class Map extends Component {
 
   handleTouchEnd = (event) => {
     if (this._touchStartPixel) {
-      const { zoomSnap, twoFingerDrag } = this.props
+      const { zoomSnap, twoFingerDrag, minZoom, maxZoom } = this.props
       const { zoomDelta } = this.state
       const { center, zoom } = this.sendDeltaChange()
 
@@ -589,7 +594,7 @@ export default class Map extends Component {
           } else {
             zoomTarget = zoomDelta > 0 ? Math.ceil(this.state.zoom) : Math.floor(this.state.zoom)
           }
-          const zoom = Math.max(1, Math.min(zoomTarget, 18))
+          const zoom = Math.max(minZoom, Math.min(zoomTarget, maxZoom))
 
           this.setCenterZoomTarget(latLng, zoom, false, latLng)
         }
@@ -608,7 +613,7 @@ export default class Map extends Component {
 
       if (this._lastClick && performanceNow() - this._lastClick < DOUBLE_CLICK_DELAY) {
         const latLngNow = this.pixelToLatLng(this._mousePosition)
-        this.setCenterZoomTarget(null, Math.max(1, Math.min(this.state.zoom + 1, 18)), false, latLngNow)
+        this.setCenterZoomTarget(null, Math.max(this.props.minZoom, Math.min(this.state.zoom + 1, this.props.maxZoom)), false, latLngNow)
       } else {
         this._lastClick = performanceNow()
 
@@ -800,8 +805,9 @@ export default class Map extends Component {
 
   zoomAroundMouse = (zoomDiff, zoomSnap = false) => {
     const { zoom } = this.state
+    const { minZoom, maxZoom } = this.props
 
-    if (!this._mousePosition || (zoom === 1 && zoomDiff < 0) || (zoom === 18 && zoomDiff > 0)) {
+    if (!this._mousePosition || (zoom === minZoom && zoomDiff < 0) || (zoom === maxZoom && zoomDiff > 0)) {
       return
     }
 
@@ -811,7 +817,7 @@ export default class Map extends Component {
     if (zoomSnap) {
       zoomTarget = zoomDiff < 0 ? Math.floor(zoomTarget) : Math.ceil(zoomTarget)
     }
-    zoomTarget = Math.max(1, Math.min(zoomTarget, 18))
+    zoomTarget = Math.max(minZoom, Math.min(zoomTarget, maxZoom))
 
     this.setCenterZoomTarget(null, zoomTarget, false, latLngNow)
   }