Skip to main content

SymbolLayer

SymbolLayer

Render icons and text labels at point locations (GPU-based, recommended for markers)

Tags: icon text label marker

View Demo

The SymbolLayer component renders icons and/or text labels at point locations on the GPU canvas. Perfect for adding custom markers, labels, or icons from a sprite sheet. Supports collision detection and text halo effects. Recommended: Use SymbolLayer + CircleLayer instead of DOM-based Markers for production use - GPU rendering is immune to CSS framework interference that can cause marker sliding during pan/rotate.

Import​

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

Basic Usage​

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

<Map title="Labels Map" center={[-122.4, 37.8]} zoom={12}>
  <SymbolLayer
    id="city-labels"
    source="cities"
    textField={['get', 'name']}
    textSize={14}
    textColor="#333"
    textHaloColor="#fff"
    textHaloWidth={1}
  />
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
id string required Unique layer identifier
source string required Source ID to use
iconImage string | Expression - Icon name from sprite
iconSize number | Expression 1 Icon scale factor
textField string | Expression - Text to display
textSize number | Expression 16 Text size in pixels
textColor string | Expression '#000' Text color
textHaloColor string - Text halo color
textHaloWidth number 0 Text halo width
iconAllowOverlap boolean false Allow icon overlap
textAllowOverlap boolean false Allow text overlap

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
  • CircleLayer - Render point features as circles with customizable radius and colors
  • FillLayer - Render filled polygons with customizable colors and opacity
On this page