v0.5 · WebGIS-ready · MIT

Beautiful UI for your web map.

A lightweight CSS framework for Leaflet-based web maps. Works great with qgis2web exports — and with any WebGIS or mapping project.

See real 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.
⌕⌘K
⌕
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.
Basemap
Free tile sources
OSM Streets
.q2w-basemap
Basemap picker with thumbnail tiles and active state.
1 km
N
Bearing032°
.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.
0500m
1 : 24,000
Z 15 · -7.7868°, 108.4670°
Compact footer
108.4670, -7.7868
Coordinate-only footer · 108.4670, -7.7868
.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.

q2w works on any Leaflet-based web map, not just qgis2web exports.

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