Skip to content

Map Component

Jump to bottom
alexandruandrei91 edited this page Jan 22, 2021 · 23 revisions

Introduction

Epic #251

Requirements

  • Layers (most (all?) layers should support tiling)
    • Color map based on a 2d array + a color scale
      • Manipulate the color scale on the frontend
      • Save the changed colorscale back to the backend (?)
      • Select from multiple 2d arrays as the source for coloring
    • Heightmap based on a 2d array (usually depth information)
      • Source data can be the same or different from the color map source
      • Dynamic: can modify light source parameters on the fly: position, intensity etc
    • Contours
      • Either precomputed on the backend or calculated on the fly on the frontend from elevation data (?)
      • LOD support: display more contours when you zoom in, less when you zoom out
      • Text on the contour lines (elevation step)
    • Symbols from position and symbol type (eg. wellheads)
      • Don't overlap when there's too many in one place
      • Text might be associated with symbols
      • Picking/selecting support
      • Styling (color, size, ...)
    • Text layer (text at position)
      • Don't overlap when there's too many in one place
      • Styling (color, size, font, ...)
    • Image layer (similar to symbols and text) to display an image as is on the map at a position
    • 2D geometry - polylines, polygons, circles etc (eg. well trajectories, faults etc)
      • Picking/selecting support
      • Support both zoom dependent and independent (?)
      • Styling (color, size, ...)
    • 3D geometry - arbitrary meshes positioned on the map (eg. faults) (?)
      • same as 2D geometry
    • Custom drawing - points, polylines, polygons, etc
      • Send selected information back to the backend
    • Charts at certain positions on the map, aggregating data (?)
      • Scatterplot, heatmap, column chart etc
    • Update/add/remove individual layers (guess this is handled by React/Redux state)?
  • Interactivity
    • Synchronize zoom and position in multiple map components
    • Synchronize mouse cursor in multiple map components

Technology choices

Comparison between Leaflet and DeckGL

Notes:

  • The comparison is somewhat biased towards DeckGL since lately I've been looking more into it.
  • It's not really comparing apples to apples since Leaflet is marketed as a library for interactive maps, while DeckGL is marketed as a more generic layered data analysis platform with more features for map visualizations.
  • Whichever technology we end up choosing, we will probably have to develop most of the layers ourselves anyway.

Leaflet:

  • Pros
    • MIT License
    • Already used in Equinor
    • More widely used
    • Loads of plugins, listed on their website
      Though many of them are not actively developed
    • Easy to extend
  • Cons
    • Not very active development
      Last commit, on the 10th of Jan, the one before that on the 13th of December.
    • Based on HTML5/CSS, not WebGL
      Can have WebGL Layers
    • No official react component
  • Other notes
    • Not backed by a company, mainly supported by the community

DeckGL:

  • Pros
    • MIT License
    • Actively developed
      16 commits on the 17th of Jan, another 16 on the 10th.
    • Based on WebGL
    • Officially supported React component
    • JSON format for specifying maps
    • Official Python bindings (PyDeck)
    • Easy to extend with custom layers
    • Better out-of-the-box support for 3D data
    • Layers for charts (scatterplots, heatmaps etc)
  • Cons
    • Not a lot of plugins, no easy way or discovering plugins
    • Newer, so less used
      This means fewer examples/answers/discussions
    • Although not dependent on MapBox, it is the best supported basemap provider.
  • Other notes

...

Clone this wiki locally