Water v1

lib/backend.ts

@@ -4,6 +4,7 @@ import { request } from "./request";
 import { applyStyle, STYLES } from "./styles";
 import { BBOX, GROUP_ORDER } from "./types";
 import { progress } from "./progress";
+import { getWater } from "./water";
 
 let frame = (() => {
   let sel = figma.currentPage.selection[0];
@@ -65,6 +66,9 @@ async function render(bbox: BBOX) {
   const scaleFactor = width / (bbox[2] - bbox[0]);
   const lerp = getLerp(bbox, [width, height], [x, y]);
 
+  const water = await getWater(bbox);
+  console.log(water);
+
   progress("Requesting data");
 
   const j = await request(bbox);

lib/projection.ts

@@ -5,9 +5,8 @@ const D2R = Math.PI / 180;
 /**
  * Project a lon/lat point into projected mercator space.
  */
-export function proj(ll: Pos2): Pos2 {
+export function proj(ll: Pos2, size = 524288): Pos2 {
   // Arbitrary.
-  var size = 524288;
   var d = size / 2;
   var bc = size / 360;
   var cc = size / (2 * Math.PI);

lib/water.ts

@@ -0,0 +1,30 @@
+const flatgeobuf = require("flatgeobuf/dist/flatgeobuf.min.js");
+import { proj } from "./projection";
+import { BBOX, Pos2 } from "./types";
+
+export async function getWater(bbox: BBOX) {
+  const tl = proj([bbox[0], bbox[1]], 256);
+  const br = proj([bbox[2], bbox[3]], 256);
+
+  const tiles: Pos2[] = [];
+
+  for (let x = Math.floor(tl[0]); x <= Math.ceil(br[0]); x++) {
+    for (let y = Math.floor(tl[1]); y <= Math.ceil(br[1]); y++) {
+      tiles.push([x, y]);
+    }
+  }
+
+  const requests = await Promise.all(
+    tiles.map(async (tile) => {
+      const res = await fetch(
+        `https://data-library.placemark.io/water/${tile[0]}_${tile[1]}.fgb`
+      );
+      const buffer = await res.arrayBuffer();
+      return flatgeobuf.geojson.deserialize(new Uint8Array(buffer));
+    })
+  );
+
+  console.log(requests);
+
+  return requests;
+}