Skip to content

Commit 08168dc

Browse files
TuvudelTuvudel
authored
Merge pull request #56 from NegevUrbanResearch/map_layers
feat(map): layer packs, registry, PMTiles/Cityscope parity, and mobile layer controls
2 parents 238baa2 + 71c9df9 commit 08168dc

127 files changed

Lines changed: 14430 additions & 51 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/deploy-pages.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,10 @@ jobs:
3434
- name: Install dependencies
3535
run: npm ci
3636

37+
# Use npx vite directly so `--base` reaches Vite. `npm run build -- --base …` is mishandled by npm
38+
# (it treats `--base` as an npm flag and passes only the path as Vite's root directory).
3739
- name: Build
38-
run: npm run build -- --base "${{ steps.pages.outputs.base_path }}"
40+
run: npx tsc && npx vite build --base "${{ steps.pages.outputs.base_path }}"
3941
env:
4042
VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
4143
VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}

‎DESIGN.md‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
---
2+
version: "alpha"
3+
name: "Nur Colab Map"
4+
description: "Mobile-first RTL map UI with dark glass overlays for planning workflows."
5+
colors:
6+
surface-canvas: "#0D1016"
7+
surface-glass: "#141414"
8+
surface-panel: "#18181C"
9+
border-soft: "#FFFFFF29"
10+
text-primary: "#FFFFFFF2"
11+
text-secondary: "#FFFFFFB3"
12+
accent-pink: "#FF69B4"
13+
accent-green-a: "#39B96B"
14+
accent-green-b: "#60D58E"
15+
danger-soft: "#DC3232"
16+
typography:
17+
body-sm:
18+
fontFamily: Inter
19+
fontSize: 0.75rem
20+
fontWeight: 500
21+
lineHeight: 1.3
22+
body-md:
23+
fontFamily: Inter
24+
fontSize: 0.875rem
25+
fontWeight: 500
26+
lineHeight: 1.35
27+
title-sm:
28+
fontFamily: Inter
29+
fontSize: 1rem
30+
fontWeight: 700
31+
lineHeight: 1.35
32+
rounded:
33+
xs: 8px
34+
sm: 10px
35+
md: 12px
36+
lg: 14px
37+
pill: 999px
38+
spacing:
39+
xs: 4px
40+
sm: 6px
41+
md: 8px
42+
lg: 10px
43+
xl: 12px
44+
components:
45+
map-glass-bar:
46+
backgroundColor: "{colors.surface-glass}"
47+
textColor: "{colors.text-primary}"
48+
rounded: "{rounded.sm}"
49+
padding: "{spacing.md}"
50+
button-primary:
51+
backgroundColor: "{colors.accent-green-a}"
52+
textColor: "#052210"
53+
rounded: "{rounded.xs}"
54+
padding: "{spacing.md}"
55+
button-secondary:
56+
backgroundColor: "{colors.surface-glass}"
57+
textColor: "{colors.text-primary}"
58+
rounded: "{rounded.xs}"
59+
padding: "{spacing.md}"
60+
chip:
61+
backgroundColor: "{colors.surface-glass}"
62+
textColor: "{colors.text-primary}"
63+
rounded: "{rounded.pill}"
64+
padding: "{spacing.sm}"
65+
---
66+
67+
## Overview
68+
69+
`nur-colab-map` uses a map-first, dark-glass interface where overlays support editing and planning without hiding geographic context.
70+
Hebrew + RTL is the default product language and layout direction.
71+
72+
## Colors
73+
74+
- **Canvas:** deep dark surfaces (`surface-canvas`) keep satellite maps legible under overlays.
75+
- **Glass overlays:** translucent dark bars/panels with low-opacity white borders.
76+
- **Text:** high-contrast white with softer secondary copy.
77+
- **Accents:** pink for project/heritage highlights, green for primary positive actions.
78+
- **Danger:** soft red tint for destructive actions (`נקה הכל`, delete/clear patterns).
79+
80+
## Typography
81+
82+
- Base UI text is compact (`body-sm`, `body-md`) to preserve map space on mobile.
83+
- Titles and section headers use `title-sm`.
84+
- Preferred stack in implementation/mocks: `Inter, "Noto Sans Hebrew", Arial, sans-serif`.
85+
86+
## Layout
87+
88+
- **Mobile-first safe-area model:** overlays respect `--map-safe-*` and `env(safe-area-inset-*)`.
89+
- **Map insets:** map viewport is padded vertically by `--map-top-chrome` and `--map-bottom-chrome`.
90+
- **Chrome zones:**
91+
- **Top zone (global):** submission/project/account controls.
92+
- **Bottom zone (contextual):** project-specific editing toolbar (pink/memorial).
93+
- New persistent controls should dock to these existing zones, not create disconnected floating islands.
94+
95+
## Elevation & Depth
96+
97+
- Use subtle blur (`12-14px`) and soft borders for bars/popovers.
98+
- Stronger panel opacity for sheets/modals than for persistent bars.
99+
- Keep shadows restrained; avoid heavy glow except for active/emphasis states.
100+
101+
## Shapes
102+
103+
- Small controls: `rounded.xs` (8px)
104+
- Toolbar/panel shells: `rounded.sm` / `rounded.md` (10-12px)
105+
- Modal/sheet major surfaces: `rounded.lg` (14px+)
106+
- Counts/chips/toggles: `rounded.pill`
107+
108+
## Components
109+
110+
### Existing Shell Contract
111+
112+
- **Top control cluster** remains the canonical home for global map context.
113+
- **Bottom toolbar** remains the canonical home for edit-mode actions.
114+
- Layer/basemap/legend controls must integrate around this shell.
115+
116+
### Layer Control Pattern (V1 target)
117+
118+
- One compact trigger (`שכבות (N)`) near existing global or bottom-adjacent controls.
119+
- Bottom sheet for full layer operations:
120+
- `הצג הכל`
121+
- `הסתר הכל`
122+
- pack toggles
123+
- per-layer toggles
124+
- basemap segmented row (`לוויין | OSM`)
125+
- Show pack state as `off | partial | on` with counts (`2/5`).
126+
127+
### Legend Pattern
128+
129+
- Legend is controlled explicitly via `מקרא`.
130+
- Legend display is grouped by **active packs only**.
131+
- On mobile, legend should be a compact tray/card or sheet tab, not a permanent large panel.
132+
133+
### Basemap Pattern
134+
135+
- V1 scope: binary switch only (`לוויין` / `OSM`).
136+
- Basemap changes must not alter layer visibility state.
137+
138+
## Do's and Don'ts
139+
140+
### Do
141+
142+
- Design in RTL/Hebrew from the start.
143+
- Keep controls dense but tappable.
144+
- Minimize vertical spacing between new and existing controls when screen pressure is high.
145+
- Keep map visibility primary.
146+
- Reflect real shell constraints in mockups (top + bottom existing bars).
147+
148+
### Don't
149+
150+
- Do not introduce bright/light UI islands that clash with current dark-glass style.
151+
- Do not hide key controls behind deep nested interactions.
152+
- Do not duplicate control responsibilities across multiple permanent panels.
153+
- Do not let legend dominate the viewport on mobile.
154+
- Do not ship mockups that ignore existing toolbar placement or safe-area behavior.
155+
156+
## Mockup Authoring Rules
157+
158+
For files under `docs/superpowers/mockups/*.html`:
159+
160+
- Use standalone HTML (inline CSS/JS, no build step required).
161+
- Set `<html lang="he" dir="rtl">`.
162+
- Show **current shell + new overlay additions** unless intentionally exploring shell redesign.
163+
- Include at least two states where relevant (closed/open, legend hidden/shown).
164+
- Use realistic Hebrew labels and counts from project context.
165+
166+
## Review Checklist
167+
168+
- Does it match current app shell structure?
169+
- Is RTL/Hebrew correctly applied?
170+
- Is mobile spacing realistic (especially vertical stack pressure)?
171+
- Are layer, basemap, and legend responsibilities clear and separate?
172+
- Can user do all required layer actions (show all/hide all + per-layer)?
173+
- Is legend control location clear, and legend display location clear?

‎docs/superpowers/mockups/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Nur Colab Map — Layer Controls Mockups
2+
3+
Purpose: reviewable HTML mockups for layer controls, legend behavior, and basemap switching, aligned with the current `MapPage` visual language (dark glass chrome, RTL Hebrew labels, mobile-first layout).
4+
5+
| File | Role |
6+
|------|------|
7+
| `nur-colab-map-layer-controls-mockups.html` | Hub page with variant selector + embedded preview iframe. |
8+
| `nur-colab-map-layer-controls-variant-c.html` | Variant C (chosen direction): current colab shell + compact bottom strip, cityscope-style horizontal pack strip + layer tiles, per-pack master toggle, persistent basemap + legend tray controls with no duplicated controls inside the layer sheet. |
9+
10+
## What these mockups include
11+
12+
- Pack-level toggle + per-layer toggles.
13+
- Basemap switch (`לוויין` / `OSM`).
14+
- Grouped legend behavior for multiple active packs.
15+
- Mobile and desktop responsive behavior in one HTML each.
16+
- Interactive control states (sheet open/close, toggles, variant-specific sections).
17+
18+
## What these mockups do not include
19+
20+
- Real map rendering.
21+
- Real data loading from manifests.
22+
- Supabase wiring.
23+
24+
## Related plan
25+
26+
- `../plans/2026-04-23-layer-controls-and-basemap.md`

‎docs/superpowers/mockups/nur-colab-map-layer-controls-mockups.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="he" dir="rtl">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Nur Colab Map — Layer Controls Mockups</title>
7+
<style>
8+
* { box-sizing: border-box; font-family: Inter, "Noto Sans Hebrew", Arial, sans-serif; }
9+
body {
10+
margin: 0;
11+
min-height: 100vh;
12+
background: linear-gradient(145deg, #12161c, #0c0f13);
13+
color: rgba(255, 255, 255, 0.95);
14+
}
15+
.wrap { max-width: 1280px; margin: 0 auto; padding: 20px; }
16+
.title {
17+
border: 1px solid rgba(255,255,255,.14);
18+
border-radius: 14px;
19+
background: rgba(20,20,20,.5);
20+
backdrop-filter: blur(10px);
21+
padding: 14px;
22+
}
23+
.actions {
24+
margin-top: 12px;
25+
display: flex;
26+
gap: 8px;
27+
flex-wrap: wrap;
28+
}
29+
button, a {
30+
border: 1px solid rgba(255,255,255,.18);
31+
border-radius: 10px;
32+
background: rgba(255,255,255,.08);
33+
color: rgba(255,255,255,.95);
34+
padding: 8px 12px;
35+
font-size: 13px;
36+
text-decoration: none;
37+
cursor: pointer;
38+
}
39+
button.active { background: rgba(255, 105, 180, 0.24); border-color: rgba(255, 105, 180, 0.5); }
40+
.frame {
41+
margin-top: 14px;
42+
height: 78vh;
43+
border: 1px solid rgba(255,255,255,.14);
44+
border-radius: 14px;
45+
overflow: hidden;
46+
background: rgba(0,0,0,.35);
47+
}
48+
iframe { width: 100%; height: 100%; border: 0; }
49+
.meta { color: rgba(255,255,255,.72); font-size: 13px; margin-top: 10px; }
50+
</style>
51+
</head>
52+
<body>
53+
<main class="wrap">
54+
<section class="title">
55+
<h1 style="margin:0 0 8px">מוקאפ בקרות שכבות — Nur Colab Map</h1>
56+
<div class="meta">
57+
כל הווריאנטים כאן הם
58+
<strong>Current UI + Overlay</strong>
59+
(base-map-controls למעלה + pink/memorial toolbar למטה) כדי לראות פיט אמיתי במובייל.
60+
</div>
61+
<div class="actions">
62+
<button class="variant active" data-src="nur-colab-map-layer-controls-variant-c.html">Variant C (selected)</button>
63+
<a href="README.md" target="_blank" rel="noreferrer">README</a>
64+
</div>
65+
</section>
66+
67+
<section class="frame">
68+
<iframe id="preview" src="nur-colab-map-layer-controls-variant-c.html" title="Layer controls mockup preview"></iframe>
69+
</section>
70+
</main>
71+
72+
<script>
73+
const preview = document.getElementById("preview");
74+
const buttons = document.querySelectorAll(".variant");
75+
buttons.forEach((btn) => {
76+
btn.addEventListener("click", () => {
77+
buttons.forEach((b) => b.classList.remove("active"));
78+
btn.classList.add("active");
79+
preview.src = btn.dataset.src;
80+
});
81+
});
82+
</script>
83+
</body>
84+
</html>

0 commit comments

Comments
 (0)