الأدلّة
عرض خريطة
ضمّن خريطة أساس تفاعلية من Navvo Maps في تطبيقك.
عرض خريطة
اعرض خريطة أساس تفاعلية من Navvo Maps في المتصفح. تأتي Navvo Maps مع محرّك عرض GL خفيف بالإضافة إلى نمط متجهي كامل — وجّهها إلى رابط النمط الخاص بك وتكون قد انتهيت.
النطاق المطلوب: tiles
1. أضف Navvo Maps
حمّل حزمة تطوير Navvo Maps (محرّك العرض + الأنماط)، المُقدّمة من Navvo:
<link href="https://docs.navvo.io/navvo-maps/navvo-maps.css" rel="stylesheet" />
<script src="https://docs.navvo.io/navvo-maps/navvo-maps.js"></script>
<div id="map" style="width: 100%; height: 480px;"></div>
2. وجّهها إلى نمط Navvo
بما أنّ المتصفح لا يستطيع إضافة ترويسة x-api-key إلى طلبات الخريطة، مرّر مفتاحك على رابط النمط بصيغة api_key:
const map = new NavvoMaps.Map({
container: "map",
style: "https://navvo.io/api/v1/tiles/style?style=standard&api_key=nvvo_YOUR_KEY",
center: [35.9106, 31.9539], // [lng, lat] — Amman
zoom: 12,
});
map.addControl(new NavvoMaps.NavigationControl());
هذه خريطة أساس متجهية كاملة — تحريك وتكبير وتسميات وكل شيء.
3. اختر نمطًا
استبدل قيمة style= للحصول على مظهر مختلف:
style= | المظهر |
|---|---|
standard | خريطة أساس متجهية فاتحة (الافتراضي). |
dark | خريطة أساس متجهية داكنة. |
positron | خريطة أساس فاتحة بسيطة. |
satellite | صور جوية (نقطية). |
terrain | تضاريس مظللة (نقطية). |
3d | امتدادات مبانٍ ثلاثية الأبعاد (أضف &terrain=1 لتضاريس الارتفاع). |
map.setStyle("https://navvo.io/api/v1/tiles/style?style=dark&api_key=nvvo_YOUR_KEY");
4. أضف علامة
new NavvoMaps.Marker({ color: "#386BFF" })
.setLngLat([35.9106, 31.9539])
.setPopup(new NavvoMaps.Popup().setText("Amman"))
.addTo(map);
تستخدم Navvo Maps ترتيب
[lng, lat]. تعود إحداثيات أماكن Navvo بصيغة WKT POINT(lng lat) — وهي بالفعل بترتيب خط الطول أولًا، لذا يمكنك تحليلها وتمريرها مباشرةً.5. أضف طبقة تراكب (اختياري)
اعرض حركة المرور الحيّة أو الحوادث أو الطقس فوق خريطة الأساس باستخدام نقاط نهاية التراكب. على سبيل المثال، أضف حركة المرور الحيّة كمصدر GeoJSON:
map.on("load", async () => {
const res = await fetch(
"https://navvo.io/api/v1/traffic/lines/tiles/14/9826/6656", // بلاطة في عمّان
{ headers: { "x-api-key": "nvvo_YOUR_KEY" } }
);
const geojson = await res.json();
// حركة المرور الحيّة مُجمَّعة من مستخدمي Navvo، لذا تكون `geojson.hasData`
// بقيمة `false` و`features` فارغة `[]` حيثما لم يُبلّغ أحد عن حركة مرور
// حديثاً — وهذه استجابة طبيعية وليست خطأً. أضِف الطبقة على أي حال؛
// ستمتلئ بخطوط ملوّنة مع توفّر التغطية.
map.addSource("traffic", { type: "geojson", data: geojson });
map.addLayer({
id: "traffic",
type: "line",
source: "traffic",
paint: { "line-color": ["get", "color"], "line-width": 3 },
});
});
استجابة حركة المرور الفارغة أمر متوقّع — وهي ليست خريطة الأساس. إن
/traffic/lines/tiles/{z}/{x}/{y} هي طبقة تراكب اختيارية لبيانات الازدحام الحيّة المُجمَّعة من مستخدمي Navvo، وتُعاد بصيغة GeoJSON. تستجيب بـ { "hasData": false, "features": [] } في أي مكان لم يُبلّغ فيه مستخدمو Navvo عن حركة مرور حديثة (لذا قد تكون فارغة غالباً اليوم). خريطتك تظل تُعرض — أما بلاطات خريطة الأساس الفعلية فتأتي من نقطة النهاية /tiles/style في الخطوة 1. راجع دليل طبقة حركة المرور الحيّة لتحميل كامل نطاق العرض باستخدام tile-cover والتعامل مع hasData.راجع دليل طبقة حركة المرور الحيّة لتحميل منطقة العرض كاملةً بكفاءة باستخدام تغطية البلاطات.
الإسناد. تحمل خريطة أساس Navvo إسناد
© Navvo. اعرض إسناد Navvo؛ ولا يلزم أي إسناد لطرف ثالث في تطبيقك. أبقِ عنصر التحكم المُصغَّر بالإسناد على الخريطة معروضًا — تعرضه الـ SDK افتراضيًا. تُعيد GET /map/config كائن attribution إن أردت بناء واجهة إسناد خاصة بك.بدون مفتاح API؟ الخريطة عليها علامة مائية. بدون مفتاح API، تُعرَض خريطة الأساس مع علامة مائية "Navvo Map Developer (Provide Your API Key)" مكرَّرة عبر كل بلاطة على خلفية داكنة شبه شفافة. مرِّر مفتاح
api_key (كمعامل استعلام على رابط النمط، أو apiKey في الـ SDK) للحصول على خريطة نظيفة بلا علامة مائية.