Skip to main content

FillLayer

FillLayer

Render filled polygons with customizable colors and opacity

Tags: polygon fill choropleth area

View Demo

The FillLayer component renders polygon features from a GeoJSON source as filled shapes. It's ideal for choropleth maps, highlighting regions, or displaying area boundaries. Supports hover states and click interactions.

Import​

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

Basic Usage​

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

<Map title="Regions Map" center={[-98, 38]} zoom={4}>
  <FillLayer
    id="states-fill"
    source="states"
    fillColor="#088"
    fillOpacity={0.5}
    fillOutlineColor="#fff"
    onClick={(e) => console.log('Clicked:', e.feature)}
  />
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
id string required Unique layer identifier
source string required Source ID to use
fillColor string | Expression '#000' Fill color
fillOpacity number | Expression 1 Fill opacity (0-1)
fillOutlineColor string | Expression - Outline color
visible boolean true Layer visibility
filter Expression - Filter expression for features
onClick (event: FeatureClickEventParams) => void - Feature click handler
onHover (event: FeatureHoverEventParams) => void - Feature hover handler

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