Components Overview

Svelte OpenLayers provides a comprehensive set of components for building interactive maps. All components follow consistent patterns and are fully composable.

Core Components

Map Components

The foundation of every map application:

• Map.Root - Main map container and context provider
• Map.View - Controls viewport (center, zoom, rotation)
• Map.Controls - Built-in map controls (zoom, scale, etc.)

Layer Components

Display different types of data on your map:

• Layer.Tile - Raster tile layers (OSM, XYZ, WMS)
• Layer.Vector - Vector data layers
• Layer.VectorTile - Vector tile layers for performance
• Layer.Image - Static image layers

Feature Components

Vector geometries that can be displayed and interacted with:

• Feature.Point - Point locations
• Feature.LineString - Lines and paths
• Feature.Polygon - Areas and boundaries
• Feature.Circle - Circular areas
• Feature.MultiPoint - Multiple points as one feature

Interaction Components

Handle user interactions with the map:

• Interaction.Select - Feature selection
• Interaction.Draw - Drawing new features
• Interaction.Modify - Editing existing features
• Interaction.Translate - Moving features

Overlay Components

Display HTML content positioned on the map:

• Overlay.Popup - Information popups
• Overlay.Tooltip - Hover tooltips

Component Patterns

Composable Structure

All components follow a consistent, nestable structure:

<Map.Root center={[0, 0]} zoom={2}>
	<Map.View />
	<Layer.Tile source="osm" />
	<Layer.Vector>
		<Feature.Point coordinates={[0, 0]} />
	</Layer.Vector>
	<Interaction.Select />
</Map.Root>

Reactive Properties

Component properties are reactive and bindable:

<script>
	let center = [0, 0];
	let zoom = 2;
</script>

<Map.Root class="h-full w-full">
	<!-- Map automatically updates when center or zoom change -->
	<Map.View bind:center={mapCenter} bind:zoom={mapZoom} />
	<Layer.Tile source="osm" />
</Map.Root>

Event Handling

Components emit standard events with OpenLayers data:

<Feature.Point coordinates={[0, 0]} onClick={handleClick} onPointerMove={handleHover} />

<Interaction.Select onSelect={(event) => console.log('Selected:', event.detail.features)} />

Styling

Multiple ways to style map features:

<!-- Inline styles -->
<Feature.Point coordinates={[0, 0]} style={{ fill: 'red', stroke: { color: 'blue', width: 2 } }} />

<!-- Style functions -->
<Feature.Point coordinates={[0, 0]} style={(feature) => getStyleForFeature(feature)} />

<!-- CSS classes (for overlays) -->
<Overlay.Popup class="custom-popup">Content here</Overlay.Popup>

TypeScript Support

All components are fully typed with TypeScript:

import type { MapRootProps, FeaturePointProps } from 'svelte-openlayers';

// Props are properly typed
const mapProps: MapRootProps = {
	center: [0, 0],
	zoom: 2,
	projection: 'EPSG:4326'
};