CirclePolygon User Interface in ASP.NET with GoogleMaps API

Description of the CirclePolygon User Interface project I. The entire project consists of 3 pages only. All the necessary modules for the project were found (see links below). The modules need minor modifications and the main work will be in putting them together. II. The first page should look like in Fig1. SEE ATTACHED [login to view URL] file Fig 1 User enters a city. The AutocompleteCityState menu helps to choose the city from the *.csv file (see p.7 at the Requirements below). “Address or Landmark” and “Radius” fields are optional. The Radius field should have a javascript and an ASP.NET validators (no more than 50 miles or an error message). The map on the 1st page is optional. The AreaList field will have the following parameters as a string to test: a). When City=”New York, NY” AreaString=“Brooklyn,Central Park South,Chelsea Area,Coney Island,Downtown,SoHo,Financial District,Empire State Building Area,Hell's Kitchen,Long Island City,Madison Square Garden,Convention Area,Midtown East,Midtown West,Times Square,Theatre District,Upper East Side,Upper West Side” b). When City=”Boston, MA” AreaString=”Boston Harbor Front,Aquarium,Boston Waterfront,Convention Center,Brighton,Brookline,Cambridge,Copley Square,Theatre District,Fenway Park,Medford,Somerville,North Cambridge,Arlington,Quincy Market,Faneuil Hall,Financial,Revere,Logan Airport (BOS),South Boston” Click “Continue” III. The 2nd page looks as following: SEE ATTACHED [login to view URL] file Fig2. a). Center the radius at the “City, State” coordinate obtained from Google with a default radius of 5 miles if no radius is entered. b). Use the following logic to convert the AreaString into the AreaMarkers (flags on the map): If AreaString[x], State is present at the *.csv file with the table of all US cities (see p.7 included included [login to view URL]) Then AreaMarker[x] = string “AreaString[x], State” If AreaString[x], State is NOT present at the *.csv file Then AreaMarker[x] = string “AreaString[x],City,State” This is done to correctly position the flags on the map because there will be some small cities at the AreaList like Cambridge, MA. And it will be wrong to call it Cambridge, Boston, MA from Google Maps. c). Display all the AreaMarker[x] using google API on the map (see flags on the Fig2) and as a CheckBoxList (standard control from VWD Express 2010) d). When the flag marker within the radius it should change its color e). When the flag marker within the radius the corresponding area from the CheckBoxList should be selected and the background color for the line should be changed. f). User should have an option to adjust the position and the size of the radius on the map (see Requirements p.5 for the examples) g). When the mouse cursor is over the flag, the name of the zone should show up (see Requirements p.5 for examples) h). The radius of the zone should be visible as a number (example at Requirements p.5) i). User should not be able to make the radius more than 50 miles (example at Requirements p.5) SEE ATTACHED [login to view URL] file Fig3 IV. As shown above, the 3rd page is a confirmation page which displays a list of selected areas. The “Go Back” and “Continue” buttons should keep the state and provide navigation. “Go Back” means go back one step. After clicking “Continue” on the 3rd page a label with a list of selected areas should be shown as a string SelectedAreasList. Requirements for the CirclePolygon User Interface project 1. The web site project should be made in ASP.NET 4 using Visual Web Developer 2010 Express (you can download it for free here: [login to view URL]) 2. Programming language to use: C# for the server side and Javascript with Google Maps API V.3 for the client side 3. Every line of code should be explained with detailed and clear comments in English. If a function has many parameters, a description of all parameters of the function should be provided in the comments. 4. The project should be made in a way so its easy to include into an existing project. An explanation on what file does what and how to include the project into another project (e.g. how to modify [login to view URL] file, etc.) should be provided. 5. For the map user interface utilize the sample project at [login to view URL] . An additional example is located here: [login to view URL] 6. For an easy way to exchange variables between javascript and ASP.NET (C#) take a look at the following discussions: a. [login to view URL] b. [login to view URL] c. [login to view URL] 7. The AutocompleteCityState menu using jQuery is included as an ASP.NET project (see [login to view URL] and [login to view URL] files). The AutocompleteCityState menu should show a list of cities with state, separated by comma, after the 3rd letter entered by a user. If more than 10 cities at the *.csv file have the same first three letters only first ten should be shown. 8. For the Drag and Extend icons located at the middle and on the periphery of the CirclePolygon use something like the following icon: Drag and Extend: [login to view URL] 9. The web-site should run smoothly without significant delays on all major browsers. 10. The time limit for the development is maximum 2 weeks (should take 3-4 days for a professional). 11. Payment as a lump sum as soon as the web-site is tested on my computer.