Svelte OpenLayers

Home Documentation Examples

Overview

All Examples Browse all available examples

Foundation

Simple OpenLayers map with tile layer and reactive bindings

Core Features

Points, lines, and polygons with custom styling and click interactions

Basic Marker Styling

Simple circle markers with custom fill and stroke styles on world cities

Layer Management

Multiple tile sources and vector layer visibility controls

SVG Icon Markers

Use SVG icons as map markers with dynamic color tinting and size control

Static Image Layer

Display a single static image as a map layer using a custom pixel projection and extent.

Display vector tiles with custom styling using Layer.VectorTile

Interactions

Interactive features with onHover, onClick, and child overlays

Context-sensitive tooltips with hover and click modes

Tooltips with custom HTML content

Component Tooltips

Feature overlays using reusable Svelte components for rich content

Bidirectional Selection

Synchronized selection between table and map features with programmatic control

Draw Interaction

Interactive drawing of points, lines, polygons, and circles with real-time feature tracking

Controls

Draw Control Beta

Control for drawing points, lines, polygons, and circles

Advanced

Custom HTML/CSS markers with animations using Overlay.Marker

Dynamic Theming

Interactive theme customization with CSS variables and dark mode

Scoped CSS Styling

Multiple maps with scoped CSS variable themes sharing a single View

GeoJSON Vector Source

Load GeoJSON data from remote URLs or inline objects with custom VectorSource

WebGL Vector Tiles

GPU-accelerated vector tiles using Layer.WebGLVectorTile for high-performance rendering

WebGL Rendering

High-performance rendering of large point datasets using WebGL with dynamic styling

WebGL Filtering

Dynamic filtering of 45k meteorite landing sites using WebGL with animated pulse effects

Component Tooltips

Feature overlays using reusable Svelte components for rich content

Hover to see quick info component, click to see detailed component