Angular 4/6 + Google Map Integration Project
$30-250 USD
착불
- To start off, please look at the sketches first before you read the points below.
- Google map integration required, user should be able to pass in any country ID but to start off the project you can keep US map in focus.
- The user should be able to select any one of the 3 shapes and should be able to draw it on the map.
- There are 3 types of shapes:
a. pin
b. line
c. polygon
* How will user draw a shape?
Step 1: Click on the shape to select the shape, the shape button will be highlighted
( Suppose the user selected pin )
Step 2: While pin is selected, click anywhere on the map to draw the pin
- Every shape goes into the "features" array.
Longitude/Latitude will be recorded and following geo json should be generated (values below are dummy):
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-475.1806640625,
36.20882309283712
]
}
}
]
}
Step 3: If the user wants to delete a pin, click on the pin, which will show "delete" option,
click on "delete" option and the pin should be gone.
Step 4: To draw a line, click on the first point, then move the mouse and click on the second point,
a line should be drawn from point a to point b. a draw line should generate the json like following (values are dummy):
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
-479.443359375,
36.63316209558658
],
[
-475.09277343749994,
36.19109202182454
]
]
}
}
]
}
Step 5: To delete a line, it should be exact same behavior as deleting a pin (refer to step 3)
Step 6: To draw a polygon, click for point a then click on point "B" , after this if the user clicks on point lets say point "A" , draw a polygon. User can click and create as many points, as soon as the user clicks on a earlier point, join all points to create a polygon.
Polygon generates the following shape of json (values are dummy):
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-478.27880859374994,
36.721273880045004
],
[
-476.71874999999994,
34.77771580360469
],
[
-474.36767578125006,
37.71859032558816
],
[
-478.27880859374994,
36.721273880045004
]
]
]
}
}
]
}
Step 7: In general, there will be only 1 "features" array and all shapes will go in as objects into this same array.
* Consumer of this component should be able to pull these values out of the component.
* Reference Project : [login to view URL]
but we don't need anything as extensive as [login to view URL] although the output values need to be the same.
* Please look at the sketches carefully before committing or quoting anything. For more details, please inbox me.
프로젝트 ID: #17604761
프로젝트 소개
이 일자리에 대한 프리랜서 4 명의 평균 입찰가: $165
I have worked with Google Maps API in angular before so I think I can help you get this task done, although I need some information regarding the design you seek for this application.
SIR I HAVE GOOD SKILL IN THIS WORK I CAN WORK PROPERLY SO PLS MSG ME High Quality + Fast Speed = Excellent Result + Business Success, this is my working style.I have gone through your Job post and I can understand your 기타