{"action":"created","issue":{"url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/885","repository_url":"https://api.github.com/repos/tomchentw/react-google-maps","labels_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/885/labels{/name}","comments_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/885/comments","events_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/885/events","html_url":"https://github.com/tomchentw/react-google-maps/issues/885","id":348657929,"node_id":"MDU6SXNzdWUzNDg2NTc5Mjk=","number":885,"title":"polygons color changing with zoomIn and zoomOut","user":{"login":"Linton-Samuel-Dawson","id":26380519,"node_id":"MDQ6VXNlcjI2MzgwNTE5","avatar_url":"https://avatars0.githubusercontent.com/u/26380519?v=4","gravatar_id":"","url":"https://api.github.com/users/Linton-Samuel-Dawson","html_url":"https://github.com/Linton-Samuel-Dawson","followers_url":"https://api.github.com/users/Linton-Samuel-Dawson/followers","following_url":"https://api.github.com/users/Linton-Samuel-Dawson/following{/other_user}","gists_url":"https://api.github.com/users/Linton-Samuel-Dawson/gists{/gist_id}","starred_url":"https://api.github.com/users/Linton-Samuel-Dawson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Linton-Samuel-Dawson/subscriptions","organizations_url":"https://api.github.com/users/Linton-Samuel-Dawson/orgs","repos_url":"https://api.github.com/users/Linton-Samuel-Dawson/repos","events_url":"https://api.github.com/users/Linton-Samuel-Dawson/events{/privacy}","received_events_url":"https://api.github.com/users/Linton-Samuel-Dawson/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-08-08T10:02:10Z","updated_at":"2018-08-27T02:47:39Z","closed_at":null,"author_association":"NONE","body":"I have two type of polygons in map and I can add another polygon to map.each of them have different fill color.\r\nwhen map is loaded , if you keep zooming out polygon   changing to red but with zoomIn it fixes.\r\n\r\n![image](https://user-images.githubusercontent.com/26380519/43830064-bc912a06-9b15-11e8-97d5-fa1ad291501e.png)\r\n\r\nafter zoomIn\r\n\r\n![image](https://user-images.githubusercontent.com/26380519/43830361-5381e824-9b16-11e8-988e-461f3208c234.png)\r\n\r\nagain if new polygon  added to map other polygons color would change to new polygon color\r\n\r\n![image](https://user-images.githubusercontent.com/26380519/43830430-7692c2b6-9b16-11e8-8e50-ec22c5c0a6f5.png)\r\n\r\nis it a bug or I'm doing something wrong??\r\n\r\n```\r\n\r\n    render() {\r\n        const center = this.getValue();\r\n        const {area=[]} = this.props;\r\n        console.log(this.props);\r\n        \r\n        return (\r\n            <GoogleMap\r\n                defaultZoom={14}\r\n                center={center}\r\n                onRightClick={this.erasePolygon}\r\n\r\n            >\r\n                {\r\n                    this.state.bounds.length != 0 &&\r\n                    <Polygon\r\n                        paths={this.state.bounds}\r\n                        options={{\r\n                        strokeColor:\"#d34052\",\r\n                        fillColor:\"#d34052\",\r\n                        strokeOpacity:\"0.5\",\r\n                        strokeWeight:'2'\r\n                            }}\r\n                    />\r\n\r\n                }\r\n\r\n                {\r\n                    <DrawingManager\r\n                        drawingMode={google.maps.drawing.OverlayType.POLYGON}\r\n                        onPolygonComplete={this.handleOverlay}\r\n\r\n                        defaultOptions={{\r\n                      drawingControl: true,\r\n                      drawingControlOptions: {\r\n                        position: google.maps.ControlPosition.TOP_CENTER,\r\n                        drawingModes:['polygon']\r\n                    \r\n                      },\r\n                      polygonOptions: {\r\n                        fillColor: `#ffffff`,\r\n                        fillOpacity: 0.7,\r\n                        strokeWeight: 1,\r\n                        clickable: true,\r\n                        editable: true,\r\n                        zIndex: 1\r\n                      }\r\n                    }}\r\n                    />\r\n                }\r\n                <Marker\r\n                    position={center}\r\n                />\r\n                {\r\n\r\n                    area.map((value, index) => {\r\n                        return (\r\n                            <Polygon\r\n                                key={index}\r\n                                paths={value.bounds}\r\n                                options={{\r\n                        strokeColor:\"#e34052\",\r\n                        fillColor:\"#e3352\",\r\n                        strokeOpacity:\"0.5\",\r\n                        strokeWeight:'2'\r\n                            }}\r\n\r\n                            />\r\n                        )\r\n\r\n                    })\r\n                }\r\n            </GoogleMap>\r\n        )\r\n    }\r\n     }\r\n\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/comments/416099375","html_url":"https://github.com/tomchentw/react-google-maps/issues/885#issuecomment-416099375","issue_url":"https://api.github.com/repos/tomchentw/react-google-maps/issues/885","id":416099375,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNjA5OTM3NQ==","user":{"login":"milieu","id":3893381,"node_id":"MDQ6VXNlcjM4OTMzODE=","avatar_url":"https://avatars2.githubusercontent.com/u/3893381?v=4","gravatar_id":"","url":"https://api.github.com/users/milieu","html_url":"https://github.com/milieu","followers_url":"https://api.github.com/users/milieu/followers","following_url":"https://api.github.com/users/milieu/following{/other_user}","gists_url":"https://api.github.com/users/milieu/gists{/gist_id}","starred_url":"https://api.github.com/users/milieu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/milieu/subscriptions","organizations_url":"https://api.github.com/users/milieu/orgs","repos_url":"https://api.github.com/users/milieu/repos","events_url":"https://api.github.com/users/milieu/events{/privacy}","received_events_url":"https://api.github.com/users/milieu/received_events","type":"User","site_admin":false},"created_at":"2018-08-27T02:47:39Z","updated_at":"2018-08-27T02:47:39Z","author_association":"NONE","body":"I've been drawing Polygons lately and noticed that I experienced darker colors -- approaching grey -- when the data I was rendering resulted in duplicate Polygons.\r\n\r\nWithout knowing more about your state handling I would:\r\n\r\n1. Suspect multiple Polygons are being drawn and investigate the React DOM state.\r\n2. Play around with zIndex to determine which of the duplicate Polygons you want on top, assuming you wanted to keep more of them.\r\n\r\nI think this is due to how Google Maps works rather than this library... and I don't think it's a bug either.\r\n\r\nIt's just a really weird side effect of rendering multiple partially opaque shapes 😄 "}}
{"actor":{"display_login":"milieu"}}