composable-svelte-maps

Create state-driven interactive Svelte maps with markers, GeoJSON layers, and viewport controls.

3|Updated Oct 26, 2025
One-click install
npx skills add https://github.com/jonathanbelolo/composable-svelte --skill composable-svelte-maps
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: composable-svelte-maps
Source: https://github.com/jonathanbelolo/composable-svelte/tree/main/.claude/skills/composable-svelte-maps
Command: npx skills add https://github.com/jonathanbelolo/composable-svelte --skill composable-svelte-maps

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Solves the challenge of building interactive geospatial maps in Svelte by providing a cohesive maps package with state-driven controls.

Core Features & Use Cases

  • Map rendering with pan/zoom and multiple tile providers (Maplibre GL, Mapbox GL)
  • Markers with popups and draggable support
  • GeoJSON layers (polygons, lines, points) and heatmaps
  • Viewport controls (flyTo, fitBounds, bearing, pitch) and viewport synchronization
  • State management via pure reducers compatible with the Composable Architecture pattern
  • Use Case: Build a location dashboard showing points of interest, routes, and heatmaps

Quick Start

Install the maps package and core, create an initial map state with createInitialMapState, and render the Map component bound to the store.

Frequently Asked Questions about composable-svelte-maps

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add interactive GeoJSON layers and markers to a Svelte map?

You can add interactive GeoJSON layers and markers to a Svelte map using a state-driven package that enforces a MapState and MapAction model. It supports rendering polygons, lines, points, and draggable markers with integrated popup handling.

Can I use Maplibre GL with Svelte to build a location dashboard?

Yes, Maplibre GL is supported for building a location dashboard in Svelte. The package provides map rendering with pan/zoom controls, multiple tile providers, and viewport synchronization to display points of interest, routes, and heatmaps.

What's the best way to manage map viewport state in Svelte?

The best way to manage map viewport state in Svelte is via pure reducers compatible with the Composable Architecture pattern. This approach handles flyTo, fitBounds, bearing, and pitch controls through a predictable state management model.

Do I need a Redux-like reducer pattern for Svelte geospatial maps?

Yes, a Redux-like reducer pattern is required for Svelte geospatial maps. The package enforces a strict MapState and MapAction model to manage initial state creation, layer and marker management, and viewport controls predictably.

Does this Svelte maps package support heatmap rendering?

Yes, the Svelte maps package supports heatmap rendering alongside GeoJSON layers. It provides a cohesive maps package with state-driven controls, allowing you to visualize dense point data directly within your mapping interface.

Why does the Svelte map component require @composable-svelte/core?

The Svelte map component requires @composable-svelte/core to maintain compatibility with the Composable Architecture pattern. This dependency ensures the pure reducers and state-driven controls integrate correctly with your Svelte application.