Cancelled

Angular 4/6 + Google Map Integration Project

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

Skills: Angular.js, Google Maps API, HTML5, Javascript, Web Development

See more: sebm-google-map example, angular 6 google maps, ng2-google-maps, angular 4 google maps example, angular 5 google maps, angular 5 google maps example, angular google maps example, angular google maps, web development google map integration, google map integration using php, google map integration address, google map integration flash, hot property google map integration, google map integration website, google map integration web site, google map integration, sample google map integration websites, php google map integration, google calendar integration project management, google map integration website dynamic location

About the Employer:
( 3 reviews ) San Jose, Canada

Project ID: #17604761

7 freelancers are bidding on average $184 for this job

shaktistanwar

Hi I am a technical evangelist, developer and can do this task for you. I have more than 12 years of experience in software development and am a microsoft certified professional.I have strong work experience in Reac More

$250 USD in 3 days
(15 Reviews)
6.0
bengalTIGER1106

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐ 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 More

$222 USD in 3 days
(30 Reviews)
5.4
xuan327

I hope to see you on chatting. High Quality, High Speed, Client Satisfication is my working style. Though I am new to freelancer.com , I am an experienced web developer with full-stack knowledge and career. See al More

$250 USD in 3 days
(13 Reviews)
4.8
BestPartner4You

Hi,sir. I am super interested in your project - 'Angular 4/6 + Google Map Integration Project' :) I believe that my 12+ years of experience in development makes me highly qualified for this project. I'm sure that I wou More

$155 USD in 2 days
(3 Reviews)
2.7
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 in 3 days
(4 Reviews)
2.8
dsgoddog

Hi, I'm good at react and angular. Also, I'm a very creative web designer. You can check my work on these sites: [login to view URL] [login to view URL] Even you can choose one of these angular themes: More

$222 USD in 3 days
(0 Reviews)
0.0
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 More

$96 USD in 3 days
(0 Reviews)
0.0