Svelte OpenLayers

A composable, component-based OpenLayers integration for Svelte 5. Build interactive maps using declarative components while maintaining full access to OpenLayers' powerful functionality.

Installation

npm install svelte-openlayers ol
# or
bun add svelte-openlayers ol

Quick Start

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

	let center = $state([-74.006, 40.7128]); // New York City
	let zoom = $state(12);
</script>

<View bind:center bind:zoom>
	<Map class="map-container">
		<Layer.Tile source="osm" />
	</Map>
</View>

<style>
	.map-container {
		width: 100%;
		height: 400px;
	}
</style>

Documentation

For complete API documentation, examples, and guides, visit:

svelte-openlayers.com

Contributing

Contributions are welcome! Please read our contributing guidelines for details on our code of conduct and development process.

License

MIT © O

---

Built with Svelte 5 and OpenLayers