From 8dc905cc6a163eaf71fabcd010370e7d67d93ff4 Mon Sep 17 00:00:00 2001
From: Anh Mai <abmai91@gmail.com>
Date: Sun, 8 Jan 2017 15:15:30 -0800
Subject: [PATCH] update to mapbox-gl 0.29.0; add maxZoom as a prop (#171)

* update to mapbox-gl 0.29.0; add maxZoom as a prop

* revert to array convention for startDragLntLat and convert to object where needed
---
 package.json     |  2 +-
 src/map.react.js | 23 ++++++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 7babce37..289fd6d0 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "d3-scale": "^1.0.3",
     "d3-selection": "^1.0.2",
     "global": "^4.3.0",
-    "mapbox-gl": "0.26.0",
+    "mapbox-gl": "0.29.0",
     "pure-render-decorator": "^1.1.0",
     "svg-transform": "0.0.3",
     "viewport-mercator-project": "^2.0.1"
diff --git a/src/map.react.js b/src/map.react.js
index 90159814..6c07abcd 100644
--- a/src/map.react.js
+++ b/src/map.react.js
@@ -53,6 +53,13 @@ const PROP_TYPES = {
     * The tile zoom level of the map.
     */
   zoom: PropTypes.number.isRequired,
+  /**
+    * The maximum tile zoom level of the map. Defaults to 20.
+    * Increasing this will allow you to zoom further into the map but should
+    * only be used if you know what you are doing past zoom 20. The default
+    * map styles won't render anything useful past 20.
+    */
+  maxZoom: PropTypes.number,
   /**
     * The Mapbox style the component should use. Can either be a string url
     * or a MapboxGL style Immutable.Map object.
@@ -185,7 +192,7 @@ const PROP_TYPES = {
 };
 
 const DEFAULT_PROPS = {
-  mapStyle: 'mapbox://styles/mapbox/light-v8',
+  mapStyle: 'mapbox://styles/mapbox/light-v9',
   onChangeViewport: null,
   mapboxApiAccessToken: config.DEFAULTS.MAPBOX_API_ACCESS_TOKEN,
   preserveDrawingBuffer: false,
@@ -194,7 +201,8 @@ const DEFAULT_PROPS = {
   bearing: 0,
   pitch: 0,
   altitude: 1.5,
-  clickRadius: 15
+  clickRadius: 15,
+  maxZoom: 20
 };
 
 @pureRender
@@ -236,6 +244,7 @@ export default class MapGL extends Component {
       container: this.refs.mapboxMap,
       center: [this.props.longitude, this.props.latitude],
       zoom: this.props.zoom,
+      maxZoom: this.props.maxZoom,
       pitch: this.props.pitch,
       bearing: this.props.bearing,
       style: mapStyle,
@@ -301,9 +310,8 @@ export default class MapGL extends Component {
 
   _updateStateFromProps(oldProps, newProps) {
     mapboxgl.accessToken = newProps.mapboxApiAccessToken;
-    const {startDragLngLat} = newProps;
     this.setState({
-      startDragLngLat: startDragLngLat && startDragLngLat.slice()
+      startDragLngLat: newProps.startDragLngLat
     });
   }
 
@@ -539,10 +547,10 @@ export default class MapGL extends Component {
 
   @autobind _onMouseDown({pos}) {
     const {transform} = this._map;
-    const lngLat = unprojectFromTransform(transform, new Point(...pos));
+    const {lng, lat} = unprojectFromTransform(transform, new Point(...pos));
     this._callOnChangeViewport(transform, {
       isDragging: true,
-      startDragLngLat: [lngLat.lng, lngLat.lat],
+      startDragLngLat: [lng, lat],
       startBearing: transform.bearing,
       startPitch: transform.pitch
     });
@@ -558,7 +566,8 @@ export default class MapGL extends Component {
       'for mouse drag behavior to calculate where to position the map.');
 
     const transform = cloneTransform(this._map.transform);
-    transform.setLocationAtPoint(this.props.startDragLngLat, new Point(...pos));
+    const [lng, lat] = this.props.startDragLngLat;
+    transform.setLocationAtPoint({lng, lat}, new Point(...pos));
     this._callOnChangeViewport(transform, {isDragging: true});
   }