Cách tạo kiểu bản đồ thương hiệu tùy chỉnh: chế độ tối

Mọi bản đồ bạn từng thấy trên ứng dụng của đối thủ đều sử dụng cùng một style mặc định. Các đường màu be chung chung, nước màu teal trung tính, các biểu tượng POI lộn xộn tranh sự chú ý với UI của bạn - đây là những mặc định phổ quát, được thiết kế để không làm mếch lòng ai và không làm hài lòng ai. Chúng truyền đạt một điều rõ ràng: sản phẩm này đang sử dụng thư viện bản đồ, không sở hữu trải nghiệm bản đồ của mình.

Tạo kiểu bản đồ tùy chỉnh thay đổi điều đó. Bản đồ chế độ tối trên bảng điều khiển logistics, mạng đường màu xanh thương hiệu trên ứng dụng bất động sản, kiểu tối giản sạch sẽ với logo của bạn ở nơi watermark phân quyền từng xuất hiện - đây là những chi tiết nâng một công cụ lên thành một sản phẩm.

Hướng dẫn này đi qua Mapbox Style Specification được triển khai bởi MapAtlas, từ cấu trúc của style JSON đến một toggle sáng/tối hoàn chỉnh trong React. Bạn không cần kinh nghiệm GIS. Bạn cần thoải mái với JSON và JavaScript.

Nếu bạn chưa thiết lập bản đồ cơ bản, hãy bắt đầu với Cách Thêm Bản Đồ Tương Tác Vào Website trước, sau đó quay lại đây để tạo kiểu.

Tại Sao Style Bản Đồ Mặc Định Trông Chung Chung

Style mặc định của nhà cung cấp tile được thiết kế để phổ quát dễ đọc cho đối tượng rộng nhất có thể, trong ngữ cảnh rộng nhất có thể. Nó ưu tiên mật độ thông tin hơn ý kiến thẩm mỹ. Đường phải hiển thị. Nhãn cần tương phản. Biểu tượng POI cần nhận diện được.

Không mục tiêu nào trong số đó phù hợp với mục tiêu sản phẩm của bạn. Ứng dụng của bạn có thể quan tâm đến một tập hợp nhỏ những gì có trên bản đồ - tuyến đường giao hàng, vị trí bất động sản, cơ sở chăm sóc sức khỏe - và mọi thứ khác đều là nhiễu hình ảnh.

Tạo kiểu tùy chỉnh cho phép bạn loại bỏ những gì không cần, nhấn mạnh những gì cần, và đảm bảo bản đồ đọc như một phần sản phẩm của bạn thay vì widget bên thứ ba được thả vào.

Hiểu Style Specification

Một style MapAtlas là một tài liệu JSON với năm phần chính:

{
  "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 - nơi dữ liệu bản đồ đến (các endpoint vector tile MapAtlas)
• glyphs - nơi tải file font để render nhãn
• sprite - nơi tải hình ảnh biểu tượng cho các marker POI
• layers - danh sách có thứ tự các lớp hình ảnh, mỗi lớp với thuộc tính paint và layout

Mảng layers là nơi bạn dành hầu hết thời gian. Mỗi lớp chỉ định loại dữ liệu (fill, line, symbol, circle, fill-extrusion), các feature nguồn nào cần vẽ và cách tô màu chúng.

Đây là style tối thiểu nhưng hoàn chỉnh render một cơ sở vector tile:

{
  "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" }
    }
  ]
}

Điều này render một canvas trống theo màu nền bạn chọn. Từ đây bạn thêm các lớp cho nước, sử dụng đất, đường, tòa nhà và nhãn.

Chế Độ Tối: Thay Đổi Màu Sắc Cốt Lõi

Bản đồ chế độ tối không chỉ là hình ảnh raster bị đảo ngược. Đó là một bộ thuộc tính paint hoàn toàn khác được áp dụng cho cùng hình học vector. Đây là một trong những lý do cốt lõi tại sao vector tile tồn tại - một tile, vô số cách diễn giải hình ảnh.

Các màu sắc chính cần cập nhật cho giao diện tối:

Đây là cách áp dụng điều này trong một lớp style:

{
  "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]
  }
}

Biểu thức interpolate trong line-width thay đổi độ rộng đường dựa trên mức zoom - hẹp ở zoom thấp, rộng hơn khi phóng to. Đây là tạo kiểu dựa trên dữ liệu mà không cần bất kỳ yêu cầu mạng bổ sung nào.

Áp Dụng Màu Sắc Thương Hiệu

Hầu hết hệ thống thiết kế định nghĩa màu chính (ví dụ: #97C70A), màu phụ và bảng màu trung tính. Bản đồ nên sử dụng cùng các giá trị này, không phải xấp xỉ chúng.

Nhắm vào các lớp này để áp dụng màu thương hiệu:

Đường như các yếu tố thương hiệu. Nếu màu thương hiệu của bạn đủ sinh động, hãy sử dụng nó cho các đường chính hoặc các tuyến đường được làm nổi bật:

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

Marker POI tùy chỉnh. Thay thế các biểu tượng sprite mặc định bằng của riêng bạn bằng cách lưu trữ sprite sheet tùy chỉnh và cập nhật URL sprite. Sau đó tham chiếu các biểu tượng của bạn trong các lớp 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
  }
}

Font Tùy Chỉnh Cho Nhãn Bản Đồ

Font nhãn bản đồ mặc định là chung chung. Nếu thương hiệu của bạn sử dụng Inter, Roboto hoặc một kiểu chữ tùy chỉnh, bạn có thể sử dụng nó cho nhãn bản đồ.

MapAtlas phục vụ glyphs từ endpoint glyph riêng của mình, hỗ trợ định dạng Mapbox glyph chuẩn. Để sử dụng font tùy chỉnh:

1. Tạo file glyph .pbf từ kiểu chữ của bạn bằng công cụ như fontnik.
2. Lưu trữ file glyph trên CDN hoặc server của riêng bạn.
3. Cập nhật trường glyphs trong style JSON:

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

4. Tham chiếu font trong thuộc tính text-font của bất kỳ lớp symbol nào:

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

Luôn cung cấp font dự phòng (Noto Sans bao gồm các ký tự Unicode mà font chính của bạn có thể không bao gồm). Renderer sử dụng font đầu tiên trong mảng chứa glyph cho mỗi ký tự.

Xóa Watermark Và Attribution

MapAtlas cho phép triển khai white-label đầy đủ. Bạn có thể xóa logo MapAtlas hoàn toàn khỏi bản đồ.

Trong SDK, attribution được xử lý bởi một control bạn có thể vô hiệu hóa:

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
});

Nếu bạn muốn giữ attribution nhưng tạo kiểu để phù hợp với UI của mình, hãy ẩn control mặc định và thêm của riêng bạn:

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

Điều này thay thế branding bằng attribution tối giản, tuân thủ pháp luật tôn trọng giấy phép OpenStreetMap trong khi phù hợp với UI của bạn. Không giống như Google Maps, yêu cầu logo của nó vẫn hiển thị mọi lúc bất kể gói của bạn, MapAtlas cung cấp cho bạn quyền kiểm soát đầy đủ.

Toggle Giao Diện Sáng/Tối Trong React

Đây là một component React hoàn chỉnh quản lý bản đồ với toggle sáng/tối, sử dụng CSS custom properties để giữ giao diện đồng bộ với phần còn lại của UI:

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>
  );
}

Lệnh gọi setStyle render lại bản đồ với bảng màu mới. Dữ liệu tile đã trong cache không được tải lại - chỉ có cách diễn giải hình ảnh thay đổi.

Lưu Trữ Style JSON Tùy Chỉnh

Để kiểm soát đầy đủ, hãy lưu trữ style JSON của bạn dưới dạng file tĩnh trên CDN hoặc S3 bucket. Điều này cho phép bạn:

• Kiểm soát phiên bản style của bạn cùng với code ứng dụng.
• Cập nhật thiết kế hình ảnh mà không cần triển khai lại ứng dụng (chỉ cần cập nhật JSON được lưu trữ).
• Sử dụng các style khác nhau cho các môi trường khác nhau (preview vs. production).

Tải style được lưu trữ tại runtime:

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

Ràng buộc duy nhất là CORS: style JSON phải được phục vụ với Access-Control-Allow-Origin: * (hoặc domain cụ thể của bạn) để trình duyệt có thể tải nó cross-origin.

Quy Trình Phát Triển Style

Cách nhanh nhất để xây dựng style tùy chỉnh là lặp lại - xem thay đổi theo thời gian thực mà không cần viết lại code.

1. Bắt đầu với style JSON cơ sở MapAtlas làm nền tảng. Tải về bằng cách fetch https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY.
2. Chỉnh sửa JSON trong editor, quan sát lớp nào ảnh hưởng đến yếu tố hình ảnh nào.
3. Tải lại bản đồ với style JSON đã sửa đổi để xem kết quả.
4. Sau khi ổn định, commit style JSON vào repository và lưu trữ trên CDN của bạn.

Để tùy chỉnh sâu hơn, hãy xem tài liệu Map Visualization & Styling để biết tham chiếu lớp đầy đủ, loại thuộc tính paint và cú pháp biểu thức.

Và để hiểu kiến trúc cơ bản về lý do tại sao vector tile làm cho tất cả điều này có thể, Vector Tiles vs. Raster Tiles giải thích chi tiết pipeline rendering.

Tóm Tắt

Tạo kiểu bản đồ tùy chỉnh không phải là xa xỉ - đó là sự khác biệt giữa bản đồ cảm thấy như widget bên thứ ba và bản đồ cảm thấy được xây dựng cho sản phẩm của bạn. Với MapAtlas:

• Style specification là JSON chuẩn tương thích với công cụ Mapbox GL JS.
• Chế độ tối là một lần hoán đổi style JSON, không phải tile set mới hay cấu hình server.
• Màu thương hiệu áp dụng cho đường, nhãn và biểu tượng POI thông qua thuộc tính paint.
• Font tùy chỉnh tải từ bất kỳ endpoint glyph nào bạn kiểm soát.
• Watermark và attribution có thể cấu hình đầy đủ - white-label được hỗ trợ trên tất cả các gói trả phí.
• Toàn bộ style có thể toggle tại runtime mà không cần tải lại trang.

Bắt đầu xây dựng bản đồ thương hiệu của bạn ngay hôm nay. Đăng ký API key MapAtlas miễn phí và tải style JSON cơ sở làm điểm khởi đầu. Style tùy chỉnh đầu tiên mất khoảng 30 phút để hoàn thiện - các lần lặp sau mất vài phút.