Frontend - OurPlanscape/Planscape GitHub Wiki

Infrastructure

The frontend uses Angular and TypeScript. Angular was chosen over other frameworks like React and Flutter due to it being the more opinionated framework.

Libraries

The following libraries are utilized by Planscape frontend:

  • Leaflet Geoman: An updated LeafletJS plugin for using interactive maps, drawing, and editing geometry layers. Mostly used for the drawing capabilities because Leaflet.Draw hasn't been updated for years.
  • Leaflet: Open source JS library for building web mapping applications.
  • Leaflet Sync: To sync the multiple maps in the explore map view.
  • Turf JS: For geospatial calculations
  • Shapefile JS: For converting shapefile to geoJSON

Testing

  • Karma: Angular test runner
  • Jasmine: Behavior-driven development framework for testing JavaScript code

Project Structure

Getting Started

Installing Angular

Either instructions at Development Getting Started or alternatively follow these steps to setup Angular.

Install with npm package manager from a terminal window

npm install -g @angular/cli

Development

To build and serve the app on localhost:4200, rebuilding on file changes:

ng serve

Testing

To run unit tests, run:

ng test

"f" can be appended to any describe block ("fdescribe") to focus on specific tests when running the tests.

Linting and code styles

We use ESLint and Prettier for code formatting and linting. The configuration files can be found on src/interface/.eslintrc.json and src/interface/.prettierrc.

To lint and format your code you can run

To check for errors you can run on your terminal:

npm run lint

To fix lint and format automatically

npm run lint:fix

Additionally this can be configured to be run at save in your IDE/Editor. Here is a guide on how to do it on VScode or Webstorm.

Design (as of 3/22/23)

Components

Services

An Angular service broadly encompasses any value, function, or feature that the app needs. Our services make calls to the backend, store state of the application (such as the current user, which region is selected, and which plan is currently being viewed), and share data between components. The frontend communicates with the backend using the Backend APIs. These methods live in the the services (../Planscape/src/interface/src/app/services)

Modules