Challenge Overview
# Project Overview
URGON provide Geospatial data reports to clients. Requests are fulfilled on an ad-hoc basis using an internal web application. The objective of this project is to build a web enabled frontend for the platform that can be used as a self-service portal by URGOT clients.
This is a 72hrs challenge, with a 24hrs review timeline only.
# Challenge Overview
In this challenge we are going to complete the conversion by integrating and implementing the interactions with related google maps APIs.
# Code Base
https://gitlab.com/topcoder-consulting/geogentia-goespacial-analysis-platform/react-app
Request access in challenge forums.
Use ���ui-part-2��� branch as base for your work.
# Design Assets
Provided in challenge forums - Figma link.
# Tech Stack
* NodeJS
* ReactJS
* Typescript
* Yarn
* Google Maps JS API
# Challenge Requirements
The following is part of the search page implemented in challenge part 2.
Previous of the search page (It involves google maps in background and all popups/panels in the page)
https://www.figma.com/proto/N9ffWNqNLHSlQnHcTrTNFr/Geospatial-Analysis-FF-and-Task?node-id=159%3A1448&scaling=min-zoom&page-id=0%3A1
## General Notes
- DM copilot over email or on slack or discord to get google maps api key
- You will use google maps js sdk to integrate with google maps
## Google Maps Interaction
### Google Maps
- Integrate the google maps, so first thing to load once you open the search page is google maps in background
- Default location to Neywork for now
### Auto Complete
Ref: https://www.figma.com/proto/N9ffWNqNLHSlQnHcTrTNFr/Geospatial-Analysis-FF-and-Task?node-id=166%3A2096&scaling=min-zoom&page-id=0%3A1
- This will be using Places API
### Add Location By Type
Ref: https://www.figma.com/proto/N9ffWNqNLHSlQnHcTrTNFr/Geospatial-Analysis-FF-and-Task?node-id=166%3A2476&scaling=min-zoom&page-id=0%3A1
- User can select Radius or Polygon to select area in the google maps area
- When selecting Radius, user can perform following
- Set the radius in the input field, and google maps will draw a circle using center of the google map location set in the auto complete field
- For Polygon, the app should draw an initial square shape around the area and enable editing shape to be dragged so user can shape any polygon user wants https://developers.google.com/maps/documentation/javascript/shapes#user-editable
- Right side icons there is an icon to draw shape and another icon to delete it, so this should be enabled so user can redraw the shape if they want
### Location with Data Integrations
Ref: https://www.figma.com/proto/N9ffWNqNLHSlQnHcTrTNFr/Geospatial-Analysis-FF-and-Task?node-id=166%3A2869&scaling=min-zoom&page-id=0%3A1
- Clicking ���eye��� icon will take user to view the list of locations along with google maps showing clustered data or markers depends on the zoom level
- This how it looks like https://www.figma.com/proto/N9ffWNqNLHSlQnHcTrTNFr/Geospatial-Analysis-FF-and-Task?node-id=172%3A3282&scaling=min-zoom&page-id=0%3A1
- Clustering should be implemented for Zooming in/out https://www.figma.com/proto/N9ffWNqNLHSlQnHcTrTNFr/Geospatial-Analysis-FF-and-Task?node-id=173%3A1337&scaling=min-zoom&page-id=0%3A1
- Link the info popup we implemented in part two with clicking on marker https://www.figma.com/proto/N9ffWNqNLHSlQnHcTrTNFr/Geospatial-Analysis-FF-and-Task?node-id=180%3A4741&scaling=min-zoom&page-id=0%3A1
- Location vs. IPs have different market colors as shown in design
## Google Maps Icons
All google maps icons on the right side area should be implemented.
# Submission Guideline
- Upload all source code with the .git folder with all requirements in a zip file to the Online Review tool.
- Include note text file if there is any guideline to follow to review and validate your work
- Include validation doc for your work (with screenshots)
- Would be plus to include heroku app link for your work