Skip to main content

CircleLayer

CircleLayer

Render point features as circles with customizable radius and colors

Tags: point circle marker location

View Demo

The CircleLayer component renders point features as circles. Great for showing locations, clusters, or point data with varying sizes based on data values. Supports data-driven styling for radius and color.

Import​

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

Basic Usage​

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

<Map title="Points Map" center={[-122.4, 37.8]} zoom={10}>
  <CircleLayer
    id="points"
    source="locations"
    circleRadius={8}
    circleColor="#ff5722"
    circleStrokeWidth={2}
    circleStrokeColor="#fff"
    onClick={(e) => console.log('Point:', e.feature)}
  />
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
id string required Unique layer identifier
source string required Source ID to use
circleRadius number | Expression 5 Circle radius in pixels
circleColor string | Expression '#000' Circle fill color
circleOpacity number | Expression 1 Circle opacity (0-1)
circleStrokeWidth number | Expression 0 Stroke width
circleStrokeColor string | Expression - Stroke color
visible boolean true Layer visibility
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
  • SymbolLayer - Render icons and text labels at point locations
  • HeatmapLayer - Render density heatmaps from point data
On this page