Skip to content

Map Component

Jump to bottom
Knut Midtveit edited this page Oct 25, 2021 · 23 revisions

Introduction

Link to Github Epic #251

Input data

Layers

Colormap and hillshading

Wells

Faults

Pie Chart

Drawing

  • Nebula.GL is used for the drawing layer, which in turn uses GeoJSON for the drawn elements.

Reservoir

  • User stories
    • Render grid cells
    • Render grid properties as colors
    • Render continuous and discrete parameters
    • Select which layer to render
      • Efficiently scroll through layers
    • Select a time instance of a property
      • Efficiently scroll through time instances
    • Select which property to render
    • Apply a color map to properties
    • Render LGR
    • Cell face transmissiblity (cell edge coloring)
    • Well completion property
    • Flow animation
      • Multiple phase animation
    • General use cases (not specific to reservoir layer)
      • Select realization
        • Efficiently scroll through instances
      • Cursor readout
        • Position X, Y, Z
        • Position I, J, K
        • Property value
      • Scale bar (show screen distance in units)
      • Color legend

Suggested milestones for map component

MS1 (similar features as Leaflet map component)

  • Property maps, drawing order, transparency
  • Z layer shading, One light source position
  • Well trajectories colored lines, line with specified with
  • Drawing Polylines (User edit)
  • X,Y and property readout

MS2

  • Well logs or completions color the trajectory (line), Drawing order supported, Discrete and scalar logs, color table support transparency
  • Depth thickmark (major, minor) with label on trajectory line or at angle
  • Well name and symbol placed at top, bottom, @MD
  • Pie charts for Production rates and other
  • Well name, MD, TVD, X, Y readout

MS3

  • Realisation selector, avg, sum, etc as backend support (should be generic shared component)
  • Color scale selector, editor (shared component)
  • Backend map service (performance optimized support level of detail, tiling etc...)

MS4

  • Multiple log tracks, trajectory track
  • Fault polygons filled and hanging wall footwall symbols
  • Well name follow trajectory, printed every X MD meters, from MD to MD
  • Time selector for map as backend support ##MS5
  • Display log tracks for near vertical wells, positioned @X,Y, From MD to MD, track scaling, Depth scaling

General Requirements for map component

  • 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