land-map

Full-screen web map for land buyers in the Bangkok Metropolitan Region. Scope, screens, layers and milestones: docs/BRIEF.md. Working rules for Claude Code: CLAUDE.md.

Setup

nvm use            # Node 22
npm install
cp .env.example .env.local   # fill GISTDA_API_KEY before M3
npm run dev

Scripts

Command	What it does
npm run dev	Start the dev server
npm run lint	ESLint (no any)
npm run typecheck	tsc --noEmit, strict mode
npm test	Unit tests (Vitest, tests/unit)
npm run test:e2e	End-to-end tests (Playwright, 360×640 and 1440×900) against a production build; run npm run build first
npm run check:layers	Validate the layer registry and licences (placeholder until M2/M4; runs before every build)
npm run build	Production build

If Playwright cannot download a browser, point it at a local Chromium with PLAYWRIGHT_CHROMIUM_PATH=/path/to/chrome npm run test:e2e.

Notes

• Thai map labels. SDF glyph PBFs draw Thai vowels and tone marks as separate glyphs, so they overlap. src/lib/basemap.ts adds a font-faces entry for the Thai block pointing at self-hosted Noto Sans Thai (public/fonts, SIL OFL), so MapLibre renders each grapheme cluster with the browser's text engine.
• MapLibre worker. postinstall/predev/prebuild copy the standalone worker to public/vendor/maplibre/ (git-ignored); bundling breaks its default URL.
• Place search goes through /api/geocode (server-side Nominatim, cached 24h, submit-only as the public Nominatim policy requires).
• E2E tests replace the basemap with tests/e2e/fixtures/test-style.json, so they run offline and never hit the tile provider.

Layers

• Every layer is one entry in src/layers/registry.ts; its Thai name, summary and legend labels live in src/i18n/th.ts. No component knows about a layer id.
• npm run check:layers (runs before every build) fails on an invalid registry, including any status: "live" layer whose commercialUse is not "yes".
• Sample data is fictional and generated by node scripts/make-samples.mjs into public/data/*.sample.geojson.
• Visible layers are kept in the URL as ?l=id1,id2 (missing = defaults, empty = none).

Point inspection

• Tapping the map pins the point and opens one card per layer (visible layers first).
• GeoJSON layers are answered in the browser from the static data (src/lib/geo.ts); each layer's sentence comes from its inspect.describe in src/layers/describe/.
• "api" layers go through GET /api/inspect?layer=&lat=&lng=, which calls the provider server-side (src/lib/server/inspectors.ts) so keys never reach the browser.
• npm run check:secrets (after build, also in CI) fails if GISTDA_API_KEY appears in .next/static.

Data ingest

Sources, licences and status: docs/DATA_SOURCES.md.

Script	Output
node scripts/ingest/record-gistda-fixture.mjs	One real GISTDA response in tests/fixtures/ (key redacted)
node scripts/ingest/osm-rail.mjs	public/data/rail-transit.geojson from OpenStreetMap
node scripts/ingest/arcgis-rest.mjs <layer-url> <out>	GeoJSON (EPSG:4326) from an ArcGIS REST layer, paged; only after licence confirmation
node scripts/ingest/to-pmtiles.mjs <in> <out> <layer>	PMTiles via tippecanoe, for files over 2 MB

Usage events

src/lib/analytics.ts records layer_toggled, point_inspected and search_used through one track() function; the default sink logs to the console. Swap it with setAnalyticsSink().

Deploy (Vercel, Hobby plan is free)

1. Sign in at https://vercel.com with GitHub, Add New → Project, import Kanesuan/KNS.MAP.
2. Framework preset: Next.js (detected). No build settings to change.
3. Settings → Environment Variables:
   • GISTDA_API_KEY: the GISTDA key (server-side only, never NEXT_PUBLIC_).
   • NEXT_PUBLIC_BASEMAP_STYLE_URL: optional, defaults to OpenFreeMap Liberty.
4. Deploy. Every PR then gets its own preview URL.

The project is non-commercial (src/layers/project.ts), which fits the Hobby plan. A commercial launch would need Vercel Pro or another Next.js host (docs/BRIEF.md section 9).

Acceptance checks on the deployed URL

• npm run audit:lighthouse -- https://<your-domain> runs Lighthouse three times on the mobile profile and checks the brief's targets (Performance ≥ 80, Accessibility ≥ 90).
• In the build sandbox (no GPU, basemap fonts blocked) the lab score is about 70 for Performance and 100 for Accessibility; most of the remaining blocking time is WebGL drawn in software, so measure on the real URL.