Challenge Overview

You are provided with a simple ASP.NET MVC Application, it has a login and register functionality implemented.

We would like to integrate a portion of one of the sunshot catalyst resources called PVWatts Calculator into the solution.

Challenge Requirement

You are updating the homepage in current .NET solution as follow :

Add a form for the user to input their full address and a button they can press on to "Submit".
- The address value is similar to the address used in google geolocation service that converts the address to lat/lon.
After pressing this submit button the user will see a validation error if the input is not a valid address.
- You can use google maps api service to validate the address (is that valid assumption?)
Use this PVWatts API to retrieve the climate data. We are only interested in the first weather data from the returned list from the API.
Render a Google map below the address form with a pin/marker of the user address dropped in the map.
- It should be in “Satellite” imagery mode so user can see her building roof.
- Add a button("Calculate Usage") below the map.
- Scroll the page so that the map is centered and “Calculate Usage” button is visible to user.
Display a popup in top of the google map to show user how “Draw Your System”.
- Refer to this page. It is a built-in PVWatts calculator, insert a US zip code for a residential address, then click on “System Info” tab. You will see a screenshot like this one.
- Click on the google map thumbnail in above screenshot will open up a google map with a custom layer showing how to “Draw a System”. What you are going to do is to show similar popup in top of the google map we are rendering in the homepage to tell user how to draw their system. If you cannot show the popup when user click on the map, you can add link top right corner of the map with label "How to draw system?" to show the popup.
  - Add option to user to set this pop out not to appear again by checking a "Got it! Not show this message again" checkbox.
Add ability for Users then will draw their system, same as done in PVWatts draw my system page referenced above.
- To understand how to draw a polygon and calculate system capacity you can refer to measureAdd and measureCalc in maps.js file in pvwatts calculator page http://pvwatts.nrel.gov/pvwatts.php
Users can press on "Calculate Usage" to get detailed results as to how much the system will generate and cost each month at the bottom of the page.
- This API will be used to calculate usage.
- We are replicating how user can see the results in “Results” tab in this page http://pvwatts.nrel.gov/pvwatts.php .
- The variable API request parameters we will pass to this api :
  - address (entered by user)
  - the first climate data id, will be passed in file_id.
  - system capacity calculated from drawn system in the map.
    - To calculate this value you can refer to the JS function (measureCalc) in http://pvwatts.nrel.gov/pvwatts.php .
- For this functionality, we will store the default values of the API request parameters to be used in the calculation in configurations. The request parameters we will configured are :
  - api_key
  - system_capacity
  - module_type
  - losses
  - array_type
  - tilt
  - azimuth
  - timeframe
  - dc_ac_ratio
  - gcr
  - inv_eff
- Other fields needed by the API not listed above are not needed.
- For the configured request parameters default values you can use the values set under System Info tab in PVWatts calculator page http://pvwatts.nrel.gov/pvwatts.php
Render the response of the API below the google maps with same structure as in “Results” tab in PVWatts calculator page.
- The structure should match the pvwatts results structure :
  - yearly result
  - monthly result
  - location info
  - PV system spec
  - Initial economic comparison
- Add a button “Reset” to clear/hide the calculation result output and take user to address form (add focus on the address field).