Backup before syncing server scripts

apps/web/src/utils/mapIcons.ts

@@ -0,0 +1,67 @@
+import type { Map as MlMap } from 'maplibre-gl';
+
+/**
+ * تحميل آيقونات الـ POI عند الطلب من ملفات SVG في /icons.
+ *
+ * لماذا لا sprite: الستايل كان يشير إلى demotiles.maplibre.org (خادم MapLibre
+ * التجريبي). حين يفشل تحميله يرسم MapLibre نص التسمية بلا آيقونة وبصمت — فتظهر
+ * الخريطة بأسماء بلا رموز. البديل المعتاد هو بناء sprite sheet، لكنه يتطلب
+ * سلسلة أدوات (cairo/resvg) واستضافة ملف إضافي ومزامنته مع كل آيقونة جديدة.
+ *
+ * `styleimagemissing` ينطلق مرة واحدة لكل آيقونة تطلبها طبقة ولا يجدها المحرك،
+ * فنحمّلها وقتها من الـ SVG الموجود أصلاً في المستودع. لا خطوة بناء، ولا ملف
+ * يُستضاف، وإضافة آيقونة جديدة = إسقاط ملف SVG في المجلد فقط.
+ *
+ * ALIASES تسدّ الفجوة بين ما تطلبه طبقات الستايل وما هو متوفر فعلاً كملف.
+ */
+const ALIASES: Record<string, string> = {
+  rail: 'train',
+  college: 'tourist',
+  school: 'tourist',
+  cafe: 'cafe',
+  restaurant: 'restaurant',
+};
+
+const SIZE = 24;
+
+export function attachIconLoader(map: MlMap): () => void {
+  const pending = new Set<string>();
+
+  const onMissing = (e: { id: string }) => {
+    const id = e.id;
+    // الحدث قد يتكرر لنفس الآيقونة قبل اكتمال التحميل غير المتزامن
+    if (!id || pending.has(id) || map.hasImage(id)) return;
+    pending.add(id);
+
+    const file = ALIASES[id] ?? id;
+    const img = new Image(SIZE, SIZE);
+    img.crossOrigin = 'anonymous';
+
+    img.onload = () => {
+      // الفحص مكرر عمداً: التحميل غير متزامن وقد يكون الستايل تبدّل أثناءه
+      if (!map.hasImage(id)) {
+        try {
+          map.addImage(id, img, { pixelRatio: 1 });
+        } catch {
+          /* الستايل تبدّل تحتنا — تُطلب مجدداً عند الحاجة */
+        }
+      }
+      pending.delete(id);
+    };
+
+    img.onerror = () => {
+      // بلا ملف مقابل: نضيف بكسلاً شفافاً حتى لا يعيد MapLibre إطلاق الحدث
+      // في كل إطار. النص يظهر بلا رمز، وهو أفضل من حلقة لا تنتهي.
+      if (!map.hasImage(id)) {
+        map.addImage(id, { width: 1, height: 1, data: new Uint8Array(4) });
+      }
+      pending.delete(id);
+      console.warn(`[mapIcons] لا يوجد /icons/${file}.svg للآيقونة "${id}"`);
+    };
+
+    img.src = `/icons/${file}.svg`;
+  };
+
+  map.on('styleimagemissing', onMissing);
+  return () => map.off('styleimagemissing', onMissing);
+}