Skip to main content

DeckOverlay

DeckOverlay

Integrate Deck.gl layers for advanced WebGL visualizations

Tags: deckgl webgl 3d advanced

View Demo

The DeckOverlay component enables Deck.gl integration with MapLibre, unlocking advanced WebGL-powered visualizations. Use it for large datasets, custom shaders, 3D effects, or specialized layer types not available in MapLibre.

Import​

<script>
  import { DeckOverlay } from '@classic-homes/maps-svelte';
</script>
// React
import { DeckOverlay } from '@classic-homes/maps-react';

Basic Usage​

<script>
  import { Map, DeckOverlay } from '@classic-homes/maps-svelte';
  import { ScatterplotLayer } from '@deck.gl/layers';

  const data = [{ position: [-122.45, 37.78], color: [255, 0, 0], radius: 100 }];

  const layers = [
    new ScatterplotLayer({
      id: 'scatter',
      data,
      getPosition: (d) => d.position,
      getFillColor: (d) => d.color,
      getRadius: (d) => d.radius,
    }),
  ];
</script>

<Map title="Deck.gl Map" center={[-122.4, 37.8]} zoom={10}>
  <DeckOverlay {layers} />
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
layers Layer[] - Array of Deck.gl layers
interleaved boolean true Enable interleaved rendering
effects Effect[] - Deck.gl effects (lighting, post-processing)
onHover (info: PickingInfo) => void - Hover callback
onClick (info: PickingInfo) => void - Click callback
deckProps Record<string, unknown> - Additional Deck.gl props

Inherited Base Map Props​

Prop Type Default Description
title string required Map title for accessibility (aria-label)
description string - Optional description for screen readers
height number | string 400 Map height in pixels or CSS value
width number | string - Map width in pixels or CSS value
loading boolean false Show loading skeleton
error string | null - Error message to display
emptyMessage string - Message shown when data is empty
theme 'light' | 'dark' | 'auto' 'auto' Theme preference
animation boolean true Enable/disable animations (respects prefers-reduced-motion)
class string - Custom CSS class for styling

Accessibility​

  • The title prop is used as aria-label for screen readers
  • Keyboard navigation support for interactive elements
  • Animations respect prefers-reduced-motion media query
  • High contrast colors in both light and dark modes
On this page