|
|
|
@@ -1,7 +1,7 @@
|
|
|
|
|
/**
|
|
|
|
|
* Documentation Engine for Intaleq Dashboard
|
|
|
|
|
* Comprehensive API Reference (EN/AR)
|
|
|
|
|
* Updated with Premium Visuals & High-Performance Examples
|
|
|
|
|
* Updated with Premium Visuals, High-Performance Examples, and Official SDKs
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
const docs = {
|
|
|
|
@@ -46,6 +46,14 @@ const docs = {
|
|
|
|
|
<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.'}
|
|
|
|
|
</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
|
|
|
|
|
</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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -91,32 +99,69 @@ const docs = {
|
|
|
|
|
</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>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="space-y-8 pt-6">
|
|
|
|
|
<div class="flex items-center gap-4">
|
|
|
|
|
<div class="h-8 w-1.5 bg-emerald-500 rounded-full"></div>
|
|
|
|
|
<h4 class="text-3xl font-black">${isAr ? 'حدود الاستخدام (RPM)' : 'Rate Limiting (RPM)'}</h4>
|
|
|
|
|
<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>
|
|
|
|
|
</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>
|
|
|
|
|
<a href="https://pub.dev/packages/intaleq_maps" target="_blank" class="btn btn-primary w-full justify-center">View on pub.dev</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
|
|
|
<div class="glass p-6 rounded-3xl border-white/5 text-center">
|
|
|
|
|
<p class="text-[10px] font-black uppercase text-slate-500 mb-1">Free</p>
|
|
|
|
|
<p class="text-2xl font-black text-white">5 <span class="text-[10px] text-slate-500">RPM</span></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-6 rounded-3xl border-emerald-500/20 text-center bg-emerald-500/5">
|
|
|
|
|
<p class="text-[10px] font-black uppercase text-emerald-500 mb-1">Starter</p>
|
|
|
|
|
<p class="text-2xl font-black text-white">100 <span class="text-[10px] text-slate-500">RPM</span></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-6 rounded-3xl border-blue-500/20 text-center bg-blue-500/5">
|
|
|
|
|
<p class="text-[10px] font-black uppercase text-blue-500 mb-1">Pro</p>
|
|
|
|
|
<p class="text-2xl font-black text-white">500 <span class="text-[10px] text-slate-500">RPM</span></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="glass p-6 rounded-3xl border-violet-500/20 text-center bg-violet-500/5">
|
|
|
|
|
<p class="text-[10px] font-black uppercase text-violet-500 mb-1">Enterprise</p>
|
|
|
|
|
<p class="text-2xl font-black text-white">5000 <span class="text-[10px] text-slate-500">RPM</span></p>
|
|
|
|
|
</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';
|
|
|
|
|
|
|
|
|
|
const map = new IntaleqMap({
|
|
|
|
|
container: 'map',
|
|
|
|
|
apiKey: 'YOUR_KEY',
|
|
|
|
|
styleType: 'obsidian'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
map.addIntaleqMarker({
|
|
|
|
|
position: [35.91, 31.95], // [lng, lat]
|
|
|
|
|
color: '#0D47A1'
|
|
|
|
|
});</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`,
|
|
|
|
|
'tiles-api': `
|
|
|
|
@@ -126,10 +171,6 @@ const docs = {
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex gap-2">
|
|
|
|
|
<span class="px-4 py-2 bg-emerald-500/10 text-emerald-400 rounded-2xl text-xs font-black uppercase tracking-widest border border-emerald-500/20">Active</span>
|
|
|
|
|
<span class="px-4 py-2 bg-blue-500/10 text-blue-400 rounded-2xl text-xs font-black uppercase tracking-widest border border-blue-500/20">V1.2</span>
|
|
|
|
|
</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">
|
|
|
|
@@ -138,9 +179,6 @@ const docs = {
|
|
|
|
|
<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>
|
|
|
|
|
<div class="hidden md:flex items-center gap-2 text-slate-500 text-xs font-bold italic">
|
|
|
|
|
<i data-lucide="clock" class="w-3.5 h-3.5"></i> 20-40ms response
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-12">
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
|
|
@@ -148,48 +186,22 @@ const docs = {
|
|
|
|
|
<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 group hover:border-blue-500/20 transition-all">
|
|
|
|
|
<div>
|
|
|
|
|
<code class="text-blue-300 font-bold">theme</code>
|
|
|
|
|
<p class="text-[10px] text-slate-500 italic mt-1">${isAr ? 'نمط الخريطة (light أو obsidian)' : 'Map visual theme (light | obsidian)'}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-[10px] font-mono text-slate-600 uppercase">Optional</span>
|
|
|
|
|
<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 group hover:border-blue-500/20 transition-all">
|
|
|
|
|
<div>
|
|
|
|
|
<code class="text-blue-300 font-bold">3d</code>
|
|
|
|
|
<p class="text-[10px] text-slate-500 italic mt-1">${isAr ? 'تفعيل/إلغاء المباني ثلاثية الأبعاد' : 'Enable/Disable 3D buildings'}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-[10px] font-mono text-slate-600 uppercase">Boolean</span>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-6 bg-slate-900/40 rounded-3xl border border-white/5 italic text-slate-500 text-sm leading-relaxed relative">
|
|
|
|
|
<i data-lucide="info" class="absolute -top-3 -right-3 w-8 h-8 text-blue-500/20"></i>
|
|
|
|
|
${isAr ? 'ملاحظة: يتم استهلاك رصيد الخرائط بناءً على عدد الـ (Tile Requests) التي يتم طلبها أثناء التنقل في الخريطة.' : 'Note: Quota is consumed per tile request. High-density 3D areas may consume more resources.'}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="space-y-6">
|
|
|
|
|
<div class="bg-slate-950 rounded-[2.5rem] p-8 border border-slate-800 shadow-inner group">
|
|
|
|
|
<div class="flex justify-between items-center mb-6">
|
|
|
|
|
<span class="text-[10px] font-black uppercase text-blue-400 tracking-widest flex items-center gap-2">
|
|
|
|
|
<i data-lucide="code-2" class="w-3 h-3"></i> JavaScript (MapLibre)
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<pre class="text-[11px] font-mono text-slate-300 leading-relaxed overflow-x-auto whitespace-pre">
|
|
|
|
|
const map = new maplibregl.Map({
|
|
|
|
|
container: 'map-id',
|
|
|
|
|
style: 'https://map-saas.intaleq.com/api/v1/maps/style.json?theme=obsidian',
|
|
|
|
|
transformRequest: (url) => {
|
|
|
|
|
return {
|
|
|
|
|
url: url,
|
|
|
|
|
headers: { 'x-api-key': 'YOUR_KEY_HERE' }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});</pre>
|
|
|
|
|
</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
|
|
|
|
|
</code>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@@ -203,70 +215,50 @@ const map = new maplibregl.Map({
|
|
|
|
|
<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>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 gap-10">
|
|
|
|
|
<!-- Forward Search -->
|
|
|
|
|
<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">
|
|
|
|
|
<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>
|
|
|
|
|
<code class="text-base font-bold text-slate-200">/v1/geocoding/search</code>
|
|
|
|
|
</div>
|
|
|
|
|
<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">
|
|
|
|
|
<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>
|
|
|
|
|
<code class="text-base font-bold text-slate-200">/v1/geocoding/search</code>
|
|
|
|
|
</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-left">
|
|
|
|
|
<thead class="text-[10px] items-center text-slate-500 font-black uppercase tracking-[0.2em]">
|
|
|
|
|
<tr class="border-b border-white/5">
|
|
|
|
|
<th class="pb-4">${isAr ? 'البارامتر' : 'Key'}</th>
|
|
|
|
|
<th class="pb-4 text-right">${isAr ? 'الوصف' : 'Description'}</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody class="text-sm">
|
|
|
|
|
<tr class="border-b border-white/[0.02]">
|
|
|
|
|
<td class="py-5 font-bold text-blue-400 font-mono text-base">q</td>
|
|
|
|
|
<td class="py-5 text-right text-slate-400 italic">${isAr ? 'نص البحث (مثلاً: "عمان، الجبيهة")' : 'Query string (e.g., "Amman, Jordan")'}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="border-b border-white/[0.02]">
|
|
|
|
|
<td class="py-5 font-bold text-blue-400 font-mono text-base">limit</td>
|
|
|
|
|
<td class="py-5 text-right text-slate-400 italic">${isAr ? 'عدد النتائج (الافتراضي: 5)' : 'Max results limit'}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
<div class="bg-blue-500/5 rounded-[2rem] p-8 border border-blue-500/10">
|
|
|
|
|
<div class="flex items-center gap-4 mb-4">
|
|
|
|
|
<i data-lucide="terminal" class="w-5 h-5 text-blue-400"></i>
|
|
|
|
|
<span class="text-xs font-black uppercase text-blue-400 tracking-widest">cURL Fast Access</span>
|
|
|
|
|
</div>
|
|
|
|
|
<code class="text-xs font-mono text-slate-300 block select-all leading-loose">
|
|
|
|
|
curl "https://map-saas.intaleq.com/api/v1/geocoding/search?q=Amman" \\<br>
|
|
|
|
|
-H "x-api-key: YOUR_SECURE_KEY"
|
|
|
|
|
</code>
|
|
|
|
|
</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> Response Structure
|
|
|
|
|
</span>
|
|
|
|
|
<span class="text-[10px] font-mono text-slate-600">application/json</span>
|
|
|
|
|
</div>
|
|
|
|
|
<pre class="text-[11px] font-mono text-emerald-300/80 leading-relaxed overflow-y-auto h-64 scrollbar-hide">
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
"name": "Amman",
|
|
|
|
|
"name_ar": "عمان",
|
|
|
|
|
"lat": 31.9539,
|
|
|
|
|
"lng": 35.9106,
|
|
|
|
|
"district": "Capital",
|
|
|
|
|
"country": "Jordan",
|
|
|
|
|
"type": "city",
|
|
|
|
|
"boundingbox": [31.81, 32.07, 35.72, 36.14]
|
|
|
|
|
}
|
|
|
|
|
]</pre>
|
|
|
|
|
<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">
|
|
|
|
|
{
|
|
|
|
|
"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"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
"source": "cache_hit"
|
|
|
|
|
}</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@@ -279,12 +271,7 @@ curl "https://map-saas.intaleq.com/api/v1/geocoding/search?q=Amman" \\<br>
|
|
|
|
|
<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 for urban environments.'}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="relative z-10 mt-6 md:mt-0">
|
|
|
|
|
<div class="w-32 h-32 rounded-full border-4 border-violet-500/20 flex items-center justify-center animate-pulse">
|
|
|
|
|
<i data-lucide="navigation" class="w-12 h-12 text-violet-400"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-slate-400 text-xl max-w-xl">${isAr ? 'حساب أسرع المسارات مع تحليلات لحظية لحركة المرور.' : 'Fast pathfinding with traffic-aware duration metrics.'}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
@@ -297,47 +284,40 @@ curl "https://map-saas.intaleq.com/api/v1/geocoding/search?q=Amman" \\<br>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-12">
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
|
|
|
<div class="space-y-10">
|
|
|
|
|
<div>
|
|
|
|
|
<h5 class="text-[10px] font-black uppercase tracking-[0.2em] text-violet-400 mb-8">${isAr ? 'إحداثيات المسار' : 'Waypoints & Logic'}</h5>
|
|
|
|
|
<div class="grid grid-cols-2 gap-6">
|
|
|
|
|
<div class="bg-indigo-950/20 p-6 rounded-[2rem] border border-white/5">
|
|
|
|
|
<code class="text-violet-300 font-bold block mb-1">start</code>
|
|
|
|
|
<p class="text-[10px] text-slate-500 italic">"35.91,31.95" (lng,lat)</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg-indigo-950/20 p-6 rounded-[2rem] border border-white/5">
|
|
|
|
|
<code class="text-violet-300 font-bold block mb-1">end</code>
|
|
|
|
|
<p class="text-[10px] text-slate-500 italic">"35.85,31.82" (lng,lat)</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="space-y-4">
|
|
|
|
|
<div class="flex items-center justify-between p-5 bg-white/5 rounded-2xl border border-white/5">
|
|
|
|
|
<code class="text-blue-300 font-bold">profile</code>
|
|
|
|
|
<span class="text-xs text-slate-400 font-bold italic">car | bike | foot</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center justify-between p-5 bg-white/5 rounded-2xl border border-white/5">
|
|
|
|
|
<code class="text-blue-300 font-bold">alternatives</code>
|
|
|
|
|
<span class="text-xs text-slate-600 font-black uppercase">Boolean</span>
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bg-slate-950 rounded-[3rem] p-10 border border-slate-800 shadow-inner group">
|
|
|
|
|
<div class="flex justify-between items-center mb-8">
|
|
|
|
|
<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> Traffic Analytics JSON
|
|
|
|
|
<i data-lucide="activity" class="w-3.5 h-3.5"></i> Production Response
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<pre class="text-[11px] font-mono text-violet-300/80 leading-loose overflow-x-auto h-56">
|
|
|
|
|
<pre class="text-[10px] font-mono text-violet-300/80 leading-loose overflow-x-auto h-64">
|
|
|
|
|
{
|
|
|
|
|
"distance": 8420.5,
|
|
|
|
|
"duration": 940,
|
|
|
|
|
"traffic_duration": 1120,
|
|
|
|
|
"geometry": "encoded_polyline_here",
|
|
|
|
|
"steps": [
|
|
|
|
|
{ "instruction": "Turn right...", "distance": 200 }
|
|
|
|
|
"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": "شارع الجيش"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}</pre>
|
|
|
|
|
</div>
|
|
|
|
|