Svelte OpenLayers

Home Documentation Examples

Overview

All Examples Browse all available examples

Foundation

Basic Map Simple OpenLayers map with tile layer and reactive bindings

Core Features

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.

Interactions

Feature Events Interactive features with onHover, onClick, and child overlays

Basic Tooltips Context-sensitive tooltips with hover and click modes

HTML Tooltips 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 Control for drawing points, lines, polygons, and circles

Advanced

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 Rendering High-performance rendering of large point datasets using WebGL with dynamic styling

Bidirectional Selection

Synchronized selection between table and map features with programmatic control

NYC Landmarks

Name	Action

Click on map markers or table rows to select