feat(arcgis): convert link to rest format (#338)

src/components/layers-panel/layers-panel.tsx

@@ -34,7 +34,7 @@ import { useClickOutside } from "../../utils/hooks/use-click-outside-hook";
 import { ArcGISWebSceneLoader } from "@loaders.gl/i3s";
 import { ActiveSublayer } from "../../utils/active-sublayer";
 import { useAppLayout } from "../../utils/hooks/layout";
-import { getTilesetType } from "../../utils/url-utils";
+import { getTilesetType, convertUrlToRestFormat } from "../../utils/url-utils";
 import { convertArcGisSlidesToBookmars } from "../../utils/bookmarks-utils";
 import { useAppDispatch } from "../../redux/hooks";
 import { addBaseMap } from "../../redux/slices/base-maps-slice";
@@ -253,6 +253,8 @@ export const LayersPanel = ({
     url: string;
     token?: string;
   }) => {
+    scene.url = convertUrlToRestFormat(scene.url);
+
     const existedScene = layers.some(
       (exisLayer) => exisLayer.url.trim() === scene.url.trim()
     );

src/utils/url-utils.spec.ts

@@ -5,6 +5,7 @@ import {
   parseTilesetUrlParams,
   urlParamsToViewState,
   viewStateToUrlParams,
+  convertUrlToRestFormat,
 } from "./url-utils";
 
 const mockResponse = jest.fn();
@@ -179,3 +180,16 @@ describe("Url Utils - urlParamsToViewState", () => {
     });
   });
 });
+
+describe("Url Utils - convertUrlToRestFormat", () => {
+  test("Should convert to the format required", () => {
+    const urlExpected = "https://www.arcgis.com/sharing/rest/content/items/ae34b234d390148/data";
+
+    const urlItem = "https://some.maps.arcgis.com/home/item.html?id=ae34b234d390148";
+    const urlViewer = "https://some.maps.arcgis.com/home/webscene/viewer.html?webscene=ae34b234d390148";
+    expect(convertUrlToRestFormat(urlItem)).toEqual(urlExpected);
+    expect(convertUrlToRestFormat(urlViewer)).toEqual(urlExpected);
+
+    expect(convertUrlToRestFormat(urlExpected)).toEqual(urlExpected);
+  });
+});

src/utils/url-utils.ts

@@ -96,3 +96,29 @@ export const urlParamsToViewState = (viewState: ViewStateSet) => {
   }
   return urlViewStateParams;
 };
+
+/**
+ * Converts the link of a webscene that can be copied from ArcGIS
+ * to the format required by i3s-explorer to insert a webscene.
+ * @param url - Url copied from ArcGIS.
+ * @returns Url converted.
+ */
+export const convertUrlToRestFormat = (url: string): string => {
+  let urlRest = "https://www.arcgis.com/sharing/rest/content/items/";
+  const urlObject = new URL(url);
+
+  let param: string | null = null;
+  for (const paramName of ["id", "webscene"]) {
+    param = urlObject.searchParams.get(paramName);
+    if (param) {
+      break;
+    }
+  }
+  if (param) {
+    urlRest += param + "/data";
+  } else {
+    // The url cannot be converted. Use it "as is".
+    return url;
+  }
+  return urlRest;
+};