v0.4 · brand-neutral · MIT

Beautiful UI for your qgis2web exports.

A lightweight CSS framework for Leaflet exports, with optional JS interactions, Tailwind tokens, WebGIS templates, and polished map UI components.

See live example Browse components
terminal · install copy 
# 1. Install
npm install q2w

# 2. Drop into your qgis2web export's index.html
<link rel="stylesheet" href="q2w/dist/q2w.css">

# 3. Add a header — that's it
<div class="q2w-header"> ... </div>
02 · COMPONENTS

Built for thematic maps.

30+ pre-styled components. Click any preview to see usage and copy code.

Land Atlas — Cirebon
Sistem Informasi Peta Tematik
.q2w-header
Floating brand pill with logo, title, actions.
Mekarjaya
ZNT-021
value720k
area12.4 ha
.q2w-popup
Tabular feature attributes with accent header.
Layers
✓Zona Nilai Tanah
✓Batas Desa
Jaringan Jalan
.q2w-panel
Layer stacks, toggles, sublayers, and opacity rows.
Land value
<100k>5M
.q2w-grad
Sequential and diverging legend bars for thematic maps.
⌕
1 result · ZNT-021
.q2w-search
Search field with icon, placeholder, and result context.
.q2w-control
Reusable control buttons for zoom, reset, layers, and tools.
Layer loaded
1,284 features
.q2w-toast
Transient success and status feedback after user actions.
.q2w-basemap
Basemap picker with thumbnail tiles and active state.
N
.q2w-compass
Orientation indicator for rotated maps and advanced controls.
Welcome
Explore Zona Nilai Tanah with q2w-mapcss.
.q2w-modal
Welcome, help, and onboarding overlays with strong focus.
Selected zone
value1.2M
.q2w-sheet
Mobile-first bottom sheets for compact map workflows.
© 2026 Aksara Lab
Powered by q2w-mapcss
-6.7797, 108.4714
.q2w-footer
Sticky map footer with attribution, powered-by, and live coordinates.
03 · WHY q2w

qgis2web is great. Its UI isn't.

qgis2web ships a working Leaflet map in seconds — but the layer control, popup, and chrome haven't really changed in years. Most teams end up rewriting them from scratch on every project.

q2w fixes that once. Pre-styled components, a coherent token system, dark mode, and themes — all in a CSS file you drop in alongside the export.

Inspired by mapcn, but focused on Leaflet (because qgis2web exports there) and on the thematic-map use cases QGIS users actually build.

Vanilla qgis2web
Layer 1
Layer 2
With q2w
✓Land value90%
✓Roads100%
Popup
name: Mekarjaya
value: 720000
Popup
Mekarjaya
value720k
04 · ROADMAP

What's next.

Open and public. Suggestions and PRs welcome.

v0.1
Core components, themes, and Leaflet/qgis2web adapters 30+ components, explicit light/dark, and preset themes
shipped
v0.2
Tailwind token plugin CSS variable-backed colors, spacing, radius, and shadows
shipped
v0.3
WebGIS starter templates Basic, layer-panel, and dashboard app shells
shipped
v0.4
Optional JS interactions bundle Modal, toast, tabs, layer binding, coordinate display, and popup helpers
shipped
v0.5
Richer interactive playground and extended demos More browser-tested examples for real qgis2web exports
next
v1.0
Broader ecosystem support beyond current Leaflet/qgis2web focus Adapters and workflows for more export targets
later