FillExtrusionLayer

FillExtrusionLayer

Render 3D extruded polygons for building visualization

Tags: 3d building extrusion height

The FillExtrusionLayer component renders polygons as 3D extruded shapes. Perfect for building footprints, population density cubes, or any data that benefits from height visualization. The height can be data-driven.

Import

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

// React
import { FillExtrusionLayer } from '@classic-homes/maps-react';

Basic Usage

<script>
  import { Map, FillExtrusionLayer } from '@classic-homes/maps-svelte';
</script>

<Map title="3D Buildings" center={[-74.006, 40.7128]} zoom={15} pitch={45}>
  <FillExtrusionLayer
    id="buildings-3d"
    source="buildings"
    fillExtrusionHeight={['get', 'height']}
    fillExtrusionBase={0}
    fillExtrusionColor="#aaa"
    fillExtrusionOpacity={0.8}
  />
</Map>

Props

Component-Specific Props

Prop	Type	Default	Description
`id`	`string`	required	Unique layer identifier
`source`	`string`	required	Source ID to use
`fillExtrusionHeight`	`number \| Expression`	required	Extrusion height in meters
`fillExtrusionBase`	`number \| Expression`	`0`	Base height in meters
`fillExtrusionColor`	`string \| Expression`	-	Extrusion color
`fillExtrusionOpacity`	`number`	`1`	Opacity (0-1)
`fillExtrusionVerticalGradient`	`boolean`	`true`	Apply vertical gradient
`visible`	`boolean`	`true`	Layer visibility

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

FillLayer - Render filled polygons on the map
DeckOverlay - Integrate Deck.gl layers for advanced WebGL visualizations

On this page