Something went wrong. Try again.
Central platform for European atproto.<cc> country community websites
Something went wrong. Try again.
3.2 kB · 76 lines
Astro
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677---// The localness device (design system: "one map, framed by country"). It renders in a same-origin// iframe because it needs d3 + topojson at runtime; keeping it out of the main bundle means the// heavy map libs load only when the map scrolls into view (loading="lazy"). All deps are// self-hosted under /public/map/vendor — no third-party runtime requests.//// Build-time values (cc, accent, member dots, and on .eu the active communities) go in the src// query string; the iframe resolves light/dark itself so the map follows the page theme.import { getScope, statsCc } from '../config/scopes';import { EU27, ALSO_IN_EUROPE } from '../data/europe-regions';
interface Props { /** Member dots as "lon:lat:n,lon:lat:n". Empty renders the country outline with no members yet. */ dots?: string; class?: string; title?: string; /** Internal frame size. Larger + landscape = a denser character grid, for the background use. */ w?: number; h?: number; /** 'cover' fills the frame (no letterbox) for the full-bleed background; default keeps the whole map. */ fit?: 'cover' | 'meet';}
const { dots = '', class: cls, title, w, h, fit } = Astro.props;const scope = getScope(import.meta.env.PUBLIC_SITE_SCOPE);
// Cache-bust: /public map assets are served without a content hash, so browsers keep the old// locality-map.js after a deploy. Bump this when the map renderer changes; it versions both the// iframe URL (fresh HTML) and the script it loads (fresh JS).const MAP_VERSION = '11';
// A city scope colours the land by its home country (statsCc: Barcelona -> es) and frames the map to// its region via mapBox (Barcelona -> Catalunya). National scopes: statsCc === cc, no mapBox.const params = new URLSearchParams({ cc: statsCc(scope), accent: scope.accent });if (dots) params.set('dots', dots);if (w) params.set('w', String(w));if (h) params.set('h', String(h));if (fit) params.set('fit', fit);if (scope.mapBox) params.set('box', scope.mapBox.join(','));// A city scope marks its own city in red on the region frame (Barcelona highlighted on Catalunya).if (scope.tier === 'city') { const city = Object.values(scope.cities)[0]; if (city) { params.set('hi', city.join(',')); params.set('hicolor', scope.accent2); }}params.set('v', MAP_VERSION);// On the aggregate, colour by region — the SAME three tiers as the /stats table (shared lists in// data/europe-regions.ts, so map and stats never disagree): EU members are the bright #, the non-EU// "also in Europe" set (gb/no/ch/is/li) are the dim #, and any other land in the frame is dots.// The renderer reads `active` as the bright set and `lit` as the dim set.if (scope.aggregate) { params.set('active', EU27.join(',')); params.set('lit', ALSO_IN_EUROPE.join(','));}const src = `/map/locality-map.html?${params.toString()}`;---
<iframe class:list={['locality-map', cls]} src={src} title={title ?? 'Where the community is'} loading="lazy" scrolling="no"></iframe>
<style> .locality-map { width: 100%; aspect-ratio: 3 / 2; border: 0; display: block; background: transparent; color-scheme: light dark; }</style>