Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

0.0.4 Release #9

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

0.0.4 Release #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
400e178
0.0.4 Release
May 3, 2017
aa91e18
Merge branch 'develop'
May 3, 2017
28ebbe7
Merge branch 'master' into develop
May 3, 2017
0c2e413
Jest test case passing
May 3, 2017
f0c0ced
Merge branch 'develop'
May 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
@@ -1,3 +1,8 @@
# 0.0.4 Release

- Lib is compatible with React 15
- Lib is compatible with react-leaflet 1.1

# 0.0.3 Release

- Correct issue introduced with removal of 'moveend' listener
Expand Down
7 changes: 2 additions & 5 deletions example/webpack.config.js
View file
Open in desktop
Expand Up @@ -2,7 +2,6 @@
var webpack = require('webpack');

module.exports = {
debug: true,
devtool: 'source-map',
entry: {
app: __dirname + '/index.js'
Expand All @@ -12,7 +11,7 @@ module.exports = {
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
loader: 'babel-loader',
query: {
plugins: [
['react-transform', {
Expand All @@ -38,17 +37,15 @@ module.exports = {
'NODE_ENV': '"development"'
}
}),
new webpack.NoErrorsPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
colors: true,
contentBase: __dirname,
historyApiFallback: true,
hot: true,
inline: true,
port: 8000,
progress: true,
stats: {
cached: false
}
Expand Down
36 changes: 22 additions & 14 deletions lib/ClusterLayer.js
View file
Open in desktop
Expand Up @@ -12,6 +12,10 @@ var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _leaflet = require('leaflet');

var _leaflet2 = _interopRequireDefault(_leaflet);
Expand Down Expand Up @@ -100,9 +104,13 @@ var ClusterLayer = function (_MapLayer) {
}, _temp), _possibleConstructorReturn(_this, _ret);
}

ClusterLayer.prototype.createLeafletElement = function createLeafletElement(props) {
return null;
};

ClusterLayer.prototype.componentDidMount = function componentDidMount() {
this.leafletElement = _reactDom2.default.findDOMNode(this.refs.container);
this.props.map.getPanes().overlayPane.appendChild(this.leafletElement);
this.context.map.getPanes().overlayPane.appendChild(this.leafletElement);
this.setClustersWith(this.props.markers);
this.attachEvents();
};
Expand All @@ -114,11 +122,11 @@ var ClusterLayer = function (_MapLayer) {
};

ClusterLayer.prototype.componentWillUnmount = function componentWillUnmount() {
this.props.map.getPanes().overlayPane.removeChild(this.leafletElement);
this.context.map.getPanes().overlayPane.removeChild(this.leafletElement);
};

ClusterLayer.prototype.componentDidUpdate = function componentDidUpdate() {
this.props.map.invalidateSize();
this.context.map.invalidateSize();
this.updatePosition();
};

Expand All @@ -140,7 +148,7 @@ var ClusterLayer = function (_MapLayer) {
ClusterLayer.prototype.attachEvents = function attachEvents() {
var _this2 = this;

var map = this.props.map;
var map = this.context.map;

map.on('viewreset', function () {
return _this2.recalculate();
Expand All @@ -156,15 +164,15 @@ var ClusterLayer = function (_MapLayer) {
this.state.clusters.forEach(function (cluster, i) {
var clusterElement = _reactDom2.default.findDOMNode(_this3.refs[_this3.getClusterRefName(i)]);

_leaflet2.default.DomUtil.setPosition(clusterElement, _this3.props.map.latLngToLayerPoint(cluster.center));
_leaflet2.default.DomUtil.setPosition(clusterElement, _this3.context.map.latLngToLayerPoint(cluster.center));
});
};

ClusterLayer.prototype.render = function render() {
return _react2.default.createElement(
'div',
{ ref: 'container',
className: 'leaflet-objects-pane leaflet-marker-pane leaflet-zoom-hide react-leaflet-cluster-layer'
className: 'leaflet-objects-pane\n leaflet-marker-pane\n leaflet-zoom-hide\n react-leaflet-cluster-layer'
},
this.renderClusters()
);
Expand All @@ -179,7 +187,7 @@ var ClusterLayer = function (_MapLayer) {
return _react2.default.createElement(ClusterComponent, _extends({}, _this4.props.propsForClusters, {
key: index,
style: style,
map: _this4.props.map,
map: _this4.context.map,
ref: _this4.getClusterRefName(index),
cluster: cluster
}));
Expand All @@ -200,7 +208,7 @@ var ClusterLayer = function (_MapLayer) {

ClusterLayer.prototype.calculateClusterBounds = function calculateClusterBounds(cluster) {
var bounds = _leaflet2.default.latLngBounds(cluster.center, cluster.center);
cluster.bounds = getExtendedBounds(this.props.map, bounds, this.getGridSize());
cluster.bounds = getExtendedBounds(this.context.map, bounds, this.getGridSize());
};

ClusterLayer.prototype.isMarkerInClusterBounds = function isMarkerInClusterBounds(cluster, marker) {
Expand Down Expand Up @@ -229,7 +237,7 @@ var ClusterLayer = function (_MapLayer) {
ClusterLayer.prototype.createClustersFor = function createClustersFor(markers) {
var _this5 = this;

var map = this.props.map;
var map = this.context.map;
var extendedBounds = getExtendedBounds(map, map.getBounds(), this.getGridSize());
return markers.filter(function (marker) {
return extendedBounds.contains(_leaflet2.default.latLng(marker.position));
Expand Down Expand Up @@ -272,10 +280,10 @@ var ClusterLayer = function (_MapLayer) {
}(_reactLeaflet.MapLayer);

ClusterLayer.propTypes = {
markers: _react2.default.PropTypes.array,
clusterComponent: _react2.default.PropTypes.func.isRequired,
propsForClusters: _react2.default.PropTypes.object,
gridSize: _react2.default.PropTypes.number,
minClusterSize: _react2.default.PropTypes.number
markers: _propTypes2.default.array,
clusterComponent: _propTypes2.default.func.isRequired,
propsForClusters: _propTypes2.default.object,
gridSize: _propTypes2.default.number,
minClusterSize: _propTypes2.default.number
};
exports.default = ClusterLayer;
39 changes: 18 additions & 21 deletions package.json
View file
Open in desktop
@@ -1,6 +1,6 @@
{
"name": "react-leaflet-cluster-layer",
"version": "0.0.3",
"version": "0.0.4",
"description": "A custom layer for react-leaflet that makes plotting and clustering react components simple",
"main": "lib/ClusterLayer.js",
"scripts": {
Expand Down Expand Up @@ -28,18 +28,12 @@
],
"author": "Jeremiah Hall <npm@jeremiahrhall.com>",
"license": "MIT",
"peerDependencies": {
"leaflet": "^0.7.7",
"react-leaflet": "^0.10.2",
"react": "^0.14.7",
"react-dom": "^0.14.7"
},
"devDependencies": {
"babel-cli": "^6.6.5",
"babel-core": "^6.7.4",
"babel-eslint": "^5.0.0",
"babel-jest": "^9.0.3",
"babel-loader": "^6.2.4",
"babel-eslint": "^7.2.3",
"babel-jest": "^19.0.0",
"babel-loader": "^7.0.0",
"babel-plugin-object-assign": "^1.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-proto-to-assign": "^6.4.0",
Expand All @@ -48,21 +42,24 @@
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"enzyme": "^2.2.0",
"eslint-config-airbnb": "^6.2.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-arrow-function": "^2.0.0",
"eslint-plugin-react": "^4.2.3",
"jest-cli": "^0.9.2",
"leaflet": "^0.7.7",
"react": "^0.14.7",
"react-addons-test-utils": "^0.14.7",
"react-dom": "^0.14.7",
"react-leaflet": "^0.10.2",
"eslint-plugin-react": "^6.10.3",
"jest-cli": "^19.0.2",
"leaflet": "^1.0.3",
"react": "^15.5.4",
"react-addons-test-utils": "^15.5.1",
"react-dom": "^15.5.4",
"react-leaflet": "^1.1.6",
"react-test-renderer": "^15.5.4",
"react-transform-hmr": "^1.0.4",
"webpack-dev-server": "^1.14.1",
"webpack": "^1.12.14"
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.5"
},
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest/src/index.js",
"transform": {
".*": "<rootDir>/node_modules/babel-jest/build/index.js"
},
"unmockedModulePathPatterns": [
"react",
"enzyme",
Expand Down
52 changes: 32 additions & 20 deletions src/ClusterLayer.js
View file
Open in desktop
@@ -1,8 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

import L from 'leaflet';
import { MapLayer } from 'react-leaflet';
import {MapLayer} from 'react-leaflet';

export type LngLat = {
lng: number;
Expand Down Expand Up @@ -104,20 +105,31 @@ function distanceBetweenPoints(p1: LngLat, p2: LngLat): number {

export default class ClusterLayer extends MapLayer {
static propTypes = {
markers: React.PropTypes.array,
clusterComponent: React.PropTypes.func.isRequired,
propsForClusters: React.PropTypes.object,
gridSize: React.PropTypes.number,
minClusterSize: React.PropTypes.number
markers: PropTypes.array,
clusterComponent: PropTypes.func.isRequired,
propsForClusters: PropTypes.object,
gridSize: PropTypes.number,
minClusterSize: PropTypes.number
};

state: Object = {
clusters: []
};

map: Object = null;

constructor(props, context) {
super(props, context);
this.map = (undefined !== props.map) ? props.map : context.map;
}

createLeafletElement(props: Object): Object {
return null
}

componentDidMount(): void {
this.leafletElement = ReactDOM.findDOMNode(this.refs.container);
this.props.map.getPanes().overlayPane.appendChild(this.leafletElement);
this.map.getPanes().overlayPane.appendChild(this.leafletElement);
this.setClustersWith(this.props.markers);
this.attachEvents();
}
Expand All @@ -129,11 +141,11 @@ export default class ClusterLayer extends MapLayer {
}

componentWillUnmount(): void {
this.props.map.getPanes().overlayPane.removeChild(this.leafletElement);
this.map.getPanes().overlayPane.removeChild(this.leafletElement);
}

componentDidUpdate(): void {
this.props.map.invalidateSize();
this.map.invalidateSize();
this.updatePosition();
}

Expand All @@ -153,7 +165,7 @@ export default class ClusterLayer extends MapLayer {
}

attachEvents(): void {
const map: Map = this.props.map;
const map: Map = this.map;

map.on('viewreset', () => this.recalculate());
map.on('moveend', () => this.recalculate());
Expand All @@ -167,34 +179,34 @@ export default class ClusterLayer extends MapLayer {

L.DomUtil.setPosition(
clusterElement,
this.props.map.latLngToLayerPoint(cluster.center)
this.map.latLngToLayerPoint(cluster.center)
);
});
}

render(): React.Element {
return (
<div ref="container"
className={`leaflet-objects-pane
leaflet-marker-pane
leaflet-zoom-hide
react-leaflet-cluster-layer`}
className={`leaflet-objects-pane
leaflet-marker-pane
leaflet-zoom-hide
react-leaflet-cluster-layer`}
>
{this.renderClusters()}
</div>
);
}

renderClusters(): Array<React.Element> {
const style = { position: 'absolute' };
const style = {position: 'absolute'};
const ClusterComponent = this.props.clusterComponent;
return this.state.clusters
.map((cluster: Cluster, index: number) => (
<ClusterComponent
{...this.props.propsForClusters}
key={index}
style={style}
map={this.props.map}
map={this.map}
ref={this.getClusterRefName(index)}
cluster={cluster}
/>
Expand All @@ -215,7 +227,7 @@ export default class ClusterLayer extends MapLayer {

calculateClusterBounds(cluster: Cluster) {
const bounds = L.latLngBounds(cluster.center, cluster.center);
cluster.bounds = getExtendedBounds(this.props.map, bounds, this.getGridSize());
cluster.bounds = getExtendedBounds(this.map, bounds, this.getGridSize());
}

isMarkerInClusterBounds(cluster: Cluster, marker: Marker): boolean {
Expand All @@ -233,7 +245,7 @@ export default class ClusterLayer extends MapLayer {
const len = markersLen + 1;
const lng = (center.lng * (len - 1) + marker.position.lng) / len;
const lat = (center.lat * (len - 1) + marker.position.lat) / len;
cluster.center = L.latLng({ lng, lat });
cluster.center = L.latLng({lng, lat});
this.calculateClusterBounds(cluster);
}

Expand All @@ -242,7 +254,7 @@ export default class ClusterLayer extends MapLayer {
}

createClustersFor(markers: Array<Marker>): Array<Cluster> {
const map: Map = this.props.map;
const map: Map = this.map;
const extendedBounds = getExtendedBounds(map, map.getBounds(), this.getGridSize());
return markers
.filter(marker => extendedBounds.contains(L.latLng(marker.position)))
Expand Down