or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

application-management.mdattribute-management.mdcontrollers.mdcoordinate-systems.mdeffects-and-lighting.mdindex.mdlayer-system.mdtransitions-and-animation.mdutilities-and-helpers.mdviews-and-viewports.md
tile.json

coordinate-systems.mddocs/

Coordinate Systems

Comprehensive coordinate system support and essential constants for spatial data visualization, enabling flexible data representation across different geographic and cartesian coordinate systems.

Capabilities

COORDINATE_SYSTEM Constants

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 Constants

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 Constants

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
});

Coordinate Transformations

Projection Functions

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;
};

Coordinate System Utilities

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];
  };
}

Geospatial Coordinate Support

Geographic Coordinate Systems

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
});

Coordinate Origin and Offset Systems

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
  })
];

Coordinate System Performance

Optimization Strategies

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
    });
  }
};