Angular 4/6 + Google Map Integration Project

キャンセルされた 投稿 5年前 着払い
キャンセルされた 着払い

- 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.

AngularJS GoogleマップAPI HTML5 JavaScript Web Development

プロジェクトID: #17604761

プロジェクトについて

4個の提案 リモートプロジェクト アクティブ 5年前

4人のフリーランサーが、平均$165 で、この仕事に入札しています。

KashirinA

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐ I read through the job details extremely carefully and I am absolutely sure that I can do the project very well. * 4+ years experience in web design and development and site build. Timely deliver 24 ho もっと

$222 USD 3日以内
(61件のレビュー)
6.6
rzoro97

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.

$90 USD 3日以内
(5件のレビュー)
2.9
virendrastarone

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 もっと

$96 USD 3日以内
(2件のレビュー)
2.6