Convert Node to png in react
up vote
0
down vote
favorite
I want to:
1) Take image from input file (png format)
2) Create marker to google map app in css
3) Select marker color via input type color
4) All of then as a node convert to new image (image from first step inside marker)
5) New image send to database
6) Display marker on the map
I have problem with fourth step. I tried use:
a) html to image
b) dom to image
I working in react, so I tried use ref instead getElementById, but It doesn't work for me. I hope that somebody can help me, becuase I don't know another way to custom marker in react google map (only icon url).
I create sqreen to show you my marker creator. It should be help you to undestand my idea. appSqreen
PS Sorry for my english
reactjs image
google-maps marker asked Nov 11 at 1:03
Lukas
134
|
show 9 more comments
up vote
0
down vote
favorite
I want to:
1) Take image from input file (png format)
2) Create marker to google map app in css
3) Select marker color via input type color
4) All of then as a node convert to new image (image from first step inside marker)
5) New image send to database
6) Display marker on the map
I have problem with fourth step. I tried use:
a) html to image
b) dom to image
I working in react, so I tried use ref instead getElementById, but It doesn't work for me. I hope that somebody can help me, becuase I don't know another way to custom marker in react google map (only icon url).
I create sqreen to show you my marker creator. It should be help you to undestand my idea. appSqreen
PS Sorry for my english
reactjs image
google-maps marker asked Nov 11 at 1:03
Lukas
134
So basically, your question is: How do i use custom markers in google-map-react?
– Donny Verduijn
Nov 11 at 1:17
I know how to add via icon url, look at my map: here. I need create new Image based on old image and marker css. User will create new marker. He/She will select icon, marker background then react create new marker. This marker must be converted to image then react will push it to database and display on the map.
– Lukas
Nov 11 at 1:45
Did you try to draw the markers as regular components on the map?
– Donny Verduijn
Nov 12 at 19:47
I don't know how. If I draw something on the map, this hasn't marker property. I see only icon url option.
– Lukas
Nov 12 at 21:22
The library enables you to draw any component to the map, so you can create your own Marker component, which has the marker and its icon as svg child elements. This way you can change the color. Please read getting started. There is a good example over there.
– Donny Verduijn
Nov 13 at 8:31
|
show 9 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I want to:
1) Take image from input file (png format)
2) Create marker to google map app in css
3) Select marker color via input type color
4) All of then as a node convert to new image (image from first step inside marker)
5) New image send to database
6) Display marker on the map
I have problem with fourth step. I tried use:
a) html to image
b) dom to image
I working in react, so I tried use ref instead getElementById, but It doesn't work for me. I hope that somebody can help me, becuase I don't know another way to custom marker in react google map (only icon url).
I create sqreen to show you my marker creator. It should be help you to undestand my idea. appSqreen
PS Sorry for my english
reactjs image
google-maps marker asked Nov 11 at 1:03
Lukas
134
I want to:
1) Take image from input file (png format)
2) Create marker to google map app in css
3) Select marker color via input type color
4) All of then as a node convert to new image (image from first step inside marker)
5) New image send to database
6) Display marker on the map
I have problem with fourth step. I tried use:
a) html to image
b) dom to image
I working in react, so I tried use ref instead getElementById, but It doesn't work for me. I hope that somebody can help me, becuase I don't know another way to custom marker in react google map (only icon url).
I create sqreen to show you my marker creator. It should be help you to undestand my idea. appSqreen
PS Sorry for my english
reactjs image
google-maps marker reactjs image
google-maps marker asked Nov 11 at 1:03
Lukas
134
asked Nov 11 at 1:03
Lukas
134
asked Nov 11 at 1:03
Lukas
134
asked Nov 11 at 1:03
Lukas
134
asked Nov 11 at 1:03
Lukas
134
134
So basically, your question is: How do i use custom markers in google-map-react?
– Donny Verduijn
Nov 11 at 1:17
I know how to add via icon url, look at my map: here. I need create new Image based on old image and marker css. User will create new marker. He/She will select icon, marker background then react create new marker. This marker must be converted to image then react will push it to database and display on the map.
– Lukas
Nov 11 at 1:45
Did you try to draw the markers as regular components on the map?
– Donny Verduijn
Nov 12 at 19:47
I don't know how. If I draw something on the map, this hasn't marker property. I see only icon url option.
– Lukas
Nov 12 at 21:22
The library enables you to draw any component to the map, so you can create your own Marker component, which has the marker and its icon as svg child elements. This way you can change the color. Please read getting started. There is a good example over there.
– Donny Verduijn
Nov 13 at 8:31
|
show 9 more comments
So basically, your question is: How do i use custom markers in google-map-react?
– Donny Verduijn
Nov 11 at 1:17
I know how to add via icon url, look at my map: here. I need create new Image based on old image and marker css. User will create new marker. He/She will select icon, marker background then react create new marker. This marker must be converted to image then react will push it to database and display on the map.
– Lukas
Nov 11 at 1:45
Did you try to draw the markers as regular components on the map?
– Donny Verduijn
Nov 12 at 19:47
I don't know how. If I draw something on the map, this hasn't marker property. I see only icon url option.
– Lukas
Nov 12 at 21:22
The library enables you to draw any component to the map, so you can create your own Marker component, which has the marker and its icon as svg child elements. This way you can change the color. Please read getting started. There is a good example over there.
– Donny Verduijn
Nov 13 at 8:31
So basically, your question is: How do i use custom markers in google-map-react?
– Donny Verduijn
Nov 11 at 1:17
So basically, your question is: How do i use custom markers in google-map-react?
– Donny Verduijn
Nov 11 at 1:17
I know how to add via icon url, look at my map: here. I need create new Image based on old image and marker css. User will create new marker. He/She will select icon, marker background then react create new marker. This marker must be converted to image then react will push it to database and display on the map.
– Lukas
Nov 11 at 1:45
I know how to add via icon url, look at my map: here. I need create new Image based on old image and marker css. User will create new marker. He/She will select icon, marker background then react create new marker. This marker must be converted to image then react will push it to database and display on the map.
– Lukas
Nov 11 at 1:45
Did you try to draw the markers as regular components on the map?
– Donny Verduijn
Nov 12 at 19:47
Did you try to draw the markers as regular components on the map?
– Donny Verduijn
Nov 12 at 19:47
I don't know how. If I draw something on the map, this hasn't marker property. I see only icon url option.
– Lukas
Nov 12 at 21:22
I don't know how. If I draw something on the map, this hasn't marker property. I see only icon url option.
– Lukas
Nov 12 at 21:22
The library enables you to draw any component to the map, so you can create your own Marker component, which has the marker and its icon as svg child elements. This way you can change the color. Please read getting started. There is a good example over there.
– Donny Verduijn
Nov 13 at 8:31
The library enables you to draw any component to the map, so you can create your own Marker component, which has the marker and its icon as svg child elements. This way you can change the color. Please read getting started. There is a good example over there.
– Donny Verduijn
Nov 13 at 8:31
|
show 9 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53244930%2fconvert-node-to-png-in-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
So basically, your question is: How do i use custom markers in google-map-react?
– Donny Verduijn
Nov 11 at 1:17
I know how to add via icon url, look at my map: here. I need create new Image based on old image and marker css. User will create new marker. He/She will select icon, marker background then react create new marker. This marker must be converted to image then react will push it to database and display on the map.
– Lukas
Nov 11 at 1:45
Did you try to draw the markers as regular components on the map?
– Donny Verduijn
Nov 12 at 19:47
I don't know how. If I draw something on the map, this hasn't marker property. I see only icon url option.
– Lukas
Nov 12 at 21:22
The library enables you to draw any component to the map, so you can create your own Marker component, which has the marker and its icon as svg child elements. This way you can change the color. Please read getting started. There is a good example over there.
– Donny Verduijn
Nov 13 at 8:31