composable-svelte-maps_skill

Overview

This skill provides interactive maps and geospatial visualizations for Composable Svelte projects using Maplibre GL (with optional Mapbox). It exposes a state-driven Map component plus reducers and actions to manage viewport, markers, layers, popups, heatmaps, and feature interactions. Use it to build production-ready map UIs with animation, tile provider switching, and reducer-based state management.

How this skill works

The package initializes a Maplibre/Mapbox map inside a Svelte Map component and keeps map state in a Composable-style store driven by pure reducers. The component syncs viewport, markers, layers, and popups with the store, dispatches lifecycle events (mapLoaded, mapError), and reports feature interactions (hover, click). Developers manipulate the map entirely through dispatching MapAction objects to the provided store.

When to use it

• Embedding interactive maps in Svelte apps with predictable state management
• Displaying point-of-interest markers with popups and drag/move behavior
• Rendering GeoJSON polygons, lines, and point layers from objects or URLs
• Creating heatmaps for density or severity visualizations from point data
• Switching base tiles or styles at runtime (OSM, Carto, custom, Mapbox)
• Animating viewport changes: flyTo, fitBounds, rotate, and tilt maps

Best practices

• Create a single map store with createInitialMapState and reuse it across map components
• Keep geospatial data as GeoJSON and use layer styles to control visuals instead of ad-hoc DOM markers
• Use popups and marker popups for rich HTML tooltips; keep heavy content out of map render loop
• Prefer Maplibre for free usage; only supply a Mapbox access token when using Mapbox providers or styles
• Debounce frequent viewport updates and avoid dispatching on every frame to reduce state churn

Example use cases

• City dashboard: show neighborhoods as GeoJSON layers, crime heatmap, and clickable POI markers
• Asset tracking: draggable markers representing vehicles with live moveMarker updates and flyTo on selection
• Data explorer: toggle multiple thematic layers, change tile provider, and fitBounds to focus on a dataset
• Tour app: preset flyTo sequences and animated viewport transitions between attractions
• Custom tiles: load organization-specific tiles via custom tileProvider and attribution