feat: 添加 2D/3D 地图切换与坐标偏移功能

- 新增 WorldMap 组件，支持 2D 世界地图视图
- 主页添加 2D/3D 视图切换按钮
- 实现确定性坐标偏移算法，分散同城用户位置
- 更新 heatmap 和 register API 使用坐标偏移

app/[locale]/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import dynamic from "next/dynamic";
 import { useTranslations } from "next-intl";
-import { Map } from "lucide-react";
+import { Globe, Map } from "lucide-react";
 import { Navbar } from "@/components/layout/navbar";
 import { InstallBanner } from "@/components/layout/install-banner";
 import { ParticleBg } from "@/components/layout/particle-bg";
@@ -14,20 +14,29 @@ import { ClawFeed } from "@/components/dashboard/claw-feed";
 import { RegionRanking } from "@/components/dashboard/region-ranking";
 import { cn } from "@/lib/utils";
 
-const ContinentMap = dynamic(
+const WorldMap = dynamic(
   () =>
-    import("@/components/map/continent-map").then((m) => ({
+    import("@/components/map/world-map").then((m) => ({
-      default: m.ContinentMap,
+      default: m.WorldMap,
     })),
-  { ssr: false }
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex h-full items-center justify-center">
+        <div className="flex flex-col items-center gap-3">
+          <div className="h-8 w-8 animate-spin rounded-full border-2 border-[var(--accent-cyan)] border-t-transparent" />
+          <span className="font-mono text-xs text-[var(--text-muted)]">Loading map...</span>
+        </div>
+      </div>
+    ),
+  }
 );
 
-const continentSlugs = ["asia", "europe", "americas", "africa", "oceania"] as const;
+type ViewMode = "2d" | "3d";
 
 export default function HomePage() {
-  const [activeContinent, setActiveContinent] = useState<string>("asia");
+  const [viewMode, setViewMode] = useState<ViewMode>("2d");
-  const tContinents = useTranslations("continents");
+  const tNavbar = useTranslations("navbar");
-  const tRegion = useTranslations("regionExplorer");
 
   return (
     <div className="relative min-h-screen">
@@ -35,11 +44,12 @@ export default function HomePage() {
       <Navbar />
 
       <main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
-        {/* Section 1: Globe + Dashboard */}
+        {/* Section 1: Main Map View + Dashboard */}
         <section className="min-h-[calc(100vh-5rem)]">
           <div className="mb-4">
             <InstallBanner />
           </div>
+
           <div className="grid gap-4 lg:grid-cols-[280px_1fr_280px]">
             {/* Left Panel */}
             <div className="flex flex-col gap-4">
@@ -47,11 +57,49 @@ export default function HomePage() {
               <RegionRanking />
             </div>
 
-            {/* Center - Globe + Timeline */}
+            {/* Center - Map/Globe + Timeline */}
             <div className="flex flex-col gap-4">
-              <div className="h-[500px] lg:h-[600px]">
+              {/* View Switcher + Map Container */}
-                <GlobeView />
+              <div className="relative h-[500px] lg:h-[600px]">
+                {/* View Mode Toggle */}
+                <div className="absolute left-4 top-4 z-20 flex rounded-lg border border-white/10 bg-[var(--bg-card)]/90 p-1 backdrop-blur-sm">
+                  <button
+                    onClick={() => setViewMode("2d")}
+                    className={cn(
+                      "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
+                      viewMode === "2d"
+                        ? "bg-[var(--accent-cyan)]/20 text-[var(--accent-cyan)]"
+                        : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
+                    )}
+                  >
+                    <Map className="h-3.5 w-3.5" />
+                    {tNavbar("map")}
+                  </button>
+                  <button
+                    onClick={() => setViewMode("3d")}
+                    className={cn(
+                      "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
+                      viewMode === "3d"
+                        ? "bg-[var(--accent-cyan)]/20 text-[var(--accent-cyan)]"
+                        : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
+                    )}
+                  >
+                    <Globe className="h-3.5 w-3.5" />
+                    {tNavbar("globe")}
+                  </button>
                 </div>
+
+                {/* Map View */}
+                {viewMode === "2d" && (
+                  <WorldMap className="h-full w-full" />
+                )}
+
+                {/* Globe View */}
+                {viewMode === "3d" && (
+                  <GlobeView />
+                )}
+              </div>
+
               <ActivityTimeline />
             </div>
 
@@ -61,47 +109,6 @@ export default function HomePage() {
             </div>
           </div>
         </section>
-
-        {/* Section 2: Region Explorer */}
-        <section className="mt-8">
-          <div className="mb-4 flex items-center justify-between">
-            <h2
-              className="flex items-center gap-2 font-mono text-2xl font-bold"
-              style={{
-                color: "var(--accent-cyan)",
-                textShadow: "var(--glow-cyan)",
-              }}
-            >
-              <Map className="h-5 w-5" />
-              {tRegion("title")}
-            </h2>
-          </div>
-
-          {/* Continent Tabs */}
-          <div className="mb-4 flex flex-wrap gap-2">
-            {continentSlugs.map((slug) => (
-              <button
-                key={slug}
-                onClick={() => setActiveContinent(slug)}
-                className={cn(
-                  "rounded-lg border px-4 py-2 text-sm font-medium transition-all",
-                  activeContinent === slug
-                    ? "border-[var(--accent-cyan)]/30 bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
-                    : "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
-                )}
-              >
-                {tContinents(slug)}
-              </button>
-            ))}
-          </div>
-
-          {/* Map — explicit height so MapLibre can render */}
-          <ContinentMap
-            key={activeContinent}
-            slug={activeContinent}
-            className="h-[calc(100vh-14rem)]"
-          />
-        </section>
       </main>
     </div>
   );

app/api/v1/heatmap/route.ts

@@ -1,8 +1,9 @@
 import { NextResponse } from "next/server";
-import { and, isNotNull, sql } from "drizzle-orm";
+import { and, isNotNull } from "drizzle-orm";
 import { db } from "@/lib/db";
 import { claws } from "@/lib/db/schema";
 import { getCacheHeatmap, setCacheHeatmap } from "@/lib/redis";
+import { applyDeterministicOffset } from "@/lib/geo/offset";
 
 export async function GET() {
   try {
@@ -13,31 +14,7 @@ export async function GET() {
 
     const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
 
-    // Query all claws with coordinates, grouped by location
+    // Fetch all claws with base coordinates
-    const locationRows = await db
-      .select({
-        city: claws.city,
-        country: claws.country,
-        latitude: claws.latitude,
-        longitude: claws.longitude,
-        count: sql<number>`count(*)`,
-        onlineCount: sql<number>`sum(case when ${claws.lastHeartbeat} >= ${fiveMinutesAgo} then 1 else 0 end)`,
-      })
-      .from(claws)
-      .where(
-        and(
-          isNotNull(claws.latitude),
-          isNotNull(claws.longitude)
-        )
-      )
-      .groupBy(
-        claws.city,
-        claws.country,
-        claws.latitude,
-        claws.longitude
-      );
-
-    // Fetch individual claw details for all claws with coordinates
     const clawDetails = await db
       .select({
         id: claws.id,
@@ -56,30 +33,56 @@ export async function GET() {
         )
       );
 
-    // Group claw details by location key
+    // Apply deterministic offset to each claw and group by unique coordinates
-    const clawsByLocation = new Map<string, Array<{ id: string; name: string; isOnline: boolean }>>();
+    const pointMap = new Map<string, {
+      lat: number;
+      lng: number;
+      city: string | null;
+      country: string | null;
+      claws: Array<{ id: string; name: string; isOnline: boolean }>;
+      onlineCount: number;
+    }>();
+
     for (const claw of clawDetails) {
-      const key = `${claw.latitude}:${claw.longitude}`;
+      if (!claw.latitude || !claw.longitude) continue;
+
+      const baseLat = Number(claw.latitude);
+      const baseLng = Number(claw.longitude);
+
+      // Apply deterministic offset based on claw ID
+      const offset = applyDeterministicOffset(baseLat, baseLng, claw.id);
       const isOnline = claw.lastHeartbeat ? claw.lastHeartbeat >= fiveMinutesAgo : false;
-      const list = clawsByLocation.get(key) ?? [];
+
-      list.push({ id: claw.id, name: claw.name, isOnline });
+      // Use rounded coordinates as key for grouping (within ~100m)
-      clawsByLocation.set(key, list);
+      const key = `${offset.lat.toFixed(4)}:${offset.lng.toFixed(4)}`;
+
+      const existing = pointMap.get(key);
+      if (existing) {
+        existing.claws.push({ id: claw.id, name: claw.name, isOnline });
+        if (isOnline) existing.onlineCount++;
+      } else {
+        pointMap.set(key, {
+          lat: offset.lat,
+          lng: offset.lng,
+          city: claw.city,
+          country: claw.country,
+          claws: [{ id: claw.id, name: claw.name, isOnline }],
+          onlineCount: isOnline ? 1 : 0,
+        });
+      }
     }
 
-    const points = locationRows.map((row) => {
+    // Convert map to array of points
-      const key = `${row.latitude}:${row.longitude}`;
+    const points = Array.from(pointMap.values()).map((point) => ({
-      const clawList = (clawsByLocation.get(key) ?? []).slice(0, 20);
+      lat: point.lat,
-      return {
+      lng: point.lng,
-        lat: Number(row.latitude),
+      weight: point.claws.length,
-        lng: Number(row.longitude),
+      clawCount: point.claws.length,
-        weight: row.count,
+      onlineCount: point.onlineCount,
-        clawCount: row.count,
+      city: point.city,
-        onlineCount: Number(row.onlineCount ?? 0),
+      country: point.country,
-        city: row.city,
+      claws: point.claws.slice(0, 20), // Limit to 20 claws per point for display
-        country: row.country,
+    }));
-        claws: clawList,
-      };
-    });
 
     const lastUpdated = new Date().toISOString();
     const responseData = { points, lastUpdated };

app/api/v1/register/route.ts

@@ -11,6 +11,7 @@ import {
 } from "@/lib/redis";
 import { generateApiKey } from "@/lib/auth/api-key";
 import { getGeoLocation } from "@/lib/geo/ip-location";
+import { applyDeterministicOffset } from "@/lib/geo/offset";
 import { registerSchema } from "@/lib/validators/schemas";
 
 function getClientIp(req: NextRequest): string {
@@ -39,6 +40,15 @@ export async function POST(req: NextRequest) {
     const geo = await getGeoLocation(clientIp);
     const now = new Date();
 
+    // Apply deterministic offset to spread out users in the same city
+    let finalLat: number | null = null;
+    let finalLng: number | null = null;
+    if (geo) {
+      const offset = applyDeterministicOffset(geo.latitude, geo.longitude, clawId);
+      finalLat = offset.lat;
+      finalLng = offset.lng;
+    }
+
     await db.insert(claws).values({
       id: clawId,
       apiKey,
@@ -46,8 +56,8 @@ export async function POST(req: NextRequest) {
       model: model ?? null,
       platform: platform ?? null,
       ip: clientIp,
-      latitude: geo ? String(geo.latitude) : null,
+      latitude: finalLat !== null ? String(finalLat) : null,
-      longitude: geo ? String(geo.longitude) : null,
+      longitude: finalLng !== null ? String(finalLng) : null,
       city: geo?.city ?? null,
       country: geo?.country ?? null,
       countryCode: geo?.countryCode ?? null,

components/map/world-map.tsx

@@ -0,0 +1,319 @@
+"use client";
+
+import { useState, useMemo, useCallback } from "react";
+import { useLocale } from "next-intl";
+import Map, { Source, Layer, Popup, NavigationControl } from "react-map-gl/maplibre";
+import type { MapLayerMouseEvent, LngLatLike, MapRef } from "react-map-gl/maplibre";
+import type { LayerSpecification } from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { useHeatmapData, type HeatmapPoint } from "@/hooks/use-heatmap-data";
+import { cn } from "@/lib/utils";
+import { MapPopup } from "./map-popup";
+
+const CARTO_STYLE =
+  "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json";
+
+// Generate claw icon as ImageData using Canvas
+function createClawIconImage(): HTMLImageElement | null {
+  if (typeof document === "undefined") return null;
+
+  const canvas = document.createElement("canvas");
+  canvas.width = 64;
+  canvas.height = 64;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+
+  // Draw lobster body
+  ctx.fillStyle = "#ff6b35";
+  ctx.beginPath();
+  ctx.ellipse(32, 38, 12, 18, 0, 0, Math.PI * 2);
+  ctx.fill();
+
+  // Tail segments
+  ctx.fillStyle = "#e55a2b";
+  ctx.beginPath();
+  ctx.ellipse(32, 54, 8, 6, 0, 0, Math.PI * 2);
+  ctx.fill();
+
+  ctx.fillStyle = "#cc4a1f";
+  ctx.beginPath();
+  ctx.ellipse(32, 60, 5, 4, 0, 0, Math.PI * 2);
+  ctx.fill();
+
+  // Head
+  ctx.fillStyle = "#ff6b35";
+  ctx.beginPath();
+  ctx.ellipse(32, 22, 10, 8, 0, 0, Math.PI * 2);
+  ctx.fill();
+
+  // Eyes
+  ctx.fillStyle = "#1a1a2e";
+  ctx.beginPath();
+  ctx.arc(27, 18, 3, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(37, 18, 3, 0, Math.PI * 2);
+  ctx.fill();
+
+  // Eye highlights
+  ctx.fillStyle = "#fff";
+  ctx.beginPath();
+  ctx.arc(27.5, 17, 1, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(37.5, 17, 1, 0, Math.PI * 2);
+  ctx.fill();
+
+  // Antennae
+  ctx.strokeStyle = "#ff6b35";
+  ctx.lineWidth = 2;
+  ctx.lineCap = "round";
+  ctx.beginPath();
+  ctx.moveTo(24, 14);
+  ctx.quadraticCurveTo(18, 8, 14, 4);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(40, 14);
+  ctx.quadraticCurveTo(46, 8, 50, 4);
+  ctx.stroke();
+
+  // Left claw
+  ctx.fillStyle = "#ff6b35";
+  ctx.beginPath();
+  ctx.ellipse(14, 32, 8, 6, 0, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.ellipse(10, 28, 5, 4, 0, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.ellipse(10, 36, 5, 4, 0, 0, Math.PI * 2);
+  ctx.fill();
+
+  // Right claw
+  ctx.beginPath();
+  ctx.ellipse(50, 32, 8, 6, 0, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.ellipse(54, 28, 5, 4, 0, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.ellipse(54, 36, 5, 4, 0, 0, Math.PI * 2);
+  ctx.fill();
+
+  // Legs
+  ctx.strokeStyle = "#e55a2b";
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(22, 40);
+  ctx.lineTo(14, 44);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(22, 46);
+  ctx.lineTo(14, 52);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(42, 40);
+  ctx.lineTo(50, 44);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(42, 46);
+  ctx.lineTo(50, 52);
+  ctx.stroke();
+
+  const img = new Image();
+  img.src = canvas.toDataURL();
+  return img;
+}
+
+const heatmapLayer: LayerSpecification = {
+  id: "claw-heat",
+  type: "heatmap",
+  source: "claws",
+  paint: {
+    "heatmap-weight": ["get", "weight"],
+    "heatmap-intensity": 1,
+    "heatmap-radius": 30,
+    "heatmap-opacity": 0.6,
+    "heatmap-color": [
+      "interpolate",
+      ["linear"],
+      ["heatmap-density"],
+      0,
+      "rgba(0,0,0,0)",
+      0.2,
+      "rgba(0,240,255,0.15)",
+      0.4,
+      "rgba(0,240,255,0.3)",
+      0.6,
+      "rgba(0,200,220,0.5)",
+      1,
+      "rgba(0,240,255,0.8)",
+    ],
+  },
+};
+
+const symbolLayer: LayerSpecification = {
+  id: "claw-icons",
+  type: "symbol",
+  source: "claws",
+  layout: {
+    "icon-image": "claw-icon",
+    "icon-size": [
+      "interpolate",
+      ["linear"],
+      ["get", "weight"],
+      1,
+      0.3,
+      5,
+      0.5,
+      10,
+      0.7,
+    ],
+    "icon-allow-overlap": true,
+    "icon-anchor": "center",
+  },
+  paint: {
+    "icon-opacity": [
+      "case",
+      [">", ["get", "onlineCount"], 0],
+      1,
+      0.4,
+    ],
+  },
+};
+
+interface WorldMapProps {
+  className?: string;
+}
+
+export function WorldMap({ className }: WorldMapProps) {
+  const locale = useLocale();
+  const { points } = useHeatmapData(30000);
+  const [popupPoint, setPopupPoint] = useState<HeatmapPoint | null>(null);
+  const [popupLngLat, setPopupLngLat] = useState<LngLatLike | null>(null);
+
+  // Build a MapLibre expression: coalesce(get("name:zh"), get("name_en"), get("name"))
+  // For English, just use name_en with name fallback.
+  const localizedTextField = useMemo(
+    () =>
+      locale === "en"
+        ? ["coalesce", ["get", "name_en"], ["get", "name"]]
+        : ["coalesce", ["get", `name:${locale}`], ["get", "name_en"], ["get", "name"]],
+    [locale]
+  );
+
+  const handleLoad = useCallback(
+    (e: { target: MapRef["getMap"] extends () => infer M ? M : never }) => {
+      const map = e.target;
+
+      // Create and load claw icon
+      const iconImg = createClawIconImage();
+      if (iconImg) {
+        iconImg.onload = () => {
+          if (!map.hasImage("claw-icon")) {
+            map.addImage("claw-icon", iconImg);
+          }
+        };
+      }
+
+      for (const layer of map.getStyle().layers ?? []) {
+        if (layer.type === "symbol") {
+          const tf = map.getLayoutProperty(layer.id, "text-field");
+          if (tf != null) {
+            map.setLayoutProperty(layer.id, "text-field", localizedTextField);
+          }
+        }
+      }
+    },
+    [localizedTextField]
+  );
+
+  const geojson = useMemo(() => {
+    const features = points.map((p) => ({
+      type: "Feature" as const,
+      geometry: {
+        type: "Point" as const,
+        coordinates: [p.lng, p.lat],
+      },
+      properties: {
+        weight: p.weight,
+        clawCount: p.clawCount,
+        onlineCount: p.onlineCount,
+        city: p.city,
+        country: p.country,
+        claws: JSON.stringify(p.claws),
+      },
+    }));
+    return {
+      type: "FeatureCollection" as const,
+      features,
+    };
+  }, [points]);
+
+  const handleClick = useCallback(
+    (e: MapLayerMouseEvent) => {
+      const feature = e.features?.[0];
+      if (!feature || feature.geometry.type !== "Point") {
+        setPopupPoint(null);
+        return;
+      }
+      const props = feature.properties;
+      const [lng, lat] = feature.geometry.coordinates;
+      const matched = points.find(
+        (p) => p.city === props.city && p.country === props.country
+      );
+      if (matched) {
+        setPopupPoint(matched);
+        setPopupLngLat([lng, lat]);
+      }
+    },
+    [points]
+  );
+
+  return (
+    <div className={cn("overflow-hidden rounded-xl border border-white/5 bg-[var(--bg-secondary)]", className)}>
+      <Map
+        initialViewState={{
+          longitude: 0,
+          latitude: 20,
+          zoom: 1.5,
+        }}
+        style={{ width: "100%", height: "100%" }}
+        mapStyle={CARTO_STYLE}
+        interactiveLayerIds={["claw-icons"]}
+        onClick={handleClick}
+        onLoad={handleLoad}
+        cursor="default"
+        attributionControl={false}
+        minZoom={1}
+        maxZoom={8}
+      >
+        <NavigationControl
+          position="bottom-right"
+          showCompass={false}
+        />
+
+        <Source id="claws" type="geojson" data={geojson}>
+          <Layer {...heatmapLayer} />
+          <Layer {...symbolLayer} />
+        </Source>
+
+        {popupPoint && popupLngLat && (
+          <Popup
+            longitude={(popupLngLat as [number, number])[0]}
+            latitude={(popupLngLat as [number, number])[1]}
+            onClose={() => setPopupPoint(null)}
+            closeButton={false}
+            className="maplibre-dark-popup"
+            maxWidth="280px"
+          >
+            <MapPopup
+              point={popupPoint}
+              onClose={() => setPopupPoint(null)}
+            />
+          </Popup>
+        )}
+      </Map>
+    </div>
+  );
+}

lib/geo/offset.ts

@@ -0,0 +1,72 @@
+/**
+ * Generate a deterministic offset based on a unique identifier.
+ * This ensures the same ID always gets the same offset,
+ * allowing multiple users in the same city to be spread out
+ * while maintaining consistent positions.
+ *
+ * @param id - Unique identifier (e.g., claw ID)
+ * @param maxOffsetKm - Maximum offset in kilometers (default: 15km)
+ * @returns Object with lat and lng offsets in degrees
+ */
+export function generateDeterministicOffset(
+  id: string,
+  maxOffsetKm: number = 15
+): { latOffset: number; lngOffset: number } {
+  // Simple hash function to convert string to number
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    const char = id.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+
+  // Use the hash to generate two pseudo-random values between -1 and 1
+  // Using simple modulo arithmetic for determinism
+  const seed1 = Math.abs(hash % 10000) / 10000; // 0 to 1
+  const seed2 = Math.abs((hash >> 8) % 10000) / 10000; // 0 to 1
+
+  // Convert to -1 to 1 range with better distribution
+  const factor1 = (seed1 * 2 - 1);
+  const factor2 = (seed2 * 2 - 1);
+
+  // Convert km to degrees (approximate)
+  // 1 degree latitude ≈ 111km
+  // 1 degree longitude varies by latitude (cos(lat) * 111km)
+  // We use a rough average here
+  const kmPerDegree = 111;
+  const maxOffsetDegrees = maxOffsetKm / kmPerDegree;
+
+  return {
+    latOffset: factor1 * maxOffsetDegrees,
+    lngOffset: factor2 * maxOffsetDegrees,
+  };
+}
+
+/**
+ * Apply deterministic offset to coordinates.
+ * This spreads out users in the same city while keeping
+ * each user's position consistent.
+ *
+ * @param lat - Original latitude
+ * @param lng - Original longitude
+ * @param id - Unique identifier for deterministic offset
+ * @param maxOffsetKm - Maximum offset in kilometers
+ * @returns New coordinates with offset applied
+ */
+export function applyDeterministicOffset(
+  lat: number,
+  lng: number,
+  id: string,
+  maxOffsetKm: number = 15
+): { lat: number; lng: number } {
+  const { latOffset, lngOffset } = generateDeterministicOffset(id, maxOffsetKm);
+
+  // Adjust longitude offset based on latitude
+  // (longitude degrees get smaller towards poles)
+  const lngCorrection = Math.cos((lat * Math.PI) / 180);
+
+  return {
+    lat: lat + latOffset,
+    lng: lng + lngOffset * lngCorrection,
+  };
+}