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

Performance with many markers #224

Merged
merged 11 commits into from
May 30, 2016
Merged

Performance with many markers #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
960fe0c
Improved prerformance of rendering many markers on the map.
Mar 8, 2016
7a1a49e
Added shouldComponentUpdate that returns false to Marker component. T…
Mar 8, 2016
b09c212
Merge pull request #1 from rewop/performance-many-markers
vinceprofeta May 16, 2016
d60030a
isSame marker
May 16, 2016
8c69d2c
build
May 16, 2016
5c80d02
update
May 17, 2016
3b404f0
Merge pull request #1 from TheModevShop/master
rewop May 19, 2016
9713c42
Reverted lib fodler to commit 5e672b92f3e47861126349a5691c33b9b1d1eb88
May 29, 2016
4404e40
Removed `shouldComponentUpdate` lifecycle hook from Marker component
May 29, 2016
9cbf729
Removed unused lodash dependency
May 29, 2016
3737358
Reverted lodash.isEqual dependency
May 29, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion src/Circle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
default as React,
Component,
PropTypes,
} from "react";

import {
Expand All @@ -14,6 +15,8 @@ import {
circleEventPropTypes,
} from "./creators/CircleCreator";

import { default as GoogleMapHolder } from "./creators/GoogleMapHolder";

export default class Circle extends Component {
static propTypes = {
// Uncontrolled default[props] - used only in componentDidMount
Expand All @@ -24,6 +27,10 @@ export default class Circle extends Component {
...circleEventPropTypes,
}

static contextTypes = {
mapHolderRef: PropTypes.instanceOf(GoogleMapHolder),
}

// Public APIs
//
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#Circle
Expand All @@ -50,10 +57,15 @@ export default class Circle extends Component {
}

componentWillMount() {
const { mapHolderRef } = this.context;

if (!canUseDOM) {
return;
}
const circle = CircleCreator._createCircle(this.props);
const circle = CircleCreator._createCircle({
...this.props,
mapHolderRef,
});

this.setState({ circle });
}
Expand Down
14 changes: 13 additions & 1 deletion src/DirectionsRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
default as React,
Component,
PropTypes,
} from "react";

import {
Expand All @@ -14,6 +15,8 @@ import {
directionsRendererEventPropTypes,
} from "./creators/DirectionsRendererCreator";

import { default as GoogleMapHolder } from "./creators/GoogleMapHolder";

/*
* Original author: @alexishevia
* Original PR: https://github.com/tomchentw/react-google-maps/pull/22
Expand All @@ -28,6 +31,10 @@ export default class DirectionsRenderer extends Component {
...directionsRendererEventPropTypes,
}

static contextTypes = {
mapHolderRef: PropTypes.instanceOf(GoogleMapHolder),
}

// Public APIs
//
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRenderer
Expand All @@ -46,10 +53,15 @@ export default class DirectionsRenderer extends Component {
}

componentWillMount() {
const { mapHolderRef } = this.context;

if (!canUseDOM) {
return;
}
const directionsRenderer = DirectionsRendererCreator._createDirectionsRenderer(this.props);
const directionsRenderer = DirectionsRendererCreator._createDirectionsRenderer({
...this.props,
mapHolderRef,
});

this.setState({ directionsRenderer });
}
Expand Down
14 changes: 13 additions & 1 deletion src/DrawingManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
default as React,
Component,
PropTypes,
} from "react";

import {
Expand All @@ -14,6 +15,8 @@ import {
drawingManagerEventPropTypes,
} from "./creators/DrawingManagerCreator";

import { default as GoogleMapHolder } from "./creators/GoogleMapHolder";

/*
* Original author: @idolize
* Original PR: https://github.com/tomchentw/react-google-maps/pull/46
Expand All @@ -28,6 +31,10 @@ export default class DrawingManager extends Component {
...drawingManagerEventPropTypes,
}

static contextTypes = {
mapHolderRef: PropTypes.instanceOf(GoogleMapHolder),
}

// Public APIs
//
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager
Expand All @@ -42,10 +49,15 @@ export default class DrawingManager extends Component {
}

componentWillMount() {
const { mapHolderRef } = this.context;

if (!canUseDOM) {
return;
}
const drawingManager = DrawingManagerCreator._createDrawingManager(this.props);
const drawingManager = DrawingManagerCreator._createDrawingManager({
...this.props,
mapHolderRef,
});

this.setState({ drawingManager });
}
Expand Down
14 changes: 13 additions & 1 deletion src/InfoWindow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
default as React,
Component,
PropTypes,
} from "react";

import {
Expand All @@ -14,6 +15,8 @@ import {
infoWindowEventPropTypes,
} from "./creators/InfoWindowCreator";

import { default as GoogleMapHolder } from "./creators/GoogleMapHolder";

export default class InfoWindow extends Component {
static propTypes = {
// Uncontrolled default[props] - used only in componentDidMount
Expand All @@ -24,6 +27,10 @@ export default class InfoWindow extends Component {
...infoWindowEventPropTypes,
}

static contextTypes = {
mapHolderRef: PropTypes.instanceOf(GoogleMapHolder),
}

// Public APIs
//
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindow
Expand All @@ -42,10 +49,15 @@ export default class InfoWindow extends Component {
}

componentWillMount() {
const { mapHolderRef } = this.context;

if (!canUseDOM) {
return;
}
const infoWindow = InfoWindowCreator._createInfoWindow(this.props);
const infoWindow = InfoWindowCreator._createInfoWindow({
...this.props,
mapHolderRef,
});

this.setState({ infoWindow });
}
Expand Down
17 changes: 15 additions & 2 deletions src/KmlLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
default as React,
Component,
PropTypes,
} from "react";

import {
Expand All @@ -14,6 +15,8 @@ import {
kmlLayerEventPropTypes,
} from "./creators/KmlLayerCreator";

import { default as GoogleMapHolder } from "./creators/GoogleMapHolder";

export default class KmlLayer extends Component {
static propTypes = {
// Uncontrolled default[props] - used only in componentDidMount
Expand All @@ -24,6 +27,10 @@ export default class KmlLayer extends Component {
...kmlLayerEventPropTypes,
}

static contextTypes = {
mapHolderRef: PropTypes.instanceOf(GoogleMapHolder),
}

// Public APIs
//
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#KmlLayer
Expand All @@ -46,18 +53,24 @@ export default class KmlLayer extends Component {
}

componentWillMount() {
const { mapHolderRef } = this.context;

if (!canUseDOM) {
return;
}
const kmlLayer = KmlLayerCreator._createKmlLayer(this.props);
const kmlLayer = KmlLayerCreator._createKmlLayer({
...this.props,
mapHolderRef,
});

this.setState({ kmlLayer });
}

render() {
const { mapHolderRef } = this.context;
if (this.state.kmlLayer) {
return (
<KmlLayerCreator kmlLayer={this.state.kmlLayer} {...this.props}>
<KmlLayerCreator mapHolderRef={mapHolderRef} kmlLayer={this.state.kmlLayer} {...this.props}>
{this.props.children}
</KmlLayerCreator>
);
Expand Down
13 changes: 12 additions & 1 deletion src/Marker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
default as React,
Component,
PropTypes,
} from "react";

import {
Expand All @@ -14,6 +15,8 @@ import {
markerEventPropTypes,
} from "./creators/MarkerCreator";

import GoogleMapHolder from "./creators/GoogleMapHolder";

export default class Marker extends Component {
static propTypes = {
// Uncontrolled default[props] - used only in componentDidMount
Expand All @@ -24,6 +27,10 @@ export default class Marker extends Component {
...markerEventPropTypes,
}

static contextTypes = {
mapHolderRef: PropTypes.instanceOf(GoogleMapHolder),
}

// Public APIs
//
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
Expand Down Expand Up @@ -64,10 +71,14 @@ export default class Marker extends Component {
}

componentWillMount() {
const { mapHolderRef } = this.context;
if (!canUseDOM) {
return;
}
const marker = MarkerCreator._createMarker(this.props);
const marker = MarkerCreator._createMarker({
...this.props,
mapHolderRef,
});

this.setState({ marker });
}
Expand Down
10 changes: 9 additions & 1 deletion src/OverlayView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
default as React,
Component,
PropTypes,
} from "react";

import {
Expand All @@ -13,6 +14,8 @@ import {
overlayViewControlledPropTypes,
} from "./creators/OverlayViewCreator";

import { default as GoogleMapHolder } from "./creators/GoogleMapHolder";

/*
* Original author: @petebrowne
* Original PR: https://github.com/tomchentw/react-google-maps/pull/63
Expand All @@ -32,6 +35,10 @@ export default class OverlayView extends Component {
...overlayViewControlledPropTypes,
}

static contextTypes = {
mapHolderRef: PropTypes.instanceOf(GoogleMapHolder),
}

static defaultProps = {
mapPaneName: OverlayView.OVERLAY_LAYER,
}
Expand Down Expand Up @@ -61,9 +68,10 @@ export default class OverlayView extends Component {
}

render() {
const { mapHolderRef } = this.context;
if (this.state.overlayView) {
return (
<OverlayViewCreator overlayView={this.state.overlayView} {...this.props}>
<OverlayViewCreator mapHolderRef={mapHolderRef} overlayView={this.state.overlayView} {...this.props}>
{this.props.children}
</OverlayViewCreator>
);
Expand Down
13 changes: 12 additions & 1 deletion src/Polygon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
default as React,
Component,
PropTypes,
} from "react";

import {
Expand All @@ -14,6 +15,8 @@ import {
polygonEventPropTypes,
} from "./creators/PolygonCreator";

import { default as GoogleMapHolder } from "./creators/GoogleMapHolder";

export default class Polygon extends Component {
static propTypes = {
// Uncontrolled default[props] - used only in componentDidMount
Expand All @@ -23,6 +26,9 @@ export default class Polygon extends Component {
// Event [onEventName]
...polygonEventPropTypes,
}
static contextTypes = {
mapHolderRef: PropTypes.instanceOf(GoogleMapHolder),
}

// Public APIs
//
Expand All @@ -46,10 +52,15 @@ export default class Polygon extends Component {
}

componentWillMount() {
const { mapHolderRef } = this.context;

if (!canUseDOM) {
return;
}
const polygon = PolygonCreator._createPolygon(this.props);
const polygon = PolygonCreator._createPolygon({
...this.props,
mapHolderRef,
});

this.setState({ polygon });
}
Expand Down
Loading