Register
Submit a solution
Status: ‌Cancelled failed review

Challenge Overview

Welcome to the CROWD FOR GOOD - YERC - EPIIC Map View. Topcoder and YERC (Yellowstone Ecological Research Center) are working together to create a new platform to monitor, understand, and improve the health of our planet’s ecosystems called EPIIC (Ecosystem Prognosis Impacts Information Cooperative). This collaboration is part of the "Crowd for Good" initiative (Topcoder's non-profit program) and we are inviting all Topcoder Developers to join and take part in this project to create a better future for our environment.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Grand Prizes

  • 3 Yellowstone Guided Tour Packages (travel not included)
  • 5 Yellowstone Virtual Ecological Workshops 

These prizes will be awarded at the conclusion of the project to the Topcoder members who have accumulated the most wins in the series. Check the leaderboard here.

Challenge Prizes

This challenge is a part of the "Crowd for Good” program. While typically these challenges don't have cash prizes, we are offering cash prizes for this and a few other specific challenges in order to build momentum around specific parts of the project.
  • 1st Place: $600
  • 2nd Place: $300

In addition, we have the following prizes for members that participate in the challenge:
  • YERC Topcoder Points that can be collected in this challenge series to get the GRAND PRIZES once the project complete
  • YERC swag (hats and maps) for the top 2 winners
  • Topcoder TCO21 Points
  • Every member whose submission used in the EPIIC platform will get credited on the final platform product in a credits page
  • Every member whose submission used in the EPIIC platform will get a certificate of participation from YERC and Topcoder

Project Background:

This platform, called EPIIC (Ecosystem Prognosis, Impacts, and Information Cooperative), will be an open-source, collaborative effort built on scalable, cloud-based services, to be used by people around the world to help ecosystems around the world in need of protection and restoration.

For this initiative to succeed, it will require lots of data in a timely manner, a robust cloud-based infrastructure, and enthusiastic users of the data who will participate in modeling complex ecological systems
More information about this project background can be found from the following link: https://www.topcoder.com/community/member-programs/crowd-for-good/yerc/info

User Story:

As a member of EPIIC I want to be able to access, view, and monitor the datasets I have subscribed to.  Is important for app to be mobile friendly, that I can use a mobile device to view the dashboard without too much difficulty.  I want to know where the data is coming from (trusted source?).  Who was involved in obtaining the data?  Can I find its source?  How can I better trust it?  Most importantly, I need to understand it and have easy access to it.  I don’t want really old data that I wasn’t involved in collecting and I don’t really need forecasts about future decades.  I like to have those especially short-term historical trends (last week, last year, last decade) but much prefer real-time, near real-time, and short-term forecast data on things I need to know about because I make decisions daily but also have to plan things for next week and next season.  Planning tools that work are much preferred.  Using a map-based interface that I can operate with little or no training is best.  I want to be able to see summaries and access simple tools to see past trends and current conditions.  That will help me.  I also want to be able to view any short-term forecasts associated with the datasets I am subscribed to.  After I login to the application, I envision the following characteristics for the Map View tab of the dashboard.

General Requirements:

In this challenge we are looking for your help to implement the Google Maps to Map View in Dashboard.

Assets:

  • Design: https://marvelapp.com/prototype/9d1b331/screen/76878943 
  • ArcGis Map demo (functionally reference only): https://arcg.is/0yrHyX
    • The solution needs to reflect the screen layout of the ArcGIS demo.
  • Sample data is provided in the YERC mock server
    • mapobjects.json provides the GIS data for the map:  polygons and point locations.  The map objects where usage = ‘group’ is used to determine the layers available for display and which mapobjects are defined for those layers.  Only the mapobjects that are within the boundary of the group polygon will be returned by the API
    • dataobjects.json provides the data for individual mapobjects that can be viewed or visualized.

1) Map View
2) Layers
  • The map section will consist of a map overlaid with the polygons and point markers representing data I have access to. One or more map features (polygons, point markers, image overlays, etc.) will be grouped together into pre-defined layers.
  • When a layer is visible, all the features for the datasets I have subscribed to that are located with the area outlined by the polygon, will also be displayed.
    • Each dataset related with selected layer will show up in visualizations tabs
  • Need able to change which layers are visible
    • This is done by licking on this layers icon on the top right of the map in the ArcGis map demo as seen in this screenshot:
  • For example, using the ArcGIS demo select the Grazing Layer to display it.  Notice the colors changing for the paddocks/fields based on data values.  Also, if you click on a paddock/field, the grazing data is displayed.

3) Map Features
Assets/Design
Important:
  • You can use the latest ReactJs
  • Target devices:
    • Desktop
    • Tablet - We don’t have a specific design for tablets. Follow the best practices to make the app responsive.
    • Mobile - We don’t have a specific design for mobile. Follow the best practices to make the app responsive. 
  • Components must be re-usable. The component should be derived based on the configuration.  Configuration file to contain the required configurations required to render the page. So DON’T just copy-paste code block, always reuse and change just what is needed)
  • Use Linter, Jest, and other best practice libraries to maintain your code quality.
  • Your submission must follow Best Practices, please take a look at React Docs.
  • Put clear comment/documentation for all components
  • Create a README.txt file that explains how to deploy your submission, structure, and commands
  • Create clear documentation to set up your submission locally

Specific HTML/CSS/JavaScript Requirements:
HTML/HTML5:
  • Provide comments on the page elements to give a 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 on your reason for any validation errors. Use the validators listed on the scorecard.

CSS3
  • Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
  • Please use clean INDENTATION for all CSS so developers can follow the code.
  • All CSS naming should not have any conflicts.
  • As possible use CSS3 style when creating all styling.
  • Use CSS to space out objects, not clear/transparent images (GIFs or PNGs), and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.

Javascript
  • All JavaScript used must not have any copyrights to any 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.
  • It is fine to use GPL/MIT/Open Source code. 
  • 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.

Images
  • Images should be properly compressed while still having good visual quality.
  • Please use best practice repetition usage of background based images.
  • Please use sprites when using icons for your submission.
  • Make sure your submission look sharp for Retina and Standard devices
  • Wherever it makes sense, you can use icon fonts instead of images.

Web Browsers Requirements
  • Microsoft Edge
  • Firefox latest version
  • Safari latest version
  • Chrome latest version


Final Submission Guidelines

  • Submit a git patch
  • Make sure to mention the exact commits so we can apply your patch file.
  • The winner must create a PR against our repos.

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30168799