Components

All 25+ q2w-mapcss components. Click any card to see live preview, usage, modifiers, and copy-paste markup.

Quick start

Use the compiled CSS and copy snippets into a Leaflet qgis2web export.

Local CSS

copy file

<link rel="stylesheet" href="css/q2w-mapcss.css">

Hosted CSS

Cloudflare Pages

<link rel="stylesheet" href="/dist/q2w-mapcss.css">

Body helpers

adapter

<body class="q2w-qgis2web q2w-has-footer q2w-controls-below-header">

Snippets are available under snippets/: header, footer, welcome modal, help modal, legend panel, and popup.

Templates

Need more than a single snippet? Start from these ready-made app shells under snippets/templates/.

basic.html

Floating header + map + footer shell

with-panel.html

Map shell with interactive layer panel binding

dashboard.html

Map plus dashboard sidebar layout

Tokens

q2w-mapcss exposes themeable design tokens through the --q2w-* prefix. Use them to align your export chrome, legends, and overlays without editing generated qgis2web JavaScript.

--q2w-accent

Primary accent

--q2w-surface

Default surface

--q2w-surface-soft

Soft panels and cards

--q2w-text

Primary text

--q2w-seq-*

Sequential choropleth palette

--q2w-div-*

Diverging palette

data-theme="dark"

Dark preset

Theme presets

Ocean, forest, sunset, slate

Components

Southeast Asia preview

OSM Streets

Source: OpenStreetMap

Land value zone ZNT-021

.q2w-quick

Quick info

Layer opacity 75%

Zona Nilai Tanah overlay

Point tool active — click map to start.

1,248parcels

312selected

Rp 1.2Bmedian

Value thresholdRp 1B+