Cara Memberi Gaya Peta dengan Merek Kustom: Mode Gelap, Warna Brand

Setiap peta yang pernah Anda lihat di aplikasi kompetitor menggunakan gaya bawaan yang sama. Jalan berwarna krem generik, air berwarna biru kehijauan standar, ikon POI yang berantakan bersaing dengan antarmuka Anda sendiri, ini semua adalah tampilan bawaan yang dirancang agar tidak menyinggung siapa pun sekaligus tidak memuaskan siapa pun. Semuanya menyampaikan satu hal dengan jelas: produk ini menggunakan library peta, bukan memiliki pengalaman petanya sendiri.

Gaya peta kustom mengubah itu. Peta mode gelap pada dasbor logistik, jaringan jalan berwarna hijau merek pada aplikasi properti, gaya minimalis bersih dengan logo Anda di tempat tanda air atribusi berada, detail-detail inilah yang mengubah sebuah alat menjadi produk.

Tutorial ini membahas Mapbox Style Specification sebagaimana diimplementasikan oleh MapAtlas, mulai dari struktur style JSON hingga toggle light/dark lengkap di React. Anda tidak perlu pengalaman GIS. Anda hanya perlu nyaman dengan JSON dan JavaScript.

Jika Anda belum menyiapkan peta dasar, mulailah dengan Cara Menambahkan Peta Interaktif ke Website Anda terlebih dahulu, lalu kembali ke sini untuk styling.

Mengapa Gaya Peta Bawaan Terlihat Generik

Gaya bawaan penyedia tile dirancang agar dapat dibaca secara universal oleh audiens seluas mungkin, dalam konteks seluas mungkin. Ini mengutamakan kepadatan informasi daripada pendapat estetika. Jalan harus terlihat. Label harus kontras. Ikon POI harus mudah dikenali.

Tidak ada satu pun tujuan itu yang selaras dengan tujuan produk Anda. Aplikasi Anda mungkin hanya peduli pada sebagian kecil dari apa yang ada di peta, rute pengiriman, lokasi properti, fasilitas kesehatan, dan selebihnya adalah kebisingan visual.

Gaya kustom memungkinkan Anda menekan apa yang tidak diperlukan, menonjolkan apa yang dibutuhkan, dan memastikan peta terbaca sebagai bagian dari produk Anda, bukan sebagai widget pihak ketiga yang ditambahkan begitu saja.

Memahami Spesifikasi Style

Sebuah style MapAtlas adalah dokumen JSON dengan lima bagian utama:

{
  "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, dari mana data peta berasal (endpoint tile vektor MapAtlas)
• glyphs, tempat memuat file font untuk rendering label
• sprite, tempat memuat gambar ikon untuk penanda POI
• layers, daftar layer visual yang berurutan, masing-masing dengan properti paint dan layout

Array layers adalah tempat Anda menghabiskan sebagian besar waktu. Setiap layer menentukan tipe data (fill, line, symbol, circle, fill-extrusion), fitur sumber mana yang akan digambar, dan cara memvisualisasikannya.

Berikut style minimal namun lengkap yang merender tile vektor dasar:

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

Ini merender kanvas kosong dengan warna latar belakang pilihan Anda. Dari sini Anda menambahkan layer untuk air, penggunaan lahan, jalan, bangunan, dan label.

Mode Gelap: Mengubah Warna Inti

Peta mode gelap bukanlah gambar raster yang dibalik begitu saja. Ini adalah sekumpulan properti paint yang sepenuhnya berbeda yang diterapkan pada geometri vektor yang sama. Inilah salah satu alasan utama tile vektor ada, satu tile, interpretasi visual tak terbatas.

Warna-warna utama yang perlu diperbarui untuk tema gelap:

Berikut cara menerapkannya dalam layer 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]
  }
}

Ekspresi interpolate pada line-width menskalakan lebar jalan berdasarkan level zoom, sempit pada zoom rendah, lebih lebar saat Anda memperbesar. Ini adalah gaya berbasis data tanpa permintaan jaringan tambahan.

Menerapkan Warna Merek

Sebagian besar sistem desain mendefinisikan warna primer (misalnya #97C70A), warna sekunder, dan palet netral. Peta harus menggunakan nilai-nilai yang sama persis, bukan perkiraan.

Targetkan layer berikut untuk penerapan warna merek:

Jalan sebagai elemen merek. Jika warna merek Anda cukup hidup, gunakan untuk jalan utama atau rute yang disorot:

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

Penanda POI kustom. Ganti ikon sprite bawaan dengan milik Anda sendiri dengan meng-host lembar sprite kustom dan memperbarui URL sprite. Kemudian referensikan ikon Anda dalam layer simbol:

{
  "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 Kustom untuk Label Peta

Font label peta bawaan bersifat generik. Jika merek Anda menggunakan Inter, Roboto, atau tipografi kustom, Anda bisa menggunakannya untuk label peta juga.

MapAtlas menyajikan glyph dari endpoint glyph-nya sendiri, yang mendukung format glyph Mapbox standar. Untuk menggunakan font kustom:

1. Buat file glyph .pbf dari tipografi Anda menggunakan alat seperti fontnik.
2. Host file glyph di CDN atau server Anda sendiri.
3. Perbarui field glyphs dalam style JSON Anda:

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

4. Referensikan font dalam properti text-font layer simbol mana pun:

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

Selalu sediakan font fallback (Noto Sans mencakup karakter Unicode yang mungkin tidak ada dalam font utama Anda). Renderer menggunakan font pertama dalam array yang memiliki glyph untuk setiap karakter.

Menghapus Tanda Air dan Atribusi

MapAtlas memungkinkan deployment white-label penuh. Anda dapat menghapus logo MapAtlas dari peta sepenuhnya.

Dalam SDK, atribusi ditangani oleh kontrol yang dapat Anda nonaktifkan:

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,  // Hapus kontrol atribusi bawaan
});

Jika Anda ingin tetap menyertakan atribusi tetapi menata gayanya agar sesuai UI Anda, sembunyikan kontrol bawaan dan tambahkan milik Anda sendiri:

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

Ini menggantikan branding dengan atribusi minimal yang patuh secara hukum, menghormati lisensi OpenStreetMap sambil sesuai dengan UI Anda. Berbeda dengan Google Maps yang mengharuskan logonya tetap terlihat setiap saat tanpa memandang paket Anda, MapAtlas memberi Anda kendali penuh.

Toggle Tema Light/Dark di React

Berikut komponen React lengkap yang mengelola peta dengan toggle light/dark, menggunakan CSS custom properties untuk menjaga tema tetap sinkron dengan sisa UI Anda:

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

Panggilan setStyle merender ulang peta dengan skema warna baru. Data tile yang sudah ada dalam cache tidak diambil ulang, hanya interpretasi visualnya yang berubah.

Meng-host Style JSON Kustom

Untuk kendali penuh, host style JSON Anda sebagai file statis di CDN atau bucket S3 Anda. Ini memungkinkan Anda:

• Mengontrol versi style bersamaan dengan kode aplikasi Anda.
• Memperbarui desain visual tanpa mendeploy ulang aplikasi (cukup perbarui JSON yang di-host).
• Menggunakan style berbeda untuk lingkungan berbeda (preview vs. produksi).

Muat style yang di-host pada saat runtime:

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

Satu-satunya batasan adalah CORS: style JSON harus disajikan dengan Access-Control-Allow-Origin: * (atau domain spesifik Anda) agar browser dapat mengambilnya lintas origin.

Alur Kerja Pengembangan Style

Cara tercepat untuk membangun style kustom adalah iteratif, melihat perubahan secara real-time tanpa menulis ulang kode.

1. Mulai dengan style dasar MapAtlas JSON sebagai fondasi Anda. Unduh dengan mengambil https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY.
2. Edit JSON di editor Anda, perhatikan layer mana yang memengaruhi elemen visual mana.
3. Muat ulang peta dengan style JSON yang telah dimodifikasi untuk melihat hasilnya.
4. Setelah stabil, commit style JSON ke repositori Anda dan host di CDN Anda.

Untuk kustomisasi lebih mendalam, periksa dokumentasi Visualisasi & Styling Peta untuk referensi layer lengkap, tipe properti paint, dan sintaks ekspresi.

Jika Anda datang dari Mapbox dan bertanya-tanya apa yang berubah, lihat Mapbox vs. MapAtlas: API Maps Mana yang Tepat untuk Proyek EU Anda? untuk perbandingan fitur dan harga secara berdampingan.

Dan untuk dasar arsitektur mengapa tile vektor membuat semua ini mungkin, Tile Vektor vs. Tile Raster menjelaskan pipeline rendering secara detail.

Ringkasan

Gaya peta kustom bukan kemewahan, ini adalah perbedaan antara peta yang terasa seperti widget pihak ketiga dan peta yang terasa dibangun khusus untuk produk Anda. Dengan MapAtlas:

• Spesifikasi style adalah JSON standar yang kompatibel dengan tooling Mapbox GL JS.
• Mode gelap adalah pertukaran style JSON, bukan tile set baru atau konfigurasi server.
• Warna merek diterapkan pada jalan, label, dan ikon POI melalui properti paint.
• Font kustom dimuat dari endpoint glyph mana pun yang Anda kendalikan.
• Tanda air dan atribusi sepenuhnya dapat dikonfigurasi, white-label didukung di semua paket berbayar.
• Seluruh style dapat di-toggle pada saat runtime tanpa memuat ulang halaman.

Mulai membangun peta bermerek Anda hari ini. Daftar kunci API MapAtlas gratis dan muat style JSON dasar sebagai titik awal Anda. Style kustom pertama membutuhkan sekitar 30 menit untuk diselesaikan, iterasi berikutnya hanya membutuhkan beberapa menit.