Update Mapbox style conversion functions and UI in App.svelte

example/src/App.svelte

@@ -13,6 +13,7 @@
     constructMapboxStyleFromEsri,
     fetchEsriStyleJson,
     resolveEsriRelativePaths,
+    constructMapboxStyleFromEsriAbsolute,
   } from "@esri-style-ft-mapbox-style/esriToMapbox";
   import { writable, get } from "svelte/store";
 
@@ -29,9 +30,22 @@
       // mapboxStyleJson.set(`Error: ${(error as Error).message}`);
     }
   }
-  function handleEditorChange(event: CustomEvent<string>) {
+  function handleEsriEditorChange(event: CustomEvent<string>) {
     esriStyleJson.set(event.detail);
   }
+  function handleMaplibreEditorChange(event: CustomEvent<string>) {
+    maplibreStyleJson.set(event.detail);
+  }
+
+  async function convertEsritoMaplibreStyle(): Promise<void> {
+    const theFetchedMaplibreStyleJson =
+      await constructMapboxStyleFromEsriAbsolute(
+        urlInput,
+        JSON.parse(get(esriStyleJson))
+      );
+
+    maplibreStyleJson.set(JSON.stringify(theFetchedMaplibreStyleJson, null, 2));
+  }
 
   // Watch for changes in mapboxStyleJson and update maplibreStyle
   $: {
@@ -50,7 +64,7 @@
     <div class="flex-1 p-4 overflow-auto bg-gray-50">
       <CodeEditor
         bind:content={$esriStyleJson}
-        on:change={handleEditorChange}
+        on:change={handleEsriEditorChange}
         language="json"
       />
     </div>
@@ -72,20 +86,23 @@
   <div
     class="flex flex-col justify-center items-center p-2 bg-gray-500 shadow z-10 md:w-16 md:flex"
   >
+    <button
+      class="btn btn-outline-white btn-md my-2"
+      on:click={convertEsritoMaplibreStyle}>⇨</button
+    >
     <button class="btn btn-outline-white btn-md my-2">⇦</button>
-    <button class="btn btn-outline-white btn-md my-2">⇨</button>
     <button class="btn btn-circle btn-sm my-2">⟳</button>
     <button class="btn btn-circle btn-sm my-2">≡</button>
   </div>
 
   <!-- CODE EDITOR 2 -->
   <div class="flex-1 flex flex-col">
     <div class="flex-1 p-4 overflow-auto bg-gray-50">
-      <!-- <CodeEditor
-        bind:content={$mapboxStyleJson}
-        on:change={handleMapboxStyleChange}
+      <CodeEditor
+        bind:content={$maplibreStyleJson}
         language="json"
-      ></CodeEditor> -->
+        on:change={handleMaplibreEditorChange}
+      ></CodeEditor>
     </div>
     <div class="flex items-center p-4 bg-gray-200">
       <input

src/esriToMapbox.ts

@@ -83,7 +83,39 @@ async function resolveEsriRelativePaths(baseUrl: string, esriStyleJson?: any): P
     return resolvedStyle;
 }
 
+async function constructMapboxStyleFromEsriAbsolute(baseUrl: string, esriStyleJson?: any): Promise<any> {
+    // Normalize the base URL to ensure it does not end with a slash
+    const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+
+    // Fetch the Esri style JSON if it's not provided
+    if (!esriStyleJson) {
+        esriStyleJson = await fetchEsriStyleJson(normalizedBaseUrl);
+    }
+
+    // Adjust the 'sources' to use the correct tile URL pattern while preserving other properties
+    if (esriStyleJson.sources) {
+        for (const sourceKey in esriStyleJson.sources) {
+            const source = esriStyleJson.sources[sourceKey];
+            if (source.type === 'vector' && source.url) {
+                // Preserve all source properties
+                const updatedSource = { ...source };
+                // Update tiles URL, remove 'url' property
+                updatedSource.tiles = [`${source.url}tile/{z}/{y}/{x}.pbf`];
+                delete updatedSource.url;
+
+
+                // Update the source with the new properties
+                esriStyleJson.sources[sourceKey] = updatedSource;
+            }
+        }
+    }
+
+
+    return esriStyleJson;
+}
+
+
 
 
 
-export { constructMapboxStyleFromEsri, fetchEsriStyleJson, resolveEsriRelativePaths };
+export { constructMapboxStyleFromEsri, fetchEsriStyleJson, resolveEsriRelativePaths, constructMapboxStyleFromEsriAbsolute };