api/templates/main/google-earth-api-guide.html.twig

{% extends 'base.html.twig' %}

{% block title %}راهنمای API تایل‌های Google Earth | می‌مپس{% endblock %}

{% block description %}راهنمای کامل استفاده از API تایل‌های Google Earth می‌مپس - نحوه استفاده با Leaflet، OpenLayers و مثال‌های عملی با سیستم کش خودکار{% endblock %}

{% block keywords %}API Google Earth, تایل Google Earth, نقشه ماهواره‌ای, Leaflet Google Earth, OpenLayers Google Earth, کش تایل, API نقشه ماهواره‌ای{% endblock %}

{% block og_title %}راهنمای API تایل‌های Google Earth می‌مپس{% endblock %}

{% block og_description %}راهنمای کامل استفاده از API تایل‌های Google Earth می‌مپس با سیستم کش خودکار{% endblock %}

{% block body %}
    <!-- Hero Section -->
    <section class="hero-section text-white">
        <div class="container">
            <div class="text-center">
                <h1 class="display-4 fw-bold mb-4">
                    راهنمای API تایل‌های Google Earth
                    <span class="d-block">سرویس می‌مپس</span>
                </h1>
                <p class="lead opacity-90">
                    راه‌حل مشکلات توسعه‌دهندگان ایرانی: دسترسی سریع و پایدار به تایل‌های Google Earth با اینترنت داخلی
                </p>
            </div>
        </div>
    </section>

    <!-- Table of Contents -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h2 class="h3 fw-bold mb-4">فهرست مطالب</h2>
                    <div class="row g-3">
                        <div class="col-lg-4 col-md-6">
                            <a href="#introduction" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">1</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">معرفی API</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#features" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">2</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">ویژگی‌ها</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#endpoint" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">3</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">نقطه پایانی</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#layers" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">4</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">انواع لایه‌ها</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#examples" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-secondary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">5</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">مثال‌های عملی</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#cache" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-dark text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">6</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">سیستم کش</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section id="introduction" class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="text-center mb-5">
                        <h2 class="display-5 fw-bold text-gradient mb-3">راه‌حل مشکلات توسعه‌دهندگان ایرانی</h2>
                        <p class="lead text-muted">
                            با توجه به شرایط خاص ایران و محدودیت‌های اینترنتی، سرویس می‌مپس راه‌حلی برای دسترسی سریع و پایدار به تایل‌های Google Earth ارائه می‌دهد
                        </p>
                    </div>
                    
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-4">
                            <div class="alert alert-warning mb-4">
                                <h5 class="alert-heading"><i class="fas fa-exclamation-triangle"></i> مشکلات موجود</h5>
                                <p class="mb-0">
                                    توسعه‌دهندگان ایرانی با چالش‌های متعددی در استفاده از سرویس‌های Google Earth مواجه هستند:
                                </p>
                                <ul class="mb-0 mt-2">
                                    <li>🚫 <strong>تحریم‌های گوگل:</strong> دسترسی مستقیم به سرویس‌های Google Earth با محدودیت مواجه است</li>
                                    <li>🐌 <strong>سرعت پایین اینترنت:</strong> اتصال به سرورهای خارجی با سرعت پایین و تاخیر بالا</li>
                                    <li>❌ <strong>قطع‌ی‌های مکرر:</strong> ناپایداری در اتصال به سرورهای خارجی</li>
                                    <li>💰 <strong>مصرف بالای پهنای باند:</strong> هر بار دانلود تایل‌ها از سرورهای خارجی</li>
                                </ul>
                            </div>
                            
                            <div class="alert alert-success">
                                <h5 class="alert-heading"><i class="fas fa-check-circle"></i> راه‌حل می‌مپس</h5>
                                <p class="mb-0">
                                    سرویس می‌مپس با هدف رفع این مشکلات طراحی شده است:
                                </p>
                                <ul class="mb-0 mt-2">
                                    <li>✅ <strong>سرور داخل کشور:</strong> استفاده از اینترنت داخلی برای سرعت بالاتر</li>
                                    <li>📦 <strong>آرشیو کامل:</strong> جمع‌آوری تدریجی تایل‌ها و ایجاد آرشیو کامل</li>
                                    <li>⚡ <strong>سرعت بالا:</strong> دسترسی سریع به تایل‌های کش شده</li>
                                    <li>🔄 <strong>سیستم کش هوشمند:</strong> کاهش مصرف پهنای باند با استفاده از کش</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h3 class="h4 fw-bold mb-4">اهداف و مزایای این سرویس</h3>
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-tachometer-alt"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">سرعت بالا با اینترنت داخلی</h5>
                                            <p class="text-muted mb-0">تایل‌ها از سرور داخل کشور سرو می‌شوند و سرعت بارگذاری به مراتب بالاتر است</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-archive"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">آرشیو کامل به مرور زمان</h5>
                                            <p class="text-muted mb-0">با هر درخواست، تایل‌ها در آرشیو ذخیره می‌شوند و به مرور زمان آرشیو کامل‌تر می‌شود</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-users"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">رفع مشکلات توسعه‌دهندگان</h5>
                                            <p class="text-muted mb-0">توسعه‌دهندگان می‌توانند بدون نگرانی از محدودیت‌ها از این سرویس استفاده کنند</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-shield-alt"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">پایداری و اطمینان</h5>
                                            <p class="text-muted mb-0">حتی در صورت مشکل در دسترسی به Google Earth، تایل‌های کش شده در دسترس هستند</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">ویژگی‌های کلیدی سرویس</h2>
                <p class="lead text-muted">
                    راه‌حل‌های ارائه شده برای رفع مشکلات توسعه‌دهندگان ایرانی
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">⚡ سرعت بالا با اینترنت داخلی</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                تمام تایل‌ها از سرور داخل کشور سرو می‌شوند که مزایای زیر را دارد:
                            </p>
                            <ul>
                                <li>سرعت بارگذاری چندین برابر سریع‌تر</li>
                                <li>کاهش تاخیر (Latency) به حداقل</li>
                                <li>پایداری بیشتر در اتصال</li>
                                <li>عدم وابستگی به سرورهای خارجی</li>
                            </ul>
                            <div class="alert alert-success mt-3 mb-0">
                                <strong>نتیجه:</strong> تجربه کاربری به مراتب بهتر برای کاربران ایرانی
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">📦 آرشیو کامل به مرور زمان</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                سیستم کش هوشمند به این صورت کار می‌کند:
                            </p>
                            <ol>
                                <li>بررسی وجود تایل در آرشیو سرور</li>
                                <li>اگر موجود بود، از آرشیو داخلی سرو می‌شود (خیلی سریع)</li>
                                <li>اگر موجود نبود، یک بار از Google Earth دریافت می‌شود</li>
                                <li>تایل دریافت شده در آرشیو ذخیره می‌شود</li>
                                <li>درخواست‌های بعدی از آرشیو سرو می‌شوند</li>
                            </ol>
                            <div class="alert alert-info mt-3 mb-0">
                                <strong>مزیت:</strong> به مرور زمان، آرشیو کامل‌تر می‌شود و نیاز به اتصال خارجی کمتر می‌شود
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="mb-0">🛡️ رفع مشکلات تحریم و محدودیت</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                این سرویس مشکلات زیر را برطرف می‌کند:
                            </p>
                            <ul>
                                <li>✅ عدم نیاز به دسترسی مستقیم به Google Earth</li>
                                <li>✅ کار با اینترنت داخلی و بدون محدودیت</li>
                                <li>✅ پایداری بالا حتی در صورت قطع اتصال خارجی</li>
                                <li>✅ کاهش مصرف پهنای باند بین‌المللی</li>
                            </ul>
                            <div class="alert alert-warning mt-3 mb-0">
                                <strong>هدف:</strong> توسعه‌دهندگان می‌توانند بدون نگرانی از محدودیت‌ها، از تایل‌های Google Earth استفاده کنند
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0">💡 صرفه‌جویی در منابع</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                استفاده از این سرویس باعث صرفه‌جویی در موارد زیر می‌شود:
                            </p>
                            <ul>
                                <li>💰 کاهش مصرف پهنای باند بین‌المللی</li>
                                <li>⚡ کاهش زمان بارگذاری</li>
                                <li>🔄 کاهش تعداد درخواست‌ها به سرورهای خارجی</li>
                                <li>📊 بهبود تجربه کاربری</li>
                            </ul>
                            <div class="alert alert-success mt-3 mb-0">
                                <strong>نتیجه:</strong> پروژه‌های شما سریع‌تر و پایدارتر کار می‌کنند
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Endpoint Section -->
    <section id="endpoint" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">نقطه پایانی API</h2>
                <p class="lead text-muted">
                    آدرس و روش استفاده از API تایل‌های Google Earth
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-8 mx-auto">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">نقطه پایانی دریافت تایل</h5>
                        </div>
                        <div class="card-body">
                            <div class="bg-dark text-light p-4 rounded text-end" dir="ltr">
                                <strong>URL:</strong><br>
                                <code class="text-info">https://memaps.ir/api/google-earth/{layer}/{z}/{x}/{y}.{ext}</code><br><br>
                                <strong>Method:</strong><br>
                                <code class="text-success">GET</code><br><br>
                                <strong>Content-Type:</strong><br>
                                <code class="text-warning">image/png</code> یا <code class="text-warning">image/jpeg</code>
                            </div>
                            
                            <div class="mt-4">
                                <h6 class="fw-bold mb-3">پارامترهای URL:</h6>
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead class="table-dark">
                                            <tr>
                                                <th>پارامتر</th>
                                                <th>توضیح</th>
                                                <th>مثال</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><code>{layer}</code></td>
                                                <td>نوع لایه (satellite, map, hybrid, terrain, roadmap)</td>
                                                <td><code>satellite</code></td>
                                            </tr>
                                            <tr>
                                                <td><code>{z}</code></td>
                                                <td>سطح زوم (0 تا 20)</td>
                                                <td><code>10</code></td>
                                            </tr>
                                            <tr>
                                                <td><code>{x}</code></td>
                                                <td>مختصات X تایل</td>
                                                <td><code>512</code></td>
                                            </tr>
                                            <tr>
                                                <td><code>{y}</code></td>
                                                <td>مختصات Y تایل</td>
                                                <td><code>512</code></td>
                                            </tr>
                                            <tr>
                                                <td><code>{ext}</code></td>
                                                <td>فرمت تصویر (png یا jpg)</td>
                                                <td><code>png</code></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <div class="mt-4">
                                <h6 class="fw-bold mb-3">مثال‌های URL:</h6>
                                <pre class="bg-light p-3 rounded text-end" dir="ltr"><code>// تصویر ماهواره‌ای
GET https://memaps.ir/api/google-earth/satellite/10/512/512.png

// نقشه ترکیبی
GET https://memaps.ir/api/google-earth/hybrid/15/16384/16384.png

// نقشه زمین‌شناسی
GET https://memaps.ir/api/google-earth/terrain/8/128/128.png</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Layers Section -->
    <section id="layers" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">انواع لایه‌های Google Earth</h2>
                <p class="lead text-muted">
                    انواع مختلف لایه‌هایی که می‌توانید استفاده کنید
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">🛰️ ماهواره‌ای (Satellite)</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                تصاویر ماهواره‌ای با کیفیت بالا از Google Earth
                            </p>
                            <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                <code>https://memaps.ir/api/google-earth/satellite/{z}/{x}/{y}.png</code>
                            </div>
                            <div class="mt-3">
                                <strong>کاربرد:</strong>
                                <ul class="mb-0">
                                    <li>نمایش تصاویر واقعی زمین</li>
                                    <li>بررسی مناطق جغرافیایی</li>
                                    <li>تحلیل زمین‌شناسی</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">🗺️ نقشه (Map)</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                نقشه استاندارد Google Earth با نام خیابان‌ها و مکان‌ها
                            </p>
                            <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                <code>https://memaps.ir/api/google-earth/map/{z}/{x}/{y}.png</code>
                            </div>
                            <div class="mt-3">
                                <strong>کاربرد:</strong>
                                <ul class="mb-0">
                                    <li>نمایش نقشه با جزئیات</li>
                                    <li>ناوبری و مسیریابی</li>
                                    <li>یافتن مکان‌ها</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0">🌐 ترکیبی (Hybrid)</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                ترکیب تصاویر ماهواره‌ای با نام خیابان‌ها و مکان‌ها
                            </p>
                            <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                <code>https://memaps.ir/api/google-earth/hybrid/{z}/{x}/{y}.png</code>
                            </div>
                            <div class="mt-3">
                                <strong>کاربرد:</strong>
                                <ul class="mb-0">
                                    <li>بهترین گزینه برای ناوبری</li>
                                    <li>ترکیب تصویر واقعی با اطلاعات</li>
                                    <li>نمایش دقیق‌تر مکان‌ها</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="mb-0">⛰️ زمین‌شناسی (Terrain)</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                نقشه زمین‌شناسی با نمایش ارتفاع و توپوگرافی
                            </p>
                            <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                <code>https://memaps.ir/api/google-earth/terrain/{z}/{x}/{y}.png</code>
                            </div>
                            <div class="mt-3">
                                <strong>کاربرد:</strong>
                                <ul class="mb-0">
                                    <li>تحلیل توپوگرافی</li>
                                    <li>بررسی ارتفاع مناطق</li>
                                    <li>مطالعات زمین‌شناسی</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Examples Section -->
    <section id="examples" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">مثال‌های عملی</h2>
                <p class="lead text-muted">
                    نحوه استفاده از API در پروژه‌های مختلف
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">Leaflet - تصویر ماهواره‌ای</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" 
          href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /&gt;
    &lt;script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="map" style="height: 400px;"&gt;&lt;/div&gt;
    &lt;script&gt;
        var map = L.map('map').setView([35.6892, 51.3890], 10);
        
        // لایه ماهواره‌ای
        L.tileLayer('https://memaps.ir/api/google-earth/satellite/{z}/{x}/{y}.png', {
            attribution: '© Google Earth via Memaps.ir',
            maxZoom: 20
        }).addTo(map);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">Leaflet - لایه ترکیبی</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// ایجاد نقشه
var map = L.map('map').setView([35.6892, 51.3890], 10);

// لایه ترکیبی (ماهواره + نام خیابان‌ها)
var hybridLayer = L.tileLayer(
    'https://memaps.ir/api/google-earth/hybrid/{z}/{x}/{y}.png',
    {
        attribution: '© Google Earth via Memaps.ir',
        maxZoom: 20
    }
);

// لایه ماهواره‌ای
var satelliteLayer = L.tileLayer(
    'https://memaps.ir/api/google-earth/satellite/{z}/{x}/{y}.png',
    {
        attribution: '© Google Earth via Memaps.ir',
        maxZoom: 20
    }
);

// اضافه کردن لایه پیش‌فرض
hybridLayer.addTo(map);

// کنترل تغییر لایه
L.control.layers({
    'ترکیبی': hybridLayer,
    'ماهواره‌ای': satelliteLayer
}).addTo(map);</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-warning text-dark">
                            <h5 class="mb-0">OpenLayers - تصویر ماهواره‌ای</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" 
          href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css"&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="map" style="height: 400px;"&gt;&lt;/div&gt;
    &lt;script&gt;
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://memaps.ir/api/google-earth/satellite/{z}/{x}/{y}.png',
                crossOrigin: 'anonymous'
            })
        });
        
        var map = new ol.Map({
            target: 'map',
            layers: [layer],
            view: new ol.View({
                center: ol.proj.fromLonLat([51.3890, 35.6892]),
                zoom: 10
            })
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0">JavaScript - دریافت مستقیم</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// دریافت تایل به صورت مستقیم
async function getGoogleEarthTile(layer, z, x, y) {
    const url = `https://memaps.ir/api/google-earth/${layer}/${z}/${x}/${y}.png`;
    
    try {
        const response = await fetch(url);
        if (response.ok) {
            const blob = await response.blob();
            const imageUrl = URL.createObjectURL(blob);
            
            // نمایش تصویر
            const img = document.createElement('img');
            img.src = imageUrl;
            document.body.appendChild(img);
        }
    } catch (error) {
        console.error('خطا در دریافت تایل:', error);
    }
}

// استفاده
getGoogleEarthTile('satellite', 10, 512, 512);</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Cache Section -->
    <section id="cache" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">سیستم کش خودکار</h2>
                <p class="lead text-muted">
                    نحوه کار سیستم کش و مزایای آن
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-8 mx-auto">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h3 class="h4 fw-bold mb-4">نحوه کار سیستم کش</h3>
                            
                            <div class="row g-4 mb-4">
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px; flex-shrink: 0;">
                                            <span class="fw-bold">1</span>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">بررسی کش</h5>
                                            <p class="text-muted mb-0">درخواست تایل دریافت می‌شود و سیستم بررسی می‌کند آیا این تایل قبلاً دریافت شده است یا نه.</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px; flex-shrink: 0;">
                                            <span class="fw-bold">2</span>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">بازگشت از کش</h5>
                                            <p class="text-muted mb-0">اگر تایل در کش موجود باشد، همان تایل به سرعت به کاربر برگردانده می‌شود.</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px; flex-shrink: 0;">
                                            <span class="fw-bold">3</span>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">دریافت از Google</h5>
                                            <p class="text-muted mb-0">اگر تایل در کش موجود نباشد، درخواست به سرور Google Earth ارسال می‌شود.</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px; flex-shrink: 0;">
                                            <span class="fw-bold">4</span>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">ذخیره در کش</h5>
                                            <p class="text-muted mb-0">تایل دریافت شده در کش سرور ذخیره می‌شود (آرشیو) برای استفاده‌های بعدی.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="alert alert-success">
                                <h5 class="alert-heading">مزایای سیستم کش برای توسعه‌دهندگان ایرانی:</h5>
                                <ul class="mb-0">
                                    <li>✅ <strong>سرعت بالا:</strong> تایل‌های کش شده از سرور داخلی با سرعت بسیار بالاتر بارگذاری می‌شوند</li>
                                    <li>✅ <strong>عدم وابستگی به اتصال خارجی:</strong> تایل‌های کش شده بدون نیاز به اتصال به Google Earth در دسترس هستند</li>
                                    <li>✅ <strong>پایداری:</strong> حتی در صورت مشکل در دسترسی به Google Earth یا قطع اینترنت خارجی، تایل‌های کش شده در دسترس هستند</li>
                                    <li>✅ <strong>صرفه‌جویی در پهنای باند:</strong> تایل‌های تکراری از آرشیو داخلی سرو می‌شوند و نیازی به دانلود مجدد نیست</li>
                                    <li>✅ <strong>آرشیو کامل به مرور زمان:</strong> با هر استفاده، آرشیو کامل‌تر می‌شود و دسترسی به تایل‌ها سریع‌تر می‌شود</li>
                                </ul>
                            </div>
                            
                            <div class="mt-4">
                                <h5 class="fw-bold mb-3">اطلاعات کش</h5>
                                <p class="text-muted">
                                    می‌توانید اطلاعات کش را از طریق endpoint زیر دریافت کنید:
                                </p>
                                <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                    <code>GET https://memaps.ir/api/google-earth/cache/info</code>
                                </div>
                                <p class="text-muted mt-3">
                                    این endpoint اطلاعاتی مانند حجم کش، تعداد فایل‌ها و مسیر دایرکتوری کش را برمی‌گرداند.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CORS Section -->
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">پشتیبانی از CORS</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text">
                                API تایل‌های Google Earth می‌مپس از CORS پشتیبانی می‌کند و می‌توانید مستقیماً از مرورگر استفاده کنید:
                            </p>
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// استفاده مستقیم از مرورگر
const img = document.createElement('img');
img.src = 'https://memaps.ir/api/google-earth/satellite/10/512/512.png';
img.crossOrigin = 'anonymous';
document.body.appendChild(img);

// یا با fetch
fetch('https://memaps.ir/api/google-earth/satellite/10/512/512.png')
    .then(response => response.blob())
    .then(blob => {
        const url = URL.createObjectURL(blob);
        const img = document.createElement('img');
        img.src = url;
        document.body.appendChild(img);
    });</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block stylesheets %}
<style>
    .hover-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    }
    
    pre {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    code {
        font-family: 'Courier New', monospace;
    }
</style>
{% endblock %}