Skip to content

Redesign map with full-screen layout, floating controls, and configurable CSP#108

Merged
antosubash merged 10 commits intomainfrom
feature/heuristic-lumiere
Apr 15, 2026
Merged

Redesign map with full-screen layout, floating controls, and configurable CSP#108
antosubash merged 10 commits intomainfrom
feature/heuristic-lumiere

Conversation

@antosubash
Copy link
Copy Markdown
Owner

@antosubash antosubash commented Apr 12, 2026 •
edited
Loading

Summary

  • Redesign the map page from a sidebar layout to a full-screen map with floating control panels
  • Add configurable CSP via CspOptions so modules can add external origins without code changes
  • Fix MapLibre layer builder to handle null minzoom/maxzoom
  • Seed the default map with all 5 basemaps and 3 representative layers

Changes

Map page redesign (Browse.tsx)

  • Map now fills the entire viewport (no sidebar)
  • Layers and Basemaps controls are floating panels that expand from top-left buttons over the map
  • Basemap switcher chips remain at the bottom-left
  • Save, Manage catalog, Export PNG remain as floating buttons
  • All existing functionality preserved (add/remove/reorder layers, toggle visibility, opacity control, basemap switching)

Configurable CSP (CspOptions)

  • New CspOptions class with lists for ConnectSources, ImgSources, WorkerSources, FontSources, StyleSources
  • Added as Csp property on SimpleModuleOptions
  • CSP middleware reads from these lists, allowing modules to append origins at startup: 
    builder.AddSimpleModule(o => {
    o.Csp.ConnectSources.Add("https://tiles.myserver.com");
});

Layer builder fix (layer-builders.ts)

  • Added defined() helper to omit null/undefined keys from MapLibre source specs
  • Prevents minzoom: undefined validation errors

Default map seed (MapService.cs)

  • Default map is pre-populated with all 5 seeded basemaps and 3 layers (OSM raster, earthquake GeoJSON, terrestris WMS)

Files changed

File Change
modules/Map/src/SimpleModule.Map/Pages/Browse.tsx Full rewrite: sidebar → full-screen + floating panels
framework/SimpleModule.Hosting/CspOptions.cs New: configurable CSP directive lists
framework/SimpleModule.Hosting/SimpleModuleOptions.cs Add Csp property
framework/SimpleModule.Hosting/SimpleModuleHostExtensions.cs CSP middleware reads from CspOptions
modules/Map/src/SimpleModule.Map/Pages/lib/layer-builders.ts Fix null minzoom/maxzoom handling
modules/Map/src/SimpleModule.Map/MapService.cs Seed default map with basemaps + layers
docs/screenshots/ Removed

Test plan

  • dotnet build succeeds
  • npm run build succeeds
  • All 24 Map tests pass
  • Map fills entire viewport with rendered tiles
  • Layers panel opens as floating overlay with all controls
  • Basemaps panel opens as floating overlay
  • Basemap switcher chips work at bottom
  • Layer visibility toggle, opacity, reorder, add/remove all work
  • Catalog page (/map/layers) unaffected

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Apr 12, 2026 •
edited
Loading

Deploying simplemodule-website with  Cloudflare Pages  Cloudflare Pages

Latest commit: f5918fe
Status: ✅  Deploy successful!
Preview URL: https://8d0c3eb6.simplemodule-website.pages.dev
Branch Preview URL: https://feature-heuristic-lumiere.simplemodule-website.pages.dev

View logs

@antosubash antosubash changed the title Seed default map with all basemaps and representative layers Seed default map with basemaps/layers and fix CSP for MapLibre Apr 12, 2026
@antosubash
Redesign map page with full-screen layout, floating controls, and con…
945e3cc 
…figurable CSP

- Rewrite Browse.tsx: map fills entire viewport, layers/basemaps are
  floating panels that expand over the map instead of a fixed sidebar
- Add CspOptions to SimpleModuleOptions so modules can append extra
  origins to connect-src, img-src, worker-src, font-src, style-src
- Remove committed screenshot files
@antosubash antosubash changed the title Seed default map with basemaps/layers and fix CSP for MapLibre Redesign map with full-screen layout, floating controls, and configurable CSP Apr 12, 2026
@antosubash
Merge branch 'main' into feature/heuristic-lumiere
856c4c4
@antosubash
Break map out of max-w-7xl layout with fixed positioning
fb51a12 
The map page was previously constrained to the public layout's max-w-7xl
container. Using fixed positioning below the nav (top: 57px) lets the
map fill the full viewport width as intended.

Also adds screenshots documenting the redesigned map UI.
@antosubash
Copy link
Copy Markdown
Owner Author

antosubash commented Apr 15, 2026

Screenshots — redesigned full-screen map

All screenshots verified to show visible map tiles rendering correctly after the layout fix.

1. Default map — full-screen with all controls visible

Default map

2. Layers floating panel (expanded from top-left button)

Layers panel

3. Basemaps floating panel with reorder, delete, add, and fallback URL

Basemaps panel

4. Basemap switched to OpenFreeMap Liberty (detailed vector tiles)

Basemap switched

5. Layer visibility toggled off (OSM raster hidden, only earthquake points visible)

Layer toggled off

6. Layer removed (terrestris WMS deleted, 2 layers remain)

Layer removed

7. Catalog management page

Catalog page

@antosubash
Simplify code reviewed in /simplify pass
ea288c0 
- Pre-compute CSP strings at startup instead of rebuilding per request
  (removes 5 string.Join + 10 string concats per HTTP response)
- Extract seed GUIDs into BasemapConfiguration.SeedIds and
  LayerSourceConfiguration.SeedIds; MapService now references them
  instead of re-declaring literal Guids
- Collapse the 5 repeated MapBasemap constructors in the default-map
  seed into a single Select() over SeedIds.All
- Replace two boolean panel states (layersPanelOpen, basemapsPanelOpen)
  with a single openPanel union so mutual exclusion is enforced by the
  type, not by manual else-branches
- Literal … instead of \u2026 escape, drop obvious comments
@antosubash
Update map e2e tests for redesigned full-screen layout
341e4eb 
The redesign removed the `Default map` h1 and the `[data-testid=map-side-panel]`
wrapper; layers/basemaps are now floating toggle-able panels. Update the
smoke tests and page object to match.
@antosubash
Respect authenticated app layout sidebar/nav in map viewport
8d94acf 
The fixed-positioned map previously used hardcoded top: 57px and left: 0,
which worked for the public layout but was covered by the authenticated
layout's left sidebar and had the wrong top offset for the mobile header.

Measure nav/sidebar bounds at mount and on resize/sidebar-transition and
apply them as top/left inset on the map container so the map fills the
correct space in every layout.
@antosubash
Use inline styles for map control positioning
f5918fe 
The map controls relied on Tailwind utilities (top-3, bottom-3, left-3,
right-3, top-14) that the host's incremental Tailwind build doesn't
regenerate when only module .tsx sources change — when the CSS bundle
is stale, all four controls fall back to position: absolute with no
offsets and stack at the top-left, breaking CI smoke tests and the
actual layout.

Inline styles via CSSProperties don't depend on the Tailwind pipeline
and keep the positioning correct regardless of how the host's CSS
happens to be built.
@antosubash antosubash merged commit 73400eb into main Apr 15, 2026
5 checks passed
@antosubash antosubash deleted the feature/heuristic-lumiere branch April 15, 2026 11:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@antosubash