Map Component Design

Owned by Mikah Pinegar
Last updated: Nov 03, 2022 by Milad Aghamohamadnia (Unlicensed)
2 min read

 

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

    3. enables third-party layers to draw into the same WebGL context

  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 GLSL shaders code to create incredibly creative layers beyond points, lines and polygons

    1. Cons:

      1. more complicated code syntax

      2. depends on mapbox for basemap

 

Design of map component

#-> How it needs to look like?

  • a single box on the corner? (loc) : dynamic

  • entire background of the page? (size) : dynamic inputs

  • collapsable? dynamic (optional)

 

#-> What it needs to show?

  • different basemaps? not for now. satellite view only

  • land parcels in color? polygons selected by users are colored

  • external raster data? not

 

#-> What it needs to do?

  • draw point, circle, polygon and rectangle ? a point button, a poly button and a clear button

  • draw multiple shape at the same time ? yes

  • calc area, perimeter etc? area