Challenge Overview
This challenge aims to build out the map functionality of the new PVComplete Mapping Application. This new web application seeks to streamline the most time consuming tasks in commercial rooftop solar panel project design. The general map functionality involves drawing polylines and data entry of some values that will output a JSON string format.
Final Submission Guidelines
The goal of this challenge is to create the required map functionality of able to create and identity/label multiple boxes, be able to edit, move, or delete these polygons, and to output a JSON strings somewhere in your application.
Currently, we don't have any UI storyboard to follow, what we need right now is like a proof of concept to show the required map functionality outlined below and eventually use the outcome of this challenge in the next UI Prototype challenge.
Detailed Requirements:
The following items below are the required features that we must have, a detailed idea of what we need can be viewed at https://www.youtube.com/watch?v=mTRnPfE7JpU&feature=youtu.be
1) Map:
- Embed a map using Google Maps.
- User should be able to enter a street address address - the system should zoom to this address.
- Has the ability to zoom in/out.
2) Draw:
- User should be able to draw an object on a top of a map.
- These object can be a rectangular box, a circular object, or manually draw a line to form a polygon shape based on the object of the roof.
- Identify these type of the shape/object.
- There will be 3 types of object: roof, installation area, and obstructions.
- Obstruction objects need to specify a height and setback value. A setback value is the space around the obstruction that is essential for the maintenance crew so that they can work on it. This is usually 3 ft around all sides.
- Selection - identify an object by a click on a screen, highlight it and display associated metadata (object type, height, setback)
3) JSON Output:
- The following is an example of JSON format that must be displayed somewhere in your application.
- The values will be based on the objects you put/draw in the map.
- Latitude and longitude are based on the center of the map.
- Get the state and country values by reverse geocoding.
- We can assume that the center of the map is point 0,0 and this will serve as our point of origin of our coordinate system to get the vertices value.
- These vertices are distance between the point of origin to the polygon points, the end values should be converted into Feet unit.
{
"address": {
"street":"234 2nd street",
"city": "Sacramento",
"state": "CA",
"country": "UNITED STATES",
"latitude": "37.808934",
"longitude": "-122.251853"
},
"objects": [
{
"type": "roof",
"vertices": [
{
"x": 1.5,
"y": 20.9
},
{
"x": 3.5,
"y": 20
},
{
"x": 12.5,
"y": 203.9
},
{
"x": 1.5,
"y": 20.9
}
],
"properties": []
},
{
"type": "installationArea",
"vertices": [
{
"x": 1.5,
"y": 20.9
},
{
"x": 3.5,
"y": 20
},
{
"x": 12.5,
"y": 203.9
},
{
"x": 1.5,
"y": 20.9
}
],
"properties": []
},
{
"type": "obstruction",
"vertices": [
{
"x": 1.5,
"y": 20.9
},
{
"x": 3.5,
"y": 20
},
{
"x": 12.5,
"y": 203.9
},
{
"x": 1.5,
"y": 20.9
}
],
"properties": {
"height": 15,
"setback": 12
}
}
]
}
Ask early in the challenge forum if you have any question regarding the challenge requirements.
Some reference:
https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
https://developers.google.com/maps/documentation/javascript/overlays#drawing_tools
https://developers.google.com/maps/documentation/javascript/geometry
http://www.abidibo.net/projects/js/moomapdrawer/demo/
http://www.birdtheme.org/useful/v3tool.html
Code Requirements:
HTML
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS
- This challenge doesn't required any CSS code, but to make your page presentable, you may use minimal style.
Javascript
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- We recommend to use AngularJS whenever possible.
Browser Compatibility:
- IE9+
- Latest Google Chrome
- Latest Safari
- Latest Firefox
- iPad
Final Submission Guidelines:
- Source code
- Deployment guide
- Host the solution so that its workings can be verified and provide access to the host