/** * Documentation Engine for Intaleq Dashboard * Commercial Enterprise Mapping Platform & Native SDKs (iOS Swift, Android Kotlin, Flutter Dart, Web JS/TS) * Supports English & Arabic Localization */ const docs = { init: () => { console.log('📚 Intaleq Documentation Module Init'); docs.bindEvents(); // Initial render based on existing active links or default const activeLink = document.querySelector('.docs-nav-link.active'); const section = activeLink ? activeLink.getAttribute('data-section') : 'getting-started'; docs.renderSection(section); }, bindEvents: () => { document.querySelectorAll('.docs-nav-link').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const section = e.currentTarget.getAttribute('data-section'); docs.renderSection(section); }); }); }, renderSection: (id) => { const container = document.getElementById('docs-content'); if (!container) return; // 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 = { 'getting-started': `
${isAr ? 'منصة الخرائط والذكاء المكاني للأعمال' : 'Enterprise Commercial Mapping Platform'}

${isAr ? 'ابدأ التكامل مع منصة انطلاق' : 'Launch in Minutes'}

${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.'}

01

${isAr ? 'مفتاح الـ API الآمن' : 'API Key Setup'}

${isAr ? 'أنشئ مفتاح وصول محمي بضوابط النطاق (Domain Whitelist) لتطبيقاتك التجارية.' : 'Generate production API keys with IP/Domain restrictions to protect your usage.'}

02

${isAr ? 'خرائط مخصصة بهويتك' : 'Custom Map Styling'}

${isAr ? 'اختر النمط الفاتح النظيف للتوصيل، أو النمط الداكن الفخم لتطبيقات النقل، مع مباني 3D.' : 'Choose between Light Delivery or Obsidian Dark ride-hailing styles with 3D buildings.'}

03

${isAr ? 'توجيه وبحث فائق الدقة' : 'Smart Routing & Search'}

${isAr ? 'احسب مسار وتكلفة الرحلة لحظياً مع مصفوفة مطابقة السائقين بأقرب الطلبات.' : 'Calculate route fares, accurate ETAs, and multi-driver dispatch matrices in milliseconds.'}

${isAr ? 'بيانات الوصول والمصادقة المباشرة' : 'Production Endpoints & Authentication'}

Production Endpoint
https://map-saas.intaleqapp.com/api

${isAr ? 'المصادقة عبر الـ Header (موصى به في Backend/Apps)' : 'Header Auth (Recommended)'}

x-api-key: in_9478b32836d19cff73db3063

${isAr ? 'المصادقة عبر الـ Query (للخرائط المباشرة)' : 'Query Parameter Auth'}

?key=in_9478b32836d19cff73db3063
`, 'sdks-ios': `

iOS Native SDK

Swift 5.9+ / UIKit & SwiftUI

${isAr ? 'مكتبة آبل الأصلية لتطبيقات النقل والتوصيل (Ride-Hailing & Delivery Apps) بسرعة 60 إطاراً في الثانية.' : 'Native iOS SDK for ride-hailing, driver tracking, and delivery logistics apps on iPhone & iPad.'}

${isAr ? '1. التثبيت (Installation)' : '1. Installation'}

Swift Package Manager (SPM)

https://github.com/maplibre/maplibre-native-spm

CocoaPods (Podfile)

pod 'MapLibre', '~> 5.13.0'

${isAr ? '2. مثال كود Swift كامل لتطبيق توصيل/نقل' : '2. Swift Implementation (Delivery / Ride-Hailing)'}

DeliveryMapViewController.swift
import UIKit
import MapLibre

class DeliveryMapViewController: UIViewController, MLNMapViewDelegate {
    
    var mapView: MLNMapView!
    let apiKey = "YOUR_INTALEQ_API_KEY"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 1. رابط نمط الخريطة التجاري من انطلاق
        let styleURL = URL(string: "https://map-saas.intaleqapp.com/tactical-style.json?key=\(apiKey)")!
        
        // 2. تهيئة الخريطة وتثبيت موقع البداية على عمان
        mapView = MLNMapView(frame: view.bounds, styleURL: styleURL)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.setCenter(CLLocationCoordinate2D(latitude: 31.9539, longitude: 35.9106), zoomLevel: 14, animated: false)
        mapView.delegate = self
        
        view.addSubview(mapView)
        
        // 3. إضافة علامة موقع السائق / العميل
        let pickupPoint = MLNPointAnnotation()
        pickupPoint.coordinate = CLLocationCoordinate2D(latitude: 31.9539, longitude: 35.9106)
        pickupPoint.title = "نقطة استلام الطلب"
        pickupPoint.subtitle = "شارع مكة، عمان"
        mapView.addAnnotation(pickupPoint)
    }
}

${isAr ? '3. تكامل SwiftUI' : '3. SwiftUI View Component'}

import SwiftUI
import MapLibre

struct IntaleqMapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MLNMapView {
        let url = URL(string: "https://map-saas.intaleqapp.com/tactical-style.json")!
        let map = MLNMapView(frame: .zero, styleURL: url)
        map.setCenter(CLLocationCoordinate2D(latitude: 31.9539, longitude: 35.9106), zoomLevel: 13, animated: false)
        return map
    }
    
    func updateUIView(_ uiView: MLNMapView, context: Context) {}
}
`, 'sdks-android': `

Android Native SDK

Kotlin & Jetpack Compose

${isAr ? 'مكتبة أندرويد لتطبيقات الكباتن والسائقين وتتبع مسارات الشحنات بكفاءة وسرعة فائقة.' : 'High-performance Android SDK for driver apps, delivery fleets, and real-time asset tracking.'}

${isAr ? '1. إعداد Gradle (build.gradle.kts)' : '1. Gradle Dependency'}

dependencies {
    implementation("org.maplibre.gl:android-sdk:11.5.1")
}

${isAr ? '2. كود Kotlin لتطبيق السائق / النقل الذكي' : '2. Kotlin Implementation (Driver App)'}

DriverMapActivity.kt
package com.intaleq.driver

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import org.maplibre.android.MapLibre
import org.maplibre.android.camera.CameraPosition
import org.maplibre.android.geometry.LatLng
import org.maplibre.android.maps.MapView

class DriverMapActivity : AppCompatActivity() {

    private lateinit var mapView: MapView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // 1. تهيئة محرك الخريطة
        MapLibre.getInstance(this)
        
        setContentView(R.layout.activity_driver_map)
        mapView = findViewById(R.id.mapView)
        mapView.onCreate(savedInstanceState)
        
        // 2. تحميل نمط انطلاق التجاري
        val styleUrl = "https://map-saas.intaleqapp.com/tactical-style.json"
        
        mapView.getMapAsync { map ->
            map.setStyle(styleUrl) { style ->
                // 3. تعيين موقع السائق وزاوية الرؤية 3D
                map.cameraPosition = CameraPosition.Builder()
                    .target(LatLng(31.9539, 35.9106))
                    .zoom(14.0)
                    .tilt(45.0)
                    .build()
            }
        }
    }

    override fun onResume() { super.onResume(); mapView.onResume() }
    override fun onPause() { super.onPause(); mapView.onPause() }
    override fun onDestroy() { super.onDestroy(); mapView.onDestroy() }
}
`, 'sdks-flutter': `

Flutter SDK

Dart 3.5+ / iOS & Android

${isAr ? 'حزمة فلاتر الرسمية الموحدة لتطوير تطبيقات النقل والتوصيل الميداني على كلا النظامين بكود واحد.' : 'Official Flutter package for cross-platform commercial dispatch and ride-hailing apps.'}

${isAr ? '1. التثبيت (pubspec.yaml)' : '1. Pubspec Installation'}

dependencies:
  intaleq_maps: ^1.0.0

${isAr ? '2. كود Flutter (Dart) لتطبيق التوصيل' : '2. Flutter Dart Widget'}

ride_tracking_page.dart
import 'package:flutter/material.dart';
import 'package:intaleq_maps/intaleq_maps.dart';

class RideTrackingPage extends StatelessWidget {
  const RideTrackingPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IntaleqMap(
        apiKey: 'YOUR_INTALEQ_KEY',
        styleString: 'https://map-saas.intaleqapp.com/tactical-style.json',
        initialCameraPosition: const CameraPosition(
          target: LatLng(31.9539, 35.9106),
          zoom: 14.0,
          tilt: 40.0,
        ),
        myLocationEnabled: true,
        myLocationTrackingMode: MyLocationTrackingMode.Tracking,
        onMapCreated: (controller) {
          // الخريطة جاهزة لعرض خط المسار وحركة السائق
        },
      ),
    );
  }
}
`, 'sdks-web': `

JavaScript / TypeScript SDK

Web & React / Vue / Angular

${isAr ? 'مكتبة الويب للوحات تحكم الإدارة (Dispatch Portals) وتتبع الأساطيل المباشر.' : 'Web mapping SDK for fleet dispatch dashboards and customer web tracking.'}

${isAr ? '1. التثبيت عبر NPM' : '1. NPM Package'}

npm install maplibre-gl @mapbox/mapbox-gl-rtl-text

${isAr ? '2. كود التكامل (JavaScript / TypeScript)' : '2. JavaScript / TypeScript Implementation'}

dispatch_map.ts
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

// 1. تفعيل محرك الخطوط العربية (RTL Plugin)
maplibregl.setRTLTextPlugin(
    'https://map-saas.intaleqapp.com/rtl-plugin.js',
    null,
    true
);

// 2. تهيئة خريطة لوحة التحكم
const map = new maplibregl.Map({
    container: 'map',
    style: 'https://map-saas.intaleqapp.com/tactical-style.json',
    center: [35.9106, 31.9539],
    zoom: 12.5,
    pitch: 45
});

// 3. إضافة سائق على الخريطة
new maplibregl.Marker({ color: '#0071E3' })
    .setLngLat([35.9106, 31.9539])
    .setPopup(new maplibregl.Popup().setHTML('<h4>كابتن سيرو: أحمد (متاح للطلب)</h4>'))
    .addTo(map);
`, 'tiles-api': `

${isAr ? 'خدمة خرائط الـ Vector Tiles' : 'Map Vector Tiles API'}

${isAr ? 'خرائط متجهة تفاعلية فائقة السرعة تدعم العرض ثلاثي الأبعاد والتحكم في طبقات الطرق والمباني وأسماء الأحياء باللغة العربية.' : 'High-performance interactive vector tiles with native 3D buildings, Arabic typography, and commercial POIs.'}

GET
/v1/maps/style.json
${isAr ? 'المعاملات المدعومة (Parameters)' : 'Query Parameters'}
theme obsidian (داكن) | light (فاتح للتوصيل)
key مفتاح API الخاص بك (مطلوب)
${isAr ? 'رابط النمط المباشر (Direct Style URL)' : 'Direct Style URL'}
https://map-saas.intaleqapp.com/tactical-style.json?key=YOUR_API_KEY
`, 'geocoding-api': `

${isAr ? 'خدمة البحث المكاني وعناوين التوصيل (Geocoding API)' : 'Geocoding & Places API'}

${isAr ? 'محرك البحث الذكي لتحديد نقاط استلام وتوصيل الطلبات، والمطاعم، والمتاجر، والأحياء بدقة فائقة في الأردن وسوريا.' : 'Intelligent location search and reverse geocoding tailored for delivery pickups and street address resolution.'}

GET
/v1/geocoding/search
${isAr ? 'البحث عن الأماكن والعناوين' : 'Forward Place Search'}
${isAr ? 'معاملات الطلب (Query Params)' : 'Request Parameters'}
qنص البحث (مثال: "مطعم القدس شارع الجامعة")
lat, lngإحداثيات العميل لترتيب الأقرب أولاً
limitعدد النتائج المطلوبة (افتراضي: 5)
${isAr ? 'مخرجات الـ JSON التجارية' : 'Commercial JSON Response'}
{
  "status": "success",
  "query": "مطعم القدس شارع الجامعة",
  "results": [
    {
      "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
    }
  ]
}
GET
/v1/geocoding/reverse
${isAr ? 'تحويل موقع السائق إلى عنوان وفاتورة' : 'Reverse Coordinate to Address'}
${isAr ? 'معاملات الطلب' : 'Request Parameters'}
latخط العرض لموقع السائق/المركبة
lngخط الطول لموقع السائق/المركبة
${isAr ? 'مخرجات العنوان التلقائي' : 'Resolved Address Response'}
{
  "status": "success",
  "formatted_address": "شارع مكة، أم أذينة، عمان",
  "street": "شارع مكة",
  "neighborhood": "أم أذينة",
  "city": "عمان",
  "location": {
    "lat": 31.9821,
    "lng": 35.8574
  }
}
`, 'routing-api': `

${isAr ? 'محرك التوجيه وحساب الأجرة والملاحة (Routing API)' : 'Routing & Navigation API'}

${isAr ? 'حساب أسرع المسارات، تقدير وقت الوصول الحقيقي (ETA)، حساب مسافة الرحلة بدقة لحساب الأجرة، والتوجيه خطوة بخطوة.' : 'Turn-by-turn navigation engine with traffic-aware duration, distance metrics for fare calculation, and route polylines.'}

GET / POST
/v1/routing/route
${isAr ? 'حساب المسار وتوجيه السائق' : 'Route Navigation'}
${isAr ? 'معاملات طلب الرحلة (Params)' : 'Parameters'}
start35.9106,31.9539
end36.0380,32.1351
profilecar (سيارة) | delivery (دراجة توصيل)
traffictrue (حساب الازدحام المروري)
${isAr ? 'المخرجات التجارية لحساب الأجرة والمسار' : 'Commercial Response (Fare & ETA)'}
{
  "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
      }
    ]
  }
}
` }; // Fallback for generic 'sdks' content['sdks'] = content['sdks-flutter']; container.innerHTML = content[id] || '
Documentation section coming soon...
'; // Re-initialize lucide icons if (window.lucide) lucide.createIcons(); } }; // Global initializer window.docs = docs;