مقدمة

يمكن أن يمثل بدء رحلة تعلم برمجة webGIS تحديًا، خاصة إذا كنا جددًا في عالم HTML وCSS وJavaScript. لحسن الحظ، باستخدام أدوات مثل Replit، يمكننا البدء في التعلم بطريقة بسيطة ومباشرة. ستوجهك هذه المقالة عبر الخطوات الأساسية لإنشاء تطبيق WebGIS بسيط باستخدام MapTiler. من خلال هذا البرنامج التعليمي، سوف نتعلم كيفية إنشاء خرائط تفاعلية يمكن الوصول إليها من أي مكان، فقط باستخدام متصفحنا.

الخطوة 1. إنشاء حساب ومشروع في Replit

1. قم بالتسجيل في Replit:

• افتح ريبليت
• انقر على زر "التسجيل" في الزاوية اليمنى العليا.
• اختر طريقة التسجيل المطلوبة (Google أو GitHub أو البريد الإلكتروني).
• بعد التسجيل الناجح، سيتم توجيهنا إلى لوحة تحكم Replit.

2. إنشاء مشروع جديد:

• في لوحة تحكم Replit، انقر فوق الزر "إنشاء Repl".
• في قسم القالب، حدد "HTML، CSS، JS".
• قم بتسمية مشروعنا، على سبيل المثال "WebGIS-Simple".
• انقر فوق "إنشاء Repl" لإنشاء مشروع. بمجرد إنشاء المشروع، سنرى ثلاثة ملفات رئيسية: Index.html وstyle.css وscript.js. سيتم استخدام هذه الملفات لإنشاء صفحة الويب الخاصة بنا.

الخطوة الثانية: إعداد بنية HTML

1. فهم بنية HTML الأساسية:

• افتح ملف Index.html في Replit.
• index.html هو ملف يحدد البنية والمحتوى الأساسي لصفحات الويب الخاصة بنا.

2. إضافة عناصر إلى الخريطة:

• استبدل محتويات ملف Index.html بالكود التالي:

    
    
    
    
    
    


    
WebGIS Sederhana Menggunakan MapTiler
    

    

توضيح:

• : يعرض عنوان الصفحة.

• : المكان الذي سيتم عرض الخريطة فيه.
• Maplibre GL: يستخدم لعرض الخرائط من MapTiler.



الخطوة 3: إضافة الأنماط باستخدام CSS

1. إضافة CSS لعرض الخريطة:

• افتح ملف style.css.
• استبدل محتويات ملف style.css بالكود التالي:

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

#map {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

توضيح:

• body, html: قم بتعيين الهوامش والحشوة حتى تتمكن الخريطة من استخدام الشاشة بأكملها.
• #map: ضبط حجم الخريطة على العرض الكامل والارتفاع 500 بكسل.
• h1: ضبط عرض العنوان في منتصف الصفحة.



ملاحظة: يمكن تعديل قسم النمط هذا وفقًا لتصميمك واحتياجاتك من خلال النظر إلى رمز النمط هنا W3 Schools

الخطوة 4: دمج MapTiler مع JavaScript

1. الحصول على مفتاح API من MapTiler

• افتح MapTiler.
• انقر على "تسجيل" في الزاوية اليمنى العليا.
• املأ نموذج التسجيل بالبريد الإلكتروني أو قم بالتسجيل باستخدام حساب Google.
• بعد التسجيل، سيتم نقلنا إلى لوحة تحكم MapTiler.



2. الحصول على مفتاح واجهة برمجة التطبيقات:

• في لوحة تحكم MapTiler، انقر فوق علامة التبويب "مفاتيح API".
• سترى مفتاح واجهة برمجة التطبيقات الافتراضي الذي يوفره MapTiler.
• إذا كنت تريد إنشاء مفتاح API جديد، فانقر فوق الزر "إنشاء مفتاح جديد".
• أعطي اسمًا لمفتاح واجهة برمجة التطبيقات الجديد، على سبيل المثال "WebGIS-Simple"، وانقر على "إنشاء".
• انسخ مفتاح API الذي أنشأناه للتو. سيتم استخدام مفتاح API هذا للوصول إلى الخريطة في مشروعنا.

3. إنشاء خريطة تفاعلية:

• افتح ملف script.js.
• أضف الكود التالي إلى script.js:

const map = new maplibregl.Map({
  container: 'map', // ID dari elemen div tempat peta akan dirender
  style: 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_MAPTILER_API_KEY', // URL ke gaya peta dari MapTiler dan bagian API KEY masukan API KEY anda
  center: [106.8272, -6.1751], // Koordinat pusat peta (Jakarta)
  zoom: 10 // Level zoom peta
});

توضيح:

• الحاوية: تشير إلى العنصر الذي يحتوي على خريطة المعرف في ملف Index.html.
• style: عنوان URL لنمط الخريطة من MapTiler. استبدل YOUR_MAPTILER_API_KEY بمفتاح واجهة برمجة التطبيقات (API) الخاص بك.
• المركز: الإحداثيات الجغرافية لمركز الخريطة (جاكرتا).
• التكبير/التصغير: مستوى التكبير/التصغير الأولي للخريطة.



4. إضافة علامات إلى الخريطة (اختياري):

• إذا كنت تريد إضافة علامة إلى الخريطة، أضف الكود التالي ضمن تهيئة الخريطة.
• سيتم عرض العلامة في الإحداثيات المحددة.

const marker = new maplibregl.Marker()
  .setLngLat([106.8272, -6.1751]) // Koordinat Jakarta
  .addTo(map);



الخطوة 5: تشغيل المشروع واختباره

1. تشغيل المشروع:

• بمجرد الانتهاء من كتابة الكود، انقر فوق الزر "تشغيل" في Replit. سيفتح Replit صفحة ويب تحتوي على الخريطة التي أنشأناها. ملاحظة النتائج:



• سيتم عرض خريطة تفاعلية من MapTiler على صفحة الويب.
• يمكننا تكبير الخريطة وتصغيرها وتحريكها لرؤية أجزاء مختلفة.



إليك نتائج الReplit التي قمنا بها:

لقد أكملنا مشروع WebGIS البسيط هذا ويمكنك رؤية النتائج في الرابط التالي Simple WebGIS Source.

يوضح هذا المشروع كيفية استخدام HTML وCSS وJavaScript وMapTiler API لإنشاء تطبيق WebGIS بسيط. يمكنك تجربتها بنفسك أو استخدام هذا كأساس لمشروع أكثر تعقيدًا.

باتباع هذه الخطوات، نجحنا في إنشاء تطبيق WebGIS بسيط باستخدام Replit وMapTiler. تم تصميم هذا الدليل للمبتدئين لفهم أساسيات تطوير الويب باستخدام HTML وCSS وJavaScript أثناء تعلم إنشاء خرائط تفاعلية.

التشجيع وشكرًا لك، نأمل أن يكون هذا مفيدًا!