Add maxBounds prop, disable scroll zoom during..

Add `maxBounds` prop, disable scroll zoom during change in  bounds

Author: nikmolnar

lib/Mapbox/Map.js

@@ -8,6 +8,7 @@ import { arraysAreEqual, objectFromEntries } from '../utils'
 export default class Map extends React.Component {
     static propTypes = {
         bounds: PropTypes.array.isRequired,
+        maxBounds: PropTypes.array,
         minZoom: PropTypes.number,
         maxZoom: PropTypes.number,
         disableRotation: PropTypes.bool,
@@ -20,6 +21,7 @@ export default class Map extends React.Component {
     static defaultProps = {
         minZoom: 3,
         maxZoom: 16,
+        maxBounds: null,
         disableRotation: false,
         onPan: () => {},
         onZoom: () => {},
@@ -45,14 +47,15 @@ export default class Map extends React.Component {
     }
 
     componentDidMount() {
-        const { minZoom, maxZoom, disableRotation, onPan, onZoom, onZoomEnd, bounds } = this.props
+        const { minZoom, maxZoom, disableRotation, onPan, onZoom, onZoomEnd, bounds, maxBounds } = this.props
 
         this.map = new mapboxgl.Map({
             container: this.mapNodeRef.current,
             style: clone(this.style),
             minZoom,
             maxZoom,
             bounds,
+            maxBounds,
             attributionControl: false
         })
 
@@ -70,6 +73,7 @@ export default class Map extends React.Component {
 
         this.map.on('moveend', () => {
             this.mapIsMoving = false
+            this.enableInteraction()
             setTimeout(() => {
                 if (!this.mapIsMoving) {
                     const bounds = this.map.getBounds().toArray()
@@ -88,18 +92,25 @@ export default class Map extends React.Component {
 
         this.map.on('zoomend', () => {
             const bounds = this.map.getBounds().toArray()
+
+            this.enableInteraction()
             onZoomEnd(this.map.getZoom(), [...bounds[0], ...bounds[1]].map(val => parseFloat(val.toFixed(9))))
         })
 
         this.forceUpdate()
     }
 
     componentDidUpdate(prevProps) {
-        const { bounds, disableRotation } = this.props
+        const { bounds, maxBounds, disableRotation } = this.props
         if (!arraysAreEqual(prevProps.bounds, bounds)) {
+            this.disableInteraction()
             this.map.fitBounds(bounds)
         }
 
+        if (!arraysAreEqual(prevProps.maxBounds, maxBounds)) {
+            this.map.setMaxBounds(maxBounds)
+        }
+
         if (prevProps.disableRotation !== disableRotation) {
             if (disableRotation) {
                 this.map.dragRotate.disable()
@@ -112,12 +123,20 @@ export default class Map extends React.Component {
         }
     }
 
+    enableInteraction = () => {
+        this.map.scrollZoom.enable()
+    }
+
+    disableInteraction = () => {
+        this.map.scrollZoom.disable()
+    }
+
     updateStyle = () => {
         if (this.map) {
             if (this.map.isStyleLoaded()) {
                 this.style = this.mergeStyles(this.style, this.map.getStyle())
             }
-            
+
             this.map.setStyle(clone(this.style))
         }