Refactor

frontend/src/lib/map-utils.ts

@@ -0,0 +1,109 @@
+import type { ViewState, Bounds } from '../types';
+
+export const MAP_STYLE_LIGHT = 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
+export const MAP_STYLE_DARK = 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
+
+export const 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] },
+];
+
+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] },
+];
+
+export function normalizedToColor(t: number): [number, number, number] {
+  if (t <= 0) return GRADIENT[0].color;
+  if (t >= 1) return GRADIENT[GRADIENT.length - 1].color;
+
+  for (let i = 0; i < GRADIENT.length - 1; i++) {
+    const lo = GRADIENT[i];
+    const hi = GRADIENT[i + 1];
+    if (t >= lo.t && t <= hi.t) {
+      const frac = (t - lo.t) / (hi.t - lo.t);
+      return [
+        Math.round(lo.color[0] + (hi.color[0] - lo.color[0]) * frac),
+        Math.round(lo.color[1] + (hi.color[1] - lo.color[1]) * frac),
+        Math.round(lo.color[2] + (hi.color[2] - lo.color[2]) * frac),
+      ];
+    }
+  }
+  return GRADIENT[GRADIENT.length - 1].color;
+}
+
+export function countToColor(t: number): [number, number, number] {
+  if (t <= 0) return DENSITY_GRADIENT[0].color;
+  if (t >= 1) return DENSITY_GRADIENT[DENSITY_GRADIENT.length - 1].color;
+
+  for (let i = 0; i < DENSITY_GRADIENT.length - 1; i++) {
+    const lo = DENSITY_GRADIENT[i];
+    const hi = DENSITY_GRADIENT[i + 1];
+    if (t >= lo.t && t <= hi.t) {
+      const frac = (t - lo.t) / (hi.t - lo.t);
+      return [
+        Math.round(lo.color[0] + (hi.color[0] - lo.color[0]) * frac),
+        Math.round(lo.color[1] + (hi.color[1] - lo.color[1]) * frac),
+        Math.round(lo.color[2] + (hi.color[2] - lo.color[2]) * frac),
+      ];
+    }
+  }
+  return DENSITY_GRADIENT[DENSITY_GRADIENT.length - 1].color;
+}
+
+export function zoomToResolution(zoom: number): number {
+  if (zoom < 6) return 5;
+  if (zoom < 7) return 6;
+  if (zoom < 9.5) return 8;
+  if (zoom < 11) return 9;
+  if (zoom < 13) return 10;
+  if (zoom < 15) return 11;
+  return 12;
+}
+
+export function getBoundsFromViewState(
+  viewState: ViewState,
+  width: number,
+  height: number
+): Bounds {
+  const { longitude, latitude, zoom } = viewState;
+  const clampedLat = Math.max(-85, Math.min(85, latitude));
+  const TILE_SIZE = 256;
+  const scale = Math.pow(2, zoom);
+  const worldSize = TILE_SIZE * scale;
+
+  const degreesPerPixelLng = 360 / worldSize;
+  const halfWidthDeg = (width / 2) * degreesPerPixelLng;
+
+  const latRad = (clampedLat * Math.PI) / 180;
+  const mercatorY = (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2;
+  const centerPixelY = mercatorY * worldSize;
+
+  const topPixelY = centerPixelY - height / 2;
+  const bottomPixelY = centerPixelY + height / 2;
+
+  const pixelYToLat = (pixelY: number): number => {
+    const mercY = Math.max(0.001, Math.min(0.999, pixelY / worldSize));
+    const latRadians = Math.atan(Math.sinh(Math.PI * (1 - 2 * mercY)));
+    return (latRadians * 180) / Math.PI;
+  };
+
+  const north = Math.min(85, pixelYToLat(topPixelY));
+  const south = Math.max(-85, pixelYToLat(bottomPixelY));
+  const west = Math.max(-180, longitude - halfWidthDeg);
+  const east = Math.min(180, longitude + halfWidthDeg);
+
+  return { south, west, north, east };
+}
+
+const TWEMOJI_BASE = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/';
+
+export function emojiToTwemojiUrl(emoji: string): string {
+  const codePoint = emoji.codePointAt(0);
+  if (!codePoint) return `${TWEMOJI_BASE}1f4cd.png`;
+  const hex = codePoint.toString(16);
+  return `${TWEMOJI_BASE}${hex}.png`;
+}