WCS Map Component

Description

The WCS Map Component is a React component that provides a map interface for displaying and interacting with data from the WCS. The component is built using the ArcGIS Maps SDK for JavaScript and provides a variety of features for interacting with the map and the data displayed on it. It is intended to be included as a library in other projects and used to interact with the WCS's CMS.

Development began on this project in Q2 2022 and is ongoing, with new feature being released periodically at the request of the WCS's Convservation Technology team. The project is developed and maintained by ICA and is intended to be used exclusively by the WCS.

Features

For a detailed list of features, see the official documentation.

Git Branching Strategy

The project uses the following branching strategy:

• main - The main branch where the source code of HEAD always reflects a production-ready state. This branch is used for deployment to npm and the live demo site.
• develop - The default branch where the source code of HEAD always reflects a state with the latest delivered development changes for the next release. This branch is used for deployment to the QA environment.
• feat/feature-name - Feature branches are used to develop new features for the upcoming or a distant future release. When starting development on a feature, the branch is created from the develop branch. Feature branches should be merged back into the develop branch when the feature is complete using a pull request. Use of rebase is mandatory for merging feature branches.
• fix/fix-name - Bugfix branches are used to fix bugs from the develop or main branch. When starting development on a bugfix, the branch is created from the corresponding branch. Bugfix branches should be merged back into the origin branch when the fix is complete using a pull request. Use of rebase is mandatory for merging bugfix branches.

Code Style

The project uses ESLint and Prettier for code style and formatting. The configuration is based on the Airbnb style guide. The project uses Husky and Lint-Staged to run ESLint and Prettier on staged files before committing.

Testing

Testing for this project is done manually. Automated testing is not implemented at this time. There is a QA environment where the project is deployed for testing. There are custom events that can be triggered from the browser console to test the different features of the map component.

Deployment

The project is deployed to npm as a library manually when a new version is ready for release. The project is deployed to the QA environment as a standalone site using the library automatically using Azure Pipelines when changes are merged into the develop branch. The QA environment is hosted on an Azure App Service.

Dependencies

• Node.js
• npm
• Docker (optional)
• React
• ArcGIS Maps SDK for JavaScript
• Mantine
• DndKit
• Redux Toolkit
• Vite

Usage

Installation and running locally

1. Clone the repository
2. Run npm install
3. Run npm run dev
4. Open http://localhost:5173 in your browser.

Build library for release

1. Update the version in package.json and in the codebase.
2. Run npm run build
3. Run npm publish

Build for QA testing

1. Run npm run build:qa
2. Run npm run serve

Building and running in Docker

1. Run docker build -t wcsmap .
2. Run docker run -p 80:80 wcsmap
3. Open http://localhost in your browser.

License

This project is licensed to the Wildlife Conservation Society under the terms of its contract with ICA. Unauthorized use, reproduction, or distribution is strictly prohibited.

Developers

• Principal Developer & Project Manager: Mauricio Barrera
• Developer: Juan Pablo Rubio
• Developer: Sebastián Pandolfi