fix(map): Normalize winding order to CCW & replace d3-geo with turf LINDASSUP-247

- Previously the received winding order of polygons has not been
modified. This caused issues with helpers relying on a specific
winding order. We now "rewind" all polygons to CCW ("right hand
rule"), right after parsing, as is the standard with GeoJSON.
- The d3-geo helpers rely on a CW winding order, which would require a
rewinding before each call. Therefore d3-geo is now replaced with
equivalent helpers from turf, that use the CCW winding order.

Author: hupf

app/charts/map/helpers.ts

@@ -1,7 +1,7 @@
 import { WebMercatorViewport } from "@deck.gl/core";
 import { MapboxOverlay, MapboxOverlayProps } from "@deck.gl/mapbox";
+import turfBbox from "@turf/bbox";
 import { extent } from "d3-array";
-import { geoBounds } from "d3-geo";
 import { useEffect, useMemo, useState } from "react";
 import { useControl, ViewState } from "react-map-gl";
 import { feature } from "topojson-client";
@@ -137,9 +137,12 @@ export const getBBox = (
   let symbolsBbox: BBox | undefined;
 
   if (shapes) {
-    const _shapesBbox = geoBounds(shapes);
-    if (!_shapesBbox.flat().some(isNaN)) {
-      shapesBbox = _shapesBbox;
+    const [minLng, minLat, maxLng, maxLat] = turfBbox(shapes);
+    if (![minLng, minLat, maxLng, maxLat].some(isNaN)) {
+      shapesBbox = [
+        [minLng, minLat],
+        [maxLng, maxLat],
+      ] as BBox;
     }
   }
 

app/charts/map/map-state-props.ts

@@ -1,4 +1,4 @@
-import { geoCentroid } from "d3-geo";
+import turfCentroid from "@turf/centroid";
 import keyBy from "lodash/keyBy";
 import { useMemo } from "react";
 
@@ -158,7 +158,7 @@ export const useMapStateData = (
 
       const points = features.map((d) => ({
         ...d,
-        coordinates: geoCentroid(d),
+        coordinates: turfCentroid(d).geometry.coordinates,
       }));
 
       return {

app/charts/map/map.tsx

@@ -6,7 +6,7 @@ import {
 import { supported } from "@mapbox/mapbox-gl-supported";
 import { Button, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { geoArea } from "d3-geo";
+import turfArea from "@turf/area";
 import debounce from "lodash/debounce";
 import orderBy from "lodash/orderBy";
 import uniq from "lodash/uniq";
@@ -302,7 +302,7 @@ export const MapComponent = ({
     // Sort for smaller shapes to be over larger ones, to be able to use tooltip
     const sortedFeatures = orderBy(
       features.areaLayer?.shapes?.features,
-      geoArea,
+      turfArea,
       "desc"
     ) satisfies GeoFeature[];
 

app/graphql/resolvers/rdf.ts

@@ -1,10 +1,11 @@
+import { rewindGeometry } from "@placemarkio/geojson-rewind";
 import { ascending, descending } from "d3-array";
 import DataLoader from "dataloader";
 import groupBy from "lodash/groupBy";
 import ParsingClient from "sparql-http-client/ParsingClient";
 import { topology } from "topojson-server";
 import { LRUCache } from "typescript-lru-cache";
-import { parse as parseWKT } from "wellknown";
+import { GeoJSONGeometry, parse as parseWKT } from "wellknown";
 
 import { Filters } from "@/config-types";
 import {
@@ -127,6 +128,16 @@ export const searchCubes: NonNullable<QueryResolvers["searchCubes"]> = async (
   });
 };
 
+/**
+ * Normalize the geometry's winding order to follow GeoJSON standards. It is
+ * converted to CCW (a.k.a. "right hand rule") if it has a non-standard CW
+ * winding order.
+ */
+const rewind = (geometry: GeoJSONGeometry): GeoJSONGeometry => {
+  if (!geometry) return null;
+  return rewindGeometry(geometry) as GeoJSONGeometry;
+};
+
 export const dataCubeDimensionGeoShapes: NonNullable<
   QueryResolvers["dataCubeDimensionGeoShapes"]
 > = async (_, { locale, cubeFilter }, { setup }, info) => {
@@ -178,7 +189,7 @@ export const dataCubeDimensionGeoShapes: NonNullable<
           iri: value,
           label: dimensionValuesByValue.get(value),
         },
-        geometry: parseWKT(shape.wktString),
+        geometry: rewind(parseWKT(shape.wktString)),
       };
     });
 

app/package.json

@@ -53,6 +53,7 @@
     "@opentelemetry/sdk-node": "^0.211.0",
     "@opentelemetry/sdk-trace-node": "^2.5.0",
     "@opentelemetry/semantic-conventions": "^1.39.0",
+    "@placemarkio/geojson-rewind": "^1.0.3",
     "@preconstruct/next": "^3.0.1",
     "@prisma/client": "^4.10.1",
     "@rdfjs/data-model": "^2.0.2",
@@ -62,6 +63,9 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@tpluscode/rdf-ns-builders": "2.0.1",
     "@tpluscode/sparql-builder": "^0.3.31",
+    "@turf/area": "7.3.4",
+    "@turf/bbox": "7.3.4",
+    "@turf/centroid": "7.3.4",
     "@types/react-grid-layout": "^1.3.5",
     "@uiw/react-color": "^2.3.2",
     "@urql/devtools": "^2.0.3",
@@ -83,7 +87,6 @@
     "d3-delaunay": "^6.0.4",
     "d3-dsv": "^3.0.1",
     "d3-format": "^3.1.0",
-    "d3-geo": "^3.1.1",
     "d3-interpolate": "^3.0.1",
     "d3-interpolate-path": "^2.3.0",
     "d3-scale": "^4.0.2",
@@ -204,7 +207,6 @@
     "@types/d3-delaunay": "^6.0.4",
     "@types/d3-dsv": "^3.0.7",
     "@types/d3-format": "^3.0.4",
-    "@types/d3-geo": "^3.1.0",
     "@types/d3-interpolate": "^3.0.4",
     "@types/d3-interpolate-path": "^2.0.0",
     "@types/d3-scale": "^4.0.8",