خريطة على صفحتك

أضف خريطة تفاعلية بدبابيس لموقعك – للمدرسة والرحلات والملعب.

شاهد معي: Leaflet – خريطة مجانية

Leaflet مكتبة يستخدمها ملايين المواقع لعرض الخرائط. مجانية وتُضاف بسطرين في <head>:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

ثم صندوق للخريطة وبضعة أسطر JavaScript:

<div id="mapa" style="height: 400px; border-radius: 12px;"></div>

<script>
  // Coordinates for the map's center and zoom level (bigger number = closer)
  const mapa = L.map('mapa').setView([49.19, 16.61], 13);

  // Map tiles from OpenStreetMap (free)
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap',
  }).addTo(mapa);

  // A pin with a popup
  L.marker([49.19, 16.61])
    .addTo(mapa)
    .bindPopup('<strong>We are here!</strong>');
</script>

ثلاث خطوات: إنشاء الخريطة، إضافة الطبقة الأساسية، وضع دبوس. يمكنك إضافة دبابيس كما تشاء – كرّر L.marker.

💡

المكتبة كود كتبه شخص آخر تستعيره، حتى لا تكتب كل شيء بنفسك. Leaflet يتولى السحب والتكبير ولمس الجوال. أنت تخبر الخريطة ماذا تعرض.

دبابيس أكثر من قائمة

عندما لديك أماكن عدة، خزّنها في مصفوفة ومرّ عليها – كما مع الطقس:

const mista = [
  { nazev: 'Šumava 2025', lat: 49.06, lng: 13.61 },
  { nazev: 'Lipno – camping trip', lat: 48.63, lng: 14.23 },
  { nazev: 'Prague – school trip', lat: 50.09, lng: 14.42 },
];

for (const misto of mista) {
  L.marker([misto.lat, misto.lng]).addTo(mapa).bindPopup(misto.nazev);
}

دورك الآن 💪

🏫 موقع المدرسة – حل

خريطة بموقع المدرسة في صفحة «Contact». مكافأة: دبوس ثانٍ للصالة أو الملعب المستخدم في التربية البدنية.

🙋 موقع شخصي – حل

خريطة «My Places»: أين تعيش (تقريباً – المدينة تكفي!)، ملعبك المفضل، أين تذهب في العطلة.

🌍 يوميات السفر – حل

درسك النجم: خريطة كل رحلاتك بدبابيس من قائمة. كل popup يمكن أن يربط بتقرير الرحلة.

⚽ موقع النادي – حل

خريطة «Where We Play»: الملعب الرئيسي + ملاعب الخصوم. الآباء الزائرون سيحبونها.

⚠️

الخصوصية: لا تضع عنوان منزلك الدقيق على موقع. دبوس على الساحة الرئيسية في مدينتك يكفي.

✅

تحقق: موقعك فيه خريطة قابلة للسحب والتكبير، بدبوسين على الأقل مع popups.

ما ستخرج به من هذا الدرس

المكتبات (مثل Leaflet) تُعيرك قوى جاهزة.
خريطة = خريطة + طبقة أساسية + دبابيس.
قائمة أماكن في مصفوفة + حلقة = خريطة بأي حجم.

هذا الدرس جزء من مستوى مدفوع

شاهد معي: Leaflet – خريطة مجانية

دبابيس أكثر من قائمة

دورك الآن 💪

ما ستخرج به من هذا الدرس