feat: add arcgis map to viewer app

package.json

@@ -20,12 +20,15 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@arcgis/core": "^4.28.7",
+    "@deck.gl/arcgis": "^8.9.32",
     "@deck.gl/core": "^8.9.32",
     "@deck.gl/extensions": "^8.9.32",
     "@deck.gl/geo-layers": "^8.9.32",
     "@deck.gl/layers": "^8.9.32",
     "@deck.gl/mesh-layers": "^8.9.32",
     "@deck.gl/react": "^8.9.32",
+    "@esri/react-arcgis": "^5.2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.17",

src/components/arcgis-wrapper/arcgis-wrapper.spec.tsx

@@ -0,0 +1,20 @@
+import { renderWithTheme } from "../../utils/testing-utils/render-with-theme";
+import { Map } from "@esri/react-arcgis";
+
+jest.mock("@esri/react-arcgis", () => {
+  return {
+    Map: jest.fn().mockImplementation(() => <div></div>),
+  };
+});
+
+const callRender = (renderFunc) => {
+  return renderFunc(<Map />);
+};
+
+describe("ArcGis Wrapper", () => {
+  it("Should be able to call ArcGis map", async () => {
+    callRender(renderWithTheme);
+
+    expect(Map).toBeCalledTimes(1);
+  });
+});

src/components/arcgis-wrapper/arcgis-wrapper.tsx

@@ -0,0 +1,42 @@
+import { Map as ArcGisMap } from "@esri/react-arcgis";
+import { loadArcGISModules } from "@deck.gl/arcgis";
+import { useEffect, useState } from "react";
+
+function DeckGLLayer(props) {
+  const [layer, setLayer] = useState(null);
+
+  useEffect(() => {
+    let deckLayer;
+    loadArcGISModules().then(({ DeckLayer }) => {
+      deckLayer = new DeckLayer({});
+      setLayer(deckLayer);
+      props.map.add(deckLayer);
+    });
+    return () => deckLayer && props.map.remove(deckLayer);
+  }, []);
+
+  if (layer) {
+    // @ts-expect-error @deck.gl/arcgis has no types
+    layer.deck.set(props);
+  }
+
+  return null;
+}
+
+export function ArcgisWrapper() {
+  const layers = [];
+
+  return (
+    <ArcGisMap
+      mapProperties={{ basemap: "dark-gray-vector" }}
+      viewProperties={{
+        center: [-122.44, 37.75],
+        zoom: 12,
+      }}
+    >
+      <DeckGLLayer layers={layers} />
+    </ArcGisMap>
+  );
+}
+
+export default ArcgisWrapper;

src/components/layers-panel/map-options-panel.spec.tsx

@@ -180,6 +180,7 @@ describe("Map Options Panel", () => {
         name: "Light",
       },
       { id: "Terrain", mapUrl: "", name: "Terrain" },
+      { id: "ArcGis", name: "ArcGis", mapUrl: "" },
       { id: "first", mapUrl: "https://first-url.com", name: "first name" },
     ]);
 

src/constants/map-styles.ts

@@ -14,6 +14,11 @@ export const BASE_MAPS: BaseMap[] = [
       "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
   },
   { id: "Terrain", name: "Terrain", mapUrl: "" },
+  {
+    id: "ArcGis",
+    name: "ArcGis",
+    mapUrl: "",
+  },
 ];
 
 export const CONTRAST_MAP_STYLES = {

src/pages/viewer-app/viewer-app.tsx

@@ -66,9 +66,9 @@ import {
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { setDragMode } from "../../redux/slices/drag-mode-slice";
 import { setColorsByAttrubute } from "../../redux/slices/colors-by-attribute-slice";
-import {
-  setInitialBaseMaps,
-} from "../../redux/slices/base-maps-slice";
+import { setInitialBaseMaps } from "../../redux/slices/base-maps-slice";
+import { selectSelectedBaseMapId } from "../../redux/slices/base-maps-slice";
+import { ArcgisWrapper } from "../../components/arcgis-wrapper/arcgis-wrapper";
 
 const INITIAL_VIEW_STATE = {
   main: {
@@ -100,6 +100,7 @@ export const ViewerApp = () => {
   const [isAttributesLoading, setAttributesLoading] = useState(false);
   const flattenedSublayers = useAppSelector(selectLayers);
   const bslSublayers = useAppSelector(selectSublayers);
+  const selectedBaseMapId = useAppSelector(selectSelectedBaseMapId);
   const [tilesetsStats, setTilesetsStats] = useState(initStats());
   const [memoryStats, setMemoryStats] = useState<Stats | null>(null);
   const [updateStatsNumber, setUpdateStatsNumber] = useState<number>(0);
@@ -538,29 +539,32 @@ export const ViewerApp = () => {
   return (
     <MapArea>
       {selectedFeatureAttributes && renderAttributesPanel()}
-      <DeckGlWrapper
-        id="viewer-deck-container"
-        parentViewState={{
-          ...viewState,
-          main: {
-            ...viewState.main,
-          },
-        }}
-        pickable={isLayerPickable()}
-        layers3d={layers3d}
-        lastLayerSelectedId={selectedLayerIds[0] || ""}
-        loadedTilesets={loadedTilesets}
-        selectedTilesetBasePath={selectedTilesetBasePath}
-        selectedIndex={selectedFeatureIndex}
-        onAfterRender={handleOnAfterRender}
-        getTooltip={getTooltip}
-        onClick={handleClick}
-        onViewStateChange={onViewStateChangeHandler}
-        onTilesetLoad={onTilesetLoad}
-        onTileLoad={onTileLoad}
-        onWebGLInitialized={onWebGLInitialized}
-        preventTransitions={preventTransitions}
-      />
+      {selectedBaseMapId !== "ArcGis" && (
+        <DeckGlWrapper
+          id="viewer-deck-container"
+          parentViewState={{
+            ...viewState,
+            main: {
+              ...viewState.main,
+            },
+          }}
+          pickable={isLayerPickable()}
+          layers3d={layers3d}
+          lastLayerSelectedId={selectedLayerIds[0] || ""}
+          loadedTilesets={loadedTilesets}
+          selectedTilesetBasePath={selectedTilesetBasePath}
+          selectedIndex={selectedFeatureIndex}
+          onAfterRender={handleOnAfterRender}
+          getTooltip={getTooltip}
+          onClick={handleClick}
+          onViewStateChange={onViewStateChangeHandler}
+          onTilesetLoad={onTilesetLoad}
+          onTileLoad={onTileLoad}
+          onWebGLInitialized={onWebGLInitialized}
+          preventTransitions={preventTransitions}
+        />
+      )}
+      {selectedBaseMapId === "ArcGis" && <ArcgisWrapper />}
 
       {layout !== Layout.Mobile && (
         <OnlyToolsPanelWrapper layout={layout}>

src/redux/slices/base-maps-slice.spec.ts

@@ -8,6 +8,7 @@ import reducer, {
   setSelectedBaseMaps,
   deleteBaseMaps,
 } from "./base-maps-slice";
+import { BASE_MAPS } from "../../constants/map-styles";
 
 jest.mock("@loaders.gl/i3s", () => {
   return jest.fn().mockImplementation(() => {
@@ -18,21 +19,7 @@ jest.mock("@loaders.gl/i3s", () => {
 describe("slice: base-maps", () => {
   it("Reducer should return the initial state", () => {
     expect(reducer(undefined, { type: undefined })).toEqual({
-      baseMap: [
-        {
-          id: "Dark",
-          mapUrl:
-            "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json",
-          name: "Dark",
-        },
-        {
-          id: "Light",
-          mapUrl:
-            "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
-          name: "Light",
-        },
-        { id: "Terrain", mapUrl: "", name: "Terrain" },
-      ],
+      baseMap: BASE_MAPS,
       selectedBaseMap: "Dark",
     });
   });
@@ -168,21 +155,7 @@ describe("slice: base-maps", () => {
     };
 
     expect(reducer(previousState, setInitialBaseMaps())).toEqual({
-      baseMap: [
-        {
-          id: "Dark",
-          mapUrl:
-            "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json",
-          name: "Dark",
-        },
-        {
-          id: "Light",
-          mapUrl:
-            "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
-          name: "Light",
-        },
-        { id: "Terrain", mapUrl: "", name: "Terrain" },
-      ],
+      baseMap: BASE_MAPS,
       selectedBaseMap: "Dark",
     });
   });
@@ -191,21 +164,7 @@ describe("slice: base-maps", () => {
     const store = setupStore();
     const state = store.getState();
     expect(selectSelectedBaseMapId(state)).toEqual("Dark");
-    expect(selectBaseMaps(state)).toEqual([
-      {
-        id: "Dark",
-        mapUrl:
-          "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json",
-        name: "Dark",
-      },
-      {
-        id: "Light",
-        mapUrl:
-          "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
-        name: "Light",
-      },
-      { id: "Terrain", mapUrl: "", name: "Terrain" },
-    ]);
+    expect(selectBaseMaps(state)).toEqual(BASE_MAPS);
   });
 
   it("Selectors should return updated value", () => {
@@ -229,6 +188,11 @@ describe("slice: base-maps", () => {
         name: "Light",
       },
       { id: "Terrain", mapUrl: "", name: "Terrain" },
+      {
+        id: "ArcGis",
+        name: "ArcGis",
+        mapUrl: "",
+      },
       {
         id: "first",
         mapUrl: "https://first-url.com",

src/utils/testing-utils/e2e-layers-panel.tsx

@@ -65,8 +65,8 @@ export const checkLayersPanel = async (
     `${panelId} > :nth-child(4) > :first-child > :nth-child(2) > div`,
     (nodes) => nodes.map((node) => node.innerText)
   );
-  expect(baseMapsNames.length).toBe(3);
-  expect(baseMapsNames).toEqual(["Dark", "Light", "Terrain"]);
+  expect(baseMapsNames.length).toBe(4);
+  expect(baseMapsNames).toEqual(["Dark", "Light", "Terrain", "ArcGis"]);
 
   // Dark is selected
   const darkMapBackground = await page.$eval(