Svelte OpenLayers
Build powerful, interactive maps with composable, declarative OpenLayers components for Svelte 5. Experience the full power of OpenLayers with the simplicity and elegance of Svelte.
<script>
import { Map, Layer, Feature } from 'svelte-openlayers';
</script>
<Map.Root>
<Map.View center={[longitude, latitude]} zoom={10}/>
<Layer.Tile source="osm" />
<Layer.Vector>
<Feature.Point coordinates={[0, 0]} />
</Layer.Vector>
</Map.Root>
Why Svelte OpenLayers?
Designed from the ground up to make OpenLayers feel native in Svelte
Build complex maps with simple, declarative components that work together seamlessly.
Leverages the latest Svelte 5 features including runes for optimal reactivity and performance.
Access the complete OpenLayers API while enjoying the simplicity of Svelte components.
Built with TypeScript from the ground up for excellent IDE support and type safety.
Smart lifecycle management prevents memory leaks and ensures optimal performance.
Built-in support for tooltips, selections, drawing, and custom interactions.
Developer Experience First
Built with modern development in mind. Enjoy excellent TypeScript support, tree-shaking, hot module replacement, and a predictable API that makes building complex mapping applications a breeze.
Intuitive component composition patterns
Reactive bindings for all properties
Automatic coordinate transformations
Event-driven architecture for predictable updates
Ready to Get Started?
Join developers building amazing map experiences with Svelte OpenLayers