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, Feature } from 'svelte-openlayers';

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

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

<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