Refactor UI

frontend/src/lib/consts.ts

@@ -0,0 +1,76 @@
+import type { ViewState } from '../types';
+
+// =============================================================================
+// Map Bounds & Zoom
+// =============================================================================
+
+/** Geographic bounds constraining map panning [west, south, east, north] */
+export const MAP_BOUNDS: [number, number, number, number] = [-12, 49, 4, 62];
+
+/** Minimum zoom level (can't zoom out further) */
+export const MAP_MIN_ZOOM = 5;
+
+/** Maximum zoom level for tile fetching (map extrapolates beyond this) */
+export const TILE_MAX_ZOOM = 15;
+
+/** Initial map view state */
+export const INITIAL_VIEW_STATE: ViewState = {
+  longitude: -1.5,
+  latitude: 53.5,
+  zoom: 6,
+  pitch: 0,
+};
+
+// =============================================================================
+// Zoom Thresholds
+// =============================================================================
+
+/** Zoom level at which we switch from H3 hexagons to postcode polygons */
+export const POSTCODE_ZOOM_THRESHOLD = 15;
+
+/**
+ * Zoom to H3 resolution mapping thresholds.
+ * Returns the H3 resolution to use for a given zoom level.
+ */
+export const ZOOM_TO_RESOLUTION_THRESHOLDS = [
+  { maxZoom: 7.5, resolution: 5 },
+  { maxZoom: 9.5, resolution: 6 },
+  { maxZoom: 10.5, resolution: 8 },
+  { maxZoom: 12, resolution: 9 },
+  { maxZoom: Infinity, resolution: 10 },
+] as const;
+
+// =============================================================================
+// Color Gradients
+// =============================================================================
+
+/** Feature value gradient (green → yellow → red → purple) */
+export const FEATURE_GRADIENT: { t: number; color: [number, number, number] }[] = [
+  { t: 0, color: [46, 204, 113] },
+  { t: 0.33, color: [241, 196, 15] },
+  { t: 0.66, color: [231, 76, 60] },
+  { t: 1, color: [142, 68, 173] },
+];
+
+/** Property density gradient (teal → blue → purple) */
+export const DENSITY_GRADIENT: { t: number; color: [number, number, number] }[] = [
+  { t: 0, color: [130, 234, 220] },
+  { t: 0.5, color: [20, 140, 180] },
+  { t: 1, color: [88, 28, 140] },
+];
+
+// =============================================================================
+// External URLs
+// =============================================================================
+
+/** Protomaps font glyphs URL */
+export const GLYPHS_URL = 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf';
+
+/** Protomaps sprite base URL */
+export const SPRITE_URL_BASE = 'https://protomaps.github.io/basemaps-assets/sprites/v4';
+
+/** Twemoji CDN base URL */
+export const TWEMOJI_BASE = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/';
+
+/** OpenStreetMap attribution HTML */
+export const OSM_ATTRIBUTION = '© <a href="https://openstreetmap.org">OpenStreetMap</a>';