Platform Integrations

/**
 * Main React component for deck.gl integration
 */
function DeckGL(props: DeckGLProps): JSX.Element;

interface DeckGLProps extends DeckProps {
  /** React children elements */
  children?: React.ReactNode | ((viewport: WebMercatorViewport) => React.ReactNode);
  
  /** React context provider for nested components */
  ContextProvider?: React.ComponentType<{children: React.ReactNode}>;
  
  /** Style object for canvas container */
  style?: React.CSSProperties;
  
  /** CSS class name for canvas container */
  className?: string;
  
  /** Cursor style */
  cursor?: string;
  
  /** Custom canvas props */
  canvas?: React.CanvasHTMLAttributes<HTMLCanvasElement>;
}

/** Default export - same as DeckGL */
declare const _default: typeof DeckGL;
export default _default;

import React, {useState} from 'react';
import DeckGL from '@deck.gl/react';
import {ScatterplotLayer, ArcLayer} from 'deck.gl';

function App() {
  const [viewState, setViewState] = useState({
    longitude: -122.4,
    latitude: 37.8,
    zoom: 12
  });

  const layers = [
    new ScatterplotLayer({
      id: 'points',
      data: myData,
      getPosition: d => d.coordinates,
      getRadius: 100,
      getFillColor: [255, 0, 0]
    })
  ];

  return (
    <DeckGL
      initialViewState={viewState}
      controller={true}
      layers={layers}
      onViewStateChange={({viewState}) => setViewState(viewState)}
    >
      {/* Child components rendered on top */}
      <div style={{position: 'absolute', top: 10, left: 10}}>
        <h3>My Visualization</h3>
      </div>
    </DeckGL>
  );
}

// With render callback
function AppWithCallback() {
  return (
    <DeckGL
      initialViewState={{longitude: -122.4, latitude: 37.8, zoom: 12}}
      controller={true}
      layers={layers}
    >
      {(viewport) => (
        <div>
          <p>Longitude: {viewport.longitude.toFixed(2)}</p>
          <p>Latitude: {viewport.latitude.toFixed(2)}</p>
        </div>
      )}
    </DeckGL>
  );
}

/**
 * Google Maps overlay for deck.gl layers
 */
class GoogleMapsOverlay {
  constructor(props: DeckProps);
  
  /** Add overlay to Google Maps instance */
  setMap(map: google.maps.Map | null): void;
  
  /** Update overlay props */
  setProps(props: Partial<DeckProps>): void;
  
  /** Pick objects at screen coordinates */
  pickObject(params: {x: number, y: number}): PickingInfo | null;
  
  /** Pick multiple objects */
  pickObjects(params: {x: number, y: number, width?: number, height?: number}): PickingInfo[];
  
  /** Clean up overlay */
  finalize(): void;
  
  /** Get deck instance */
  readonly deck: Deck;
}

import {GoogleMapsOverlay} from '@deck.gl/google-maps';
import {ScatterplotLayer} from 'deck.gl';

// Initialize Google Map
const map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 37.8, lng: -122.4},
  zoom: 12,
  mapId: 'your-map-id' // Required for WebGL overlays
});

// Create deck.gl overlay
const overlay = new GoogleMapsOverlay({
  layers: [
    new ScatterplotLayer({
      id: 'points',
      data: myData,
      getPosition: d => d.coordinates,
      getRadius: 100,
      getFillColor: [255, 0, 0]
    })
  ]
});

// Add to map
overlay.setMap(map);

// Update layers
overlay.setProps({
  layers: [
    new ScatterplotLayer({
      id: 'updated-points',
      data: newData,
      getPosition: d => d.coordinates,
      getRadius: 150,
      getFillColor: [0, 255, 0]
    })
  ]
});

// Event handling
map.addListener('click', (event) => {
  const pickInfo = overlay.pickObject({
    x: event.pixel.x,
    y: event.pixel.y
  });
  if (pickInfo && pickInfo.object) {
    console.log('Clicked object:', pickInfo.object);
  }
});

/**
 * Individual Mapbox layer implementation
 */
class MapboxLayer {
  constructor(props: MapboxLayerProps);
  
  /** Layer ID for Mapbox */
  id: string;
  
  /** Layer type */
  type: 'custom';
  
  /** Render priority */
  renderingMode: '2d' | '3d';
  
  /** Add layer to map */
  onAdd(map: mapboxgl.Map, gl: WebGLRenderingContext): void;
  
  /** Render layer */
  render(gl: WebGLRenderingContext, matrix: number[]): void;
  
  /** Remove layer from map */
  onRemove(map: mapboxgl.Map, gl: WebGLRenderingContext): void;
}

interface MapboxLayerProps extends LayerProps {
  /** Mapbox layer ID */
  id: string;
  
  /** Rendering mode */
  renderingMode?: '2d' | '3d';
  
  /** Insert before layer ID */
  beforeId?: string;
}

/**
 * Mapbox overlay for multiple deck.gl layers
 */
class MapboxOverlay {
  constructor(props: DeckProps);
  
  /** Add to Mapbox map */
  addTo(map: mapboxgl.Map): this;
  
  /** Remove from map */
  remove(): this;
  
  /** Update overlay props */
  setProps(props: Partial<DeckProps>): void;
  
  /** Pick objects */
  pickObject(params: {x: number, y: number}): PickingInfo | null;
  
  /** Get deck instance */
  readonly deck: Deck;
}

import mapboxgl from 'mapbox-gl';
import {MapboxOverlay} from '@deck.gl/mapbox';
import {ScatterplotLayer} from 'deck.gl';

// Initialize Mapbox map
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-122.4, 37.8],
  zoom: 12
});

// Create overlay
const overlay = new MapboxOverlay({
  layers: [
    new ScatterplotLayer({
      id: 'points',
      data: myData,
      getPosition: d => d.coordinates,
      getRadius: 100,
      getFillColor: [255, 0, 0]
    })
  ]
});

// Add overlay to map
map.on('load', () => {
  overlay.addTo(map);
});

// Or use individual layer approach
const deckLayer = new MapboxLayer({
  id: 'deck-layer',
  type: 'custom',
  renderingMode: '3d',
  layer: new ScatterplotLayer({
    id: 'points',
    data: myData,
    getPosition: d => d.coordinates,
    getRadius: 100,
    getFillColor: [255, 0, 0]
  })
});

map.on('load', () => {
  map.addLayer(deckLayer);
});

/**
 * Converts JSON configuration to deck.gl props
 */
class JSONConverter {
  constructor(configuration?: JSONConfiguration);
  
  /** Convert JSON to deck.gl props */
  convert(jsonProps: any): DeckProps;
  
  /** Update configuration */
  updateConfiguration(configuration: JSONConfiguration): void;
  
  /** Merge configurations */
  mergeConfiguration(configuration: Partial<JSONConfiguration>): void;
}

interface JSONConfiguration {
  /** Layer type registry */
  layers?: {[layerType: string]: any};
  
  /** View type registry */
  views?: {[viewType: string]: any};
  
  /** Enum definitions */
  enums?: {[enumName: string]: {[key: string]: any}};
  
  /** Function definitions */
  functions?: {[functionName: string]: Function};
  
  /** Import aliases */
  imports?: {[alias: string]: any};
  
  /** Configuration constants */
  constants?: {[name: string]: any};
}

/** Data transport abstraction */
class Transport {
  constructor(props?: any);
  
  /** Fetch data from URL */
  fetch(url: string, options?: any): Promise<any>;
  
  /** Transform data */
  transform(data: any, transform: any): any;
}

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

// JSON configuration
const jsonConfig = {
  \"@@type\": \"MapView\",
  \"@@id\": \"main-view\",
  \"controller\": true
};

const jsonLayers = [
  {
    \"@@type\": \"ScatterplotLayer\",
    \"id\": \"points\",
    \"data\": \"https://api.example.com/points.json\",
    \"getPosition\": \"@@=coordinates\",
    \"getRadius\": 100,
    \"getFillColor\": [255, 0, 0]
  }
];

// Convert to deck.gl props
const converter = new JSONConverter();
const deckProps = converter.convert({
  views: [jsonConfig],
  layers: jsonLayers,
  initialViewState: {
    longitude: -122.4,
    latitude: 37.8,
    zoom: 12
  }
});

// Use with Deck
const deck = new Deck(deckProps);

// Custom configuration
const customConverter = new JSONConverter({
  layers: {
    'CustomScatterplotLayer': ScatterplotLayer
  },
  functions: {
    'getColor': (d) => d.category === 'A' ? [255, 0, 0] : [0, 255, 0]
  },
  enums: {
    'COORDINATE_SYSTEM': {
      'LNGLAT': 1,
      'CARTESIAN': 0
    }
  }
});

/**
 * Main CARTO data layer
 */
class CartoLayer extends Layer {
  constructor(props: CartoLayerProps);
}

interface CartoLayerProps extends LayerProps {
  /** CARTO data source */
  connection: CartoConnection;
  
  /** SQL query or table name */
  source: string;
  
  /** Layer type for rendering */
  type: 'point' | 'line' | 'polygon' | 'raster';
  
  /** CARTO credentials */
  credentials?: CartoCredentials;
  
  /** Point radius accessor */
  getRadius?: Accessor<number>;
  
  /** Fill color accessor */
  getFillColor?: Accessor<Color>;
  
  /** Line color accessor */
  getLineColor?: Accessor<Color>;
  
  /** Line width accessor */
  getLineWidth?: Accessor<number>;
}

interface CartoConnection {
  /** Connection type */
  type: 'bigquery' | 'postgres' | 'snowflake';
  
  /** Additional connection parameters */
  [key: string]: any;
}

interface CartoCredentials {
  /** API key */
  apiKey: string;
  
  /** Username */
  username: string;
  
  /** Server URL */
  serverUrlTemplate?: string;
}

/** Credential management */
declare function getDefaultCredentials(): CartoCredentials;
declare function setDefaultCredentials(credentials: CartoCredentials): void;

/** CARTO basemap configurations */
declare const BASEMAP: {
  POSITRON: string;
  VOYAGER: string;
  DARK_MATTER: string;
};

/** Styling functions */
declare function colorBins(options: {
  attr: string;
  domain: number[];
  colors: Color[];
}): (feature: any) => Color;

declare function colorCategories(options: {
  attr: string;
  domain: string[];
  colors: Color[];
}): (feature: any) => Color;

declare function colorContinuous(options: {
  attr: string;
  domain: [number, number];
  colors: Color[];
}): (feature: any) => Color;

/** Data fetching */
declare function fetchLayerData(options: {
  source: string;
  connection: CartoConnection;
  credentials?: CartoCredentials;
  format?: 'json' | 'geojson' | 'binary';
}): Promise<any>;

declare function fetchMap(options: {
  cartoMapId: string;
  credentials?: CartoCredentials;
}): Promise<any>;

/** Error handling */
class CartoAPIError extends Error {
  constructor(message: string, response?: any);
  
  /** HTTP response */
  response?: Response;
  
  /** Response data */
  responseData?: any;
}

/** Constants */
declare const FORMATS: {
  JSON: 'json';
  GEOJSON: 'geojson';
  BINARY: 'binary';
};

declare const TILE_FORMATS: {
  BINARY: 'binary';
  GEOJSON: 'geojson';
  MVT: 'mvt';
};

declare const MAP_TYPES: {
  QUERY: 'query';
  TABLE: 'table';
  TILESET: 'tileset';
};

declare const API_VERSIONS: {
  V1: 'v1';
  V2: 'v2';
  V3: 'v3';
};

import {CartoLayer, colorBins, setDefaultCredentials} from '@deck.gl/carto';

// Set up credentials
setDefaultCredentials({
  apiKey: 'your-api-key',
  username: 'your-username'
});

// Basic CARTO layer
const cartoLayer = new CartoLayer({
  id: 'carto-layer',
  connection: {
    type: 'bigquery'
  },
  source: 'cartobq.public_account.retail_stores',
  type: 'point',
  getRadius: 1000,
  getFillColor: colorBins({
    attr: 'revenue',
    domain: [0, 100000, 500000, 1000000],
    colors: [[255, 255, 178], [254, 204, 92], [253, 141, 60], [227, 26, 28]]
  }),
  pickable: true
});

// With SQL query
const sqlLayer = new CartoLayer({
  id: 'sql-layer',
  connection: {
    type: 'postgres'
  },
  source: `
    SELECT * FROM retail_stores 
    WHERE revenue > 50000 
    AND ST_Intersects(the_geom, ST_MakeEnvelope(-74, 40.7, -73.9, 40.8, 4326))
  `,
  type: 'point',
  getRadius: d => Math.sqrt(d.revenue) / 10,
  getFillColor: [255, 0, 0]
});

// Polygon visualization with styling
const polygonLayer = new CartoLayer({
  id: 'polygons',
  connection: {type: 'bigquery'},
  source: 'cartobq.public_account.census_tracts',
  type: 'polygon',
  getFillColor: colorContinuous({
    attr: 'population_density',
    domain: [0, 10000],
    colors: [[255, 255, 255], [255, 0, 0]]
  }),
  getLineColor: [255, 255, 255],
  getLineWidth: 1,
  pickable: true
});

// React + Google Maps + CARTO
function IntegratedApp() {
  const [viewState, setViewState] = useState({
    longitude: -74,
    latitude: 40.7,
    zoom: 10
  });

  const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [
      new CartoLayer({
        id: 'carto-data',
        connection: {type: 'bigquery'},
        source: 'cartobq.public_account.nyc_taxi_trips',
        type: 'point',
        getFillColor: [255, 0, 0]
      })
    ]
  });

  return (
    <div>
      <GoogleMap overlay={googleMapsOverlay} />
      <DeckGL
        viewState={viewState}
        onViewStateChange={setViewState}
        layers={layers}
        controller={true}
      />
    </div>
  );
}

// JSON-driven configuration
const configDrivenApp = {
  views: [{
    \"@@type\": \"MapView\",
    controller: true
  }],
  layers: [{
    \"@@type\": \"CartoLayer\",
    connection: {type: 'bigquery'},
    source: 'my_table',
    type: 'point'
  }]
};

const converter = new JSONConverter();
const props = converter.convert(configDrivenApp);
const deck = new Deck(props);

interface DeckGLProps extends DeckProps {
  children?: React.ReactNode | ((viewport: WebMercatorViewport) => React.ReactNode);
  ContextProvider?: React.ComponentType<{children: React.ReactNode}>;
  style?: React.CSSProperties;
  className?: string;
}

type MapboxMap = any; // mapboxgl.Map
type GoogleMap = any; // google.maps.Map