Beautiful maps, made simple.

Ready to use, customizable map components for Svelte. Built on MIERUNE's svelte-maplibre-gl. Styled with Tailwind.

$ npx shadcn-svelte@latest add https://ninyawee.github.io/pantee-cn/r/map.json
Get Started View Components
Active Users
2,847
+12.5% vs last hour
High
Medium
Low
Central Park Loop
6.2
Miles
32
Mins
285
Cal
Fly To
EV Charging
Trending
Delivery

What is pantee-cn?

pantee (แผนที่) is the Thai word for "map", and cn stands for components — following the shadcn naming convention.

Copy & paste, not install

You own the code. Copy map components into your project and customize freely — no black-box dependency.

Thailand-first defaults

Sensible defaults for Thailand (center, bounds, language) but works anywhere in the world.

Built on solid foundations

Powered by MIERUNE's svelte-maplibre-gl, styled with Tailwind, and designed to work seamlessly with shadcn-svelte.

Why pantee-cn?

mapcn and mapcn-svelte are great starting points — but we found real issues that needed fixing and patterns that could be better. Here's what pantee-cn improves:

P0

Bugs to Fix

  • Cluster color/threshold changes are silently ignored
  • Route initial paint flashes hardcoded gray instead of actual props
P1

Svelte 5 Best Practices

  • Use $state.raw() for MapLibre instances — prevents proxy wrapping of non-POJO objects
  • Use $state.snapshot() before passing state to MapLibre APIs
  • Typed context module instead of string-keyed context
  • transformStyle + queue pattern instead of 100ms timeout race conditions
P2

API Improvements

  • $bindable() viewport props for two-way binding
  • Pass map instance into children snippet
  • resetEventListener() utility to DRY up cleanup
  • Consistent skip-first-run sentinel pattern
P3

Coverage Expansion

  • Composable source/layer primitives alongside presets
  • Native MapLibre control wrappers
  • Feature query utilities
  • External map access pattern