Core library for deck.gl WebGL2/WebGPU-powered visualization framework providing fundamental classes for high-performance data visualization
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Comprehensive coordinate system support and essential constants for spatial data visualization, enabling flexible data representation across different geographic and cartesian coordinate systems.
Enumeration defining coordinate systems for layer data interpretation.
/**
* Coordinate system enumeration
* Defines how layer data positions and dimensions are interpreted
*/
const COORDINATE_SYSTEM: {
/** Auto-detect based on viewport type (LNGLAT for geospatial, CARTESIAN otherwise) */
readonly DEFAULT: -1;
/** Cartesian coordinates - positions and dimensions in common space units */
readonly CARTESIAN: 0;
/** Longitude/latitude coordinates - [longitude, latitude, elevation] in degrees/meters */
readonly LNGLAT: 1;
/** Meter offsets - [x, y, z] in meter offsets from coordinate origin */
readonly METER_OFFSETS: 2;
/** Longitude/latitude offsets - [deltaLng, deltaLat, elevation] in degrees/meters from origin */
readonly LNGLAT_OFFSETS: 3;
};
type CoordinateSystem = -1 | 0 | 1 | 2 | 3;Usage Examples:
import { ScatterplotLayer, COORDINATE_SYSTEM } from "@deck.gl/core";
// Geographic data using longitude/latitude
const geoLayer = new ScatterplotLayer({
id: 'cities',
data: cityData,
getPosition: d => [d.longitude, d.latitude, 0],
getRadius: 50000, // 50km in meters
coordinateSystem: COORDINATE_SYSTEM.LNGLAT
});
// Local coordinate system for CAD/engineering data
const cadLayer = new ScatterplotLayer({
id: 'cad-points',
data: cadData,
getPosition: d => [d.x, d.y, d.z],
getRadius: 10, // 10 units in common space
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN
});
// Offset-based positioning from a reference point
const offsetLayer = new ScatterplotLayer({
id: 'sensor-data',
data: sensorData,
getPosition: d => [d.deltaX, d.deltaY, d.elevation],
coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
coordinateOrigin: [-122.4, 37.8, 0] // Reference point
});Unit enumeration for measurements and scaling.
/**
* Unit enumeration for measurements
* Defines the units for various measurements and calculations
*/
const UNIT: {
/** Common space units (viewport-dependent) */
readonly common: 0;
/** Meter units */
readonly meters: 1;
/** Pixel units */
readonly pixels: 2;
};
type Unit = 0 | 1 | 2;Usage Examples:
import { LineLayer, UNIT } from "@deck.gl/core";
// Line widths in different units
const roadLayer = new LineLayer({
id: 'roads',
data: roadData,
getSourcePosition: d => d.startCoord,
getTargetPosition: d => d.endCoord,
getWidth: d => d.widthInMeters,
widthUnits: UNIT.meters, // Width specified in meters
widthScale: 1
});
const pixelLineLayer = new LineLayer({
id: 'ui-lines',
data: uiData,
getSourcePosition: d => d.start,
getTargetPosition: d => d.end,
getWidth: 2,
widthUnits: UNIT.pixels, // Always 2 pixels wide
widthScale: 1
});Operation type enumeration for layer rendering modes.
/**
* Operation enumeration for layer rendering
* Defines different rendering operation types
*/
const OPERATION: {
/** Standard drawing operation */
readonly DRAW: "draw";
/** Masking operation (for clipping/stencil) */
readonly MASK: "mask";
/** Terrain rendering operation */
readonly TERRAIN: "terrain";
};
type Operation = "draw" | "mask" | "terrain";Usage Examples:
import { PolygonLayer, OPERATION } from "@deck.gl/core";
// Regular drawing
const buildingsLayer = new PolygonLayer({
id: 'buildings',
data: buildingData,
operation: OPERATION.DRAW
});
// Masking layer to clip other layers
const boundaryLayer = new PolygonLayer({
id: 'city-boundary',
data: boundaryData,
operation: OPERATION.MASK,
visible: false // Invisible mask
});
// Terrain-specific rendering
const terrainLayer = new PolygonLayer({
id: 'terrain',
data: terrainData,
operation: OPERATION.TERRAIN
});Built-in coordinate projection and unprojection utilities.
/**
* Project world coordinates to screen space
* Handles different coordinate systems and projections
* @param xyz - World coordinates [x, y, z]
* @param opts - Projection options
* @returns Screen coordinates [x, y, z]
*/
declare function projectPosition(
xyz: [number, number, number],
opts?: {
viewport?: Viewport;
coordinateSystem?: CoordinateSystem;
coordinateOrigin?: [number, number, number];
fromCoordinateSystem?: CoordinateSystem;
fromCoordinateOrigin?: [number, number, number];
}
): [number, number, number];
/**
* Get world position from common coordinates
* @param position - Position in common coordinate system
* @param opts - Transformation options
* @returns World coordinates
*/
declare function getWorldPosition(
position: [number, number, number],
opts?: {
viewport?: Viewport;
coordinateSystem?: CoordinateSystem;
coordinateOrigin?: [number, number, number];
fromCoordinateSystem?: CoordinateSystem;
fromCoordinateOrigin?: [number, number, number];
}
): [number, number, number];Usage Examples:
import { projectPosition, getWorldPosition } from "@deck.gl/core";
// Transform coordinates between systems
const transformCoordinates = (layer, viewport) => {
const data = layer.props.data;
const transformedData = data.map(d => {
// Project to common space
const commonPos = projectPosition(
[d.longitude, d.latitude, d.elevation],
{
viewport,
coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
coordinateOrigin: [0, 0, 0]
}
);
// Convert to meter offsets
const offsetPos = getWorldPosition(commonPos, {
viewport,
coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
coordinateOrigin: [-122.4, 37.8, 0]
});
return {
...d,
offsetPosition: offsetPos
};
});
return transformedData;
};Utilities for working with different coordinate systems.
interface CoordinateSystemUtils {
/** Convert between coordinate systems */
convertCoordinates(
coordinates: number[],
fromSystem: CoordinateSystem,
toSystem: CoordinateSystem,
opts?: {
viewport?: Viewport;
origin?: [number, number, number];
}
): number[];
/** Get appropriate coordinate system for viewport */
getDefaultCoordinateSystem(viewport: Viewport): CoordinateSystem;
/** Validate coordinate system compatibility */
isCompatible(
coordinateSystem: CoordinateSystem,
viewport: Viewport
): boolean;
/** Get coordinate bounds for system */
getCoordinateBounds(coordinateSystem: CoordinateSystem): {
min: [number, number, number];
max: [number, number, number];
};
}Support for various geographic coordinate reference systems.
interface GeographicCoordinateSystem {
/** WGS84 (World Geodetic System 1984) - Standard GPS coordinates */
WGS84: {
datum: "WGS84";
ellipsoid: "WGS84";
primeMeridian: 0;
units: "degrees";
};
/** Web Mercator (EPSG:3857) - Web mapping standard */
WEB_MERCATOR: {
datum: "WGS84";
projection: "Mercator";
centralMeridian: 0;
units: "meters";
};
/** UTM (Universal Transverse Mercator) zones */
UTM: {
getZone(longitude: number, latitude: number): number;
project(longitude: number, latitude: number, zone: number): [number, number];
unproject(x: number, y: number, zone: number): [number, number];
};
}Usage Examples:
// Working with different geographic coordinate systems
const gpsData = [
{id: 1, lat: 37.7749, lng: -122.4194}, // San Francisco
{id: 2, lat: 40.7128, lng: -74.0060}, // New York
{id: 3, lat: 51.5074, lng: -0.1278} // London
];
// Convert GPS coordinates to Web Mercator
const webMercatorData = gpsData.map(point => {
const [x, y] = geographic.WEB_MERCATOR.project(point.lng, point.lat);
return {
...point,
webMercatorX: x,
webMercatorY: y
};
});
// Create layer with proper coordinate system
const globalPointsLayer = new ScatterplotLayer({
id: 'global-points',
data: gpsData,
getPosition: d => [d.lng, d.lat, 0],
coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
getRadius: 100000, // 100km radius
radiusUnits: UNIT.meters
});Advanced coordinate origin and offset handling for precise positioning.
interface CoordinateOriginSystem {
/** Set global coordinate origin */
setOrigin(origin: [number, number, number]): void;
/** Get current coordinate origin */
getOrigin(): [number, number, number];
/** Transform coordinates relative to origin */
toOriginSpace(coordinates: [number, number, number]): [number, number, number];
/** Transform coordinates from origin space */
fromOriginSpace(coordinates: [number, number, number]): [number, number, number];
/** Calculate offset between two origins */
getOffset(
fromOrigin: [number, number, number],
toOrigin: [number, number, number]
): [number, number, number];
}Usage Examples:
// High-precision positioning with coordinate origins
const precisionLayer = new ScatterplotLayer({
id: 'precision-sensors',
data: sensorData,
// Use meter offsets for high precision
coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
// Set origin at sensor array center
coordinateOrigin: [-122.419416, 37.774929, 0],
// Positions are offsets in meters from origin
getPosition: d => [d.offsetX, d.offsetY, d.offsetZ],
// Radius in meters
getRadius: 1.0,
radiusUnits: UNIT.meters
});
// Multiple coordinate systems in one visualization
const multiSystemLayers = [
// Global reference layer (GPS coordinates)
new ScatterplotLayer({
id: 'cities',
data: cityData,
coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
getPosition: d => [d.longitude, d.latitude, 0],
getRadius: 50000
}),
// Local detail layer (meter offsets)
new ScatterplotLayer({
id: 'local-details',
data: localData,
coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
coordinateOrigin: [-122.4, 37.8, 0],
getPosition: d => [d.deltaX, d.deltaY, d.deltaZ],
getRadius: 10
}),
// UI overlay layer (cartesian)
new ScatterplotLayer({
id: 'ui-elements',
data: uiData,
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
getPosition: d => [d.screenX, d.screenY, 0],
getRadius: 5,
radiusUnits: UNIT.pixels
})
];Best practices for coordinate system performance.
interface CoordinatePerformanceOptions {
/** Cache coordinate transformations */
cacheTransforms?: boolean;
/** Batch coordinate calculations */
batchSize?: number;
/** Use pre-computed coordinate arrays */
precomputed?: boolean;
/** Precision level for calculations */
precision?: 'single' | 'double';
/** Coordinate bounds for culling */
bounds?: [[number, number], [number, number]];
}Usage Examples:
// Optimized coordinate handling for large datasets
const optimizedLayer = new ScatterplotLayer({
id: 'million-points',
data: millionPointsData,
coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
getPosition: d => d.coordinates, // Pre-computed coordinates
// Performance optimizations
updateTriggers: {
getPosition: [] // Static positions, no updates
},
// Coordinate bounds for culling
bounds: [[-180, -90], [180, 90]],
// GPU-optimized rendering
parameters: {
coordinatePerformance: {
cacheTransforms: true,
batchSize: 10000,
precomputed: true,
precision: 'single'
}
}
});
// Efficient coordinate system switching
const switchCoordinateSystem = (layer, newSystem) => {
// Pre-transform coordinates if switching frequently
if (newSystem !== layer.props.coordinateSystem) {
const transformedData = layer.props.data.map(d => ({
...d,
transformedPosition: convertCoordinates(
d.originalPosition,
layer.props.coordinateSystem,
newSystem
)
}));
layer.setProps({
data: transformedData,
coordinateSystem: newSystem,
getPosition: d => d.transformedPosition
});
}
};Install with Tessl CLI
npx tessl i tessl/npm-deck-gl--core