Update bounds example to use regular <Map> component

PaulLeCam · Sep 28, 2015 · 362e0ff · 362e0ff
1 parent 51449e2
commit 362e0ff
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/example/bounds.js b/example/bounds.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { BoundsMap, TileLayer, Rectangle } from 'react-leaflet';
+import { Map, TileLayer, Rectangle } from 'react-leaflet';
 
 const outer = [
   [50.505, -29.09],
@@ -28,7 +28,7 @@ export default class BoundsExample extends Component {
 
   render() {
     return (
-      <BoundsMap bounds={this.state.bounds}>
+      <Map bounds={this.state.bounds}>
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
@@ -43,7 +43,7 @@ export default class BoundsExample extends Component {
           color={this.state.bounds === inner ? 'red' : 'white'}
           onClick={() => this.setState({bounds: inner})}
         />
-      </BoundsMap>
+      </Map>
     );
   }
 }
diff --git a/example/build/app.js b/example/build/app.js
@@ -124,7 +124,7 @@ var BoundsExample = (function (_Component) {
       var _this = this;
 
       return _react2['default'].createElement(
-        _reactLeaflet.BoundsMap,
+        _reactLeaflet.Map,
         { bounds: this.state.bounds },
         _react2['default'].createElement(_reactLeaflet.TileLayer, {
           attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',

diff --git a/example/build/lib.js b/example/build/lib.js
@@ -599,6 +599,10 @@ var _lodashLangIsArray = require('lodash/lang/isArray');
 
 var _lodashLangIsArray2 = _interopRequireDefault(_lodashLangIsArray);
 
+var _lodashLangIsUndefined = require('lodash/lang/isUndefined');
+
+var _lodashLangIsUndefined2 = _interopRequireDefault(_lodashLangIsUndefined);
+
 var _lodashUtilityUniqueId = require('lodash/utility/uniqueId');
 
 var _lodashUtilityUniqueId2 = _interopRequireDefault(_lodashUtilityUniqueId);
@@ -633,6 +637,7 @@ var Map = (function (_MapComponent) {
   _createClass(Map, null, [{
     key: 'propTypes',
     value: {
+      bounds: _typesBounds2['default'],
       center: _typesLatlng2['default'],
       children: _react.PropTypes.oneOfType([_react.PropTypes.arrayOf(_react.PropTypes.node), _react.PropTypes.node]),
       className: _react.PropTypes.string,
@@ -661,19 +666,28 @@ var Map = (function (_MapComponent) {
       this.leafletElement = _leaflet2['default'].map(this.state.id, this.props);
       _get(Object.getPrototypeOf(Map.prototype), 'componentDidMount', this).call(this);
       this.setState({ map: this.leafletElement });
+      if (!(0, _lodashLangIsUndefined2['default'])(this.props.bounds)) {
+        this.leafletElement.fitBounds(this.props.bounds);
+      }
     }
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate(prevProps) {
       var _props = this.props;
+      var bounds = _props.bounds;
       var center = _props.center;
       var zoom = _props.zoom;
 
       if (center && this.shouldUpdateCenter(center, prevProps.center)) {
         this.leafletElement.setView(center, zoom, { animate: false });
       } else if (zoom && zoom !== prevProps.zoom) {
+        // This branch must be an else if because if the center updates, the zoom
+        // will already be updated with it
         this.leafletElement.setZoom(zoom);
       }
+      if (bounds && this.shouldUpdateBounds(bounds, prevProps.bounds)) {
+        this.leafletElement.fitBounds(bounds);
+      }
     }
   }, {
     key: 'componentWillUnmount',
@@ -689,6 +703,14 @@ var Map = (function (_MapComponent) {
       prev = normalizeCenter(prev);
       return next[0] !== prev[0] || next[1] !== prev[1];
     }
+  }, {
+    key: 'shouldUpdateBounds',
+    value: function shouldUpdateBounds(next, prev) {
+      if (!prev) return true;
+      next = _leaflet2['default'].latLngBounds(next);
+      prev = _leaflet2['default'].latLngBounds(prev);
+      return !next.equals(prev);
+    }
   }, {
     key: 'render',
     value: function render() {
@@ -713,7 +735,7 @@ var Map = (function (_MapComponent) {
 
 exports['default'] = Map;
 module.exports = exports['default'];
-},{"./MapComponent":10,"./types/bounds":23,"./types/latlng":25,"leaflet":"leaflet","lodash/lang/isArray":87,"lodash/utility/uniqueId":101,"react":"react"}],10:[function(require,module,exports){
+},{"./MapComponent":10,"./types/bounds":23,"./types/latlng":25,"leaflet":"leaflet","lodash/lang/isArray":87,"lodash/lang/isUndefined":93,"lodash/utility/uniqueId":101,"react":"react"}],10:[function(require,module,exports){
 'use strict';
 
 Object.defineProperty(exports, '__esModule', {