Skip to content

Map a country's cities, linked to the city list - #257

Open
engleek wants to merge 1 commit into
feat/country-overviewfrom
feat/country-map
Open

engleek wants to merge 1 commit into
feat/country-overviewfrom
feat/country-map

Conversation

@engleek

@engleek engleek commented Oct 5, 2026 •

Copy link
Copy Markdown
Contributor

Part of #258. Stacked on #256 (merge that first). The "All studios in Rennes" links need #259's city filter, and the "Explore on the map" link needs its /places?country=, so merge #259 before this too.

Reworked: this PR first had a regional choropleth. It weighted big, nearly empty regions over the cities where the scene actually is, and it repeated the list. This is variant A from the prototype (branch chore/prototype-country-city-map), which you picked.

What it does

  • One view, linked both ways: the cities section is the ranked list with the studio/association split, next to a map with a circle per city, sized by its studios and associations. Hovering or focusing a city highlights it in both.
  • Choosing a city (click, Enter or Space, in the list or on the map) opens who's there: its studios and associations, each linking to its page, plus "All studios in Rennes" and "All associations in Rennes".
  • "Explore France on the map" opens /places?country=FR. The full exploration stays there.

How

  • Positions: a city sits at the mean of its organisations' coordinates (citiesOf, which replaces topCities and also returns each city's organisations for the drill-down).
  • Outline: Natural Earth's public-domain admin-1 data, dissolved into one small TopoJSON outline per country by scripts/build-country-maps.mjs (240 countries, 496 KB in all, 3–15 KB each, with a pinned mapshaper run through npx). It's drawn in the browser, so d3 (d3-geo, topojson-client, d3-composite-projections) stays out of the server bundle.
  • Fitting:
    • The view fits the mainland (the largest landmass and those within 12° of it) plus any city beyond it. French Guiana doesn't shrink France, Svalbard doesn't shrink Norway, and a city out there is still shown.
    • France, Spain and Portugal get inset boxes only when a city is overseas, so there are no empty boxes.
    • The US uses Albers USA.
    • Countries crossing the antimeridian are centred on themselves.

Tests

  • Unit:
    • mainland France is fitted with Paris in the middle third, Rennes west and Marseille south;
    • an overseas city brings the insets, and it's placed inside them;
    • Japan fits its main islands, an outlying city (Longyearbyen) stays in view, and Russia is centred;
    • cities without coordinates are left out;
    • all 240 maps draw;
    • citiesOf's positions and lists.
  • e2e: the seeded Antarctic city appears as a circle labelled "2 studios, 1 association". Choosing it in the list opens the drill-down: its "All studios in…" link goes to /studios?country=AQ&city=…, and the studio links to its page. "Explore Antarctica on the map" points to /places?country=AQ.
  • build ✅, vitest 149/149 ✅, Playwright 74/74 ✅
  • Checked with France on a local copy of production data, at desktop and phone widths, in light and dark mode.

🤖 Generated with Claude Code

#258, prototype variant A: the cities section becomes a ranked list and a
map of the country with a circle per city, sized by its studios and
associations. Replaces the regional choropleth this PR first had, which
weighted big empty regions and repeated the list.

- Hovering or focusing a city highlights it in both the list and the
  map; choosing one (click, Enter or Space) opens who's there: its
  studios and associations, linking to their pages, and "All studios in
  Rennes" / "All associations in Rennes" (the lists' new ?city=).
- "Explore France on the map" opens /places?country=FR.
- A city sits at the mean of its organisations' coordinates (citiesOf).
- The map shows the country's outline, from Natural Earth's public-domain
  admin-1 data, dissolved per country into small TopoJSON files
  (scripts/build-country-maps.mjs; 240 countries, 496 KB in all). It's
  drawn in the browser, so d3 stays out of the server bundle.
- The view fits the mainland (the largest landmass and those near it, so
  French Guiana or Svalbard don't shrink France or Norway) plus any city
  beyond it. France, Spain and Portugal get insets only when a city is
  overseas; the US uses Albers USA.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@engleek engleek changed the title Map a country's studios and associations by region Map a country's cities, linked to the city list Oct 5, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant