Add petition map to medical cannabis petition page

Add anonymous SVG icon for anonymous signers

Add Norway fylker GeoJSON for map boundaries

Add CSS styles for petition map

Add JavaScript for interactive petition map

Add .htaccess to block direct access to data files

Add petition-map plugin to process and display map data

Add documentation for the petition-map plugin

Add mock petition data generator tool
This commit is contained in:
Ruben 2026-02-25 23:11:35 +01:00
parent 1ee0e0f0a0
commit a7829982d0
10 changed files with 1134 additions and 1 deletions

View file

@ -0,0 +1,115 @@
/* Petition map page styles */
.petition-map-section {
margin-top: 2rem;
.petition-map-header {
background: var(--color-green-light);
padding-block: 1.5rem 1rem;
margin-bottom: 0;
h1 {
margin-top: 0;
font-size: clamp(1.4rem, 4vw, 2rem);
}
.petition-map-subtitle {
color: oklch(0.45 0.05 173.93);
font-size: 0.95rem;
margin-top: 0.4rem;
}
}
#petition-map {
position: relative;
height: clamp(420px, 70vh, 800px);
background: oklch(0.96 0.005 220);
.map-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: oklch(0.55 0.03 220);
font-size: 0.9rem;
z-index: 10;
pointer-events: none;
}
/* Leaflet overrides for muted style */
.leaflet-container {
background: oklch(0.96 0.005 220);
font-family: var(--font-body);
}
.leaflet-control-attribution {
font-size: 0.65rem;
background: oklch(1 0 0 / 0.75);
}
}
.petition-map-footer {
padding-block: 1rem 2rem;
.back-link {
font-size: 0.9rem;
}
}
}
/* Fylke polygon styles (set via Leaflet path options, these are fallbacks) */
.leaflet-interactive {
cursor: pointer;
}
/* Signer name tooltip */
.signer-tip {
background: oklch(0.618 0.1176 173.93);
color: oklch(0.97 0 0);
border: none;
box-shadow: none;
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 600;
padding: 1px 5px;
border-radius: 8px;
line-height: 1.4;
white-space: nowrap;
pointer-events: none;
&::before { display: none; } /* hide tooltip arrow */
}
/* Anonymous tooltip */
.signer-tip--anon {
background: oklch(0.618 0.1176 173.93);
padding: 2px 5px 2px 4px;
.anon-icon {
width: 14px;
height: 14px;
vertical-align: middle;
}
}
/* Fylke popup / info panel */
.fylke-popup {
font-family: var(--font-body);
font-size: 0.85rem;
max-width: 220px;
.fylke-popup-title {
font-family: var(--font-heading);
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.4rem;
color: var(--color-green);
}
.fylke-popup-count {
font-size: 0.8rem;
color: oklch(0.5 0.03 173.93);
}
}