Map Component Design

Scope: 

DST - (Selector, N-Calc, Seed-calc, Econ)

By:

Milad A.

Intro

Mapping and visualization of geospatial data is amongst important features in an agricultural decision making web app. This document serves as a reference for design of the map elements, the sharing mechanism between other modules, choice of technology and potential improvements along the road of development. 

Component Condition (as of Nov 1st)

Currently the mapping and all interactions around it are handled by leaflet.js package. Each project has a custom built piece of map with different appearances amongst other projects. While some provide selection of region capabilities and area calculation, the others lack such interactive functionalities and hence create inconsistency between react components on a project-wide scope.

This leads us to create a single modular react component that can be used in every web app development in our team.

Choice of Technology

There are two powerful choices of mapping packages that are compatible with React framework.

1. Mapbox GL JS : Mapbox is a great light weight choice for 2D visualization of vector and raster data.

   1. Pros:

      1. light weight

      2. variety of free/paid basemaps selections to use

   2. Cons:

      1. Not optimized to handle large data

1. Deck GL : Deck.gl is a vis tool created by Uber which is a great choice for 2D and 3D vis handling very large amounts of data. This tool takes advantage of client’s GPU power to facilitate the vis using machine level shader code such as WebGL.

   1. Pros:

      1. not too heavy but heavier than mapbox

      2. uses mapbox basemaps

      3. 3D enabled and big data vis

      4. use of low-level shaders code to create incredibly creative layers beyond points, lines and polygons

   2. Cons:

      1. more complicated code syntax