Export WebMercatorViewport (#979)

docs/advanced/viewport-transition.md

@@ -55,7 +55,7 @@ See [viewport animation](#examples/viewport-animation) for a complete example.
 You can use the `WebMercatorViewport` utility to find the target viewport that fits around a lngLat bounding box:
 
 ```js
-import WebMercatorViewport from 'viewport-mercator-project';
+import {WebMercatorViewport} from 'react-map-gl';
 ```
 
 ```js
@@ -78,7 +78,7 @@ import WebMercatorViewport from 'viewport-mercator-project';
     };
 ```
 
-[Documentation of WebMercatorViewport](https://uber-common.github.io/viewport-mercator-project/#/documentation/api-reference/webmercatorviewport)
+[Documentation of WebMercatorViewport](https://uber.github.io/react-map-gl/#/documentation/api-reference/web-mercator-viewport)
 
 
 ## InteractiveMap's Transition Props

docs/components/static-map.md

@@ -202,7 +202,7 @@ Parameters:
 You can use the `WebMercatorViewport` utility to find the target viewport that fits around a lngLat bounding box:
 
 ```js
-import WebMercatorViewport from 'viewport-mercator-project';
+import {WebMercatorViewport} from 'react-map-gl';
 
 const viewport = new WebMercatorViewport({width: 800, height: 600})
     .fitBounds([[-122.4, 37.7], [-122.5, 37.8]], {
@@ -220,7 +220,7 @@ const viewport = new WebMercatorViewport({width: 800, height: 600})
  */
 ```
 
-[Documentation of WebMercatorViewport](https://uber-common.github.io/viewport-mercator-project/#/documentation/api-reference/webmercatorviewport)
+[Documentation of WebMercatorViewport](https://uber.github.io/react-map-gl/#/documentation/api-reference/web-mercator-viewport)
 
 
 ## Source

examples/zoom-to-bounds/src/app.js

@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
 import {render} from 'react-dom';
-import MapGL, {LinearInterpolator} from 'react-map-gl';
-import WebMercatorViewport from 'viewport-mercator-project';
+import MapGL, {LinearInterpolator, WebMercatorViewport} from 'react-map-gl';
 import bbox from '@turf/bbox';
 
 import ControlPanel from './control-panel';

src/index.js

@@ -47,6 +47,7 @@ export {
   ViewportFlyToInterpolator as FlyToInterpolator
 } from './utils/transition';
 export {default as MapController} from './utils/map-controller';
+export {WebMercatorViewport} from 'viewport-mercator-project';
 
 // Experimental Features (May change in minor version bumps, use at your own risk)
 export {default as _MapContext} from './components/map-context';

src/utils/map-controller.js

@@ -135,7 +135,8 @@ export default class MapController {
   /* Callback util */
   // formats map state and invokes callback function
   updateViewport(newMapState: MapState, extraProps: any = {}, extraState: any = {}) {
-    const oldViewport = this.mapState ? this.mapState.getViewportProps() : this.mapStateProps;
+    // Always trigger callback on initial update (resize)
+    const oldViewport = this.mapState ? this.mapState.getViewportProps() : {};
     const newViewport = Object.assign({}, newMapState.getViewportProps(), extraProps);
 
     const viewStateChanged = Object.keys(newViewport).some(

website/.eslintrc

@@ -5,7 +5,8 @@
   ],
   "extends": [
     "eslint-config-uber-jsx",
-    "eslint-config-uber-es2015"
+    "eslint-config-uber-es2015",
+    "prettier"
   ],
   "overrides": [{
     "files": ["webpack/*.js"],

website/src/constants/pages.js

@@ -178,6 +178,12 @@ const docPages = {
         {
           name: 'SVGOverlay',
           content: getDocUrl('overlays/svg-overlay.md')
+        },
+        {
+          name: 'WebMercatorViewport',
+          // External content
+          content:
+            'https://raw.githubusercontent.com/uber-web/math.gl/master/modules/web-mercator/docs/api-reference/web-mercator-viewport.md'
         }
       ]
     }