WIP

.vscode/settings.json

@@ -26,7 +26,8 @@
     "**/dist/**": true,
     "**/infra/lib/*.d.ts": true,
     "**/infra/lib/*Stack.js": true,
-    "node_modules": true
+    "node_modules": true,
+    "packages/client/src/lang/**/*.json": true
   },
   "eslint.workingDirectories": ["packages/client"],
   "[git-commit]": {

packages/api/migrations/current.sql

@@ -1 +1,2 @@
 -- Enter migration here
+

packages/client/package.json

@@ -150,7 +150,7 @@
     "mapbox-gl-draw-rectangle-mode": "^1.0.4",
     "mapbox-gl-esri-feature-layers": "^1.0.0",
     "mapbox-gl-esri-sources": "git+https://git@github.com/underbluewaters/mapbox-gl-esri-sources.git",
-    "@seasketch/mapbox-gl-esri-sources": "file://Users/cburt/src/@seasketch/mapbox-gl-esri-sources",
+    "@seasketch/mapbox-gl-esri-sources": "0.9.0",
     "md5": "^2.3.0",
     "mnemonist": "^0.39.2",
     "mustache": "^4.1.0",

packages/client/src/admin/data/arcgis/ArcGISCartModal.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable i18next/no-literal-string */
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import ArcGISSearchPage from "./ArcGISSearchPage";
 import {
@@ -15,17 +15,19 @@ import Skeleton from "../../../components/Skeleton";
 import { ArrowLeftIcon, MinusIcon, PlusIcon } from "@radix-ui/react-icons";
 import { FolderIcon } from "@heroicons/react/solid";
 import Spinner from "../../../components/Spinner";
-import { TiledMapService } from "mapbox-gl-esri-sources";
 import FeatureService from "mapbox-gl-arcgis-featureserver";
 import Button from "../../../components/Button";
 import {
   ArcGISDynamicMapService,
-  ArcGISVectorSource,
-  styleForFeatureLayer,
+  ArcGISRESTServiceRequestManager,
+  CustomGLSource,
+  ArcGISTiledMapService,
 } from "@seasketch/mapbox-gl-esri-sources";
 import { Feature } from "geojson";
 import bbox from "@turf/bbox";
 
+const requestManager = new ArcGISRESTServiceRequestManager();
+
 export default function ArcGISCartModal({
   onRequestClose,
   region,
@@ -121,6 +123,8 @@ export default function ArcGISCartModal({
 
   const [mapIsLoadingData, setMapIsLoadingData] = useState(false);
 
+  const [customSources, setCustomSources] = useState<CustomGLSource<any>[]>([]);
+
   useEffect(() => {
     if (mapServerInfo.data && map && selection) {
       const bounds = extentToLatLngBounds(
@@ -135,31 +139,30 @@ export default function ArcGISCartModal({
           .map((l) => l.id.toString());
         setSelectedLayerIds(layersToSelect);
         if (mapServerInfo.data.mapServerInfo.tileInfo?.rows) {
-          const levels = mapServerInfo.data.mapServerInfo.tileInfo.lods.map(
-            (lod) => lod.level
-          );
-          const minzoom = Math.min(...levels);
-          const maxzoom = Math.max(...levels);
-          const sourceId = `${selection.name}-raster-source`;
-          map.addSource(sourceId, {
-            type: "raster",
-            tiles: [selection.url + "/tile/{z}/{y}/{x}"],
-            tileSize:
-              mapServerInfo.data.mapServerInfo.tileInfo.rows /
-              window.devicePixelRatio,
-            minzoom: Math.max(minzoom, 1),
-            maxzoom,
-            // ...(bounds ? { bounds } : {}),
+          const tileSource = new ArcGISTiledMapService(requestManager, {
+            url: selection.url,
+            supportHighDpiDisplays: true,
           });
-          const layerId = `${selection.name}-tiled-layer`;
-          map.addLayer({
-            id: layerId,
-            type: "raster",
-            source: sourceId,
+          // @ts-ignore
+          window.map = map;
+          tileSource.getLegend().then((legend) => {
+            console.log("legend", legend);
+          });
+          tileSource.getComputedMetadata().then((metadata) => {
+            console.log("metadata", metadata);
+          });
+          setCustomSources([tileSource]);
+          tileSource.addToMap(map).then(() => {
+            tileSource.getLayers().then((layers) => {
+              console.log("add layers", layers);
+              for (const layer of layers) {
+                map.addLayer(layer);
+              }
+            });
           });
           return () => {
-            map.removeLayer(layerId);
-            map.removeSource(sourceId);
+            setCustomSources([]);
+            tileSource.removeFromMap(map);
           };
         } else {
           const useTiles = false;

packages/client/src/admin/data/arcgis/arcgis.ts

@@ -10,10 +10,7 @@ import { v4 as uuid } from "uuid";
 import bboxPolygon from "@turf/bbox-polygon";
 import area from "@turf/area";
 import bbox from "@turf/bbox";
-import geobuf from "geobuf";
-import Pbf from "pbf";
 import { FeatureCollection } from "geojson";
-import Worker from "../../../workers/index";
 import {
   useCreateTableOfContentsItemMutation,
   useCreateArcGisDynamicDataSourceMutation,
@@ -30,7 +27,6 @@ import {
   AddImageToSpriteMutation,
   DataSourceTypes,
   useUpdateInteractivitySettingsMutation,
-  OverlayFragment,
   DataSourceDetailsFragment,
 } from "../../../generated/graphql";
 // import nanoid from "nanoid";