Videx map

A leaflet layer for visualizing wellbore related data.

• GitHub Repository
• Documentation

Installation

npm install --save @equinor/videx-map
Copy

Usage

// ES6
import { WellboreModule, FaultlineModule, FieldModule, GeoJSONModule, OutlineModule } from '@equinor/videx-map';
Copy

Modules

Videx map is divided into various modules with specific purposes. These modules can be used individually or combined into a single WebGL context.

Wellbore Module

Module responsible for visualizing wellbores with roots and paths.

Configurations

• scale - Relative scale of everything. (Default: 1.0)
• labelScale - Scale of labels. (Default: 0.011)
• labelBgOpacity - Opacity of label background. (Default: 0.5)
• fontSize - Size of font. (Default: 18)
• batchSize - Amount of wellbores per batch. (Default: 20)
• zoomOrigin - Origin zoom level, i.e. where input for scaling function is 0. (Default: 0)
• customEventHandler - Provide your custom event handler.
• scaling - Zoom event handler.
• gridSize - Grid size to control resolution of spatial indexing.
• wellboreResize - Resize configurations of wellbores.
• rootResize - Resize configurations of roots.
• wellboreDash - Size of wellbore dash. (Default: 0.01)
• tick - Object { width, height } for tick marks along wellbore lines.
• onWellboreClick - Function to be called when a wellbore is selected.
• onHighlightOn - Function to be called when wellbores are highlighted.
• onHighlightOff - Function to be called when highlight is removed.

// Example configuration
const wellbores: WellboreModule = new WellboreModule({
  rootRadius: 0.3,
  scale: 1.5,
  labelBgOpacity: 0.2,
  zoomOrigin: 0,
  scaling: zoom => factors[zoom] || 0,
  rootResize: {
    base: 1.75,
    multiplier: 0.5,
    zoomReference: 12.0,
  },
  onHighlightOn: event => {
    // Special 'HighlightOn' logic ...
  },
  onHighlightOff: () => {
    // Special 'HighlightOff' logic ...
  },
  onWellboreClick: wellbore => {
    // Special 'WellboreClick' logic ...
  }
});
Copy

Field Module

Module responsible for visualizing oil and gas fields with filled polygons, outlines, and labels.

Configurations

• initialHash - Initial scale of field hash pattern. (Default: 1.0)
• minHash - Minimum scale of field hash pattern. (Default: 0.0)
• maxHash - Maximum scale of field hash pattern. (Default: Infinity)

// Example configuration
const fields: FieldModule = new FieldModule({
  initialHash: 0.5,
  minHash: 0.1,
  maxHash: 2.0,
});
Copy

Faultline Module

Module responsible for visualizing faultlines on fields.

• color - Color of faultline on format 0xRRGGBB. (Default: 0x727D88)
• alpha - Alpha of faultlines. (Default: 1.0)
• outlineWidth - Width of outline. (Default: 0.125)

// Example configuration
const faultlines: FaultlineModule = new FaultlineModule({
  color: 0xFF00FF,
  alpha: 0.75,
  outlineWidth: 0.13,
});
Copy

GeoJSON Module

Module responsible for visualizing arbitrary GeoJSON data, supporting Point, LineString, Polygon, and MultiPolygon geometry types.

Configurations

• customEventHandler - Provide your custom event handler.
• onFeatureHover - Function called when a feature is hovered.
• outlineResize - Resize configuration for outlines.
• labelResize - Resize configuration for labels.

// Example usage
const geojson: GeoJSONModule = new GeoJSONModule({
  onFeatureHover: (event, data) => {
    // Handle hover ...
  },
});

// Pass a GeoJSON FeatureCollection and an optional props mapper
geojson.set(featureCollection, feature => ({
  id: feature.properties.id,
  label: feature.properties.name,
  style: {
    lineColor: '#FF0000',
    lineWidth: 2,
    fillColor: '#00FF00',
    fillOpacity: 0.5,
  },
}));
Copy

Outline Module

Module responsible for visualizing field outlines.

• zoomOrigin - Origin zoom level, i.e. where input for scaling function is 0. (Default: 0)
• lineWidth - Width of line. (Default: 0.125)
• scaling - Zoom event handler.

// Example configuration
const outlines: OutlineModule = new OutlineModule({
  zoomOrigin: 12,
  lineWidth: 0.1,
  scaling: zoom => (1.5 ** -zoom),
});
Copy

Contribution

We greatly appreciate contributions to this repository, see our contribution page on how to get started.

Quick start

$ git clone https://github.com/equinor/videx-map.git
$ npm install
$ npm start
Copy