LayerManager

LayerManager

Toggle overlay layers for GIS data like school districts, parks, and trails

Tags: layers overlay gis toggle schools parks trails

The LayerManager component provides a control panel for toggling GIS overlay layers on and off. It supports built-in layer presets for common data types (school districts, parks, trails, flood zones) and allows users to adjust layer opacity. Layers are organized by category with search functionality for quick access.

Import

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

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

Basic Usage

<script>
  import { Map, LayerManager, SCHOOL_DISTRICTS, PARKS, TRAILS } from '@classic-homes/maps-svelte';

  const layers = [
    {
      ...SCHOOL_DISTRICTS,
      source: { ...SCHOOL_DISTRICTS.source, url: '/api/school-districts.geojson' },
    },
    { ...PARKS, source: { ...PARKS.source, url: '/api/parks.geojson' } },
    { ...TRAILS, source: { ...TRAILS.source, url: '/api/trails.geojson' } },
  ];

  function handleLayerChange(id, state) {
    console.log(id, state.visible);
  }
</script>

<Map title="Property Map" center={[-104.99, 39.74]} zoom={12}>
  <LayerManager
    {layers}
    position="top-right"
    initialActiveLayers={['parks']}
    showSearch
    showCategories
    onLayerChange={handleLayerChange}
  />
</Map>

Props

Component-Specific Props

Prop	Type	Default	Description
`layers`	`OverlayLayerDefinition[]`	required	Array of layer definitions to display
`apiKeys`	`OverlayApiKeys`	-	API keys for data providers if needed
`initialActiveLayers`	`string[]`	-	Layer IDs to enable initially
`position`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`'top-right'`	Control position on the map
`showSearch`	`boolean`	`true`	Show search input for filtering layers
`showCategories`	`boolean`	`true`	Show category tabs for filtering
`showOpacity`	`boolean`	`true`	Show opacity sliders for each layer
`onLayerChange`	`(layerId: string, state: OverlayLayerState) => void`	-	Callback when a layer is toggled or opacity changes

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

BasemapSwitcher - Switch between different map basemaps
Legend - Display a legend for map data layers
FillLayer - Render filled polygon layers on the map

On this page