Hamza/maps-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add build artifacts, map assets, and routing data

Browse Source
This commit is contained in:
Hamza-Ayed
2026-09-19 12:34:24 +03:00
parent aa2b9f131f
commit 43ad2e0ad4
327 changed files with 52421 additions and 1810 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/js/docs.js
+506 -198
View File
@@ -1,7 +1,7 @@
/**
* Documentation Engine for Intaleq Dashboard
* Comprehensive API Reference (EN/AR)
* Updated with Premium Visuals, High-Performance Examples, and Official SDKs
* Commercial Enterprise Mapping Platform & Native SDKs (iOS Swift, Android Kotlin, Flutter Dart, Web JS/TS)
* Supports English & Arabic Localization
*/
const docs = {
@@ -21,10 +21,6 @@ const docs = {
e.preventDefault();
const section = e.currentTarget.getAttribute('data-section');
docs.renderSection(section);
// Active state management
document.querySelectorAll('.docs-nav-link').forEach(l => l.classList.remove('active', 'bg-blue-500/10', 'text-blue-400'));
e.currentTarget.classList.add('active', 'bg-blue-500/10', 'text-blue-400');
});
});
},
@@ -33,7 +29,19 @@ const docs = {
const container = document.getElementById('docs-content');
if (!container) return;
const lang = i18n.currentLang || 'en';
// Synchronize active sidebar navigation link
document.querySelectorAll('.docs-nav-link').forEach(l => {
const sec = l.getAttribute('data-section');
if (sec === id) {
l.classList.add('active', 'bg-blue-500/10', 'text-blue-400');
l.classList.remove('text-slate-400');
} else {
l.classList.remove('active', 'bg-blue-500/10', 'text-blue-400');
l.classList.add('text-slate-400');
}
});
const lang = (window.i18n && window.i18n.currentLang) || 'en';
const isAr = lang === 'ar';
const content = {
@@ -42,165 +50,416 @@ const docs = {
<div class="relative overflow-hidden rounded-[3rem] p-12 bg-gradient-to-br from-blue-600/20 via-blue-500/5 to-transparent border border-white/10 group">
<div class="absolute -top-24 -right-24 w-96 h-96 bg-blue-500/10 blur-[120px] rounded-full group-hover:bg-blue-500/20 transition-all duration-700"></div>
<div class="relative z-10">
<h3 class="text-5xl font-black mb-6 text-gradient">${isAr ? 'انطلق في ثوانٍ' : 'Launch in Seconds'}</h3>
<p class="text-slate-300 text-xl leading-relaxed max-w-2xl">
${isAr ? 'مرحباً بك في مستقبل الخرائط في المنطقة. توفر لك منصة "انطلاق" واجهات برمجية ذكية، خرائط Vector فائقة الدقة، ومباني ثلاثية الأبعاد متكاملة.' : 'Welcome to the future of regional mapping. Intaleq provides high-fidelity vector tiles, intelligent geocoding, and native 3D building support for Jordan & Syria.'}
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-500/20 text-blue-300 text-xs font-bold mb-4 border border-blue-500/30">
<i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
${isAr ? 'منصة الخرائط والذكاء المكاني للأعمال' : 'Enterprise Commercial Mapping Platform'}
</div>
<h3 class="text-4xl md:text-5xl font-black mb-6 text-gradient">${isAr ? 'ابدأ التكامل مع منصة انطلاق' : 'Launch in Minutes'}</h3>
<p class="text-slate-300 text-lg md:text-xl leading-relaxed max-w-3xl">
${isAr ? 'توفر منصة "انطلاق" حلول الخرائط المتطورة لتطبيقات النقل الذكي (Ride-Hailing)، شركات التوصيل واللوجستيات (Delivery & Logistics)، والتجارة الإلكترونية، مع توفير يصل إلى 85% مقارنة بخرائط جوجل.' : 'Intaleq provides cutting-edge mapping infrastructure for Ride-Hailing, Delivery & Logistics, and E-commerce applications across Jordan & the MENA region at 85% lower cost than Google Maps.'}
</p>
<div class="flex gap-4 mt-8">
<a href="https://pub.dev/packages/intaleq_maps" target="_blank" class="px-6 py-3 bg-blue-600 text-white rounded-2xl font-black text-sm flex items-center gap-2 hover:bg-blue-500 transition-all">
<i data-lucide="package"></i> Flutter SDK
<div class="flex flex-wrap gap-4 mt-8">
<a href="javascript:void(0)" onclick="docs.renderSection('sdks-ios')" class="px-6 py-3 bg-slate-900 text-white rounded-2xl font-bold text-sm flex items-center gap-2 border border-white/10 hover:border-blue-500/50 hover:bg-slate-800 transition-all">
<i data-lucide="apple" class="w-4 h-4 text-slate-300"></i> iOS SDK (Swift)
</a>
<a href="https://www.npmjs.com/package/intaleq-maps-gl" target="_blank" class="px-6 py-3 bg-white text-slate-950 rounded-2xl font-black text-sm flex items-center gap-2 hover:bg-slate-100 transition-all">
<i data-lucide="package"></i> JS SDK
<a href="javascript:void(0)" onclick="docs.renderSection('sdks-android')" class="px-6 py-3 bg-slate-900 text-white rounded-2xl font-bold text-sm flex items-center gap-2 border border-white/10 hover:border-emerald-500/50 hover:bg-slate-800 transition-all">
<i data-lucide="smartphone" class="w-4 h-4 text-emerald-400"></i> Android SDK (Kotlin)
</a>
<a href="javascript:void(0)" onclick="docs.renderSection('sdks-flutter')" class="px-6 py-3 bg-blue-600 text-white rounded-2xl font-bold text-sm flex items-center gap-2 hover:bg-blue-500 shadow-lg shadow-blue-500/25 transition-all">
<i data-lucide="layers" class="w-4 h-4 text-cyan-200"></i> Flutter SDK
</a>
<a href="javascript:void(0)" onclick="docs.renderSection('sdks-web')" class="px-6 py-3 bg-white text-slate-950 rounded-2xl font-bold text-sm flex items-center gap-2 hover:bg-slate-100 transition-all">
<i data-lucide="globe" class="w-4 h-4 text-amber-500"></i> Web JavaScript / TS
</a>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="glass p-10 rounded-[2.5rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-blue-500/30 transition-all group">
<div class="w-16 h-16 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400 mb-8 font-black text-2xl group-hover:scale-110 transition-transform">01</div>
<h4 class="font-black text-2xl mb-4">${isAr ? 'مفتاح الوصول' : 'Access Key'}</h4>
<p class="text-slate-400 leading-relaxed">${isAr ? 'قم بإنشاء مفتاح API من لوحة التحكم لتفعيل طلباتك.' : 'Generate your secure API key from the dashboard to authenticate requests.'}</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="glass p-8 rounded-[2rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-blue-500/30 transition-all group">
<div class="w-14 h-14 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-400 mb-6 font-black text-xl group-hover:scale-110 transition-transform">01</div>
<h4 class="font-black text-xl mb-3 text-white">${isAr ? 'مفتاح الـ API الآمن' : 'API Key Setup'}</h4>
<p class="text-slate-400 text-sm leading-relaxed">${isAr ? 'أنشئ مفتاح وصول محمي بضوابط النطاق (Domain Whitelist) لتطبيقاتك التجارية.' : 'Generate production API keys with IP/Domain restrictions to protect your usage.'}</p>
</div>
<div class="glass p-10 rounded-[2.5rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-emerald-500/30 transition-all group">
<div class="w-16 h-16 rounded-2xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 mb-8 font-black text-2xl group-hover:scale-110 transition-transform">02</div>
<h4 class="font-black text-2xl mb-4">${isAr ? 'تكامل الخريطة' : 'Map Integration'}</h4>
<p class="text-slate-400 leading-relaxed">${isAr ? 'اختر النمط (Obsidian أو Light) وادمج الخريطة في تطبيقك.' : 'Select a theme and integrate the vector tiles using our GL styles.'}</p>
<div class="glass p-8 rounded-[2rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-emerald-500/30 transition-all group">
<div class="w-14 h-14 rounded-2xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 mb-6 font-black text-xl group-hover:scale-110 transition-transform">02</div>
<h4 class="font-black text-xl mb-3 text-white">${isAr ? 'خرائط مخصصة بهويتك' : 'Custom Map Styling'}</h4>
<p class="text-slate-400 text-sm leading-relaxed">${isAr ? 'اختر النمط الفاتح النظيف للتوصيل، أو النمط الداكن الفخم لتطبيقات النقل، مع مباني 3D.' : 'Choose between Light Delivery or Obsidian Dark ride-hailing styles with 3D buildings.'}</p>
</div>
<div class="glass p-10 rounded-[2.5rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-violet-500/30 transition-all group">
<div class="w-16 h-16 rounded-2xl bg-violet-500/10 flex items-center justify-center text-violet-400 mb-8 font-black text-2xl group-hover:scale-110 transition-transform">03</div>
<h4 class="font-black text-2xl mb-4">${isAr ? 'بيانات ذكية' : 'Smart Data'}</h4>
<p class="text-slate-400 leading-relaxed">${isAr ? 'استخدم خدمات البحث والتوجيه لإضافة ذكاء مكاني لتطبيقك.' : 'Leverage Geocoding and Routing APIs for advanced spatial intelligence.'}</p>
<div class="glass p-8 rounded-[2rem] border-white/5 bg-gradient-to-b from-white/[0.02] to-transparent hover:border-violet-500/30 transition-all group">
<div class="w-14 h-14 rounded-2xl bg-violet-500/10 flex items-center justify-center text-violet-400 mb-6 font-black text-xl group-hover:scale-110 transition-transform">03</div>
<h4 class="font-black text-xl mb-3 text-white">${isAr ? 'توجيه وبحث فائق الدقة' : 'Smart Routing & Search'}</h4>
<p class="text-slate-400 text-sm leading-relaxed">${isAr ? 'احسب مسار وتكلفة الرحلة لحظياً مع مصفوفة مطابقة السائقين بأقرب الطلبات.' : 'Calculate route fares, accurate ETAs, and multi-driver dispatch matrices in milliseconds.'}</p>
</div>
</div>
<div class="space-y-8 pt-6">
<div class="space-y-6 pt-4">
<div class="flex items-center gap-4">
<div class="h-8 w-1.5 bg-blue-500 rounded-full"></div>
<h4 class="text-3xl font-black">${isAr ? 'بيانات الوصول والمصادقة' : 'Domain & Authentication'}</h4>
<div class="h-7 w-1.5 bg-blue-500 rounded-full"></div>
<h4 class="text-2xl font-black text-white">${isAr ? 'بيانات الوصول والمصادقة المباشرة' : 'Production Endpoints & Authentication'}</h4>
</div>
<div class="bg-slate-950 rounded-[3rem] p-10 border border-slate-800 relative group overflow-hidden shadow-2xl">
<div class="absolute top-0 right-0 p-6 opacity-20 group-hover:opacity-100 transition-opacity">
<span class="bg-blue-500/10 text-blue-400 px-4 py-1.5 rounded-full text-xs font-black uppercase tracking-widest">Production URL</span>
<div class="bg-slate-950 rounded-[2.5rem] p-8 border border-slate-800 relative group overflow-hidden shadow-2xl">
<div class="absolute top-0 right-0 p-6 opacity-40 group-hover:opacity-100 transition-opacity">
<span class="bg-blue-500/10 text-blue-400 px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest border border-blue-500/20">Production Endpoint</span>
</div>
<code class="text-blue-400 font-mono text-2xl block mb-6 select-all">https://map-saas.intaleq.com/api</code>
<div class="flex flex-col md:flex-row gap-8 text-slate-400">
<div class="flex-1 space-y-2">
<p class="text-sm font-bold uppercase text-slate-500 tracking-widest italic">${isAr ? 'طريقة المصادقة' : 'Auth Method'}</p>
<p class="text-lg">${isAr ? 'يتم إرسال المفتاح عبر الـ HTTP Header التالي:' : 'Pass your API key in the following HTTP header:'}</p>
<code class="text-blue-300 font-mono font-black text-xl">x-api-key</code>
<code class="text-blue-400 font-mono text-xl block mb-6 select-all">https://map-saas.intaleqapp.com/api</code>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-slate-400 pt-4 border-t border-slate-900">
<div>
<p class="text-xs font-bold uppercase text-slate-500 tracking-widest mb-1">${isAr ? 'المصادقة عبر الـ Header (موصى به في Backend/Apps)' : 'Header Auth (Recommended)'}</p>
<code class="text-blue-300 font-mono font-bold text-sm bg-blue-500/10 px-2 py-1 rounded">x-api-key: in_9478b32836d19cff73db3063</code>
</div>
<div class="flex-1 space-y-2 border-slate-800 md:border-l md:pl-8">
<p class="text-sm font-bold uppercase text-slate-500 tracking-widest italic">${isAr ? 'نطاق الوصول' : 'Allowed Origins'}</p>
<p class="text-lg">${isAr ? 'تأكد من إضافة النطاق الخاص بك في إعدادات المفتاح.' : 'Ensure your request origin is listed in the key restrictions.'}</p>
<div>
<p class="text-xs font-bold uppercase text-slate-500 tracking-widest mb-1">${isAr ? 'المصادقة عبر الـ Query (للخرائط المباشرة)' : 'Query Parameter Auth'}</p>
<code class="text-emerald-300 font-mono font-bold text-sm bg-emerald-500/10 px-2 py-1 rounded">?key=in_9478b32836d19cff73db3063</code>
</div>
</div>
</div>
</div>
</div>
`,
'sdks': `
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
<header>
<h3 class="text-5xl font-black mb-4 text-gradient">${isAr ? 'المكتبات البرمجية (SDKs)' : 'SDKs & Client Libraries'}</h3>
<p class="text-slate-400 text-xl max-w-xl">${isAr ? 'استخدم مكتباتنا الجاهزة لدمج الخرائط والخدمات في ثوانٍ.' : 'Accelerate your development with our official enterprise-grade client libraries.'}</p>
'sdks-ios': `
<div class="space-y-10 animate-in fade-in slide-in-from-bottom-6 duration-700">
<header class="flex items-center gap-5 p-8 rounded-[2.5rem] bg-gradient-to-r from-slate-900 via-slate-900/60 to-transparent border border-white/10">
<div class="w-16 h-16 rounded-2xl bg-white/10 flex items-center justify-center text-white text-3xl shadow-xl">
<i data-lucide="apple" class="w-9 h-9"></i>
</div>
<div>
<div class="flex items-center gap-3 mb-1">
<h3 class="text-3xl font-black text-white">iOS Native SDK</h3>
<span class="px-3 py-0.5 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold border border-blue-500/30">Swift 5.9+ / UIKit & SwiftUI</span>
</div>
<p class="text-slate-400 text-base">${isAr ? 'مكتبة آبل الأصلية لتطبيقات النقل والتوصيل (Ride-Hailing & Delivery Apps) بسرعة 60 إطاراً في الثانية.' : 'Native iOS SDK for ride-hailing, driver tracking, and delivery logistics apps on iPhone & iPad.'}</p>
</div>
</header>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<!-- Flutter SDK Card -->
<div class="glass p-10 rounded-[3rem] border-white/5 flex flex-col hover:border-blue-500/30 transition-all">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center text-blue-400">
<i data-lucide="smartphone"></i>
</div>
<h4 class="text-2xl font-black text-white">Flutter SDK</h4>
<!-- Installation -->
<div class="space-y-4">
<h4 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="download" class="w-5 h-5 text-blue-400"></i> ${isAr ? '1. التثبيت (Installation)' : '1. Installation'}
</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-slate-950 p-6 rounded-2xl border border-slate-800">
<p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Swift Package Manager (SPM)</p>
<code class="text-xs text-blue-300 font-mono select-all block bg-white/5 p-3 rounded-xl">
https://github.com/maplibre/maplibre-native-spm
</code>
</div>
<p class="text-slate-400 mb-8 flex-1 leading-relaxed">
${isAr ? 'مكتبة متكاملة لنظام Flutter تدعم أندرويد و iOS والويب.' : 'A robust Flutter wrapper for MapLibre with native Intaleq services integrated.'}
</p>
<div class="bg-slate-950 p-6 rounded-2xl border border-slate-800 font-mono text-xs mb-8">
<span class="text-slate-500"># pubspec.yaml</span><br>
<span class="text-blue-400">intaleq_maps:</span> <span class="text-emerald-400">^1.0.0</span>
<div class="bg-slate-950 p-6 rounded-2xl border border-slate-800">
<p class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">CocoaPods (Podfile)</p>
<code class="text-xs text-emerald-300 font-mono select-all block bg-white/5 p-3 rounded-xl">
pod 'MapLibre', '~> 5.13.0'
</code>
</div>
<a href="https://pub.dev/packages/intaleq_maps" target="_blank" class="btn btn-primary w-full justify-center">View on pub.dev</a>
</div>
<!-- JS SDK Card -->
<div class="glass p-10 rounded-[3rem] border-white/5 flex flex-col hover:border-emerald-500/30 transition-all">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-400">
<i data-lucide="globe"></i>
</div>
<h4 class="text-2xl font-black text-white">JavaScript SDK</h4>
</div>
<p class="text-slate-400 mb-8 flex-1 leading-relaxed">
${isAr ? 'مكتبة JavaScript حديثة مدعومة بـ TypeScript لتطبيقات الويب.' : 'Modern TypeScript-ready SDK for seamless web map integration and routing.'}
</p>
<div class="bg-slate-950 p-6 rounded-2xl border border-slate-800 font-mono text-xs mb-8">
<span class="text-slate-500"># Install via NPM</span><br>
<span class="text-emerald-400">npm i intaleq-maps-gl</span>
</div>
<a href="https://www.npmjs.com/package/intaleq-maps-gl" target="_blank" class="btn btn-primary w-full justify-center">View on NPM</a>
</div>
</div>
<div class="bg-indigo-900/10 p-12 rounded-[3.5rem] border border-indigo-500/20">
<h4 class="text-2xl font-black mb-6 text-indigo-400">${isAr ? 'مثال: إضافة مؤشر (JS SDK)' : 'Example: Adding a Marker (JS SDK)'}</h4>
<pre class="bg-slate-950 p-10 rounded-[2.5rem] border border-slate-800 text-xs font-mono text-slate-300 leading-loose overflow-x-auto">
import { IntaleqMap } from 'intaleq-maps-gl';
<!-- Swift Code Example -->
<div class="space-y-4">
<div class="flex items-center justify-between">
<h4 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="code" class="w-5 h-5 text-blue-400"></i> ${isAr ? '2. مثال كود Swift كامل لتطبيق توصيل/نقل' : '2. Swift Implementation (Delivery / Ride-Hailing)'}
</h4>
<span class="text-xs font-mono text-slate-500">DeliveryMapViewController.swift</span>
</div>
<pre class="bg-slate-950 p-8 rounded-[2rem] border border-slate-800 text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto select-all">
<span class="text-purple-400">import</span> UIKit
<span class="text-purple-400">import</span> MapLibre
const map = new IntaleqMap({
container: 'map',
apiKey: 'YOUR_KEY',
styleType: 'obsidian'
});
<span class="text-purple-400">class</span> <span class="text-yellow-300">DeliveryMapViewController</span>: <span class="text-blue-300">UIViewController</span>, <span class="text-blue-300">MLNMapViewDelegate</span> {
<span class="text-purple-400">var</span> mapView: <span class="text-blue-300">MLNMapView</span>!
<span class="text-purple-400">let</span> apiKey = <span class="text-emerald-300">"YOUR_INTALEQ_API_KEY"</span>
<span class="text-purple-400">override func</span> <span class="text-blue-400">viewDidLoad</span>() {
<span class="text-purple-400">super</span>.viewDidLoad()
<span class="text-slate-500">// 1. رابط نمط الخريطة التجاري من انطلاق</span>
<span class="text-purple-400">let</span> styleURL = <span class="text-blue-300">URL</span>(string: <span class="text-emerald-300">"https://map-saas.intaleqapp.com/tactical-style.json?key=\(apiKey)"</span>)!
<span class="text-slate-500">// 2. تهيئة الخريطة وتثبيت موقع البداية على عمان</span>
mapView = <span class="text-blue-300">MLNMapView</span>(frame: view.bounds, styleURL: styleURL)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
mapView.setCenter(<span class="text-blue-300">CLLocationCoordinate2D</span>(latitude: <span class="text-cyan-300">31.9539</span>, longitude: <span class="text-cyan-300">35.9106</span>), zoomLevel: <span class="text-cyan-300">14</span>, animated: <span class="text-purple-400">false</span>)
mapView.delegate = <span class="text-purple-400">self</span>
view.addSubview(mapView)
<span class="text-slate-500">// 3. إضافة علامة موقع السائق / العميل</span>
<span class="text-purple-400">let</span> pickupPoint = <span class="text-blue-300">MLNPointAnnotation</span>()
pickupPoint.coordinate = <span class="text-blue-300">CLLocationCoordinate2D</span>(latitude: <span class="text-cyan-300">31.9539</span>, longitude: <span class="text-cyan-300">35.9106</span>)
pickupPoint.title = <span class="text-emerald-300">"نقطة استلام الطلب"</span>
pickupPoint.subtitle = <span class="text-slate-400">"شارع مكة، عمان"</span>
mapView.addAnnotation(pickupPoint)
}
}</pre>
</div>
map.addIntaleqMarker({
position: [35.91, 31.95], // [lng, lat]
color: '#0D47A1'
});</pre>
<!-- SwiftUI Example -->
<div class="space-y-4">
<h4 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="layout" class="w-5 h-5 text-blue-400"></i> ${isAr ? '3. تكامل SwiftUI' : '3. SwiftUI View Component'}
</h4>
<pre class="bg-slate-950 p-8 rounded-[2rem] border border-slate-800 text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto select-all">
<span class="text-purple-400">import</span> SwiftUI
<span class="text-purple-400">import</span> MapLibre
<span class="text-purple-400">struct</span> <span class="text-yellow-300">IntaleqMapView</span>: <span class="text-blue-300">UIViewRepresentable</span> {
<span class="text-purple-400">func</span> makeUIView(context: Context) -> <span class="text-blue-300">MLNMapView</span> {
<span class="text-purple-400">let</span> url = <span class="text-blue-300">URL</span>(string: <span class="text-emerald-300">"https://map-saas.intaleqapp.com/tactical-style.json"</span>)!
<span class="text-purple-400">let</span> map = <span class="text-blue-300">MLNMapView</span>(frame: .zero, styleURL: url)
map.setCenter(<span class="text-blue-300">CLLocationCoordinate2D</span>(latitude: <span class="text-cyan-300">31.9539</span>, longitude: <span class="text-cyan-300">35.9106</span>), zoomLevel: <span class="text-cyan-300">13</span>, animated: <span class="text-purple-400">false</span>)
<span class="text-purple-400">return</span> map
}
<span class="text-purple-400">func</span> updateUIView(_ uiView: <span class="text-blue-300">MLNMapView</span>, context: Context) {}
}</pre>
</div>
</div>
`,
'sdks-android': `
<div class="space-y-10 animate-in fade-in slide-in-from-bottom-6 duration-700">
<header class="flex items-center gap-5 p-8 rounded-[2.5rem] bg-gradient-to-r from-emerald-950/40 via-slate-900 to-transparent border border-white/10">
<div class="w-16 h-16 rounded-2xl bg-emerald-500/10 flex items-center justify-center text-emerald-400 text-3xl shadow-xl">
<i data-lucide="smartphone" class="w-9 h-9"></i>
</div>
<div>
<div class="flex items-center gap-3 mb-1">
<h3 class="text-3xl font-black text-white">Android Native SDK</h3>
<span class="px-3 py-0.5 rounded-full bg-emerald-500/20 text-emerald-400 text-xs font-bold border border-emerald-500/30">Kotlin & Jetpack Compose</span>
</div>
<p class="text-slate-400 text-base">${isAr ? 'مكتبة أندرويد لتطبيقات الكباتن والسائقين وتتبع مسارات الشحنات بكفاءة وسرعة فائقة.' : 'High-performance Android SDK for driver apps, delivery fleets, and real-time asset tracking.'}</p>
</div>
</header>
<!-- Gradle Setup -->
<div class="space-y-4">
<h4 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="download" class="w-5 h-5 text-emerald-400"></i> ${isAr ? '1. إعداد Gradle (build.gradle.kts)' : '1. Gradle Dependency'}
</h4>
<pre class="bg-slate-950 p-6 rounded-2xl border border-slate-800 text-xs font-mono text-emerald-300 select-all">
dependencies {
implementation(<span class="text-amber-300">"org.maplibre.gl:android-sdk:11.5.1"</span>)
}</pre>
</div>
<!-- Kotlin Code Example -->
<div class="space-y-4">
<div class="flex items-center justify-between">
<h4 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="code" class="w-5 h-5 text-emerald-400"></i> ${isAr ? '2. كود Kotlin لتطبيق السائق / النقل الذكي' : '2. Kotlin Implementation (Driver App)'}
</h4>
<span class="text-xs font-mono text-slate-500">DriverMapActivity.kt</span>
</div>
<pre class="bg-slate-950 p-8 rounded-[2rem] border border-slate-800 text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto select-all">
<span class="text-purple-400">package</span> com.intaleq.driver
<span class="text-purple-400">import</span> android.os.Bundle
<span class="text-purple-400">import</span> androidx.appcompat.app.AppCompatActivity
<span class="text-purple-400">import</span> org.maplibre.android.MapLibre
<span class="text-purple-400">import</span> org.maplibre.android.camera.CameraPosition
<span class="text-purple-400">import</span> org.maplibre.android.geometry.LatLng
<span class="text-purple-400">import</span> org.maplibre.android.maps.MapView
<span class="text-purple-400">class</span> <span class="text-yellow-300">DriverMapActivity</span> : <span class="text-blue-300">AppCompatActivity</span>() {
<span class="text-purple-400">private lateinit var</span> mapView: <span class="text-blue-300">MapView</span>
<span class="text-purple-400">override fun</span> <span class="text-blue-400">onCreate</span>(savedInstanceState: <span class="text-blue-300">Bundle</span>?) {
<span class="text-purple-400">super</span>.onCreate(savedInstanceState)
<span class="text-slate-500">// 1. تهيئة محرك الخريطة</span>
<span class="text-blue-300">MapLibre</span>.getInstance(<span class="text-purple-400">this</span>)
setContentView(R.layout.activity_driver_map)
mapView = findViewById(R.id.mapView)
mapView.onCreate(savedInstanceState)
<span class="text-slate-500">// 2. تحميل نمط انطلاق التجاري</span>
<span class="text-purple-400">val</span> styleUrl = <span class="text-emerald-300">"https://map-saas.intaleqapp.com/tactical-style.json"</span>
mapView.getMapAsync { map ->
map.setStyle(styleUrl) { style ->
<span class="text-slate-500">// 3. تعيين موقع السائق وزاوية الرؤية 3D</span>
map.cameraPosition = <span class="text-blue-300">CameraPosition</span>.Builder()
.target(<span class="text-blue-300">LatLng</span>(<span class="text-cyan-300">31.9539</span>, <span class="text-cyan-300">35.9106</span>))
.zoom(<span class="text-cyan-300">14.0</span>)
.tilt(<span class="text-cyan-300">45.0</span>)
.build()
}
}
}
<span class="text-purple-400">override fun</span> <span class="text-blue-400">onResume</span>() { <span class="text-purple-400">super</span>.onResume(); mapView.onResume() }
<span class="text-purple-400">override fun</span> <span class="text-blue-400">onPause</span>() { <span class="text-purple-400">super</span>.onPause(); mapView.onPause() }
<span class="text-purple-400">override fun</span> <span class="text-blue-400">onDestroy</span>() { <span class="text-purple-400">super</span>.onDestroy(); mapView.onDestroy() }
}</pre>
</div>
</div>
`,
'sdks-flutter': `
<div class="space-y-10 animate-in fade-in slide-in-from-bottom-6 duration-700">
<header class="flex items-center gap-5 p-8 rounded-[2.5rem] bg-gradient-to-r from-cyan-950/40 via-slate-900 to-transparent border border-white/10">
<div class="w-16 h-16 rounded-2xl bg-cyan-500/10 flex items-center justify-center text-cyan-400 text-3xl shadow-xl">
<i data-lucide="layers" class="w-9 h-9"></i>
</div>
<div>
<div class="flex items-center gap-3 mb-1">
<h3 class="text-3xl font-black text-white">Flutter SDK</h3>
<span class="px-3 py-0.5 rounded-full bg-cyan-500/20 text-cyan-400 text-xs font-bold border border-cyan-500/30">Dart 3.5+ / iOS & Android</span>
</div>
<p class="text-slate-400 text-base">${isAr ? 'حزمة فلاتر الرسمية الموحدة لتطوير تطبيقات النقل والتوصيل الميداني على كلا النظامين بكود واحد.' : 'Official Flutter package for cross-platform commercial dispatch and ride-hailing apps.'}</p>
</div>
</header>
<!-- Pubspec Dependency -->
<div class="space-y-4">
<h4 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="download" class="w-5 h-5 text-cyan-400"></i> ${isAr ? '1. التثبيت (pubspec.yaml)' : '1. Pubspec Installation'}
</h4>
<pre class="bg-slate-950 p-6 rounded-2xl border border-slate-800 text-xs font-mono text-cyan-300 select-all">
dependencies:
intaleq_maps: ^1.0.0</pre>
</div>
<!-- Flutter Dart Code -->
<div class="space-y-4">
<div class="flex items-center justify-between">
<h4 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="code" class="w-5 h-5 text-cyan-400"></i> ${isAr ? '2. كود Flutter (Dart) لتطبيق التوصيل' : '2. Flutter Dart Widget'}
</h4>
<span class="text-xs font-mono text-slate-500">ride_tracking_page.dart</span>
</div>
<pre class="bg-slate-950 p-8 rounded-[2rem] border border-slate-800 text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto select-all">
<span class="text-purple-400">import</span> <span class="text-emerald-300">'package:flutter/material.dart'</span>;
<span class="text-purple-400">import</span> <span class="text-emerald-300">'package:intaleq_maps/intaleq_maps.dart'</span>;
<span class="text-purple-400">class</span> <span class="text-yellow-300">RideTrackingPage</span> <span class="text-purple-400">extends</span> <span class="text-blue-300">StatelessWidget</span> {
<span class="text-purple-400">const</span> <span class="text-yellow-300">RideTrackingPage</span>({<span class="text-purple-400">super</span>.key});
<span class="text-purple-400">@override</span>
<span class="text-blue-300">Widget</span> build(<span class="text-blue-300">BuildContext</span> context) {
<span class="text-purple-400">return</span> <span class="text-blue-300">Scaffold</span>(
body: <span class="text-blue-300">IntaleqMap</span>(
apiKey: <span class="text-emerald-300">'YOUR_INTALEQ_KEY'</span>,
styleString: <span class="text-emerald-300">'https://map-saas.intaleqapp.com/tactical-style.json'</span>,
initialCameraPosition: <span class="text-purple-400">const</span> <span class="text-blue-300">CameraPosition</span>(
target: <span class="text-blue-300">LatLng</span>(<span class="text-cyan-300">31.9539</span>, <span class="text-cyan-300">35.9106</span>),
zoom: <span class="text-cyan-300">14.0</span>,
tilt: <span class="text-cyan-300">40.0</span>,
),
myLocationEnabled: <span class="text-purple-400">true</span>,
myLocationTrackingMode: <span class="text-blue-300">MyLocationTrackingMode</span>.Tracking,
onMapCreated: (controller) {
<span class="text-slate-500">// الخريطة جاهزة لعرض خط المسار وحركة السائق</span>
},
),
);
}
}</pre>
</div>
</div>
`,
'sdks-web': `
<div class="space-y-10 animate-in fade-in slide-in-from-bottom-6 duration-700">
<header class="flex items-center gap-5 p-8 rounded-[2.5rem] bg-gradient-to-r from-amber-950/40 via-slate-900 to-transparent border border-white/10">
<div class="w-16 h-16 rounded-2xl bg-amber-500/10 flex items-center justify-center text-amber-400 text-3xl shadow-xl">
<i data-lucide="globe" class="w-9 h-9"></i>
</div>
<div>
<div class="flex items-center gap-3 mb-1">
<h3 class="text-3xl font-black text-white">JavaScript / TypeScript SDK</h3>
<span class="px-3 py-0.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-bold border border-amber-500/30">Web & React / Vue / Angular</span>
</div>
<p class="text-slate-400 text-base">${isAr ? 'مكتبة الويب للوحات تحكم الإدارة (Dispatch Portals) وتتبع الأساطيل المباشر.' : 'Web mapping SDK for fleet dispatch dashboards and customer web tracking.'}</p>
</div>
</header>
<!-- NPM Install -->
<div class="space-y-4">
<h4 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="download" class="w-5 h-5 text-amber-400"></i> ${isAr ? '1. التثبيت عبر NPM' : '1. NPM Package'}
</h4>
<pre class="bg-slate-950 p-6 rounded-2xl border border-slate-800 text-xs font-mono text-amber-300 select-all">
npm install maplibre-gl @mapbox/mapbox-gl-rtl-text</pre>
</div>
<!-- Web Code Example -->
<div class="space-y-4">
<div class="flex items-center justify-between">
<h4 class="text-xl font-bold text-white flex items-center gap-2">
<i data-lucide="code" class="w-5 h-5 text-amber-400"></i> ${isAr ? '2. كود التكامل (JavaScript / TypeScript)' : '2. JavaScript / TypeScript Implementation'}
</h4>
<span class="text-xs font-mono text-slate-500">dispatch_map.ts</span>
</div>
<pre class="bg-slate-950 p-8 rounded-[2rem] border border-slate-800 text-xs font-mono text-slate-300 leading-relaxed overflow-x-auto select-all">
<span class="text-purple-400">import</span> maplibregl <span class="text-purple-400">from</span> <span class="text-emerald-300">'maplibre-gl'</span>;
<span class="text-purple-400">import</span> <span class="text-emerald-300">'maplibre-gl/dist/maplibre-gl.css'</span>;
<span class="text-slate-500">// 1. تفعيل محرك الخطوط العربية (RTL Plugin)</span>
maplibregl.setRTLTextPlugin(
<span class="text-emerald-300">'https://map-saas.intaleqapp.com/rtl-plugin.js'</span>,
<span class="text-purple-400">null</span>,
<span class="text-purple-400">true</span>
);
<span class="text-slate-500">// 2. تهيئة خريطة لوحة التحكم</span>
<span class="text-purple-400">const</span> map = <span class="text-purple-400">new</span> maplibregl.<span class="text-blue-300">Map</span>({
container: <span class="text-emerald-300">'map'</span>,
style: <span class="text-emerald-300">'https://map-saas.intaleqapp.com/tactical-style.json'</span>,
center: [<span class="text-cyan-300">35.9106</span>, <span class="text-cyan-300">31.9539</span>],
zoom: <span class="text-cyan-300">12.5</span>,
pitch: <span class="text-cyan-300">45</span>
});
<span class="text-slate-500">// 3. إضافة سائق على الخريطة</span>
<span class="text-purple-400">new</span> maplibregl.<span class="text-blue-300">Marker</span>({ color: <span class="text-emerald-300">'#0071E3'</span> })
.setLngLat([<span class="text-cyan-300">35.9106</span>, <span class="text-cyan-300">31.9539</span>])
.setPopup(<span class="text-purple-400">new</span> maplibregl.<span class="text-blue-300">Popup</span>().setHTML(<span class="text-emerald-300">'&lt;h4&gt;كابتن سيرو: أحمد (متاح للطلب)&lt;/h4&gt;'</span>))
.addTo(map);</pre>
</div>
</div>
`,
'tiles-api': `
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
<header class="flex flex-col md:flex-row md:items-end justify-between gap-6">
<div>
<h3 class="text-5xl font-black mb-4 text-gradient">${isAr ? 'خرائط الـ Vector' : 'Vector Tiles API'}</h3>
<p class="text-slate-400 text-xl max-w-xl">${isAr ? 'خرائط تفاعلية فائقة السرعة تدعم العرض ثلاثي الأبعاد والتحكم الكامل في الخصائص.' : 'High-performance interactive maps with native 3D buildings and custom GL styles.'}</p>
<h3 class="text-4xl md:text-5xl font-black mb-4 text-gradient">${isAr ? 'خدمة خرائط الـ Vector Tiles' : 'Map Vector Tiles API'}</h3>
<p class="text-slate-400 text-lg max-w-2xl">${isAr ? 'خرائط متجهة تفاعلية فائقة السرعة تدعم العرض ثلاثي الأبعاد والتحكم في طبقات الطرق والمباني وأسماء الأحياء باللغة العربية.' : 'High-performance interactive vector tiles with native 3D buildings, Arabic typography, and commercial POIs.'}</p>
</div>
</header>
<div class="endpoint-card glass rounded-[3.5rem] border-white/5 overflow-hidden shadow-2xl bg-gradient-to-b from-white/[0.03] to-transparent">
<div class="p-8 bg-white/[0.04] border-b border-white/5 flex items-center justify-between">
<div class="flex items-center gap-6">
<div class="px-4 py-2 bg-emerald-500 text-white text-sm font-black rounded-xl shadow-lg shadow-emerald-500/20 uppercase tracking-tighter">GET</div>
<code class="text-lg font-bold text-slate-100 font-mono">/v1/maps/style.json</code>
<div class="endpoint-card glass rounded-[3rem] border-white/5 overflow-hidden shadow-2xl bg-gradient-to-b from-white/[0.03] to-transparent">
<div class="p-6 bg-white/[0.04] border-b border-white/5 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="px-3.5 py-1.5 bg-emerald-500 text-white text-xs font-black rounded-xl uppercase tracking-wider">GET</div>
<code class="text-base font-bold text-slate-100 font-mono">/v1/maps/style.json</code>
</div>
</div>
<div class="p-12">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="space-y-8">
<div>
<h5 class="text-[10px] font-black uppercase tracking-[0.2em] text-blue-400 mb-6">${isAr ? 'المعاملات المدعومة' : 'Query Parameters'}</h5>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5">
<code class="text-blue-300 font-bold">theme</code>
<span class="text-[10px] font-mono text-slate-600 uppercase">Optional (obsidian | light)</span>
</div>
<div class="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5">
<code class="text-blue-300 font-bold">key</code>
<span class="text-[10px] font-mono text-rose-500 uppercase">Required</span>
</div>
<div class="p-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="space-y-6">
<h5 class="text-xs font-black uppercase tracking-wider text-blue-400">${isAr ? 'المعاملات المدعومة (Parameters)' : 'Query Parameters'}</h5>
<div class="space-y-3">
<div class="flex items-center justify-between p-3.5 bg-white/5 rounded-xl border border-white/5">
<code class="text-blue-300 font-bold">theme</code>
<span class="text-xs font-mono text-slate-400">obsidian (داكن) | light (فاتح للتوصيل)</span>
</div>
<div class="flex items-center justify-between p-3.5 bg-white/5 rounded-xl border border-white/5">
<code class="text-blue-300 font-bold">key</code>
<span class="text-xs font-mono text-rose-400 font-bold">مفتاح API الخاص بك (مطلوب)</span>
</div>
</div>
</div>
<div class="bg-slate-950 rounded-[2.5rem] p-10 border border-slate-800 shadow-inner">
<h5 class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 mb-6">${isAr ? 'رابط النمط المباشر' : 'Direct Style URL'}</h5>
<code class="text-xs text-blue-400 break-all select-all font-mono leading-relaxed">
https://map-saas.intaleq.com/api/v1/maps/style.json?theme=obsidian&key=YOUR_API_KEY
<div class="bg-slate-950 rounded-2xl p-6 border border-slate-800">
<h5 class="text-xs font-black uppercase tracking-wider text-slate-500 mb-4">${isAr ? 'رابط النمط المباشر (Direct Style URL)' : 'Direct Style URL'}</h5>
<code class="text-xs text-blue-400 break-all select-all font-mono leading-relaxed block bg-white/5 p-4 rounded-xl">
https://map-saas.intaleqapp.com/tactical-style.json?key=YOUR_API_KEY
</code>
</div>
</div>
@@ -208,56 +467,94 @@ map.addIntaleqMarker({
</div>
</div>
`,
'geocoding-api': `
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
<header>
<h3 class="text-5xl font-black mb-4 text-gradient">${isAr ? 'البحث المكاني (Geocoding)' : 'Geocoding API'}</h3>
<p class="text-slate-400 text-xl max-w-2xl">${isAr ? 'حوّل العناوين إلى إحداثيات أو العكس بدقة غير مسبوقة في الأردن وسوريا.' : 'Transform addresses into coordinates or reverse resolve locations with extreme accuracy in the Levant region.'}</p>
<h3 class="text-4xl md:text-5xl font-black mb-4 text-gradient">${isAr ? 'خدمة البحث المكاني وعناوين التوصيل (Geocoding API)' : 'Geocoding & Places API'}</h3>
<p class="text-slate-400 text-lg max-w-2xl">${isAr ? 'محرك البحث الذكي لتحديد نقاط استلام وتوصيل الطلبات، والمطاعم، والمتاجر، والأحياء بدقة فائقة في الأردن وسوريا.' : 'Intelligent location search and reverse geocoding tailored for delivery pickups and street address resolution.'}</p>
</header>
<div class="endpoint-card glass rounded-[3.5rem] border-white/5 overflow-hidden shadow-2xl">
<div class="p-8 bg-blue-500/5 border-b border-white/5 flex items-center justify-between">
<!-- Forward Search -->
<div class="endpoint-card glass rounded-[3rem] border-white/5 overflow-hidden shadow-2xl mb-8">
<div class="p-6 bg-blue-500/5 border-b border-white/5 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="px-4 py-2 bg-blue-600 text-white text-xs font-black rounded-xl shadow-lg shadow-blue-500/20 uppercase tracking-widest">SEARCH</div>
<div class="px-3.5 py-1.5 bg-blue-600 text-white text-xs font-black rounded-xl uppercase tracking-wider">GET</div>
<code class="text-base font-bold text-slate-200">/v1/geocoding/search</code>
</div>
<span class="text-xs text-slate-400 font-bold">${isAr ? 'البحث عن الأماكن والعناوين' : 'Forward Place Search'}</span>
</div>
<div class="p-12">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="space-y-8">
<table class="w-full text-sm">
<thead class="text-[10px] text-slate-500 font-black uppercase tracking-[0.2em]">
<tr class="border-b border-white/5"><th class="pb-4">Param</th><th class="pb-4 text-right">Description</th></tr>
</thead>
<tbody class="text-slate-400 divide-y divide-white/[0.02]">
<tr><td class="py-4 font-bold text-blue-300 font-mono">q</td><td class="py-4 text-right">Query (e.g. "Masjid Hashem")</td></tr>
<tr><td class="py-4 font-bold text-blue-300 font-mono">limit</td><td class="py-4 text-right">Max results (Default: 5)</td></tr>
</tbody>
</table>
<div class="p-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="space-y-4">
<h5 class="text-xs font-black uppercase tracking-wider text-blue-400">${isAr ? 'معاملات الطلب (Query Params)' : 'Request Parameters'}</h5>
<div class="space-y-2 text-xs">
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg border border-white/5"><code>q</code><span>نص البحث (مثال: "مطعم القدس شارع الجامعة")</span></div>
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg border border-white/5"><code>lat, lng</code><span>إحداثيات العميل لترتيب الأقرب أولاً</span></div>
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg border border-white/5"><code>limit</code><span>عدد النتائج المطلوبة (افتراضي: 5)</span></div>
</div>
</div>
<div class="bg-slate-950 rounded-[3rem] p-8 border border-slate-800 shadow-inner">
<div class="flex justify-between items-center mb-6">
<span class="text-[10px] font-black uppercase text-emerald-400 tracking-widest flex items-center gap-2">
<i data-lucide="layers" class="w-3 h-3"></i> Real-World Response
</span>
</div>
<pre class="text-[10px] font-mono text-emerald-300/80 leading-relaxed overflow-y-auto h-64">
<div class="bg-slate-950 rounded-2xl p-6 border border-slate-800">
<h5 class="text-xs font-black uppercase tracking-wider text-emerald-400 mb-3">${isAr ? 'مخرجات الـ JSON التجارية' : 'Commercial JSON Response'}</h5>
<pre class="text-[11px] font-mono text-emerald-300 leading-relaxed overflow-y-auto max-h-60 select-all">
{
"status": "success",
"query": "مطعم القدس شارع الجامعة",
"results": [
{
"id": 5843,
"name": "مسجد هاشم",
"name_ar": "مسجد هاشم",
"category": "building",
"governorate": "الزرقاء",
"location": { "lat": 32.10659, "lng": 36.18301 },
"full_address": "لواء قصبة الزرقاء، الزرقاء",
"distance_km": "12.68",
"source": "user_place"
"id": "poi_98231",
"name": "مطعم القدس",
"name_en": "Al Quds Restaurant",
"category": "restaurant",
"formatted_address": "شارع الجامعة الأردنية، الجبيهة، عمان",
"location": {
"lat": 32.01542,
"lng": 35.86981
},
"neighborhood": "الجبيهة",
"city": "عمان",
"confidence": 0.98
}
],
"source": "cache_hit"
]
}</pre>
</div>
</div>
</div>
</div>
<!-- Reverse Geocoding -->
<div class="endpoint-card glass rounded-[3rem] border-white/5 overflow-hidden shadow-2xl">
<div class="p-6 bg-emerald-500/5 border-b border-white/5 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="px-3.5 py-1.5 bg-emerald-600 text-white text-xs font-black rounded-xl uppercase tracking-wider">GET</div>
<code class="text-base font-bold text-slate-200">/v1/geocoding/reverse</code>
</div>
<span class="text-xs text-slate-400 font-bold">${isAr ? 'تحويل موقع السائق إلى عنوان وفاتورة' : 'Reverse Coordinate to Address'}</span>
</div>
<div class="p-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="space-y-4">
<h5 class="text-xs font-black uppercase tracking-wider text-emerald-400">${isAr ? 'معاملات الطلب' : 'Request Parameters'}</h5>
<div class="space-y-2 text-xs">
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg border border-white/5"><code>lat</code><span>خط العرض لموقع السائق/المركبة</span></div>
<div class="flex justify-between p-2.5 bg-white/5 rounded-lg border border-white/5"><code>lng</code><span>خط الطول لموقع السائق/المركبة</span></div>
</div>
</div>
<div class="bg-slate-950 rounded-2xl p-6 border border-slate-800">
<h5 class="text-xs font-black uppercase tracking-wider text-emerald-400 mb-3">${isAr ? 'مخرجات العنوان التلقائي' : 'Resolved Address Response'}</h5>
<pre class="text-[11px] font-mono text-emerald-300 leading-relaxed overflow-y-auto max-h-60 select-all">
{
"status": "success",
"formatted_address": "شارع مكة، أم أذينة، عمان",
"street": "شارع مكة",
"neighborhood": "أم أذينة",
"city": "عمان",
"location": {
"lat": 31.9821,
"lng": 35.8574
}
}</pre>
</div>
</div>
@@ -265,60 +562,68 @@ map.addIntaleqMarker({
</div>
</div>
`,
'routing-api': `
<div class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
<header class="relative p-12 overflow-hidden rounded-[3.5rem] bg-slate-900 border border-white/5 md:flex md:items-center md:justify-between shadow-2xl">
<div class="absolute -top-24 -left-24 w-64 h-64 bg-violet-600/10 blur-[100px] rounded-full"></div>
<div class="relative z-10">
<h3 class="text-5xl font-black mb-4 text-gradient">${isAr ? 'محرك التوجيه (Routing)' : 'Routing Engine'}</h3>
<p class="text-slate-400 text-xl max-w-xl">${isAr ? 'حساب أسرع المسارات مع تحليلات لحظية لحركة المرور.' : 'Fast pathfinding with traffic-aware duration metrics.'}</p>
</div>
<header>
<h3 class="text-4xl md:text-5xl font-black mb-4 text-gradient">${isAr ? 'محرك التوجيه وحساب الأجرة والملاحة (Routing API)' : 'Routing & Navigation API'}</h3>
<p class="text-slate-400 text-lg max-w-2xl">${isAr ? 'حساب أسرع المسارات، تقدير وقت الوصول الحقيقي (ETA)، حساب مسافة الرحلة بدقة لحساب الأجرة، والتوجيه خطوة بخطوة.' : 'Turn-by-turn navigation engine with traffic-aware duration, distance metrics for fare calculation, and route polylines.'}</p>
</header>
<div class="endpoint-card glass rounded-[3.5rem] border-white/5 overflow-hidden shadow-2xl">
<div class="p-8 bg-violet-500/5 border-b border-white/5 flex items-center justify-between">
<div class="endpoint-card glass rounded-[3rem] border-white/5 overflow-hidden shadow-2xl">
<div class="p-6 bg-violet-500/5 border-b border-white/5 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="px-4 py-2 bg-violet-600 text-white text-xs font-black rounded-xl shadow-lg shadow-violet-500/20 uppercase tracking-widest">ROUTE</div>
<div class="px-3.5 py-1.5 bg-violet-600 text-white text-xs font-black rounded-xl uppercase tracking-wider">GET / POST</div>
<code class="text-base font-bold text-slate-200">/v1/routing/route</code>
</div>
<span class="text-xs text-slate-400 font-bold">${isAr ? 'حساب المسار وتوجيه السائق' : 'Route Navigation'}</span>
</div>
<div class="p-12">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="space-y-8">
<div class="p-6 bg-slate-900/40 rounded-3xl border border-white/5">
<h5 class="text-[10px] font-black uppercase tracking-widest text-violet-400 mb-4">Required Parameters</h5>
<ul class="text-xs text-slate-400 space-y-4">
<li class="flex justify-between border-b border-white/5 pb-2"><span>start</span> <span class="text-violet-300 font-mono italic">"35.91,31.95"</span></li>
<li class="flex justify-between border-b border-white/5 pb-2"><span>end</span> <span class="text-violet-300 font-mono italic">"35.85,31.82"</span></li>
<li class="flex justify-between"><span>profile</span> <span class="text-slate-500">car | bike | foot</span></li>
</ul>
<div class="p-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="space-y-4">
<h5 class="text-xs font-black uppercase tracking-wider text-violet-400">${isAr ? 'معاملات طلب الرحلة (Params)' : 'Parameters'}</h5>
<div class="p-5 bg-slate-900/50 rounded-2xl border border-white/5 text-xs text-slate-300 space-y-3">
<div class="flex justify-between border-b border-white/5 pb-2"><span>start</span><code class="text-violet-300 font-mono">35.9106,31.9539</code></div>
<div class="flex justify-between border-b border-white/5 pb-2"><span>end</span><code class="text-violet-300 font-mono">36.0380,32.1351</code></div>
<div class="flex justify-between border-b border-white/5 pb-2"><span>profile</span><span class="text-slate-400">car (سيارة) | delivery (دراجة توصيل)</span></div>
<div class="flex justify-between"><span>traffic</span><span class="text-emerald-400 font-bold">true (حساب الازدحام المروري)</span></div>
</div>
</div>
<div class="bg-slate-950 rounded-[3rem] p-10 border border-slate-800 shadow-inner">
<div class="flex justify-between items-center mb-6">
<span class="text-[10px] font-black uppercase text-violet-400 tracking-widest flex items-center gap-2">
<i data-lucide="activity" class="w-3.5 h-3.5"></i> Production Response
</span>
</div>
<pre class="text-[10px] font-mono text-violet-300/80 leading-loose overflow-x-auto h-64">
<div class="bg-slate-950 rounded-2xl p-6 border border-slate-800">
<h5 class="text-xs font-black uppercase tracking-wider text-violet-400 mb-3">${isAr ? 'المخرجات التجارية لحساب الأجرة والمسار' : 'Commercial Response (Fare & ETA)'}</h5>
<pre class="text-[11px] font-mono text-violet-300 leading-relaxed overflow-y-auto max-h-72 select-all">
{
"distance": 30313.8,
"duration": 1975,
"trafficAwareDuration": 1975,
"points": "_cvbE_th{Ev@iJpHtDLEJKz@^XJn@...",
"instructions": [
{
"text": "Continue onto شارع الأمير الحسن",
"distance": 172.8,
"street_name": "شارع الأمير الحسن"
},
{
"text": "اتجه قليلاً لليمين خلال شارع الجيش",
"distance": 190.1,
"street_name": "شارع الجيش"
}
]
"status": "success",
"route": {
"distance_meters": 8450,
"distance_km": 8.45,
"duration_seconds": 780,
"duration_minutes": 13.0,
"traffic_delay_seconds": 120,
"estimated_fare_jod": 2.53,
"geometry": "_cvbE_th{Ev@iJpHtDLEJKz@^XJn@...",
"steps": [
{
"instruction": "انطلق باتجاه الشمال على شارع وصفي التل",
"instruction_en": "Head north on Wasfi Al-Tal St",
"distance_meters": 1200,
"duration_seconds": 110
},
{
"instruction": "اتجه يميناً عند دوار الواحة نحو شارع المدينة المنورة",
"instruction_en": "Turn right at Al-Waha Circle onto Al-Madina St",
"distance_meters": 3400,
"duration_seconds": 310
},
{
"instruction": "لقد وصلت إلى وجهتك على اليمين",
"instruction_en": "You have arrived at your destination on the right",
"distance_meters": 0,
"duration_seconds": 0
}
]
}
}</pre>
</div>
</div>
@@ -328,9 +633,12 @@ map.addIntaleqMarker({
`
};
container.innerHTML = content[id] || '<div class="h-64 flex items-center justify-center italic text-slate-600">Documentation section coming soon...</div>';
// Fallback for generic 'sdks'
content['sdks'] = content['sdks-flutter'];
container.innerHTML = content[id] || '<div class="h-64 flex items-center justify-center italic text-slate-500">Documentation section coming soon...</div>';
// Re-initialize icons
// Re-initialize lucide icons
if (window.lucide) lucide.createIcons();
}
};