mapcn-svelte

Beautiful maps, made simple.

Free & open source map components for Svelte. Zero config, one command setup.
Built on MapLibre GL, styled with Tailwind, works seamlessly with shadcn-svelte.

Get Started • Installation • Examples

---

About

This is a Svelte port of mapcn by Anmol. The original React version provides beautiful, composable map components for React applications. This port brings the same developer experience to Svelte 5, maintaining feature parity while adapting to Svelte's reactive paradigms.

Features

• 🎨 Theme-aware — Automatically adapts to light/dark mode
• 🎯 Zero config — Works out of the box with sensible defaults
• 📦 shadcn-svelte compatible — Uses the same patterns and styling conventions
• 🗺️ MapLibre GL powered — Full access to MapLibre's powerful mapping capabilities
• 🧩 Composable — Build complex map UIs with simple, declarative components
• 📍 Markers & Popups — Rich marker system with popups, tooltips, and labels
• 🛤️ Routes — Draw routes and paths on your maps
• 🎮 Controls — Zoom, compass, locate, and fullscreen controls
• ⚡ Svelte 5 — Built with Svelte 5's runes for optimal reactivity

Installation

npx shadcn-svelte@latest add https://mapcn-svelte.vercel.app/r/map.json

This will install maplibre-gl and add all map components to your project.

Quick Start

<script lang="ts">
	import { Map, MapControls } from "$lib/components/ui/map";
</script>

<div class="h-[400px] w-full">
	<Map center={[-74.006, 40.7128]} zoom={12}>
		<MapControls />
	</Map>
</div>

Documentation

Full documentation is available at mapcn-svelte.vercel.app/docs

Components

• Map — Root map container with theme support
• MapMarker — Place markers on the map
• MarkerContent — Custom marker visuals
• MarkerPopup — Click-triggered popups
• MarkerTooltip — Hover tooltips
• MarkerLabel — Positioned labels
• MapPopup — Standalone popups
• MapControls — UI controls (zoom, compass, locate, fullscreen)
• MapRoute — Draw routes and paths

Credits

• Original React version: mapcn by Anmol Saini
• Svelte port: Marius Lang
• Built with MapLibre GL
• Styled with Tailwind CSS
• Compatible with shadcn-svelte

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT License - see the LICENSE file for details.