@deck.gl/carto 9.0.0-beta.10 → 9.0.0-beta.11

package/package.json

@@ -3,7 +3,7 @@
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
   "type": "module",
-  "version": "9.0.0-beta.10",
+  "version": "9.0.0-beta.11",
   "publishConfig": {
     "access": "public"
   },
@@ -42,12 +42,12 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@loaders.gl/gis": "^4.1.4",
-    "@loaders.gl/loader-utils": "^4.1.4",
-    "@loaders.gl/mvt": "^4.1.4",
-    "@loaders.gl/schema": "^4.1.4",
-    "@loaders.gl/tiles": "^4.1.4",
-    "@luma.gl/constants": "^9.0.4",
+    "@loaders.gl/gis": "^4.2.0",
+    "@loaders.gl/loader-utils": "^4.2.0",
+    "@loaders.gl/mvt": "^4.2.0",
+    "@loaders.gl/schema": "^4.2.0",
+    "@loaders.gl/tiles": "^4.2.0",
+    "@luma.gl/constants": "^9.0.11",
     "@math.gl/web-mercator": "^4.0.0",
     "@types/d3-array": "^3.0.2",
     "@types/d3-color": "^1.4.2",
@@ -69,8 +69,8 @@
     "@deck.gl/extensions": "^9.0.0-beta",
     "@deck.gl/geo-layers": "^9.0.0-beta",
     "@deck.gl/layers": "^9.0.0-beta",
-    "@loaders.gl/core": "^4.1.4",
-    "@luma.gl/core": "^9.0.4"
+    "@loaders.gl/core": "^4.2.0",
+    "@luma.gl/core": "^9.0.0"
   },
-  "gitHead": "6c44f602069374cd21268ff279c5bf818c905ff7"
+  "gitHead": "d8a3f5bdb644f85caba9d5c1e74baff8f8a3d439"
 }

package/src/api/common.ts

@@ -1,10 +1,13 @@
+import {VERSION} from '@deck.gl/core';
+
 export const DEFAULT_API_BASE_URL = 'https://gcp-us-east1.api.carto.com';
 export const DEFAULT_CLIENT = 'deck-gl-carto';
 export const V3_MINOR_VERSION = '3.4';
 export const MAX_GET_LENGTH = 8192;
 
 export const DEFAULT_PARAMETERS = {
-  v: V3_MINOR_VERSION
+  v: V3_MINOR_VERSION,
+  deckglVersion: VERSION
 };
 
 export const DEFAULT_HEADERS = {

package/src/api/request-with-parameters.ts

@@ -11,13 +11,11 @@ function encodeParameter(name: string, value: string | boolean | number): string
 
 const REQUEST_CACHE = new Map<string, Promise<unknown>>();
 export async function requestWithParameters<T = any>({
-  accessToken,
   baseUrl,
   parameters,
   headers: customHeaders,
   errorContext
 }: {
-  accessToken?: string;
   baseUrl: string;
   parameters?: Record<string, string>;
   headers: Record<string, string>;
@@ -47,9 +45,6 @@ export async function requestWithParameters<T = any>({
       if (!response || !response.ok) {
         throw new Error(json.error);
       }
-      if (accessToken) {
-        json.accessToken = accessToken;
-      }
       return json;
     })
     .catch((error: Error) => {

package/src/layers/h3-tile-layer.ts

@@ -61,13 +61,13 @@ export default class H3TileLayer<DataT = any, ExtraPropsT extends {} = {}> exten
     if (this.props.minZoom) {
       minresolution = Math.max(
         minresolution,
-        getHexagonResolution({zoom: this.props.minZoom, latitude: 0})
+        getHexagonResolution({zoom: this.props.minZoom, latitude: 0}, this.props.tileSize)
       );
     }
     if (this.props.maxZoom) {
       maxresolution = Math.min(
         maxresolution,
-        getHexagonResolution({zoom: this.props.maxZoom, latitude: 0})
+        getHexagonResolution({zoom: this.props.maxZoom, latitude: 0}, this.props.tileSize)
       );
     }
 

package/src/layers/h3-tileset-2d.ts

@@ -5,11 +5,43 @@ import {
   getResolution,
   cellToBoundary,
   cellToParent,
-  gridDisk
+  gridDisk,
+  edgeLength,
+  UNITS,
+  originToDirectedEdges
 } from 'h3-js';
 
 export type H3TileIndex = {i: string};
 
+const MAX_LATITUDE = 85.051128;
+
+// `polygonToCells()` fills based on hexagon center, this function will
+// pad the bounds such that all cells that overlap the bounds will be included
+function padBoundingBox(
+  {west, north, east, south}: GeoBoundingBox,
+  resolution: number
+): GeoBoundingBox {
+  const corners = [
+    [north, east],
+    [south, east],
+    [south, west],
+    [north, west]
+  ];
+  const cornerCells = corners.map(c => latLngToCell(c[0], c[1], resolution));
+  const cornerEdgeLengths = cornerCells.map(
+    c => (Math.max(...originToDirectedEdges(c).map(e => edgeLength(e, UNITS.rads))) * 180) / Math.PI
+  );
+  const bufferLat = Math.max(...cornerEdgeLengths);
+  const bufferLon = Math.min(180, bufferLat / Math.cos((((north + south) / 2) * Math.PI) / 180));
+
+  return {
+    north: Math.min(north + bufferLat, MAX_LATITUDE),
+    east: east + bufferLon,
+    south: Math.max(south - bufferLat, -MAX_LATITUDE),
+    west: west - bufferLon
+  };
+}
+
 function getHexagonsInBoundingBox(
   {west, north, east, south}: GeoBoundingBox,
   resolution: number
@@ -21,8 +53,8 @@ function getHexagonsInBoundingBox(
     const nSegments = Math.ceil(longitudeSpan / 180);
     let h3Indices: string[] = [];
     for (let s = 0; s < nSegments; s++) {
-      const segmentEast = east + s * 180;
-      const segmentWest = Math.min(segmentEast + 179.9999999, west);
+      const segmentWest = west + s * 180;
+      const segmentEast = Math.min(segmentWest + 179.9999999, east);
       h3Indices = h3Indices.concat(
         getHexagonsInBoundingBox({west: segmentWest, north, east: segmentEast, south}, resolution)
       );
@@ -30,24 +62,14 @@ function getHexagonsInBoundingBox(
     return [...new Set(h3Indices)];
   }
 
-  // `polygonToCells()` fills based on hexagon center, which means tiles vanish
-  // prematurely. Get more accurate coverage by oversampling
-  const oversample = 2;
-  const h3Indices = polygonToCells(
-    [
-      [
-        [west, north],
-        [west, south],
-        [east, south],
-        [east, north],
-        [west, north]
-      ]
-    ],
-    resolution + oversample,
-    true
-  );
-
-  return oversample ? [...new Set(h3Indices.map(i => cellToParent(i, resolution)))] : h3Indices;
+  const polygon = [
+    [north, east],
+    [south, east],
+    [south, west],
+    [north, west],
+    [north, east]
+  ];
+  return polygonToCells(polygon, resolution);
 }
 
 function tileToBoundingBox(index: string): GeoBoundingBox {
@@ -66,8 +88,14 @@ function tileToBoundingBox(index: string): GeoBoundingBox {
 // similar
 // Relative scale factor (0 = no biasing, 2 = a few hexagons cover view)
 const BIAS = 2;
-export function getHexagonResolution(viewport): number {
-  const hexagonScaleFactor = (2 / 3) * viewport.zoom;
+export function getHexagonResolution(
+  viewport: {zoom: number; latitude: number},
+  tileSize: number
+): number {
+  // Difference in given tile size compared to deck's internal 512px tile size,
+  // expressed as an offset to the viewport zoom.
+  const zoomOffset = Math.log2(tileSize / 512);
+  const hexagonScaleFactor = (2 / 3) * (viewport.zoom - zoomOffset);
   const latitudeScaleFactor = Math.log(1 / Math.cos((Math.PI * viewport.latitude) / 180));
 
   // Clip and bias
@@ -83,9 +111,10 @@ export default class H3Tileset2D extends Tileset2D {
   // @ts-expect-error Tileset2D should be generic over TileIndex
   getTileIndices({viewport, minZoom, maxZoom}): H3TileIndex[] {
     if (viewport.latitude === undefined) return [];
-    const [east, south, west, north] = viewport.getBounds();
+    const [west, south, east, north] = viewport.getBounds();
+    const {tileSize} = this.opts;
 
-    let z = getHexagonResolution(viewport);
+    let z = getHexagonResolution(viewport, tileSize);
     let indices: string[];
     if (typeof minZoom === 'number' && Number.isFinite(minZoom) && z < minZoom) {
       // TODO support `extent` prop
@@ -99,7 +128,8 @@ export default class H3Tileset2D extends Tileset2D {
       const center = latLngToCell(viewport.latitude, viewport.longitude, maxZoom);
       indices = gridDisk(center, 1);
     } else {
-      indices = getHexagonsInBoundingBox({west, north, east, south}, z);
+      const paddedBounds = padBoundingBox({west, north, east, south}, z);
+      indices = getHexagonsInBoundingBox(paddedBounds, z);
     }
 
     return indices.map(i => ({i}));

package/src/layers/vector-tile-layer.ts

@@ -80,6 +80,7 @@ export default class VectorTileLayer<
     return loadOptions;
   }
 
+  /* eslint-disable camelcase */
   async getTileData(tile: TileLoadProps) {
     const tileJSON = this.props.data as TilejsonResult;
     const {tiles, properties_tiles} = tileJSON;
@@ -115,6 +116,7 @@ export default class VectorTileLayer<
 
     return attributes ? mergeBoundaryData(geometry, attributes) : geometry;
   }
+  /* eslint-enable camelcase */
 
   renderSubLayers(
     props: TileLayer['props'] & {

package/src/sources/base-source.ts

@@ -56,12 +56,15 @@ export async function baseSource<UrlParameters extends Record<string, string>>(
   errorContext.requestType = 'Map data';
 
   if (format === 'tilejson') {
-    return await requestWithParameters<TilejsonResult>({
-      accessToken,
+    const json = await requestWithParameters<TilejsonResult>({
       baseUrl: dataUrl,
       headers,
       errorContext
     });
+    if (accessToken) {
+      json.accessToken = accessToken;
+    }
+    return json;
   }
 
   return await requestWithParameters<GeojsonResult | JsonResult>({