feat(gis): restore premium OSM style and fix international routing bounds for Jordan & Syria

2026-03-28 03:55:42 +03:00
parent 2d674f5c06
commit d6f3b41b53
4 changed files with 251 additions and 45 deletions
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Intaleq Premium Map - خرائط انطلاقة الذكية</title>
+  
+  <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
+  <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
+
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #f8f9fa; overflow: hidden; }
+    #map { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; }
+    .controls {
+      position: absolute; top: 20px; right: 20px; z-index: 100;
+      background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
+      border-radius: 16px; padding: 20px; width: 340px;
+      box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05);
+    }
+    .branding {
+      position: absolute; bottom: 24px; left: 24px; z-index: 100;
+      background: rgba(255, 255, 255, 0.9); padding: 8px 16px; border-radius: 8px;
+      display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+      pointer-events: none; border: 1px solid rgba(0,0,0,0.05);
+    }
+    .btn {
+      padding: 14px 20px; border: none; border-radius: 10px;
+      font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px;
+    }
+    .btn-primary { background: #2563eb; color: white; }
+    .btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
+    .info-box {
+      background: #f8fafc; border-radius: 10px; padding: 14px; font-size: 14px; color: #334155; margin-top: 16px;
+      border-right: 4px solid #2563eb; line-height: 1.6; display: none;
+    }
+    #loading { display: none; position: fixed; inset: 0; background: rgba(255,255,255,0.7); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
+  </style>
+</head>
+<body>
+
+<div id="map"></div>
+<div id="loading"><strong>جاري معالجة المسار...</strong></div>
+
+<div class="branding">
+  <img src="/intaleq-logo.png" alt="Logo" style="height: 20px;" onerror="this.style.display='none'">
+  <span style="font-size: 12px; font-weight: 800; color: #0f172a; letter-spacing: 0.5px;">POWERED BY INTALEQ</span>
+</div>
+
+<div class="controls">
+  <h2 style="font-size: 20px; color: #0f172a; margin-bottom: 6px;">🗺️ خرائط انطلاقة الذكية</h2>
+  <p style="font-size: 13px; color: #64748b; margin-bottom: 16px;">المسار المعتمد: عمان ➔ دمشق</p>
+  
+  <button class="btn btn-primary" onclick="handleRoute()">
+    <span>🚀</span>
+    <span>حساب المسار الذكي</span>
+  </button>
+  
+  <div id="status" class="info-box"></div>
+</div>
+
+<script>
+  const TILES_URL = 'https://tiles.intaleqapp.com';
+  const API_KEY   = 'intaleq_secret_2026';
+  const AMMAN     = [35.9106, 31.9539];
+  const DAMASCUS  = [36.2765, 33.5138];
+
+  maplibregl.setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.js', null, true);
+
+  const map = new maplibregl.Map({
+    container: 'map',
+    center: AMMAN,
+    zoom: 12,
+    attributionControl: false,
+    style: './style-mobile.json?v=' + Date.now()
+  });
+
+  map.on('load', () => {
+    // إضافة مصدر المعالم الخاصة بدمشق (Places Syria)
+    map.addSource('user-landmarks', { 
+      type: 'vector', 
+      tiles: [`${TILES_URL}/places_syria/{z}/{x}/{y}`], 
+      maxzoom: 14 
+    });
+    
+    // إضافة طبقة الأسماء بدقة عالية تندمج مع الستايل الأصلي
+    map.addLayer({
+      id: 'user-landmarks-labels',
+      type: 'symbol',
+      source: 'user-landmarks',
+      'source-layer': 'places_syria',
+      minzoom: 15, // تظهر فقط عند التقريب الشديد للحفاظ على النظافة
+      layout: { 
+        'text-field': '{name_ar}', 
+        'text-font': ['Noto Sans Regular'], 
+        'text-size': 13, 
+        'text-anchor': 'top',
+        'text-offset': [0, 1.2],
+        'text-letter-spacing': 0.05
+      },
+      paint: { 
+        'text-color': '#3c4043', // تطابق لون أسماء الشوارع والمعالم الأصلية
+        'text-halo-color': 'rgba(255, 255, 255, 0.9)', 
+        'text-halo-width': 2 
+      }
+    });
+
+    // تحميل أيقونة الأسهم
+    map.loadImage('/icons/arrow.svg', (error, image) => {
+      if (error) console.error('Error loading arrow icon:', error);
+      else if (!map.hasImage('arrow')) map.addImage('arrow', image, { sdf: true });
+    });
+  });
+
+  function decodePoly(str) {
+    let index = 0, lat = 0, lng = 0, coordinates = [];
+    while (index < str.length) {
+      let byte, shift = 0, result = 0;
+      do { byte = str.charCodeAt(index++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20);
+      lat += ((result & 1) ? ~(result >> 1) : (result >> 1));
+      shift = 0; result = 0;
+      do { byte = str.charCodeAt(index++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20);
+      lng += ((result & 1) ? ~(result >> 1) : (result >> 1));
+      coordinates.push([lng / 1e5, lat / 1e5]);
+    }
+    return coordinates;
+  }
+
+  async function handleRoute() {
+    const l = document.getElementById('loading');
+    const s = document.getElementById('status');
+    l.style.display = 'flex';
+    try {
+      const url = `https://map-saas.intaleqapp.com/api/maps/route?fromLat=${AMMAN[1]}&fromLng=${AMMAN[0]}&toLat=${DAMASCUS[1]}&toLng=${DAMASCUS[0]}`;
+      const res = await fetch(url, { headers: { 'x-api-key': API_KEY } });
+      const data = await res.json();
+      
+      if (data.statusCode >= 400) throw new Error(data.message || 'Routing API Error');
+      
+      let coords = typeof data.points === 'string' ? decodePoly(data.points) : data.points;
+      if (!coords || coords.length === 0) throw new Error('No valid route points found');
+
+      if (map.getSource('route')) {
+        map.getSource('route').setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: coords } });
+      } else {
+        map.addSource('route', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: coords } } });
+        map.addLayer({ id: 'route-line', type: 'line', source: 'route', paint: { 'line-color': '#2563eb', 'line-width': 8, 'line-opacity': 0.85 } });
+      }
+      
+      const bounds = coords.reduce((b, c) => b.extend(c), new maplibregl.LngLatBounds(coords[0], coords[0]));
+      map.fitBounds(bounds, { padding: 80 });
+      
+      s.style.display = 'block';
+      s.innerHTML = `🏁 المسافة: ${(data.distance/1000).toFixed(1)} كم | ⏱ الوقت: ${(data.duration/60).toFixed(0)} دقيقة`;
+    } catch (e) {
+      alert('خطأ في حساب المسارات: ' + e.message);
+      console.error(e);
+    } finally { l.style.display = 'none'; }
+  }
+</script>
+</body>
+</html>