Changing color of selected polygon on google-maps-react
I'm using google-maps-react and trying to change the color of an overlaid polygon as it's selected. The polygons are also part of the google-maps-react.
The polygons accept a new selected state, and the setColor function even returns the correct color. It just doesn't change on the map itself.
Code is as follows:
setColor = (selected, index) => {
if (selected) {
return "blue" //Even when blue is returned, no color change is visible
} else {
return "red"
}
}
render() {
return (
<Polygon
paths={this.props.paths}
onClick={() => this.handleClick()}
strokeColor="#2A2A57"
strokeOpacity={0.8}
strokeWeight={2}
fillColor = {this.setColor(this.state.isSelected, this.state.index)}
fillOpacity={0.35}
{...this.props}
/>
)
}
javascript reactjs
google-maps google-maps-react asked Nov 21 '18 at 15:41
Matsern
5916
add a comment |
I'm using google-maps-react and trying to change the color of an overlaid polygon as it's selected. The polygons are also part of the google-maps-react.
The polygons accept a new selected state, and the setColor function even returns the correct color. It just doesn't change on the map itself.
Code is as follows:
setColor = (selected, index) => {
if (selected) {
return "blue" //Even when blue is returned, no color change is visible
} else {
return "red"
}
}
render() {
return (
<Polygon
paths={this.props.paths}
onClick={() => this.handleClick()}
strokeColor="#2A2A57"
strokeOpacity={0.8}
strokeWeight={2}
fillColor = {this.setColor(this.state.isSelected, this.state.index)}
fillOpacity={0.35}
{...this.props}
/>
)
}
javascript reactjs
google-maps google-maps-react asked Nov 21 '18 at 15:41
Matsern
5916
add a comment |
I'm using google-maps-react and trying to change the color of an overlaid polygon as it's selected. The polygons are also part of the google-maps-react.
The polygons accept a new selected state, and the setColor function even returns the correct color. It just doesn't change on the map itself.
Code is as follows:
setColor = (selected, index) => {
if (selected) {
return "blue" //Even when blue is returned, no color change is visible
} else {
return "red"
}
}
render() {
return (
<Polygon
paths={this.props.paths}
onClick={() => this.handleClick()}
strokeColor="#2A2A57"
strokeOpacity={0.8}
strokeWeight={2}
fillColor = {this.setColor(this.state.isSelected, this.state.index)}
fillOpacity={0.35}
{...this.props}
/>
)
}
javascript reactjs
google-maps google-maps-react asked Nov 21 '18 at 15:41
Matsern
5916
I'm using google-maps-react and trying to change the color of an overlaid polygon as it's selected. The polygons are also part of the google-maps-react.
The polygons accept a new selected state, and the setColor function even returns the correct color. It just doesn't change on the map itself.
Code is as follows:
setColor = (selected, index) => {
if (selected) {
return "blue" //Even when blue is returned, no color change is visible
} else {
return "red"
}
}
render() {
return (
<Polygon
paths={this.props.paths}
onClick={() => this.handleClick()}
strokeColor="#2A2A57"
strokeOpacity={0.8}
strokeWeight={2}
fillColor = {this.setColor(this.state.isSelected, this.state.index)}
fillOpacity={0.35}
{...this.props}
/>
)
}
javascript reactjs
google-maps google-maps-react javascript reactjs
google-maps google-maps-react asked Nov 21 '18 at 15:41
Matsern
5916
asked Nov 21 '18 at 15:41
Matsern
5916
edited Nov 21 '18 at 16:24
asked Nov 21 '18 at 15:41
Matsern
5916
asked Nov 21 '18 at 15:41
Matsern
5916
asked Nov 21 '18 at 15:41
Matsern
5916
5916
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
It appears it is by google-maps-react library design, only changing paths props causes Polygon to re-render.
The following approach could be considered to update Polygon properties (e.g, fillColor):
1) Get the instance of Google Maps Polygon object via ref attribute:
<Polygon
ref={this.polygonRef}
onClick={this.handleClick}
paths={triangleCoords}
/>
2) Update polygon properties via Polygon.setOptions function:
handleClick = e =>{
this.setPolygonOptions({fillColor: "green"});
}
where
setPolygonOptions = (options) => {
this.polygonRef.current.polygon.setOptions(options);
};
Demo
Update
Another option would be to access Polygon instance and modify its properties as demonstrated below. Once the polygon object is clicked, its instance is passed via the second parameter of click event:
handleClick = (props,polygon,e) => {
polygon.setOptions({ fillColor: "#ff00ff"});
};
Demo 2
answered Nov 21 '18 at 21:54
Vadim Gremyachev
34.5k770110
1
Thank you for the in-depth answer Vadim, this works so I am marking it as solved. However, when I've got multiple polygons it seems like only one of them changes colour. Is there a simple fix for keeping track of multiple polygons? Sorry if it's a stupid question - I'm a complete beginner in react!
– Matsern
Nov 21 '18 at 23:29
1
Pastebin of the code if you are interested: pastebin.com/7tX9NWHp
– Matsern
Nov 21 '18 at 23:41
@Matsern, regarding multiple instances of polygons, indeed, keeping track of instances is needed. The second solution (see updated answer) might be a better option to consider
– Vadim Gremyachev
Nov 22 '18 at 9:39
add a comment |
Do this...
<Polygon
paths={this.props.paths}
onClick={() => this.handleClick()}
options={{ strokeOpacity: 0.8, strokeColor: "#2A2A57", fillColor:"#000"}}
{...this.props}
/>
You want to pass the styling options to the Google Maps API via the prop.options.
answered Nov 21 '18 at 15:53
Chris Hawkes
6,38833050
1
I've done as you wrote, and it doesn't seem to change. The polygons get the initial value just fine, but will not change? Could this be a problem elsewhere?
– Matsern
Nov 21 '18 at 16:20
Okay, if you want the colors to change than your actual options object should be returned upon whatever state change you want to make. Basically, have your previous function to determine the color to determine the entire object. I would have that entire options object saved in state, google maps should than re-render for any state changes.
– Chris Hawkes
Nov 21 '18 at 17:02
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415627%2fchanging-color-of-selected-polygon-on-google-maps-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
It appears it is by google-maps-react library design, only changing paths props causes Polygon to re-render.
The following approach could be considered to update Polygon properties (e.g, fillColor):
1) Get the instance of Google Maps Polygon object via ref attribute:
<Polygon
ref={this.polygonRef}
onClick={this.handleClick}
paths={triangleCoords}
/>
2) Update polygon properties via Polygon.setOptions function:
handleClick = e =>{
this.setPolygonOptions({fillColor: "green"});
}
where
setPolygonOptions = (options) => {
this.polygonRef.current.polygon.setOptions(options);
};
Demo
Update
Another option would be to access Polygon instance and modify its properties as demonstrated below. Once the polygon object is clicked, its instance is passed via the second parameter of click event:
handleClick = (props,polygon,e) => {
polygon.setOptions({ fillColor: "#ff00ff"});
};
Demo 2
answered Nov 21 '18 at 21:54
Vadim Gremyachev
34.5k770110
1
Thank you for the in-depth answer Vadim, this works so I am marking it as solved. However, when I've got multiple polygons it seems like only one of them changes colour. Is there a simple fix for keeping track of multiple polygons? Sorry if it's a stupid question - I'm a complete beginner in react!
– Matsern
Nov 21 '18 at 23:29
1
Pastebin of the code if you are interested: pastebin.com/7tX9NWHp
– Matsern
Nov 21 '18 at 23:41
@Matsern, regarding multiple instances of polygons, indeed, keeping track of instances is needed. The second solution (see updated answer) might be a better option to consider
– Vadim Gremyachev
Nov 22 '18 at 9:39
add a comment |
It appears it is by google-maps-react library design, only changing paths props causes Polygon to re-render.
The following approach could be considered to update Polygon properties (e.g, fillColor):
1) Get the instance of Google Maps Polygon object via ref attribute:
<Polygon
ref={this.polygonRef}
onClick={this.handleClick}
paths={triangleCoords}
/>
2) Update polygon properties via Polygon.setOptions function:
handleClick = e =>{
this.setPolygonOptions({fillColor: "green"});
}
where
setPolygonOptions = (options) => {
this.polygonRef.current.polygon.setOptions(options);
};
Demo
Update
Another option would be to access Polygon instance and modify its properties as demonstrated below. Once the polygon object is clicked, its instance is passed via the second parameter of click event:
handleClick = (props,polygon,e) => {
polygon.setOptions({ fillColor: "#ff00ff"});
};
Demo 2
answered Nov 21 '18 at 21:54
Vadim Gremyachev
34.5k770110
1
Thank you for the in-depth answer Vadim, this works so I am marking it as solved. However, when I've got multiple polygons it seems like only one of them changes colour. Is there a simple fix for keeping track of multiple polygons? Sorry if it's a stupid question - I'm a complete beginner in react!
– Matsern
Nov 21 '18 at 23:29
1
Pastebin of the code if you are interested: pastebin.com/7tX9NWHp
– Matsern
Nov 21 '18 at 23:41
@Matsern, regarding multiple instances of polygons, indeed, keeping track of instances is needed. The second solution (see updated answer) might be a better option to consider
– Vadim Gremyachev
Nov 22 '18 at 9:39
add a comment |
It appears it is by google-maps-react library design, only changing paths props causes Polygon to re-render.
The following approach could be considered to update Polygon properties (e.g, fillColor):
1) Get the instance of Google Maps Polygon object via ref attribute:
<Polygon
ref={this.polygonRef}
onClick={this.handleClick}
paths={triangleCoords}
/>
2) Update polygon properties via Polygon.setOptions function:
handleClick = e =>{
this.setPolygonOptions({fillColor: "green"});
}
where
setPolygonOptions = (options) => {
this.polygonRef.current.polygon.setOptions(options);
};
Demo
Update
Another option would be to access Polygon instance and modify its properties as demonstrated below. Once the polygon object is clicked, its instance is passed via the second parameter of click event:
handleClick = (props,polygon,e) => {
polygon.setOptions({ fillColor: "#ff00ff"});
};
Demo 2
answered Nov 21 '18 at 21:54
Vadim Gremyachev
34.5k770110
It appears it is by google-maps-react library design, only changing paths props causes Polygon to re-render.
The following approach could be considered to update Polygon properties (e.g, fillColor):
1) Get the instance of Google Maps Polygon object via ref attribute:
<Polygon
ref={this.polygonRef}
onClick={this.handleClick}
paths={triangleCoords}
/>
2) Update polygon properties via Polygon.setOptions function:
handleClick = e =>{
this.setPolygonOptions({fillColor: "green"});
}
where
setPolygonOptions = (options) => {
this.polygonRef.current.polygon.setOptions(options);
};
Demo
Update
Another option would be to access Polygon instance and modify its properties as demonstrated below. Once the polygon object is clicked, its instance is passed via the second parameter of click event:
handleClick = (props,polygon,e) => {
polygon.setOptions({ fillColor: "#ff00ff"});
};
Demo 2
answered Nov 21 '18 at 21:54
Vadim Gremyachev
34.5k770110
edited Nov 22 '18 at 9:31
answered Nov 21 '18 at 21:54
Vadim Gremyachev
34.5k770110
answered Nov 21 '18 at 21:54
Vadim Gremyachev
34.5k770110
answered Nov 21 '18 at 21:54
Vadim Gremyachev
34.5k770110
34.5k770110
1
Thank you for the in-depth answer Vadim, this works so I am marking it as solved. However, when I've got multiple polygons it seems like only one of them changes colour. Is there a simple fix for keeping track of multiple polygons? Sorry if it's a stupid question - I'm a complete beginner in react!
– Matsern
Nov 21 '18 at 23:29
1
Pastebin of the code if you are interested: pastebin.com/7tX9NWHp
– Matsern
Nov 21 '18 at 23:41
@Matsern, regarding multiple instances of polygons, indeed, keeping track of instances is needed. The second solution (see updated answer) might be a better option to consider
– Vadim Gremyachev
Nov 22 '18 at 9:39
add a comment |
1
Thank you for the in-depth answer Vadim, this works so I am marking it as solved. However, when I've got multiple polygons it seems like only one of them changes colour. Is there a simple fix for keeping track of multiple polygons? Sorry if it's a stupid question - I'm a complete beginner in react!
– Matsern
Nov 21 '18 at 23:29
1
Pastebin of the code if you are interested: pastebin.com/7tX9NWHp
– Matsern
Nov 21 '18 at 23:41
@Matsern, regarding multiple instances of polygons, indeed, keeping track of instances is needed. The second solution (see updated answer) might be a better option to consider
– Vadim Gremyachev
Nov 22 '18 at 9:39
1
1
Thank you for the in-depth answer Vadim, this works so I am marking it as solved. However, when I've got multiple polygons it seems like only one of them changes colour. Is there a simple fix for keeping track of multiple polygons? Sorry if it's a stupid question - I'm a complete beginner in react!
– Matsern
Nov 21 '18 at 23:29
Thank you for the in-depth answer Vadim, this works so I am marking it as solved. However, when I've got multiple polygons it seems like only one of them changes colour. Is there a simple fix for keeping track of multiple polygons? Sorry if it's a stupid question - I'm a complete beginner in react!
– Matsern
Nov 21 '18 at 23:29
1
1
Pastebin of the code if you are interested: pastebin.com/7tX9NWHp
– Matsern
Nov 21 '18 at 23:41
Pastebin of the code if you are interested: pastebin.com/7tX9NWHp
– Matsern
Nov 21 '18 at 23:41
@Matsern, regarding multiple instances of polygons, indeed, keeping track of instances is needed. The second solution (see updated answer) might be a better option to consider
– Vadim Gremyachev
Nov 22 '18 at 9:39
@Matsern, regarding multiple instances of polygons, indeed, keeping track of instances is needed. The second solution (see updated answer) might be a better option to consider
– Vadim Gremyachev
Nov 22 '18 at 9:39
add a comment |
Do this...
<Polygon
paths={this.props.paths}
onClick={() => this.handleClick()}
options={{ strokeOpacity: 0.8, strokeColor: "#2A2A57", fillColor:"#000"}}
{...this.props}
/>
You want to pass the styling options to the Google Maps API via the prop.options.
answered Nov 21 '18 at 15:53
Chris Hawkes
6,38833050
1
I've done as you wrote, and it doesn't seem to change. The polygons get the initial value just fine, but will not change? Could this be a problem elsewhere?
– Matsern
Nov 21 '18 at 16:20
Okay, if you want the colors to change than your actual options object should be returned upon whatever state change you want to make. Basically, have your previous function to determine the color to determine the entire object. I would have that entire options object saved in state, google maps should than re-render for any state changes.
– Chris Hawkes
Nov 21 '18 at 17:02
add a comment |
Do this...
<Polygon
paths={this.props.paths}
onClick={() => this.handleClick()}
options={{ strokeOpacity: 0.8, strokeColor: "#2A2A57", fillColor:"#000"}}
{...this.props}
/>
You want to pass the styling options to the Google Maps API via the prop.options.
answered Nov 21 '18 at 15:53
Chris Hawkes
6,38833050
1
I've done as you wrote, and it doesn't seem to change. The polygons get the initial value just fine, but will not change? Could this be a problem elsewhere?
– Matsern
Nov 21 '18 at 16:20
Okay, if you want the colors to change than your actual options object should be returned upon whatever state change you want to make. Basically, have your previous function to determine the color to determine the entire object. I would have that entire options object saved in state, google maps should than re-render for any state changes.
– Chris Hawkes
Nov 21 '18 at 17:02
add a comment |
Do this...
<Polygon
paths={this.props.paths}
onClick={() => this.handleClick()}
options={{ strokeOpacity: 0.8, strokeColor: "#2A2A57", fillColor:"#000"}}
{...this.props}
/>
You want to pass the styling options to the Google Maps API via the prop.options.
answered Nov 21 '18 at 15:53
Chris Hawkes
6,38833050
Do this...
<Polygon
paths={this.props.paths}
onClick={() => this.handleClick()}
options={{ strokeOpacity: 0.8, strokeColor: "#2A2A57", fillColor:"#000"}}
{...this.props}
/>
You want to pass the styling options to the Google Maps API via the prop.options.
answered Nov 21 '18 at 15:53
Chris Hawkes
6,38833050
answered Nov 21 '18 at 15:53
Chris Hawkes
6,38833050
answered Nov 21 '18 at 15:53
Chris Hawkes
6,38833050
answered Nov 21 '18 at 15:53
Chris Hawkes
6,38833050
6,38833050
1
I've done as you wrote, and it doesn't seem to change. The polygons get the initial value just fine, but will not change? Could this be a problem elsewhere?
– Matsern
Nov 21 '18 at 16:20
Okay, if you want the colors to change than your actual options object should be returned upon whatever state change you want to make. Basically, have your previous function to determine the color to determine the entire object. I would have that entire options object saved in state, google maps should than re-render for any state changes.
– Chris Hawkes
Nov 21 '18 at 17:02
add a comment |
1
I've done as you wrote, and it doesn't seem to change. The polygons get the initial value just fine, but will not change? Could this be a problem elsewhere?
– Matsern
Nov 21 '18 at 16:20
Okay, if you want the colors to change than your actual options object should be returned upon whatever state change you want to make. Basically, have your previous function to determine the color to determine the entire object. I would have that entire options object saved in state, google maps should than re-render for any state changes.
– Chris Hawkes
Nov 21 '18 at 17:02
1
1
I've done as you wrote, and it doesn't seem to change. The polygons get the initial value just fine, but will not change? Could this be a problem elsewhere?
– Matsern
Nov 21 '18 at 16:20
I've done as you wrote, and it doesn't seem to change. The polygons get the initial value just fine, but will not change? Could this be a problem elsewhere?
– Matsern
Nov 21 '18 at 16:20
Okay, if you want the colors to change than your actual options object should be returned upon whatever state change you want to make. Basically, have your previous function to determine the color to determine the entire object. I would have that entire options object saved in state, google maps should than re-render for any state changes.
– Chris Hawkes
Nov 21 '18 at 17:02
Okay, if you want the colors to change than your actual options object should be returned upon whatever state change you want to make. Basically, have your previous function to determine the color to determine the entire object. I would have that entire options object saved in state, google maps should than re-render for any state changes.
– Chris Hawkes
Nov 21 '18 at 17:02
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415627%2fchanging-color-of-selected-polygon-on-google-maps-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
