تخصيص وإضافة علامات بسيطة على خريطة Mapbox باستخدام GL JS

في سعيك لإضافة علامة أساسية إلى الخريطة الخاصة بك باستخدام Mapbox GL JS، يجب أولاً التحقق من الكود الذي قدمته وفهم كيف يمكنك تحسين تنسيق العلامات على الخريطة الخاصة بك. يظهر من الشيفرة البرمجية الخاصة بك أنك تقوم بتحميل نمط الخريطة من Mapbox Studio، وبعد ذلك تحاول إضافة علامات باستخدام GeoJSON ومصدر البيانات الخاص بها.

لإضافة علامة أساسية بسيطة إلى الخريطة، يمكنك استخدام الكود التالي:

javascriptCopy code
map.on('style.load', function () {

    // إضافة مصدر للعلامة
    map.addSource("singleMarker", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-30.50, 40] // تحديد إحداثيات العلامة
                },
                "properties": {
                    "title": "My Marker",
                    "marker-color": "#FF5733" // لون العلامة
                }
            }]
        }
    });

    // إضافة طبقة للعلامة
    map.addLayer({
        "id": "singleMarker",
        "type": "circle", // استخدام نوع الدائرة للعلامة البسيطة
        "source": "singleMarker",
        "paint": {
            "circle-radius": 10, // حجم العلامة
            "circle-color": ["get", "marker-color"] // استخدام لون العلامة من الخصائص
        }
    });
});

يتم تحديد نوع العلامة كـ “circle” ويتم رسمها باستخدام دائرة بحجم محدد. يمكنك تعديل حجم العلامة ولونها وإحداثياتها حسب احتياجاتك. يُفضل أيضًا تحديد لون العلامة في خصائص الـ GeoJSON للتأكد من أنه يتم عرضها بشكل صحيح. بعد تحديد هذا الكود، يجب أن تظهر لديك علامة بسيطة على الخريطة الخاصة بك.

يرجى تجربة هذا الكود وتعديله وفقًا لاحتياجاتك الخاصة. إذا كانت لديك أي أسئلة إضافية، فلا تتردد في طرحها.

بالطبع، يمكنني توفير المزيد من المعلومات حول كيفية تحسين تجربة إضافة العلامات إلى الخريطة الخاصة بك باستخدام Mapbox GL JS.

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

1. تخصيص الرموز:
   يمكنك استخدام رموز مخصصة للعلامات بدلاً من الدوائر. يمكنك تحميل صورة لتمثيل العلامة واستخدامها في الطبقة بدلاً من “circle”. على سبيل المثال:

   javascriptCopy code
   map.addLayer({
       "id": "singleMarker",
       "type": "symbol",
       "source": "singleMarker",
       "layout": {
           "icon-image": "custom-marker", // اسم الصورة المخصصة
           "icon-size": 0.5 // حجم الصورة
       }
   });
   

2. تحسين الألوان:
   يمكنك تحسين استخدام الألوان وتكوينها بشكل أفضل. يمكنك تحديد لون العلامة باستخدام خصائص GeoJSON، وكذلك تكوين خصائص الرسم لتحقيق تأثيرات بصرية مختلفة.

3. تحسين الواجهة:
   يمكنك أيضًا استخدام Popups لإظهار معلومات إضافية عن العلامات عندما يتم النقر عليها. يمكنك إضافة Popup لكل علامة في GeoJSON وتكوين محتوى الـ Popup حسب الحاجة.

   javascriptCopy code
   map.on('click', 'singleMarker', function (e) {
       var coordinates = e.features[0].geometry.coordinates.slice();
       var description = e.features[0].properties.title;
   
       new mapboxgl.Popup()
           .setLngLat(coordinates)
           .setHTML(description)
           .addTo(map);
   });
   

4. تحسين التفاعلية:
   يمكنك جعل الخريطة تفاعلية أكثر عن طريق تمكين التفاعل في الخيارات والسماح للتحرك والتكبير/التصغير.

   javascriptCopy code
   var map = new mapboxgl.Map({
       container: 'map',
       style: "mapbox://styles/smickie/cikb3fhvi0063cekqns0pk1f1",
       center: [-30.50, 40],
       zoom: 2,
       interactive: true // جعل الخريطة تفاعلية
   });
   

باستخدام هذه الأفكار، يمكنك تحسين وتخصيص تجربة العلامات على الخريطة الخاصة بك بشكل أفضل. لا تتردد في استكشاف تفاصيل Mapbox GL JS documentation للمزيد من الخيارات والإعدادات المتقدمة.