stable: finalized GIS aesthetics and Syria/Jordan routing synchronization
This commit is contained in:
Hamza-Ayed
@@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Map SaaS | Master-Class Tutorial</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Noto+Sans+Arabic:wght@400;700;800&family=Fira+Code&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-glow"></div>
|
||||
<div class="app-container">
|
||||
<aside>
|
||||
<div class="brand">
|
||||
<div class="brand-icon">M</div>
|
||||
<h2>Master-Class</h2>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#intro" class="active">01. Sovereignty</a></li>
|
||||
<li><a href="#acquisition">02. Data Acquisition</a></li>
|
||||
<li><a href="#engine">03. The Spatial Engine</a></li>
|
||||
<li><a href="#import">04. Mastering Import</a></li>
|
||||
<li><a href="#serving">05. Serving Geometry</a></li>
|
||||
<li><a href="#routing">06. Intelligent Routing</a></li>
|
||||
<li><a href="#interface">07. Modern Interface</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<header class="hero" id="intro">
|
||||
<img src="hero.png" alt="Map Data Hero" class="hero-img">
|
||||
<div class="hero-content">
|
||||
<span class="badge">Advanced Tutorial</span>
|
||||
<h1>Building the Future of Maps</h1>
|
||||
<p>A ground-up engineering guide to creating a fully sovereign mapping infrastructure.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="sections-wrapper">
|
||||
<!-- 01. Sovereignty -->
|
||||
<section id="intro">
|
||||
<span class="section-label">Concept</span>
|
||||
<h2>Digital Sovereignty</h2>
|
||||
<div class="deep-dive">
|
||||
<div class="en-side">
|
||||
<p>In the age of expensive APIs and data lock-ins, building your own map stack isn't just a technical choice—it's a declaration of <strong>Sovereignty</strong>. By orchestrating OpenStreetMap, PostGIS, and high-performance tile servers, we eliminate per-view costs and gain absolute control over every pixel.</p>
|
||||
</div>
|
||||
<div class="ar-side">
|
||||
<p>في عصر واجهات برمجة التطبيقات المكلفة وتقييد البيانات، لا يعد بناء مجموعة أدوات الخرائط الخاصة بك مجرد خيار تقني، بل هو إعلان عن <strong>السيادة الرقمية</strong>. من خلال تنظيم OpenStreetMap وPostGIS وخوادم البلاطات عالية الأداء، نقوم بإلغاء تكاليف العرض لكل خريطة ونكتسب تحكماً مطلقاً في كل بكسل.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 02. Data Acquisition -->
|
||||
<section id="acquisition">
|
||||
<span class="section-label">Source</span>
|
||||
<h2>Phase 1: Raw Data Acquisition</h2>
|
||||
<div class="deep-dive">
|
||||
<div class="en-side">
|
||||
<p>Where does the world's map data come from? For this project, we rely on <strong>OpenStreetMap (OSM)</strong>. We obtain high-quality, pre-extracted geographic fragments from <strong>Geofabrik</strong>.</p>
|
||||
<div class="highlight-box">
|
||||
<h4>Why Geofabrik?</h4>
|
||||
<p>Downloading the entire world is 1.6TB. Geofabrik allows us to target specific regions (like Jordan) in the `.osm.pbf` format—a highly compressed binary structure.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ar-side">
|
||||
<p>من أين تأتي بيانات خرائط العالم؟ في هذا المشروع، نعتمد على <strong>OpenStreetMap (OSM)</strong>. نحصل على قطع جغرافية عالية الجودة ومستخرجة مسبقاً من <strong>Geofabrik</strong>.</p>
|
||||
<div class="highlight-box">
|
||||
<h4>لماذا Geofabrik؟</h4>
|
||||
<p>تحميل العالم بالكامل يزن 1.6 تيرابايت. يسمح لنا Geofabrik باستهداف مناطق معينة (مثل الأردن) بتنسيق `.osm.pbf` - وهو هيكل ثنائي مضغوط للغاية.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Source URL: <code>http://download.geofabrik.de/asia/jordan-latest.osm.pbf</code></p>
|
||||
</section>
|
||||
|
||||
<!-- 03. The Spatial Engine -->
|
||||
<section id="engine">
|
||||
<span class="section-label">Infrastructure</span>
|
||||
<h2>Phase 2: The Spatial Database</h2>
|
||||
<div class="deep-dive">
|
||||
<div class="en-side">
|
||||
<p>Standard databases store text and numbers. A mapping engine needs to store <strong>Geometry</strong>. We use **PostGIS**, an extension for PostgreSQL that adds support for geographic objects.</p>
|
||||
<div class="highlight-box">
|
||||
<h4>The "Why" of PostGIS</h4>
|
||||
<p>PostGIS allows us to perform spatial SQL queries. For example, finding all roads that intersect with a specific park, or calculating the area of a building block instantly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ar-side">
|
||||
<p>قواعد البيانات العادية تخزن النصوص والأرقام. أما محرك الخرائط فيحتاج إلى تخزين <strong>الهندسة (Geometry)</strong>. نحن نستخدم **PostGIS**، وهي إضافة لـ PostgreSQL تضيف دعماً للأجسام الجغرافية.</p>
|
||||
<div class="highlight-box">
|
||||
<h4>سبب استخدام PostGIS</h4>
|
||||
<p>يسمح لنا PostGIS بإجراء استعلامات SQL مكانية. على سبيل المثال، العثور على جميع الطرق التي تتقاطع مع حديقة معينة، أو حساب مساحة كتلة بناء بشكل فوري.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 04. Mastering Import -->
|
||||
<section id="import">
|
||||
<span class="section-label">Processing</span>
|
||||
<h2>Phase 3: Data Transformation</h2>
|
||||
<div class="deep-dive">
|
||||
<div class="en-side">
|
||||
<p>To move data from a PBF file into PostGIS, we use <strong>osm2pgsql</strong>. This isn't just a copy-paste tool; it's a sophisticated translator.</p>
|
||||
</div>
|
||||
<div class="ar-side">
|
||||
<p>لنقل البيانات من ملف PBF إلى PostGIS، نستخدم <strong>osm2pgsql</strong>. هذه ليست مجرد أداة نسخ ولصق؛ بل هي مترجم متطور.</p>
|
||||
</div>
|
||||
</div>
|
||||
<pre><code>osm2pgsql --create --slim --cache 1000 --database map_db --host db jordan-latest.osm.pbf</code></pre>
|
||||
<div class="tech-grid">
|
||||
<div class="tech-card">
|
||||
<h3>--create</h3>
|
||||
<p>Initializes a fresh schema. Wipe out old data and start clean.</p>
|
||||
<p>(AR) لإنشاء مخطط (Schema) جديد تماماً ومسح البيانات القديمة.</p>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<h3>--slim</h3>
|
||||
<p>Stores intermediate data on disk. Essential for keeping RAM usage low during complex imports.</p>
|
||||
<p>(AR) لتخزين البيانات الوسيطة على القرص، مما يحافظ على استهلاك الذاكرة منخفضاً.</p>
|
||||
</div>
|
||||
<div class="tech-card">
|
||||
<h3>--cache</h3>
|
||||
<p>Allocates RAM (1GB here) to the tool. More cache means faster translation from PBF to SQL.</p>
|
||||
<p>(AR) يخصص ذاكرة وصول عشوائي للأداة. ذاكرة أكبر تعني ترجمة أسرع للبيانات.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 05. Serving Geometry -->
|
||||
<section id="serving">
|
||||
<span class="section-label">Real-time</span>
|
||||
<h2>Phase 4: Vector Tile Serving</h2>
|
||||
<div class="deep-dive">
|
||||
<div class="en-side">
|
||||
<p>Mapping in 2026 relies on <strong>Vector Tiles</strong>. Instead of static pictures, we send mathematical geometry to the browser. We use <strong>Martin</strong> because it generates these tiles dynamically from PostGIS SQL tables.</p>
|
||||
</div>
|
||||
<div class="ar-side">
|
||||
<p>تعتمد الخرائط في عام 2026 على <strong>بلاطات المتجهات (Vector Tiles)</strong>. بدلاً من الصور الثابتة، نرسل أجزاء هندسية رياضية إلى المتصفح. نستخدم <strong>Martin</strong> لأنه ينشئ هذه البلاطات ديناميكياً من جداول SQL.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 06. Intelligent Routing -->
|
||||
<section id="routing">
|
||||
<span class="section-label">Logistics</span>
|
||||
<h2>Phase 5: Pathfinding with GraphHopper</h2>
|
||||
<div class="deep-dive">
|
||||
<div class="en-side">
|
||||
<p>Maps are for travel. <strong>GraphHopper</strong> is our logistics brain. It reads the imported road network and applies Dijkstra-based algorithms to find the fastest path between any two points in Jordan.</p>
|
||||
</div>
|
||||
<div class="ar-side">
|
||||
<p>الخرائط هي للسفر والتحرك. <strong>GraphHopper</strong> هو دماغ اللوجستيات الخاص بنا. يقرأ شبكة الطرق المستوردة ويطبق خوارزميات (Dijkstra) للعثور على أسرع مسار بين أي نقطتين في الأردن.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 07. Modern Interface -->
|
||||
<section id="interface">
|
||||
<span class="section-label">Interaction</span>
|
||||
<h2>Phase 6: The Full-Stack Bridge</h2>
|
||||
<div class="deep-dive">
|
||||
<div class="en-side">
|
||||
<p>Last, we bridge it all. <strong>NestJS</strong> provides the secured API proxy, and <strong>React + MapLibre GL</strong> provides the high-performance visualization layer.</p>
|
||||
</div>
|
||||
<div class="ar-side">
|
||||
<p>أخيراً، نجمع كل شيء. يوفر <strong>NestJS</strong> بوابة آمنة (API Proxy)، ويوفر <strong>React + MapLibre GL</strong> طبقة التصور المرئي عالية الأداء.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer style="margin-top: 10rem; padding-top: 4rem; border-top: 1px solid var(--border); text-align: center;">
|
||||
<p>© 2026 Map SaaS Engineering Tutorial. All Rights Reserved.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user