Feature Components

Feature components represent vector geometries that can be displayed, styled, and interacted with on the map. They must be placed inside a Layer.Vector component.

Interactive Features

All feature components support built-in interactive event handlers and styling. You can attach event callbacks and define special styles for hover and selection states directly on the feature.

Event Callbacks

Event	Type	Description
onHover	(feature: Feature, coordinate: Coordinate) => void	Fired when pointer hovers over feature
onHoverEnd	(feature: Feature) => void	Fired when pointer leaves feature
onClick	(feature: Feature, coordinate: Coordinate) => void	Fired when feature is clicked
onSelect	(feature: Feature) => void	Fired when feature is selected
onDeselect	(feature: Feature) => void	Fired when feature is deselected

Interactive Styles

Prop	Type	Description
hoverStyle	StyleLike	Style when feature is hovered
selectedStyle	StyleLike	Style when feature is selected

Example with Events

<script>
	import { Feature, Layer } from 'svelte-openlayers';

	function handleHover(feature, coordinate) {
		console.log('Hovering over feature');
	}

	function handleClick(feature, coordinate) {
		console.log('Clicked feature)}');
	}

	const baseStyle = {
		circle: { radius: 8, fill: { color: '#3b82f6' } }
	};

	const hoverStyle = {
		circle: { radius: 10, fill: { color: '#10b981' } }
	};

	const selectedStyle = {
		circle: { radius: 12, fill: { color: '#ef4444' } }
	};
</script>

<Layer.Vector>
	<Feature.Point
		coordinates={[-74.0, 40.7]}
		properties={{ name: 'New York' }}
		style={baseStyle}
		{hoverStyle}
		{selectedStyle}
		onHover={handleHover}
		onClick={handleClick}
	/>
</Layer.Vector>

Feature.Point

Displays point locations on the map.

Basic Usage

<script>
	import { View, Map, Layer, Feature } from 'svelte-openlayers';
</script>

<View center={[0, 0]} zoom={2}>
	<Map class="h-96 w-full">
		<Layer.Tile source="osm" />
		<Layer.Vector>
			<Feature.Point coordinates={[0, 0]} />
		</Layer.Vector>
	</Map>
</View>

Props

Prop	Type	Default	Description
coordinates	[number, number]	[0, 0]	Point coordinates [longitude, latitude]
projection	string	undefined	Coordinate projection
style	StyleLike	undefined	Point styling
hoverStyle	StyleLike	undefined	Style when hovered
selectedStyle	StyleLike	undefined	Style when selected
properties	Record<string, any>	{}	Feature properties/attributes
feature	Feature | null	null	Bindable feature instance (read-only)
onHover	Function	undefined	Hover event callback
onHoverEnd	Function	undefined	Hover end callback
onClick	Function	undefined	Click event callback
onSelect	Function	undefined	Select event callback
onDeselect	Function	undefined	Deselect event callback

Child Components

Features can contain overlay components that appear during interactions:

• Overlay.Hover: Appears when the feature is hovered
• Overlay.Popup: Appears when the feature is selected

Styled Points

<script>
	const cityStyle = {
		circle: {
			radius: 8,
			fill: { color: '#ff6b6b' },
			stroke: { color: 'white', width: 2 }
		}
	};
</script>

<Layer.Vector>
	<Feature.Point
		coordinates={[-74.0, 40.7]}
		properties={{ name: 'New York', population: 8000000 }}
		style={cityStyle}
	/>

	<Feature.Point
		coordinates={[-118.2, 34.0]}
		properties={{ name: 'Los Angeles', population: 4000000 }}
		style={cityStyle}
	/>
</Layer.Vector>

Note: For feature interaction (clicks, hovers), use Interaction.Select and Interaction.Hover components.

Feature.LineString

Displays lines and paths on the map.

Basic Usage

<Layer.Vector>
	<Feature.LineString
		coordinates={[
			[-74.0, 40.7], // New York
			[-87.6, 41.9], // Chicago
			[-118.2, 34.0] // Los Angeles
		]}
	/>
</Layer.Vector>

Props

Prop	Type	Default	Description
coordinates	Array<[number, number]>	[]	Line coordinates
projection	string	undefined	Coordinate projection
style	StyleLike	undefined	Line styling
hoverStyle	StyleLike	undefined	Style when hovered
selectedStyle	StyleLike	undefined	Style when selected
properties	Record<string, any>	{}	Feature properties/attributes
feature	Feature | null	null	Bindable feature instance (read-only)
onHover	Function	undefined	Hover event callback
onHoverEnd	Function	undefined	Hover end callback
onClick	Function	undefined	Click event callback
onSelect	Function	undefined	Select event callback
onDeselect	Function	undefined	Deselect event callback

Route Example

<script>
	const routeCoordinates = [
		[-74.0, 40.7], // Start: NYC
		[-75.1, 39.9], // Philadelphia
		[-77.0, 38.9], // Washington DC
		[-80.8, 35.2], // Charlotte
		[-84.4, 33.7], // Atlanta
		[-81.7, 30.3] // End: Jacksonville
	];

	const routeStyle = {
		stroke: {
			color: '#2196F3',
			width: 4,
			lineDash: [10, 5]
		}
	};
</script>

<Layer.Vector>
	<Feature.LineString
		coordinates={routeCoordinates}
		style={routeStyle}
		properties={{ name: 'East Coast Route', distance: '1200 miles' }}
	/>
</Layer.Vector>

Feature.Polygon

Displays areas and boundaries on the map.

Basic Usage

<Layer.Vector>
	<Feature.Polygon
		coordinates={[
			[
				[-74.0, 40.6], // Southwest corner
				[-73.9, 40.6], // Southeast corner
				[-73.9, 40.8], // Northeast corner
				[-74.0, 40.8], // Northwest corner
				[-74.0, 40.6] // Close the ring
			]
		]}
	/>
</Layer.Vector>

Props

Prop	Type	Default	Description
coordinates	Array<Array<[number, number]>>	[]	Polygon coordinates (exterior ring + holes)
projection	string	undefined	Coordinate projection
style	StyleLike	undefined	Polygon styling
hoverStyle	StyleLike	undefined	Style when hovered
selectedStyle	StyleLike	undefined	Style when selected
properties	Record<string, any>	{}	Feature properties/attributes
feature	Feature | null	null	Bindable feature instance (read-only)
onHover	Function	undefined	Hover event callback
onHoverEnd	Function	undefined	Hover end callback
onClick	Function	undefined	Click event callback
onSelect	Function	undefined	Select event callback
onDeselect	Function	undefined	Deselect event callback

Polygon with Hole

<script>
	// Outer boundary
	const outerRing = [
		[-74.1, 40.6],
		[-73.8, 40.6],
		[-73.8, 40.9],
		[-74.1, 40.9],
		[-74.1, 40.6]
	];

	// Inner hole
	const innerHole = [
		[-74.0, 40.7],
		[-73.9, 40.7],
		[-73.9, 40.8],
		[-74.0, 40.8],
		[-74.0, 40.7]
	];

	const areaStyle = {
		fill: { color: 'rgba(76, 175, 80, 0.3)' },
		stroke: { color: '#4CAF50', width: 2 }
	};
</script>

<Layer.Vector>
	<Feature.Polygon
		coordinates={[outerRing, innerHole]}
		style={areaStyle}
		properties={{ type: 'park', name: 'Central Park' }}
	/>
</Layer.Vector>