or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

aggregation-layers.mdcarto-integration.mdcore-api.mdeffects-lighting.mdextensions.mdgeo-layers.mdindex.mdintegration.mdjson-configuration.mdlayers.mdmesh-layers.mdviews-controllers.md
tile.json

json-configuration.mddocs/

JSON Configuration

Configuration system for creating deck.gl visualizations from JSON specifications. This enables dynamic visualization creation, templates, and configuration-driven deck.gl applications without hardcoded layer definitions.

Capabilities

JSONConverter

The main converter class that transforms JSON specifications into deck.gl props and objects.

/**
 * Converts JSON specifications to deck.gl props
 */
class JSONConverter {
  constructor(props: {
    configuration?: JSONConfiguration;
    onJSONChange?: (json: any) => void;
  });
  
  /** Convert JSON specification to deck.gl props */
  convert(json: any): any;
  
  /** Update converter configuration */
  setProps(props: {
    configuration?: JSONConfiguration;
    onJSONChange?: (json: any) => void;
  }): void;
  
  /** Merge additional configuration */
  mergeConfiguration(config: any): void;
  
  /** Clean up resources */
  finalize(): void;
}

Usage Examples:

import {JSONConverter, JSONConfiguration} from '@deck.gl/json';

// Basic JSON conversion
const config = new JSONConfiguration();
const converter = new JSONConverter({configuration: config});

const jsonSpec = {
  "@@type": "ScatterplotLayer",
  "id": "points",
  "data": "/data/points.json",
  "getPosition": "@@=d.coordinates",
  "getRadius": 100,
  "getFillColor": [255, 0, 0]
};

const layerProps = converter.convert(jsonSpec);

JSONConfiguration

Configuration class that defines how JSON specifications are interpreted and converted.

/**
 * Configuration for JSON conversion
 */
class JSONConfiguration {
  constructor(...configurations: any[]);
  
  /** Merge configuration objects */
  merge(configuration: any): void;
  
  /** Validate configuration */
  validate(configuration: any): void;
  
  /** Add default properties for classes */
  addDefaultProps(classes: {[key: string]: any}, props: any): void;
  
  /** Register classes for instantiation */
  registerClasses(classes: {[key: string]: any}): void;
}

interface JSONConfigurationProps {
  /** Key used to identify class types in JSON */
  typeKey?: string;
  
  /** Key used to identify functions in JSON */
  functionKey?: string;
  
  /** Available classes for instantiation */
  classes?: {[key: string]: any};
  
  /** React components (for React integration) */
  reactComponents?: {[key: string]: any};
  
  /** Enumeration values */
  enumerations?: {[key: string]: any};
  
  /** Constant values */
  constants?: {[key: string]: any};
  
  /** Function definitions */
  functions?: {[key: string]: any};
  
  /** Function converter */
  convertFunction?: (str: string) => Function;
  
  /** Pre-process class properties */
  preProcessClassProps?: (Class: any, props: any) => any;
  
  /** Post-process converted JSON */
  postProcessConvertedJson?: (json: any) => any;
}

Usage Examples:

import {JSONConfiguration, JSONConverter} from '@deck.gl/json';
import {ScatterplotLayer, ArcLayer} from 'deck.gl';

// Configure available layers and constants
const config = new JSONConfiguration({
  classes: {
    ScatterplotLayer,
    ArcLayer
  },
  constants: {
    RED: [255, 0, 0],
    BLUE: [0, 0, 255]
  },
  enumerations: {
    COORDINATE_SYSTEM: {
      LNGLAT: 1,
      CARTESIAN: 0
    }
  }
});

const converter = new JSONConverter({configuration: config});

// JSON with constants and enumerations
const spec = {
  "@@type": "ScatterplotLayer",
  "id": "scatter",
  "coordinateSystem": "@@#COORDINATE_SYSTEM.LNGLAT",
  "getFillColor": "@@#RED"
};

Transport System

Base class for data transport in JSON configurations.

/**
 * Base class for data transports
 */
class Transport {
  constructor(props: any);
  
  /** Fetch data from source */
  fetch(url: string, options?: any): Promise<any>;
}

JSON Specification Format

Type Specification

Use the @@type key to specify deck.gl classes:

{
  "@@type": "ScatterplotLayer",
  "id": "my-layer"
}

Function Expressions

Use @@= prefix for JavaScript expressions:

{
  "getPosition": "@@=d.coordinates",
  "getRadius": "@@=Math.sqrt(d.population)"
}

Constants and Enumerations

Use @@# prefix for constants and enums:

{
  "getFillColor": "@@#RED",
  "coordinateSystem": "@@#COORDINATE_SYSTEM.LNGLAT"
}

Complex Example

{
  "@@type": "Deck",
  "width": "100%",
  "height": "100%",
  "initialViewState": {
    "longitude": -122.4,
    "latitude": 37.8,
    "zoom": 12
  },
  "controller": true,
  "layers": [
    {
      "@@type": "ScatterplotLayer",
      "id": "points",
      "data": "/api/points",
      "getPosition": "@@=d.coordinates",
      "getRadius": "@@=d.radius || 100",
      "getFillColor": "@@=[255, d.value * 255, 0]",
      "pickable": true
    },
    {
      "@@type": "ArcLayer",
      "id": "arcs",
      "data": "/api/connections",
      "getSourcePosition": "@@=d.source",
      "getTargetPosition": "@@=d.target",
      "getStrokeWidth": 2
    }
  ]
}

Types

interface ConversionContext {
  configuration: JSONConfiguration;
  json: any;
  key?: string;
  parent?: any;
}

type JSONValue = 
  | string 
  | number 
  | boolean 
  | null 
  | JSONObject 
  | JSONArray;

interface JSONObject {
  [key: string]: JSONValue;
}

type JSONArray = JSONValue[];

interface JSONSpec extends JSONObject {
  "@@type"?: string;
  "@@function"?: string;
}