{"action":"created","issue":{"url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/224","repository_url":"https://api.github.com/repos/tomchentw/react-google-maps","labels_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/224/labels{/name}","comments_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/224/comments","events_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/224/events","html_url":"https://github.com/tomchentw/react-google-maps/pull/224","id":139343589,"number":224,"title":"Performance with many markers","user":{"login":"rewop","id":2427222,"avatar_url":"https://avatars.githubusercontent.com/u/2427222?v=3","gravatar_id":"","url":"https://api.github.com/users/rewop","html_url":"https://github.com/rewop","followers_url":"https://api.github.com/users/rewop/followers","following_url":"https://api.github.com/users/rewop/following{/other_user}","gists_url":"https://api.github.com/users/rewop/gists{/gist_id}","starred_url":"https://api.github.com/users/rewop/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rewop/subscriptions","organizations_url":"https://api.github.com/users/rewop/orgs","repos_url":"https://api.github.com/users/rewop/repos","events_url":"https://api.github.com/users/rewop/events{/privacy}","received_events_url":"https://api.github.com/users/rewop/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2016-03-08T17:39:50Z","updated_at":"2016-05-24T15:38:50Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/tomchentw/react-google-maps/pulls/224","html_url":"https://github.com/tomchentw/react-google-maps/pull/224","diff_url":"https://github.com/tomchentw/react-google-maps/pull/224.diff","patch_url":"https://github.com/tomchentw/react-google-maps/pull/224.patch"},"body":"This PR solves the performance problems on the map, when rendering many markers. \r\n\r\nAn example is the following:\r\n\r\n```javascript\r\nimport React, { Component } from \"react\";\r\nimport { GoogleMapLoader, GoogleMap, Marker, OverlayView } from \"../../../../../../../../Development/react-google-maps\";\r\n// import { simplified } from \"../../knd-elements/GoogleMapsThemes\";\r\n\r\nconst STYLES = {\r\n    mapContainer: {\r\n        height: \"400px\"\r\n    },\r\n    overlayView: {\r\n        background: \"white\",\r\n        border: \"1px solid #ccc\",\r\n        padding: 15\r\n    }\r\n};\r\n\r\nfunction getRandomInRange(from, to, fixed) {\r\n    // .toFixed() returns string, so ' * 1' is a trick to convert to number\r\n    return (Math.random() * (to - from) + from).toFixed(fixed) * 1;\r\n}\r\n\r\nfunction createLatLng() {\r\n    return {\r\n        lat: getRandomInRange(-90, 90),\r\n        lng: getRandomInRange(-180, 180)\r\n    };\r\n}\r\n\r\nfunction createMarker(index) {\r\n    return {\r\n        position: createLatLng(),\r\n        index\r\n    };\r\n}\r\n\r\nfunction getMarkers() {\r\n    let markers = [];\r\n    for (let i = 0; i < 3000; i++) {\r\n        markers = [\r\n            ...markers,\r\n            createMarker(i)\r\n        ];\r\n    }\r\n    return markers;\r\n}\r\n\r\nclass MapTest extends Component {\r\n\r\n    constructor() {\r\n        super();\r\n        this.state = {\r\n            markers: [],\r\n            loaded: false\r\n        };\r\n    }\r\n\r\n    componentDidMount() {\r\n        const markers = getMarkers();\r\n        this.setState({\r\n            markers,\r\n            markerComponents: markers.map((marker, index) => (\r\n                <Marker\r\n                    {...marker}\r\n                    onClick={() => this.onSelectMarker(marker)}\r\n                    key={index}\r\n                />\r\n            ))\r\n        });\r\n    }\r\n\r\n    onSelectMarker(marker) {\r\n        this.setState({\r\n            selectedMarker: marker\r\n        });\r\n    }\r\n\r\n    onCloseOverlay() {\r\n        this.setState({\r\n            selectedMarker: null\r\n        });\r\n    }\r\n\r\n    render() {\r\n\r\n        return (\r\n            <GoogleMapLoader\r\n                containerElement={\r\n                    <div {... this.props} style={STYLES.mapContainer} />\r\n                }\r\n                googleMapElement={\r\n                    <GoogleMap\r\n                        defaultZoom={7}\r\n                        defaultCenter={{\r\n                            lat: 52.3702157,\r\n                            lng: 4.8951679\r\n                        }}\r\n                    >\r\n                        {this.state.selectedMarker &&\r\n                            <OverlayView\r\n                                position={this.state.selectedMarker.position}\r\n                                mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}\r\n                            >\r\n                                <div style={STYLES.overlayView}>\r\n                                    <h1>OverlayView</h1>\r\n                                    <p>Marker: {this.state.selectedMarker.index}</p>\r\n                                    <button onClick={() => this.onCloseOverlay()}>\r\n                                      Close me\r\n                                    </button>\r\n                                </div>\r\n                            </OverlayView>\r\n                        }\r\n                        {this.state.markerComponents}\r\n                    </GoogleMap>\r\n                }\r\n            />\r\n        );\r\n    }\r\n}\r\n```\r\n\r\nEach click on the marker on this map, takes more than 3 seconds to update it. This pr aims at solving this problem, and dramatically improve the performance issues. \r\n\r\nResolve #135 "},"comment":{"url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/comments/221311931","html_url":"https://github.com/tomchentw/react-google-maps/pull/224#issuecomment-221311931","issue_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/224","id":221311931,"user":{"login":"rewop","id":2427222,"avatar_url":"https://avatars.githubusercontent.com/u/2427222?v=3","gravatar_id":"","url":"https://api.github.com/users/rewop","html_url":"https://github.com/rewop","followers_url":"https://api.github.com/users/rewop/followers","following_url":"https://api.github.com/users/rewop/following{/other_user}","gists_url":"https://api.github.com/users/rewop/gists{/gist_id}","starred_url":"https://api.github.com/users/rewop/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rewop/subscriptions","organizations_url":"https://api.github.com/users/rewop/orgs","repos_url":"https://api.github.com/users/rewop/repos","events_url":"https://api.github.com/users/rewop/events{/privacy}","received_events_url":"https://api.github.com/users/rewop/received_events","type":"User","site_admin":false},"created_at":"2016-05-24T15:38:50Z","updated_at":"2016-05-24T15:38:50Z","body":"@cristiandley thanks. I have had a really busy week at work, and I couldn't put myself into it yet. I hope by the end of this week to manage. "}}
{"actor":{"display_login":"rewop"}}