Better Spherical Voronoi Diagram

TODO: Typings for geoSpatialVoronoi.

This seemingly simple commit took at least four hours of experimenting to complete. That's why it uses three additional modules. Trust me, this is the easiest way.

Author: taibeled

package.json

@@ -27,6 +27,9 @@
         "astro": "^5.1.10",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "d3-geo": "^3.1.1",
+        "d3-geo-projection": "^4.0.0",
+        "d3-geo-voronoi": "^2.1.0",
         "leaflet": "^1.9.4",
         "leaflet-contextmenu": "^1.4.0",
         "leaflet-draw": "^1.0.4",
@@ -47,6 +50,7 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.19.0",
+        "@types/d3-geo": "^3.1.0",
         "@types/geojson": "^7946.0.16",
         "@types/leaflet": "^1.9.16",
         "@types/lodash": "^4.17.15",

pnpm-lock.yaml

@@ -103,7 +103,7 @@ nw["${tentacleFirstTag[question.locationType]}"="${
         question.locationType
     }"](around:${turf.convertLength(
         question.radius,
-        question.unit,
+        question.unit ?? "miles",
         "meters",
     )}, ${question.lat}, ${question.lng});
 out center;

src/maps/api.ts

@@ -2,6 +2,7 @@ import type { LatLng } from "leaflet";
 import { findTentacleLocations, iconColors } from "./api";
 import * as turf from "@turf/turf";
 import { defaultUnit, questions } from "@/utils/context";
+import { geoSpatialVoronoi } from "./voronoi";
 
 export type TentacleLocations =
     | "aquarium"
@@ -29,24 +30,6 @@ export interface TentacleQuestion {
     locationType: TentacleLocations;
 }
 
-const createGeodesicPolygon = (polygon: any, steps = 20) => {
-    const coordinates = polygon.geometry.coordinates[0];
-    const geodesicLines = [];
-
-    for (let i = 0; i < coordinates.length - 1; i++) {
-        const start = coordinates[i];
-        const end = coordinates[i + 1];
-
-        const geodesicLine = turf.greatCircle(start, end, { npoints: steps });
-        geodesicLines.push(...geodesicLine.geometry.coordinates);
-    }
-
-    geodesicLines.push(geodesicLines[0]);
-
-    // @ts-expect-error Typing is wrong
-    return turf.polygon([geodesicLines]);
-};
-
 export const adjustPerTentacle = async (
     question: TentacleQuestion,
     mapData: any,
@@ -61,16 +44,19 @@ export const adjustPerTentacle = async (
     }
 
     const points = await findTentacleLocations(question);
-    const voronoi = turf.voronoi(points);
 
-    const correctPolygonPre = voronoi.features.find((feature: any) => {
+    const voronoi = geoSpatialVoronoi(points);
+
+    const correctPolygon = voronoi.features.find((feature: any) => {
         if (!question.location) return false;
-        return feature.properties.name === question.location.properties.name;
+        return (
+            feature.properties.site.properties.name ===
+            question.location.properties.name
+        );
     });
-    if (!correctPolygonPre) {
+    if (!correctPolygon) {
         return mapData;
     }
-    const correctPolygon = createGeodesicPolygon(correctPolygonPre);
 
     const circle = turf.circle(
         turf.point([question.lng, question.lat]),

src/maps/tentacles.ts

@@ -2,6 +2,7 @@ import { questions } from "@/utils/context";
 import { iconColors } from "./api";
 import * as turf from "@turf/turf";
 import type { LatLng } from "leaflet";
+import { geoSpatialVoronoi } from "./voronoi";
 
 export interface ThermometerQuestion {
     distance?: number;
@@ -25,57 +26,25 @@ export const adjustPerThermometer = (
         throw new Error("Cannot be masked");
     }
 
-    // This code is messy but functional
     const pointA = turf.point([question.lngA, question.latA]);
     const pointB = turf.point([question.lngB, question.latB]);
 
-    const bearing = turf.bearing(pointA, pointB);
-    const midpoint = turf.midpoint(pointA, pointB);
+    const voronoi = geoSpatialVoronoi(turf.featureCollection([pointA, pointB]));
 
-    const coordinates = [];
-
-    for (let i = -5000; i <= 5000; i += 10) {
-        // 5,000 is arbitrary
-        const destination = turf.destination(midpoint, i, bearing + 90, {
-            units: "kilometers",
-        });
-        coordinates.push(destination.geometry.coordinates);
-    }
-
-    const perpendicular = turf.lineString(coordinates);
-
-    const polygon = turf.polygon([
-        [
-            ...perpendicular.geometry.coordinates,
-            [180, 90],
-            [-180, -90],
-            perpendicular.geometry.coordinates[0],
-        ],
-    ]);
-
-    const wouldRemoveA = turf.booleanPointInPolygon(
-        pointB, // Should be A, but there must be an error in my logic somewhere else so this is fine
-        polygon,
-    );
-
-    if (
-        (question.warmer && wouldRemoveA) ||
-        (!question.warmer && !wouldRemoveA)
-    ) {
-        polygon.geometry.coordinates[0].pop();
+    if (question.warmer) {
         return turf.intersect(
             turf.featureCollection(
                 mapData.features.length > 1
-                    ? [turf.union(mapData)!, polygon]
-                    : [...mapData.features, polygon],
+                    ? [turf.union(mapData)!, voronoi.features[1]]
+                    : [...mapData.features, voronoi.features[1]],
             ),
         );
     } else {
-        return turf.difference(
+        return turf.intersect(
             turf.featureCollection(
                 mapData.features.length > 1
-                    ? [turf.union(mapData)!, polygon]
-                    : [...mapData.features, polygon],
+                    ? [turf.union(mapData)!, voronoi.features[0]]
+                    : [...mapData.features, voronoi.features[0]],
             ),
         );
     }