طراحی نقشه با برند سفارشی: حالت تاریک، رنگ‌های برند و بدون واترمارک

هر نقشه‌ای که در برنامه رقیب‌تان دیده‌اید از همان سبک پیش‌فرض استفاده می‌کند. جاده‌های بژ بی‌روح، آب سبزی‌مایل متوسط، نماد‌های POI پرشده‌ای که با رابط کاربری شما برای جلب توجه رقابت می‌کنند، این پیش‌فرض‌های جهانی هستند، طراحی‌شده‌اند تا کسی را ناراحت نکنند و کسی را خوشحال نکنند. آن‌ها یک چیز را به‌روشنی بیان می‌کنند: این محصول از کتاب‌خانه نقشه استفاده می‌کند، نه متصاحب تجربه نقشه‌ای.

سبک‌بندی نقشه سفارشی این را تغییر می‌دهد. نقشه حالت تاریک در داشبورد لجستیک، شبکه جاده‌های سبز برند در برنامه املاک، سبکی پاک‌وپوری مینیمالیستی با لوگوی شما جای واترمارک ارجاع، این جزئیات یک ابزار را به محصول ترفیع می‌دهند.

این آموزش مختص Mapbox Style Specification همان‌گونه که توسط MapAtlas پیاده‌سازی شده‌است، از ساختار JSON سبک تا toggle روشن/تاریک کامل در 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: فهرست مرتب لایه‌های بصری، هر یک با ویژگی‌های رنگ‌آمیزی و طرح

آرایه 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" }
    }
  ]
}

این بوم خالی در رنگ پس‌زمینه انتخاب شده‌ی شما رندر می‌کند. از اینجا لایه‌ها را برای آب، landuse، جاده‌ها، ساختمان‌ها، و برچسب‌ها اضافه می‌کنید.

حالت تاریک: تغییر رنگ‌های اساسی

نقشه حالت تاریک صرفاً تصویر رستری معکوس نیست. این مجموعه‌ای کاملاً متفاوت از خصوصیات رنگ‌آمیزی است که بر همان هندسه بردار اعمال می‌شود. این یکی از دلایل اساسی است که کاشی‌های بردار وجود دارند، یک کاشی، تفسیر‌های بصری بی‌نهایت.

رنگ‌های کلیدی برای به‌روز‌رسانی یک تم تاریک:

در اینجا نحوه اعمال این در لایه سبک آمده‌است:

{
  "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 عرض جاده را بر اساس سطح zoom مقیاس می‌کند، باریک در zoom پایین، عریض‌تر هنگامی که بزرگ‌نمایی می‌کنید. این سبک‌بندی مبتنی بر داده بدون درخواست‌های شبکه اضافی است.

اعمال رنگ‌های برند

اکثر سیستم‌های طراحی رنگ اساسی را تعریف می‌کنند (مثلاً #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. سپس نماد‌های خود را در لایه‌های نماد مرجع کنید:

{
  "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 glyphها را از نقطه پایانی خود سرو می‌کند، که فرمت glyph استاندارد Mapbox را پشتیبانی می‌کند. برای استفاده از فونت سفارشی:

۱. فایل‌های .pbf glyph را از قلم خود با استفاده از ابزاری مانند fontnik تولید کنید. ۲. فایل‌های glyph را روی CDN یا سرور خود میزبانی کنید. ۳. فیلد glyphs را در JSON سبک خود به‌روز کنید:

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

۴. فونت را در ویژگی text-font هر لایه نماد مرجع کنید:

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

همیشه فونت بازخورد ارائه دهید (Noto Sans نویسه‌های Unicode را پوشش می‌دهد که فونت اساسی شما ممکن است شامل نشود). رندر کننده از اولین فونت در آرایه که شامل glyph برای هر کاراکتر است استفاده می‌کند.

حذف واترمارک‌ها و ارجاع

MapAtlas استقرار white-label کامل را اجازه می‌دهد. می‌توانید لوگوی 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 کنترل کامل را می‌دهد.

Toggle چراغ/تاریک در React

در اینجا کامپوننت React کاملی که نقشه‌ای را با toggle روشن/تاریک مدیریت می‌کند، با استفاده از ویژگی‌های CSS سفارشی برای نگه‌داشتن تم با بقیه رابط کاربری خود:

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 نقشه را با طرح رنگی جدید مجدداً رندر می‌کند. داده‌های کاشی که از قبل در cache هستند دوباره بارگذاری نمی‌شوند، فقط تفسیر بصری تغییر می‌کند.

میزبانی JSON سبک سفارشی

برای کنترل کامل، JSON سبک خود را به‌عنوان فایل ایستای CDN یا S3 bucket میزبانی کنید. این به شما اجازه می‌دهد:

• نسخه کنترل سبک در کنار کد برنامه خود.
• طراحی بصری را بدون استقرار مجدد برنامه به‌روز کنید (فقط 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 است: JSON سبک باید با Access-Control-Allow-Origin: * (یا دامنه خاص شما) سرو شود تا مرورگر بتواند آن را cross-origin بارگذاری کند.

workflow توسعه سبک

سریع‌ترین روش برای ساخت سبک سفارشی تکراری است، تغییرات را در زمان واقعی بدون بازنویسی کد ببینید.

۱. JSON سبک پایه MapAtlas را به‌عنوان بنیاد خود شروع کنید. با دریافت https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY دانلود کنید. ۲. JSON را در ویرایشگر خود ویرایش کنید، مشاهده کنید که کدام لایه بر کدام عنصر بصری تأثیر می‌گذارد. ۳. نقشه را با JSON سبک اصلاح‌شده خود مجدداً بارگذاری کنید تا نتیجه را ببینید. ۴. پس از اینکه ثابت شد، JSON سبک را به مخزن خود commit کنید و روی CDN میزبانی کنید.

برای سفارشی‌سازی عمیق‌تر، مستندات Map Visualization & Styling را برای مرجع لایه‌ی کامل، نوع‌های ویژگی رنگ‌آمیزی، و نحو عبارت بررسی کنید.

اگر از Mapbox می‌آیید و می‌پرسید چه تغییری کرده‌اید، Mapbox در مقابل MapAtlas: کدام API نقشه برای پروژه EU شما مناسب است؟ مقایسه سمت‌به‌سمت ویژگی‌ها و قیمت‌گذاری را نشان می‌دهد.

و برای بنیاد معماری درباره اینکه چرا کاشی‌های بردار تمام این را ممکن می‌سازند، کاشی‌های بردار در مقابل کاشی‌های raster خط لوله rendering را تفصیل می‌دهد.

خلاصه

سبک‌بندی نقشه سفارشی یک تجمل نیست، تفاوت بین نقشه‌ای است که مانند ابزار طرف ثالث احساس می‌شود و یکی که برای محصول شما ساخته شده‌است. با MapAtlas:

• مشخصات سبک JSON استاندارد است و با ابزارهای Mapbox GL JS سازگار است.
• حالت تاریک تبدیل JSON سبک است، نه مجموعه کاشی جدید یا پیکربندی سرور.
• رنگ‌های برند برای جاده‌ها، برچسب‌ها، و نماد‌های POI از طریق ویژگی‌های رنگ‌آمیزی اعمال می‌شوند.
• فونت‌های سفارشی از هر نقطه پایانی glyph که کنترل می‌کنید بارگذاری می‌شوند.
• واترمارک‌ها و ارجاع کاملاً قابل‌تنظیم هستند، white-label در تمام طرح‌های پرداختی پشتیبانی می‌شود.
• کل سبک می‌تواند در زمان اجرا بدون بارگذاری صفحه toggle شود.

امروز شروع به ساخت نقشه برند‌شده خود کنید. برای کلید API رایگان MapAtlas ثبت نام کنید و JSON سبک پایه را به‌عنوان نقطه شروع بارگذاری کنید. اولین سبک سفارشی حدود ۳۰ دقیقه طول می‌کشد، تکرار‌های بعدی دقیقه‌ای طول می‌کشند.