poe-svelte-ui-lib 1.7.7 → 1.7.9

package/dist/Map/Map.svelte

@@ -1,5 +1,4 @@
-<!-- $lib/ElementsUI/Map.svelte
-<script lang="ts">
+<!-- <script lang="ts">
   import { t } from "../locales/i18n"
   import type { IDeviceGNSS, IMapProps } from "../types"
   import { onDestroy, onMount } from "svelte"
@@ -96,6 +95,7 @@
   }
 </script>
 
+$lib/ElementsUI/Map.svelte
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="h-full min-h-50">
   {#if label.name}
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
@@ -218,17 +218,101 @@
 </div> -->
 
 <script lang="ts">
-  import { Map, TileLayer, Marker, Popup } from "sveaflet"
+  import { onMount } from "svelte"
+
+  let mapContainer: HTMLElement | null = null
+  let isLoading = $state(false)
+  let hasConnection = $state(true)
+
+  const CDN_URL = "https://cdn.jsdelivr.net/npm/maplibre-gl@5.17.0/dist/maplibre-gl.min.js"
+  const CSS_URL = "https://cdn.jsdelivr.net/npm/maplibre-gl@5.17.0/dist/maplibre-gl.min.css"
+
+  async function loadMapLibre() {
+    if (typeof window === "undefined") return
+
+    // Проверяем наличие интернета
+    if (!navigator.onLine) {
+      hasConnection = false
+      return
+    }
+
+    isLoading = true
+
+    try {
+      // Проверяем, не загружена ли уже библиотека
+      if (!window.maplibregl) {
+        await loadScript(CDN_URL)
+        await loadCSS(CSS_URL)
+
+        // После загрузки скрипта проверим, что window.maplibregl существует
+        if (!window.maplibregl) {
+          throw new Error("MapLibre GL не был загружен корректно.")
+        }
+      }
+
+      initMap()
+    } catch (err) {
+      console.error("Ошибка загрузки MapLibre GL:", err)
+      hasConnection = false
+    } finally {
+      isLoading = false
+    }
+  }
+
+  function loadScript(src: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (document.querySelector(`script[src="${src}"]`)) {
+        resolve()
+        return
+      }
+      const script = document.createElement("script")
+      script.src = src
+      script.async = true
+      script.onload = () => resolve() // Обернули resolve в стрелочную функцию
+      script.onerror = () => reject(new Error(`Не удалось загрузить скрипт ${src}`))
+      document.head.appendChild(script)
+    })
+  }
+
+  function loadCSS(href: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (document.querySelector(`link[href="${href}"]`)) {
+        resolve()
+        return
+      }
+      const link = document.createElement("link")
+      link.rel = "stylesheet"
+      link.href = href
+      link.onload = () => resolve() // Обернули resolve в стрелочную функцию
+      link.onerror = () => reject(new Error(`Не удалось загрузить стиль ${href}`))
+      document.head.appendChild(link)
+    })
+  }
+
+  function initMap() {
+    if (!mapContainer || !window.maplibregl) return
+
+    const map = new window.maplibregl.Map({
+      container: mapContainer,
+      style: "https://demotiles.maplibre.org/style.json",
+      center: [0, 0],
+      zoom: 1,
+    })
+
+    new window.maplibregl.Marker().setLngLat([0, 0]).addTo(map)
+  }
+
+  onMount(() => {
+    loadMapLibre()
+  })
 </script>
 
-<div style="width:100%;height:500px;">
-  <Map
-    options={{
-      center: [51.505, -0.09],
-      zoom: 13,
-    }}
-  >
-    <TileLayer url={"https://tile.openstreetmap.org/{z}/{x}/{y}.png"} />
-    <Marker latLng={[51.505, -0.09]} />
-  </Map>
-</div>
+<div class="map-container h-150 w-full" bind:this={mapContainer}></div>
+
+{#if isLoading}
+  <p>Загрузка карты...</p>
+{/if}
+
+{#if !hasConnection}
+  <p>Нет подключения к интернету.</p>
+{/if}

package/dist/Map/Map.svelte.d.ts

@@ -1,19 +1,3 @@
-import { Map } from "sveaflet";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Map: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Map = InstanceType<typeof Map>;
+declare const Map: import("svelte").Component<Record<string, never>, {}, "">;
+type Map = ReturnType<typeof Map>;
 export default Map;

package/dist/Map/mapWrapper/MapLibre.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { onDestroy, type Snippet } from "svelte"
-  import maplibregl from "maplibre-gl"
+  import { onDestroy, onMount, type Snippet } from "svelte"
   import { prepareMapContext } from "./contexts.svelte.js"
 
   interface Props {

package/dist/Map/mapWrapper/MapLibre.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type Snippet } from "svelte";
-import maplibregl from "maplibre-gl";
 interface Props {
     class?: string;
     style?: maplibregl.StyleSpecification | string;

package/dist/Map/mapWrapper/Marker.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   // https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/
 
-  import { onDestroy, type Snippet } from "svelte"
-  import maplibregl from "maplibre-gl"
+  import { onDestroy, onMount, type Snippet } from "svelte"
   import { getMapContext, prepareMarkerContext } from "./contexts.svelte.js"
   import { formatLngLat, resetEventListener } from "./utils.js"
 

package/dist/Map/mapWrapper/Marker.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type Snippet } from "svelte";
-import maplibregl from "maplibre-gl";
 interface Props extends Omit<maplibregl.MarkerOptions, "className"> {
     lnglat: maplibregl.LngLatLike;
     class?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -33,7 +33,7 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "sveaflet": "^0.1.4",
+    "@types/maplibre-gl": "^1.13.2",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {