cluster via component

lib/Cluster.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _ClusterController = require('./controllers/ClusterController');
+
+var _ClusterController2 = _interopRequireDefault(_ClusterController);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Cluster = function (_Component) {
+    _inherits(Cluster, _Component);
+
+    function Cluster(props, context) {
+        _classCallCheck(this, Cluster);
+
+        var _this = _possibleConstructorReturn(this, (Cluster.__proto__ || Object.getPrototypeOf(Cluster)).call(this, props));
+
+        var options = props.options;
+
+        _this._controller = new _ClusterController2.default(options, context.mapController);
+        return _this;
+    }
+
+    _createClass(Cluster, [{
+        key: 'getChildContext',
+        value: function getChildContext() {
+            return {
+                cluster: true,
+                clusterController: this._controller
+            };
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            this._controller.destroy();
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            return _react2.default.createElement(
+                'div',
+                null,
+                this.props.children
+            );
+        }
+    }]);
+
+    return Cluster;
+}(_react.Component);
+
+Cluster.defaultProps = {
+    options: {}
+};
+Cluster.propTypes = {
+    options: _react.PropTypes.object
+};
+Cluster.contextTypes = {
+    mapController: _react.PropTypes.object
+};
+Cluster.childContextTypes = {
+    cluster: _react.PropTypes.bool,
+    clusterController: _react.PropTypes.object
+};
+exports.default = Cluster;

lib/MapMarker.js

@@ -92,12 +92,19 @@ var MapMarker = function (_Component) {
             this._setupLayouts();
             this._setupEvents();
 
-            this.context.mapController.appendMarker(this._controller);
+            if (this.context.cluster) {
+                this.context.clusterController.appendMarker(this._controller);
+            } else {
+                this.context.mapController.appendMarker(this._controller);
+            }
         }
     }, {
         key: 'componentWillUnmount',
         value: function componentWillUnmount() {
             this._clearLayouts();
+            if (this.context.cluster) {
+                this.context.clusterController.destroyMarker(this._controller);
+            }
             this._controller.destroy();
         }
     }, {
@@ -171,6 +178,8 @@ MapMarker.propTypes = {
     options: _react.PropTypes.object
 };
 MapMarker.contextTypes = {
-    mapController: _react.PropTypes.object
+    mapController: _react.PropTypes.object,
+    cluster: _react.PropTypes.bool,
+    clusterController: _react.PropTypes.object
 };
 exports.default = (0, _decorators.eventsDecorator)(MapMarker, { supportEvents: _geoObject2.default });

lib/controllers/ClusterController.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _api = require('../api');
+
+var _api2 = _interopRequireDefault(_api);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var ClusterController = function () {
+    function ClusterController(clusterOptions, mapController) {
+        _classCallCheck(this, ClusterController);
+
+        this._cluster = new (_api2.default.getAPI().Clusterer)(clusterOptions);
+        this._mapController = mapController;
+        this._setupCollection();
+    }
+
+    _createClass(ClusterController, [{
+        key: 'getAPIInstance',
+        value: function getAPIInstance() {
+            return this._cluster;
+        }
+    }, {
+        key: '_setupCollection',
+        value: function _setupCollection() {
+            this._geoCollection = new (_api2.default.getAPI().GeoObjectCollection)();
+            this._mapController.appendCluster(this._cluster);
+        }
+    }, {
+        key: 'appendMarker',
+        value: function appendMarker(marker) {
+            this._cluster.add(marker.getAPIInstance());
+            this._mapController.map.setBounds(this._cluster.getBounds());
+        }
+    }, {
+        key: 'destroyMarker',
+        value: function destroyMarker(marker) {
+            this._cluster.remove(marker.getAPIInstance());
+        }
+    }]);
+
+    return ClusterController;
+}();
+
+exports.default = ClusterController;

lib/controllers/MapController.js

@@ -33,6 +33,12 @@ var MapController = function () {
         key: 'appendMarker',
         value: function appendMarker(marker) {
             this._geoCollection.add(marker.getAPIInstance());
+            this._map.setBounds(this._geoCollection.getBounds());
+        }
+    }, {
+        key: 'appendCluster',
+        value: function appendCluster(cluster) {
+            this._geoCollection.add(cluster);
         }
     }, {
         key: 'setOptions',

lib/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.ConstructorJSONImport = exports.BalloonLayout = exports.MarkerLayout = exports.Marker = exports.Map = undefined;
+exports.ConstructorJSONImport = exports.BalloonLayout = exports.MarkerLayout = exports.Cluster = exports.Marker = exports.Map = undefined;
 
 var _MapContainer = require('./MapContainer');
 
@@ -13,6 +13,10 @@ var _MapMarker = require('./MapMarker');
 
 var _MapMarker2 = _interopRequireDefault(_MapMarker);
 
+var _Cluster = require('./Cluster');
+
+var _Cluster2 = _interopRequireDefault(_Cluster);
+
 var _MarkerLayout = require('./MarkerLayout');
 
 var _MarkerLayout2 = _interopRequireDefault(_MarkerLayout);
@@ -29,6 +33,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 exports.Map = _MapContainer2.default;
 exports.Marker = _MapMarker2.default;
+exports.Cluster = _Cluster2.default;
 exports.MarkerLayout = _MarkerLayout2.default;
 exports.BalloonLayout = _BalloonLayout2.default;
 exports.ConstructorJSONImport = _ConstructorJSONImport2.default;

src/Cluster.jsx

@@ -0,0 +1,45 @@
+import React, {Component, PropTypes} from 'react';
+import ClusterController from './controllers/ClusterController';
+
+class Cluster extends Component {
+
+    static defaultProps = {
+        options: {},
+    }
+
+    static propTypes = {
+        options: PropTypes.object,
+    }
+
+    static contextTypes = {
+        mapController: PropTypes.object,
+    }
+
+    static childContextTypes = {
+        cluster: PropTypes.bool,
+        clusterController: PropTypes.object,
+    }
+
+    constructor (props, context) {
+        super(props);
+        const {options} = props;
+        this._controller = new ClusterController(options, context.mapController);
+    }
+
+    getChildContext () {
+        return {
+            cluster: true,
+            clusterController: this._controller,
+        };
+    }
+
+    componentWillUnmount () {
+        this._controller.destroy();
+    }
+
+    render () {
+        return <div>{this.props.children}</div>;
+    }
+}
+
+export default Cluster;

src/MapElement.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 
 const style = {
     position: 'absolute',

src/MapMarker.jsx

@@ -13,7 +13,9 @@ class MapMarker extends Component {
     }
 
     static contextTypes = {
-        mapController: PropTypes.object
+        mapController: PropTypes.object,
+        cluster: PropTypes.bool,
+        clusterController: PropTypes.object,
     }
 
     constructor (props) {
@@ -53,11 +55,18 @@ class MapMarker extends Component {
         this._setupLayouts();
         this._setupEvents();
 
-        this.context.mapController.appendMarker(this._controller);
+        if(this.context.cluster) {
+            this.context.clusterController.appendMarker(this._controller);
+        } else {
+            this.context.mapController.appendMarker(this._controller);
+        }
     }
 
     componentWillUnmount () {
         this._clearLayouts();
+        if(this.context.cluster) {
+            this.context.clusterController.destroyMarker(this._controller);
+        }
         this._controller.destroy();
     }
 

src/controllers/ClusterController.js

@@ -0,0 +1,29 @@
+import api from '../api';
+
+class ClusterController {
+    constructor (clusterOptions, mapController) {
+        this._cluster = new (api.getAPI()).Clusterer(clusterOptions);
+        this._mapController = mapController;
+        this._setupCollection();
+    }
+
+    getAPIInstance () {
+        return this._cluster;
+    }
+
+    _setupCollection () {
+        this._geoCollection = new (api.getAPI()).GeoObjectCollection();
+        this._mapController.appendCluster(this._cluster);
+    }
+
+    appendMarker(marker) {
+        this._cluster.add(marker.getAPIInstance());
+        this._mapController.map.setBounds(this._cluster.getBounds());
+    }
+
+    destroyMarker(marker) {
+        this._cluster.remove(marker.getAPIInstance());
+    }
+}
+
+export default ClusterController;

src/controllers/MapController.js

@@ -16,6 +16,11 @@ class MapController {
 
     appendMarker (marker) {
         this._geoCollection.add(marker.getAPIInstance());
+        this._map.setBounds(this._geoCollection.getBounds());
+    }
+
+    appendCluster (cluster) {
+        this._geoCollection.add(cluster);
     }
 
     get map () {

src/index.js

@@ -1,12 +1,14 @@
 import Map from './MapContainer';
 import Marker from './MapMarker';
+import Cluster from './Cluster';
 import MarkerLayout from './MarkerLayout';
 import BalloonLayout from './BalloonLayout';
-import ConstructorJSONImport from './ConstructorJSONImport'
+import ConstructorJSONImport from './ConstructorJSONImport';
 
 export {
     Map,
     Marker,
+    Cluster,
     MarkerLayout,
     BalloonLayout,
     ConstructorJSONImport};