feat: conversion

Youssef-Harby · Apr 11, 2024 · 5593036 · 5593036
1 parent bc9e78d
commit 5593036
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 32 deletions.
diff --git a/example/src/App.svelte b/example/src/App.svelte
@@ -10,21 +10,39 @@
   import MaplibreMap from "./lib/MaplibreMap.svelte";
   import CodeEditor from "./lib/Monaco/CodeEditor.svelte";
   import {
-    constructMapboxStyleFromEsri,
-    fetchEsriStyleJson,
     resolveEsriRelativePaths,
     constructMapboxStyleFromEsriAbsolute,
   } from "@esri-style-ft-mapbox-style/esriToMapbox";
-  import { writable, get } from "svelte/store";
+  import { get } from "svelte/store";
 
-  let urlInput: string = "";
+  let esriUrlInput: string = "";
+  let maplibreUrlInput: string = "";
 
   async function esriLogicSection(): Promise<void> {
-    if (!urlInput) return;
+    if (!esriUrlInput) return;
     try {
-      const theFetchedEsriStyleJson = await resolveEsriRelativePaths(urlInput);
+      const theFetchedEsriStyleJson =
+        await resolveEsriRelativePaths(esriUrlInput);
       esriStyleJson.set(JSON.stringify(theFetchedEsriStyleJson, null, 2));
-      esriBasemapUrl.set(urlInput);
+      esriBasemapUrl.set(esriUrlInput);
+    } catch (error) {
+      console.error("Failed to convert style:", error);
+      // mapboxStyleJson.set(`Error: ${(error as Error).message}`);
+    }
+  }
+
+  async function maplibreLogicSection(): Promise<void> {
+    if (!maplibreUrlInput) return;
+    try {
+      const response = await fetch(maplibreUrlInput);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const theFetchedMapLibreStyleJson = await response.json();
+      maplibreStyleJson.set(
+        JSON.stringify(theFetchedMapLibreStyleJson, null, 2)
+      );
+      maplibreBasemapUrl.set(maplibreUrlInput);
     } catch (error) {
       console.error("Failed to convert style:", error);
       // mapboxStyleJson.set(`Error: ${(error as Error).message}`);
@@ -37,24 +55,18 @@
     maplibreStyleJson.set(event.detail);
   }
 
-  async function convertEsritoMaplibreStyle(): Promise<void> {
+  async function convertEsriToMaplibreStyle(): Promise<void> {
     const theFetchedMaplibreStyleJson =
       await constructMapboxStyleFromEsriAbsolute(
-        urlInput,
+        esriUrlInput,
         JSON.parse(get(esriStyleJson))
       );
 
     maplibreStyleJson.set(JSON.stringify(theFetchedMaplibreStyleJson, null, 2));
   }
 
-  // Watch for changes in mapboxStyleJson and update maplibreStyle
-  $: {
-    try {
-      // const parsedStyle = JSON.parse($mapboxStyleJson);
-      // maplibreStyle.set(parsedStyle);
-    } catch (error) {
-      console.error("Failed to parse Mapbox style JSON:", error);
-    }
+  function convertMaplibreToEsriStyle(): void {
+    esriStyleJson.set(get(maplibreStyleJson));
   }
 </script>
 
@@ -70,7 +82,7 @@
     </div>
     <div class="flex items-center p-4 bg-gray-200">
       <input
-        bind:value={urlInput}
+        bind:value={esriUrlInput}
         type="text"
         placeholder="Enter URL"
         class="input input-bordered w-full mr-2"
@@ -88,9 +100,12 @@
   >
     <button
       class="btn btn-outline-white btn-md my-2"
-      on:click={convertEsritoMaplibreStyle}>⇨</button
+      on:click={convertEsriToMaplibreStyle}>⇨</button
+    >
+    <button
+      class="btn btn-outline-white btn-md my-2"
+      on:click={convertMaplibreToEsriStyle}>⇦</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>
@@ -107,10 +122,13 @@
     <div class="flex items-center p-4 bg-gray-200">
       <input
         type="text"
+        bind:value={maplibreUrlInput}
         placeholder="Enter URL"
         class="input input-bordered w-full mr-2"
       />
-      <button class="btn btn-outline">Fetch</button>
+      <button class="btn btn-outline" on:click={maplibreLogicSection}
+        >Fetch</button
+      >
     </div>
     <div class="flex-1">
       <!-- Show map in both mobile and desktop view -->

diff --git a/example/src/lib/EsriMap.svelte b/example/src/lib/EsriMap.svelte
@@ -9,15 +9,13 @@
   import { when } from "@arcgis/core/core/reactiveUtils";
 
   let initialMapState: MapState = get(mapState);
-  // let initialBasemapUrl: string = get(esriBasemapUrl);
-  let styleFromEditor: any = JSON.parse(get(esriStyleJson));
   let map: Map;
   let view: MapView;
 
   onMount(() => {
     const customBasemap = new VectorTileLayer({
       // url: initialBasemapUrl,
-      style: styleFromEditor,
+      style: $esriStyleJson,
     });
 
     const map = new Map({

diff --git a/example/src/lib/MaplibreMap.svelte b/example/src/lib/MaplibreMap.svelte
@@ -8,7 +8,7 @@
     ScaleControl,
     AttributionControl,
   } from "svelte-maplibre";
-  import { mapState, maplibreBasemapUrl } from "../lib/store";
+  import { mapState, maplibreStyleJson } from "../lib/store";
   import { get } from "svelte/store";
 
   let mapClasses = "h-full w-full";
@@ -42,17 +42,12 @@
       unsubscribe();
     };
   });
-  $: {
-    if (map) {
-      map.setStyle($maplibreBasemapUrl);
-    }
-  }
 </script>
 
 <MapLibre
   bind:map
   class={mapClasses}
-  style={$maplibreBasemapUrl}
+  style={JSON.parse($maplibreStyleJson)}
   center={initialMapState.center}
   zoom={initialMapState.zoom}
   attributionControl={false}

diff --git a/example/src/lib/store.ts b/example/src/lib/store.ts
@@ -138,4 +138,131 @@ export const esriStyleJson = writable(JSON.stringify({
         }
     ]
 }, null, 2));
-export const maplibreStyleJson = writable("");
+export const maplibreStyleJson = writable(JSON.stringify({
+    "version": 8,
+    "sprite": "https://basemaps.arcgis.com/arcgis/rest/services/World_Hillshade_v2/VectorTileServer/resources/sprites/sprite",
+    "glyphs": "https://basemaps.arcgis.com/arcgis/rest/services/World_Hillshade_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf",
+    "sources": {
+        "esri": {
+            "type": "vector",
+            "tiles": [
+                "https://basemaps.arcgis.com/arcgis/rest/services/World_Hillshade_v2/VectorTileServer/tile/{z}/{y}/{x}.pbf"
+            ]
+        }
+    },
+    "layers": [
+        {
+            "id": "Hillshade/Shadow Base/1",
+            "type": "fill",
+            "source": "esri",
+            "source-layer": "Hillshade",
+            "filter": [
+                "==",
+                "_symbol",
+                6
+            ],
+            "layout": {},
+            "paint": {
+                "fill-color": "#dcd5cc",
+                "fill-antialias": false
+            }
+        },
+        {
+            "id": "Hillshade/Highlight Light/1",
+            "type": "fill",
+            "source": "esri",
+            "source-layer": "Hillshade",
+            "filter": [
+                "==",
+                "_symbol",
+                5
+            ],
+            "layout": {},
+            "paint": {
+                "fill-color": "#eae8e3",
+                "fill-antialias": false
+            }
+        },
+        {
+            "id": "Hillshade/Highlight Strong/1",
+            "type": "fill",
+            "source": "esri",
+            "source-layer": "Hillshade",
+            "filter": [
+                "==",
+                "_symbol",
+                4
+            ],
+            "layout": {},
+            "paint": {
+                "fill-color": "#f9f8f6",
+                "fill-antialias": false
+            }
+        },
+        {
+            "id": "Hillshade/Shadow Light/1",
+            "type": "fill",
+            "source": "esri",
+            "source-layer": "Hillshade",
+            "filter": [
+                "==",
+                "_symbol",
+                3
+            ],
+            "layout": {},
+            "paint": {
+                "fill-color": "#d0c7bb",
+                "fill-antialias": false
+            }
+        },
+        {
+            "id": "Hillshade/Shadow Moderate/1",
+            "type": "fill",
+            "source": "esri",
+            "source-layer": "Hillshade",
+            "filter": [
+                "==",
+                "_symbol",
+                2
+            ],
+            "layout": {},
+            "paint": {
+                "fill-color": "#b1a99e",
+                "fill-antialias": false
+            }
+        },
+        {
+            "id": "Hillshade/Shadow Strong/1",
+            "type": "fill",
+            "source": "esri",
+            "source-layer": "Hillshade",
+            "filter": [
+                "==",
+                "_symbol",
+                1
+            ],
+            "layout": {},
+            "paint": {
+                "fill-color": "#999487",
+                "fill-antialias": false
+            }
+        },
+        {
+            "id": "Hillshade/Shadow Very Strong/1",
+            "type": "fill",
+            "source": "esri",
+            "source-layer": "Hillshade",
+            "filter": [
+                "==",
+                "_symbol",
+                0
+            ],
+            "layout": {},
+            "paint": {
+                "fill-color": "#827a6e",
+                "fill-antialias": false
+            }
+        }
+    ]
+}, null, 2));
+