كيفية تصميم خريطة ذات علامة تجارية مخصصة (الوضع الداكن، الالوان، بدون علامات مائية)

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

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

يستعرض هذا البرنامج التعليمي مواصفات Mapbox Style كما طُبقت في MapAtlas، من بنية JSON للاسلوب وصولا الى مفتاح تبديل كامل بين الوضع الفاتح والداكن في React. لا تحتاج خبرة GIS. تحتاج فقط الى معرفة مريحة بـ JSON وJavaScript.

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

لماذا تبدو اساليب الخريطة الافتراضية عامة

اسلوب مزود التايلز الافتراضي مصمم ليكون قابلا للقراءة بشكل شامل لأوسع جمهور ممكن، في أوسع سياق ممكن. يعطي الاولوية لكثافة المعلومات على الرأي الجمالي. الطرق يجب ان تكون مرئية. التسميات يجب ان تتباين. أيقونات POI يجب ان تكون مميزة.

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

التصميم المخصص يتيح لك قمع ما لا تحتاجه، تأكيد ما تحتاجه، وضمان ان الخريطة تُقرأ كجزء من منتجك لا كأداة مضافة من طرف ثالث.

فهم مواصفات الاسلوب

اسلوب MapAtlas هو مستند JSON بخمسة أقسام رئيسية:

{
  "version": 8,
  "name": "My Brand Style",
  "sources": { ... },
  "glyphs": "https://tiles.mapatlas.eu/fonts/{fontstack}/{range}.pbf?key=YOUR_API_KEY",
  "sprite": "https://tiles.mapatlas.eu/sprites/basic?key=YOUR_API_KEY",
  "layers": [ ... ]
}

• sources: مصدر بيانات الخريطة (نقاط نهاية التايلز المتجهة لـ MapAtlas)
• glyphs: مكان تحميل ملفات الخطوط لرسم التسميات
• sprite: مكان تحميل صور الأيقونات لعلامات POI
• layers: القائمة المرتبة للطبقات البصرية، كل منها بخصائص paint وlayout

مصفوفة layers هي حيث تقضي معظم وقتك. كل طبقة تحدد نوع البيانات (fill أو line أو symbol أو circle أو fill-extrusion)، أي ميزات المصدر تُرسم، وكيف تُلوَّن.

هنا اسلوب بسيط لكن كامل يعرض قاعدة تايلز متجهة:

{
  "version": 8,
  "name": "Brand Base",
  "sources": {
    "mapatlas": {
      "type": "vector",
      "tiles": ["https://tiles.mapatlas.eu/v1/tiles/{z}/{x}/{y}.mvt?key=YOUR_API_KEY"],
      "minzoom": 0,
      "maxzoom": 14
    }
  },
  "glyphs": "https://tiles.mapatlas.eu/fonts/{fontstack}/{range}.pbf?key=YOUR_API_KEY",
  "sprite": "https://tiles.mapatlas.eu/sprites/basic?key=YOUR_API_KEY",
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": { "background-color": "#f5f0eb" }
    }
  ]
}

هذا يعرض لوحة فارغة بلون الخلفية الذي تختاره. من هنا تضيف طبقات للمياه، واستخدام الأراضي، والطرق، والمباني، والتسميات.

الوضع الداكن: تغيير الألوان الأساسية

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

الألوان الرئيسية للتحديث لثيم داكن:

هكذا تطبق هذا في طبقة اسلوب:

{
  "id": "water",
  "type": "fill",
  "source": "mapatlas",
  "source-layer": "water",
  "paint": {
    "fill-color": "#0d3b66",
    "fill-opacity": 1
  }
}

{
  "id": "road-major",
  "type": "line",
  "source": "mapatlas",
  "source-layer": "transportation",
  "filter": ["==", "class", "primary"],
  "layout": {
    "line-join": "round",
    "line-cap": "round"
  },
  "paint": {
    "line-color": "#3a3a5c",
    "line-width": ["interpolate", ["linear"], ["zoom"], 10, 1, 16, 4]
  }
}

يقيس تعبير interpolate في line-width عرض الطريق استنادا الى مستوى التكبير، ضيق عند التكبير المنخفض، أوسع عند التكبير. هذا هو التصميم المدفوع بالبيانات دون أي طلبات شبكة إضافية.

تطبيق ألوان العلامة التجارية

تحدد معظم أنظمة التصميم لونا رئيسيا (مثلا #97C70A)، ولونا ثانويا، ولوحة ألوان محايدة. يجب ان تستخدم الخريطة هذه القيم ذاتها، لا تقريباتها.

استهدف هذه الطبقات لتطبيق ألوان العلامة التجارية:

الطرق كعناصر للعلامة التجارية. اذا كان لون علامتك التجارية زاهيا بما يكفي، استخدمه للطرق الرئيسية او المسارات المميزة:

{
  "id": "road-highlighted",
  "type": "line",
  "source": "mapatlas",
  "source-layer": "transportation",
  "filter": ["==", "class", "primary"],
  "paint": {
    "line-color": "#97C70A",
    "line-width": 3,
    "line-opacity": 0.8
  }
}

علامات POI المخصصة. استبدل أيقونات sprite الافتراضية بأيقوناتك الخاصة عن طريق استضافة صفحة sprite مخصصة وتحديث رابط sprite. ثم أشر الى أيقوناتك في طبقات symbol:

{
  "id": "brand-poi",
  "type": "symbol",
  "source": "mapatlas",
  "source-layer": "poi",
  "layout": {
    "icon-image": "brand-pin",
    "icon-size": 1.2,
    "text-field": ["get", "name"],
    "text-font": ["Inter Bold", "Noto Sans Regular"],
    "text-size": 12,
    "text-offset": [0, 1.5],
    "text-anchor": "top"
  },
  "paint": {
    "text-color": "#97C70A",
    "text-halo-color": "#1a1a2e",
    "text-halo-width": 1
  }
}

خطوط مخصصة لتسميات الخريطة

خطوط تسمية الخريطة الافتراضية عامة. اذا كانت علامتك التجارية تستخدم Inter أو Roboto أو خطا مخصصا، يمكنك استخدامه لتسميات الخريطة أيضا.

تقدم MapAtlas ملفات glyphs من نقطة نهاية glyphs الخاصة بها، التي تدعم تنسيق Mapbox glyph القياسي. لاستخدام خط مخصص:

1. أنشئ ملفات .pbf من خطك باستخدام أداة مثل fontnik.
2. استضف ملفات glyph على CDN أو خادمك الخاص.
3. حدث حقل glyphs في style JSON:

{
  "glyphs": "https://your-cdn.com/fonts/{fontstack}/{range}.pbf"
}

4. أشر الى الخط في خاصية text-font لأي طبقة symbol:

"text-font": ["Inter Bold", "Noto Sans Regular"]

دائما أضف خطا احتياطيا (Noto Sans يغطي أحرف Unicode التي قد لا يشملها خطك الرئيسي). يستخدم المحرك أول خط في المصفوفة يحتوي على رمز لكل حرف.

ازالة العلامات المائية والنسب

تتيح MapAtlas النشر الكامل بعلامة تجارية بيضاء. يمكنك ازالة شعار MapAtlas من الخريطة كليا.

في SDK، يُعالج النسب بواسطة عنصر تحكم يمكن تعطيله:

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
  center: [4.9041, 52.3676],
  zoom: 12,
  attributionControl: false,  // Remove the default attribution control
});

اذا اردت الاحتفاظ بالنسب لكن بتصميم يتناسب مع واجهتك، اخفِ عنصر التحكم الافتراضي وأضف عنصرك الخاص:

map.addControl(
  new mapmetricsgl.AttributionControl({
    customAttribution: 'Map data © OpenStreetMap contributors',
    compact: true,
  }),
  'bottom-left'
);

هذا يستبدل العلامة التجارية بنسب بسيط ومتوافق قانونيا يحترم رخصة OpenStreetMap مع مطابقة واجهتك. على عكس Google Maps الذي يشترط بقاء شعاره مرئيا في جميع الأوقات بغض النظر عن خطتك، تمنحك MapAtlas التحكم الكامل.

مفتاح تبديل الثيم الفاتح/الداكن في React

هنا مكون React كامل يدير خريطة مع مفتاح تبديل فاتح/داكن، باستخدام CSS custom properties لإبقاء الثيم متزامنا مع بقية واجهتك:

import { useEffect, useRef, useState } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const STYLES = {
  light: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
  dark:  'https://tiles.mapatlas.eu/styles/dark/style.json?key=YOUR_API_KEY',
};

export function BrandedMap({ center = [4.9041, 52.3676], zoom = 12 }) {
  const containerRef = useRef(null);
  const mapRef       = useRef(null);
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    const map = new mapmetricsgl.Map({
      container:        containerRef.current,
      style:            STYLES.light,
      center,
      zoom,
      attributionControl: false,
    });

    map.addControl(
      new mapmetricsgl.AttributionControl({ compact: true }),
      'bottom-left'
    );

    mapRef.current = map;
    return () => map.remove();
  }, []);

  useEffect(() => {
    if (mapRef.current) {
      mapRef.current.setStyle(STYLES[theme]);
    }
  }, [theme]);

  return (
    <div style={{ position: 'relative' }}>
      <div ref={containerRef} style={{ width: '100%', height: '500px' }} />
      <button
        onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}
        style={{
          position: 'absolute',
          top: 12,
          right: 12,
          padding: '8px 16px',
          background: theme === 'dark' ? '#ffffff' : '#1a1a2e',
          color:      theme === 'dark' ? '#1a1a2e' : '#ffffff',
          border: 'none',
          borderRadius: 6,
          cursor: 'pointer',
          zIndex: 1,
        }}
      >
        {theme === 'light' ? 'Dark mode' : 'Light mode'}
      </button>
    </div>
  );
}

يُعيد استدعاء setStyle رسم الخريطة بنظام الألوان الجديد. بيانات التايلز المخزنة مؤقتا لا تُجلب مجددا، يتغير التفسير البصري فقط.

استضافة style JSON مخصص

للتحكم الكامل، استضف style JSON كملف ثابت على CDN أو دلو S3 الخاص بك. هذا يتيح لك:

• التحكم في الإصدارات مع اسلوبك جنبا الى جنب مع كود التطبيق.
• تحديث التصميم البصري دون إعادة نشر التطبيق (فقط حدث JSON المستضاف).
• استخدام اساليب مختلفة لبيئات مختلفة (المعاينة مقابل الانتاج).

تحميل اسلوب مستضاف في وقت التشغيل:

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'https://your-cdn.com/styles/brand-dark.json',
  center: [4.9041, 52.3676],
  zoom: 12,
});

القيد الوحيد هو CORS: يجب تقديم style JSON بـ Access-Control-Allow-Origin: * (أو نطاقك المحدد) حتى يتمكن المتصفح من جلبه عبر الأصول.

سير عمل تطوير الاسلوب

أسرع طريقة لبناء اسلوب مخصص هي التكرار، رؤية التغييرات في الوقت الفعلي دون إعادة كتابة الكود.

1. ابدأ بـ MapAtlas base style JSON كأساس. نزله بجلب https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY.
2. عدل JSON في محررك، لاحظ أي طبقة تؤثر على أي عنصر بصري.
3. أعد تحميل الخريطة بـ style JSON المعدل لرؤية النتيجة.
4. بمجرد الاستقرار، أضف style JSON الى مستودعك واستضفه على CDN.

للتخصيص الأعمق، راجع وثائق Map Visualization & Styling للحصول على مرجع الطبقات الكامل وأنواع خصائص paint وصياغة التعبيرات.

اذا كنت قادما من Mapbox وتتساءل عما تغير، راجع Mapbox مقابل MapAtlas: أي Maps API مناسب لمشروعك الأوروبي؟ للمقارنة الجنبية للميزات والتسعير.

وللأساس المعماري لسبب تيسير التايلز المتجهة لكل هذا، يشرح التايلز المتجهة مقابل التايلز النقطية خط أنابيب الرسم بالتفصيل.

خلاصة

التصميم المخصص للخريطة ليس رفاهية، إنه الفرق بين خريطة تبدو كأداة من طرف ثالث وأخرى تبدو كأنها بُنيت خصيصا لمنتجك. مع MapAtlas:

• مواصفات الاسلوب هي JSON قياسي متوافق مع أدوات Mapbox GL JS.
• الوضع الداكن هو تبديل style JSON، ليس مجموعة تايلز جديدة أو تهيئة خادم.
• ألوان العلامة التجارية تُطبق على الطرق والتسميات وأيقونات POI عبر خصائص paint.
• الخطوط المخصصة تُحمَّل من أي نقطة نهاية glyphs تتحكم فيها.
• العلامات المائية والنسب قابلة للتهيئة الكاملة، والعلامة التجارية البيضاء مدعومة في جميع الخطط المدفوعة.
• يمكن تبديل الاسلوب كاملا في وقت التشغيل دون إعادة تحميل الصفحة.

ابدأ ببناء خريطتك ذات العلامة التجارية اليوم. سجل للحصول على مفتاح MapAtlas API مجاني وحمّل base style JSON كنقطة انطلاق. الاسلوب المخصص الأول يستغرق حوالي 30 دقيقة لإتقانه، والتكرارات اللاحقة تستغرق دقائق.