Update EsriMap and MaplibreMap components to use initialMapState from…

… store and synced view

example/src/lib/EsriMap.svelte

@@ -1,26 +1,52 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { mapState } from "../lib/store";
+  import type { MapState } from "../lib/store";
   import Map from "@arcgis/core/Map";
   import MapView from "@arcgis/core/views/MapView";
-  // import esriConfig from "@arcgis/core/config";
+  import { get } from "svelte/store";
 
-  // const apiKey: string = "YOUR_API_KEY";
+  let initialMapState: MapState = get(mapState);
 
   onMount(() => {
-    // esriConfig.apiKey = apiKey;
-
     const map = new Map({
-      basemap: "streets", // Basemap style
+      basemap: "streets",
     });
 
     const view = new MapView({
-      container: "viewDiv", // Ensure this ID matches the div ID below
+      container: "viewDiv",
       map: map,
-      center: [-118.805, 34.027], // Longitude, latitude
-      zoom: 13, // Zoom level
+      center: initialMapState.center,
+      zoom: initialMapState.zoom,
+    });
+
+    view.when(() => {
+      // Update shared state on map movement
+      view.watch(["center", "zoom"], () => {
+        mapState.set({
+          center: [view.center.longitude, view.center.latitude],
+          zoom: view.zoom,
+        });
+      });
     });
+
+    const unsubscribe = mapState.subscribe(($mapState) => {
+      if (
+        view.center.longitude !== $mapState.center[0] ||
+        view.center.latitude !== $mapState.center[1] ||
+        view.zoom !== $mapState.zoom
+      ) {
+        view.goTo({
+          center: $mapState.center,
+          zoom: $mapState.zoom,
+        });
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
   });
 </script>
 
 <div id="viewDiv" class="h-full"></div>
-<!-- Height management via Tailwind -->

example/src/lib/MaplibreMap.svelte

@@ -1,17 +1,67 @@
-<script>
-  import { MapLibre } from "svelte-maplibre";
+<script lang="ts">
+  import { onMount } from "svelte";
+  import {
+    MapLibre,
+    NavigationControl,
+    GeolocateControl,
+    FullscreenControl,
+    ScaleControl,
+    AttributionControl,
+  } from "svelte-maplibre";
+  import maplibregl from "maplibre-gl";
+  import { mapState } from "../lib/store";
+  import type { MapState } from "../lib/store";
+  import { get } from "svelte/store";
+
+  let mapClasses = "h-full w-full";
+  let map: any;
+
+  let initialMapState: MapState = get(mapState);
+
+  onMount(() => {
+    maplibregl.setRTLTextPlugin(
+      "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js",
+      true
+    );
+    map.on("moveend", () => {
+      mapState.set({
+        center: [map.getCenter().lng, map.getCenter().lat],
+        zoom: map.getZoom(),
+      });
+    });
+
+    const unsubscribe = mapState.subscribe(($mapState) => {
+      if (
+        map.getCenter().lng !== $mapState.center[0] ||
+        map.getCenter().lat !== $mapState.center[1] ||
+        map.getZoom() !== $mapState.zoom
+      ) {
+        map.jumpTo({
+          center: $mapState.center,
+          zoom: $mapState.zoom,
+        });
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  });
 </script>
 
 <MapLibre
-  center={[50, 20]}
-  zoom={7}
-  class="map"
-  standardControls
+  bind:map
+  class={mapClasses}
   style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
-/>
-
-<style>
-  :global(.map) {
-    height: 100%;
-  }
-</style>
+  center={initialMapState.center}
+  zoom={initialMapState.zoom}
+  attributionControl={false}
+>
+  <NavigationControl position="top-left" />
+  <GeolocateControl position="top-left" fitBoundsOptions={{ maxZoom: 12 }} />
+  <FullscreenControl position="top-left" />
+  <ScaleControl />
+  <AttributionControl
+    customAttribution={`A <strong class="text-red-500">custom</strong> attribution`}
+  />
+</MapLibre>

example/src/lib/store.ts

@@ -0,0 +1,12 @@
+// src/lib/store.ts
+import { writable } from 'svelte/store';
+
+export interface MapState {
+    center: [number, number]; // [longitude, latitude]
+    zoom: number;
+}
+
+export const mapState = writable<MapState>({
+    center: [-118.805, 34.027], // Initial center
+    zoom: 13, // Initial zoom level
+});