Interactive Examples

Explore practical examples of svelte-openlayers components with live code demos and detailed explanations.

Basic Map

BeginnerFoundation

Simple OpenLayers map with tile layer and reactive bindings

ViewMapLayer.TileReactive bindings

Features

CoreStylingInteractive

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

Feature.PointFeature.LineStringFeature.PolygonhoverStyle / selectedStyleOverlay.HoverOverlay.Popup

Basic Marker Styling

CoreStylingBeginner

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

Feature.PointcreateCircleStyleLayer.VectorCustom fill and stroke

Layer Management

AdvancedData

Multiple tile sources and vector layer visibility controls

Multiple tile sourcesLayer visibilityBase layer switchingData organization

SVG Icon Markers

CoreStylingIcons

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

createIconStyleSVG iconsColor tintingDynamic sizing

Static Image Layer

CoreData

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

Layer.StaticCustom projectionImage extentAttributions

Vector Tiles

LayersVector TilesMVTStyling

Display vector tiles with custom styling using Layer.VectorTile

Layer.VectorTileMVTFeature styling

Feature Events

EventsOverlaysInteractive

Interactive features with onHover, onClick, and child overlays

Feature event callbacksonHover / onHoverEndonClick / onSelect / onDeselecthoverStyle / selectedStyleOverlay.HoverOverlay.Popup

Basic Tooltips

InteractionUI

Context-sensitive tooltips with hover and click modes

Overlay.HoverOverlay.PopuphoverStyle / selectedStyleFeature events

HTML Tooltips

InteractionUITooltips

Tooltips with custom HTML content

Overlay.TooltipManagerhoverContentselectContentHTML strings

Component Tooltips

InteractionUIOverlaysComponents

Feature overlays using reusable Svelte components for rich content

Overlay.HoverOverlay.PopuphoverStyle / selectedStyleSvelte components

Bidirectional Selection

InteractionSelectionAdvanced

Synchronized selection between table and map features with programmatic control

Interaction.Selectbind:selectedFeaturesProgrammatic selectionFeature collectionsState synchronization

Draw Interaction

InteractionDrawingGeometry

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

Interaction.DrawDrawing typesFeature creationVector sourcesEvent handlingGeometry styling

Draw Control

ControlDrawingGeometryBeta

Control for drawing points, lines, polygons, and circles

Control.DrawDrawing typesFeature creationVector sourcesEvent handlingGeometry styling

HTML Markers

AdvancedStylingAnimation

Custom HTML/CSS markers with animations using Overlay.Marker

Overlay.MarkerHTML markersCSS animationsTailwind

Dynamic Theming

AdvancedStylingUI

Interactive theme customization with CSS variables and dark mode

Dynamic ThemesDark ModeCSS VariablesScoped StylesRuntime Theming

Scoped CSS Styling

AdvancedStylingCSS Variables

Multiple maps with scoped CSS variable themes sharing a single View

CSS VariablesScoped StylesShared ViewgetCSSVariablecreateCircleStyle

GeoJSON Vector Source

AdvancedDataGeoJSON

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

VectorSourceGeoJSON formatRemote data loadingCustom layer bindingFeature styling

WebGL Vector Tiles

LayersVector TilesWebGLPerformanceMVT

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

Layer.WebGLVectorTileWebGL renderingFlat stylesStyle variables

WebGL Rendering

AdvancedWebGLPerformance

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

LayerWebGLWebGL renderingExpression-based stylesDynamic variablesLarge datasetsPerformance optimization

WebGL Filtering

AdvancedWebGLPerformanceAnimationFiltering

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

LayerWebGLStyle variablesDynamic filteringExpression-based stylesAnimation with timeLarge datasets