A lightweight CSS framework for building polished Leaflet WebGIS interfaces, including qgis2web exports.
<link rel="stylesheet" href="https://q2w-mapcss.pages.dev/dist/q2w-mapcss.css">npm install q2w-mapcss<link rel="stylesheet" href="node_modules/q2w-mapcss/dist/q2w-mapcss.css">- Copy
dist/q2w-mapcss.cssinto your exportcss/folder. - Add the stylesheet after qgis2web and plugin CSS files.
- Add body helpers:
<body class="q2w-qgis2web q2w-has-footer q2w-controls-below-header">Apply via data-theme on <html> or <body>:
<html data-theme="ocean">| Theme | Value | Accent |
|---|---|---|
| Default | light |
Teal #0f7a78 |
| Dark | dark |
Cyan #2dd4d0 |
| Ocean | ocean |
Blue #1d6fc4 |
| Forest | forest |
Green #2f7d4a |
| Sunset | sunset |
Orange #d8632a |
| Slate | slate |
Gray #3f4a5c |
Override any token:
:root {
--q2w-accent: #137a7f;
--q2w-radius-md: 8px;
}q2w-mapcss is icon-agnostic. Use any SVG or icon set:
<button class="q2w-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z"></path><path d="M9 4v14"></path><path d="M15 6v14"></path></svg>
Open map
</button><script src="https://q2w-mapcss.pages.dev/dist/q2w-interactions.js"></script>Enables modal open/close, toast notifications, tab switching, popup close, layer panel binding, and coordinate display helpers.
q2w.toast('Layer loaded successfully', 'success');
q2w.coordDisplay(map, '#my-coords-element');// tailwind.config.js
const q2w = require('q2w-mapcss/tailwind');
module.exports = { plugins: [q2w] };Adds q2w-* color, radius, spacing, and shadow utilities to Tailwind. Continue loading q2w-mapcss CSS separately for component classes.
Starter app shells are available under snippets/templates/:
basic.html— floating header + map + footerwith-panel.html— map shell with collapsible layer panel bindingdashboard.html— map plus summary sidebar layout
The component docs include layout, controls, data display, feedback, loading, print/export, and advanced WebGIS patterns.
- Landing page: https://q2w-mapcss.pages.dev/
- Component docs: https://q2w-mapcss.pages.dev/docs.html
- Quick start: https://github.com/dhanyyudi/q2w-mapcss/blob/main/docs/quick-start.md
MIT © dhanyyudi
☕ If q2w-mapcss saved you time → buy me a coffee