just working !

Youssef-Harby · Apr 11, 2024 · 3161db5 · 3161db5
1 parent a735d90
commit 3161db5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/example/src/App.svelte b/example/src/App.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { mapState, basemapUrl, maplibreStyleUrl } from "./lib/store";
+  import { mapState, basemapUrl, maplibreStyle } from "./lib/store";
   import EsriMap from "./lib/EsriMap.svelte";
   import MaplibreMap from "./lib/MaplibreMap.svelte";
   import CodeEditor from "./lib/Monaco/CodeEditor.svelte";
@@ -19,6 +19,7 @@
       const theMapboxStyle = await constructMapboxStyleFromEsri(urlInput);
       mapboxStyleJson.set(JSON.stringify(theMapboxStyle, null, 2));
       basemapUrl.set(urlInput); // Update the basemap URL in the store
+      maplibreStyle.set(theMapboxStyle);
 
       const theEsriStyle = await fetchEsriStyleJson(urlInput);
       esriStyleJson.set(JSON.stringify(theEsriStyle, null, 2));

diff --git a/example/src/lib/MaplibreMap.svelte b/example/src/lib/MaplibreMap.svelte
@@ -9,13 +9,13 @@
     AttributionControl,
   } from "svelte-maplibre";
   import maplibregl from "maplibre-gl";
-  import { mapState, maplibreStyleUrl } from "../lib/store";
+  import { mapState, maplibreStyle } from "../lib/store";
   import { get } from "svelte/store";
 
   let mapClasses = "h-full w-full";
   let map: any; // This will hold the map instance
   let initialMapState = get(mapState);
-  let styleUrl = get(maplibreStyleUrl);
+  let theStyle = get(maplibreStyle);
 
   onMount(() => {
     maplibregl.setRTLTextPlugin(
@@ -49,12 +49,17 @@
       unsubscribe();
     };
   });
+  $: {
+    if (map) {
+      map.setStyle($maplibreStyle);
+    }
+  }
 </script>
 
 <MapLibre
   bind:map
   class={mapClasses}
-  style={styleUrl}
+  style={theStyle}
   center={initialMapState.center}
   zoom={initialMapState.zoom}
   attributionControl={false}

diff --git a/example/src/lib/store.ts b/example/src/lib/store.ts
@@ -15,4 +15,4 @@ export const mapState = writable<MapState>({
 export const basemapUrl = writable<string>("https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer");
 
 // Optional: Separate store for Maplibre style URL if needed
-export const maplibreStyleUrl = writable<string>("https://basemaps.cartocdn.com/gl/positron-gl-style/style.json");
+export const maplibreStyle = writable<string>("https://basemaps.cartocdn.com/gl/positron-gl-style/style.json");