v0.1 · brand-neutral · MIT

Beautiful UI for your qgis2web exports.

A lightweight Tailwind + Leaflet component kit. Drop it on top of any qgis2web export and get a polished header, layer panel, popup, legend — and 25 more — for free.

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.

.q2w-popup

Tabular feature attributes with accent header.

Layer stacks, toggles, sublayers, and opacity rows.

<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.

.q2w-compass

Orientation indicator for rotated maps and advanced controls.

.q2w-modal

Welcome, help, and onboarding overlays with strong focus.

Selected zone

value1.2M

.q2w-sheet

Mobile-first bottom sheets for compact map workflows.

.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

04 · ROADMAP

What's next.

Open and public. Suggestions and PRs welcome.

v0.1

Core components & themes 30+ components, light/dark + 4 presets

shipped

v0.2

Tailwind plugin @apply source + JIT-friendly utility classes

in progress

v0.3

Web editor templates Pre-built header/footer/popup templates for the editor

in progress

v0.4

JS interactions Drop-in helpers for opacity sliders, share modal, geolocate

v1.0

OpenLayers support Mirror the Leaflet bindings for OpenLayers exports

later