LineLayer

LineLayer

Render lines and paths with customizable width and dash patterns

Tags: line path route border

The LineLayer component renders line features from a GeoJSON source. Perfect for routes, borders, rivers, or any linear data. Supports dashed lines, varying widths, and gradient colors.

Import

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

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

Basic Usage

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

<Map title="Routes Map" center={[-122.4, 37.8]} zoom={12}>
  <LineLayer
    id="route"
    source="routes"
    lineColor="#0066cc"
    lineWidth={3}
    lineCap="round"
    lineJoin="round"
  />
</Map>

Props

Component-Specific Props

Prop	Type	Default	Description
`id`	`string`	required	Unique layer identifier
`source`	`string`	required	Source ID to use
`lineColor`	`string \| Expression`	`'#000'`	Line color
`lineWidth`	`number \| Expression`	`1`	Line width in pixels
`lineOpacity`	`number \| Expression`	`1`	Line opacity (0-1)
`lineDasharray`	`number[]`	-	Dash pattern [dash, gap]
`lineCap`	`'butt' \| 'round' \| 'square'`	`'butt'`	Line cap style
`lineJoin`	`'bevel' \| 'round' \| 'miter'`	`'miter'`	Line join style
`visible`	`boolean`	`true`	Layer visibility
`onClick`	`(event: FeatureClickEventParams) => void`	-	Feature click 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

FillLayer - Render filled polygons with customizable colors and opacity
CircleLayer - Render point features as circles with customizable radius and colors

On this page