カスタムブランドマップのスタイリング方法: ダークモード、ブランドカラー、透かしなし

競合他社のアプリで見かけるすべてのマップは、同じデフォルトスタイルを使用しています。ベージュ色の一般的な道路、中間色のティール水、UI要素と競合するごちゃごちゃしたPOIアイコン、これらは誰も怒らず、誰も喜ばないように設計された普遍的なデフォルトです。これは1つのことを明確に伝えています。このプロダクトはマップライブラリを使用しており、マップ体験を所有していないということです。

カスタムマップスタイリングはそれを変えます。ロジスティクスダッシュボード上のダークモードマップ、不動産アプリ上のブランド色の道路ネットワーク、帰属表示の透かしがあった場所にあなたのロゴが配置されたクリーンなミニマルスタイル。これらの詳細がツールをプロダクトに格上げします。

このチュートリアルではMapAtlasで実装されたMapboxスタイル仕様を、スタイルJSONの構造からReactの完全なライト/ダークトグルまで説明します。GIS経験は必要ありません。JSONとJavaScriptに慣れていることが必要です。

まだ基本的なマップをセットアップしていない場合は、まずウェブサイトにインタラクティブマップを追加する方法から始めて、その後ここに戻ってスタイリングについて学んでください。

デフォルトマップスタイルが汎用的に見える理由

タイルプロバイダーのデフォルトスタイルは、最も広い視聴者に対して最も広い文脈で普遍的に読みやすくなるように設計されています。情報密度を美的意見よりも優先します。道路は見えている必要があります。ラベルはコントラストが必要です。POIアイコンは認識可能である必要があります。

これらの目標はあなたのプロダクトの目標と一致しません。あなたのアプリはおそらくマップに表示されているもののごく一部、配達ルート、物件の位置、医療施設に関心があり、他のすべては視覚的ノイズです。

カスタムスタイリングを使用すると、不要なものを抑制し、必要なものを強調し、マップがサードパーティのウィジェットではなくあなたのプロダクトの一部として読まれるようにすることができます。

Understanding the Style Specification

A MapAtlas style is a JSON document with five key sections:

{
  "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, where the map data comes from (MapAtlas vector tile endpoints)
• glyphs, where to load font files for label rendering
• sprite, where to load icon images for POI markers
• layers, the ordered list of visual layers, each with paint and layout properties

The layers array is where you spend most of your time. Each layer specifies a data type (fill, line, symbol, circle, fill-extrusion), which source features to draw, and how to paint them.

Here's a minimal but complete style that renders a vector tile base:

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

This renders a blank canvas in your chosen background color. From here you add layers for water, landuse, roads, buildings, and labels.

ダークモード：コアカラーの変更

ダークモードマップは単に反転ラスタ画像ではありません。同じベクタージオメトリに適用される、まったく異なるペイントプロパティのセットです。これはベクトルタイルが存在する主な理由の1つです。1つのタイル、無限の視覚的解釈。

ダークテーマで更新すべき主要な色は次のとおりです。

Here's how to apply this in a style layer:

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

line-widthのinterpolate式は、ズームレベルに基づいて道路幅をスケーリングします。低ズームで狭く、ズームインすると広くなります。これは追加のネットワークリクエストなしのデータドリブンスタイリングです。

ブランドカラーの適用

ほとんどのデザインシステムは、プライマリカラー（例：#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 URLを更新することにより、デフォルトのスプライトアイコンを自分のものに置き換えます。次に、シンボルレイヤーであなたのアイコンを参照します。

{
  "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は独自のグリフエンドポイントからグリフを提供し、標準的なMapboxグリフ形式をサポートしています。カスタムフォントを使用するには：

1. fontnikなどのツールを使用して、タイプフェイスから.pbfグリフファイルを生成します。
2. グリフファイルをCDNまたは独自のサーバーでホストします。
3. スタイルJSONのglyphsフィールドを更新します：

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

4. シンボルレイヤーのtext-fontプロパティでフォントを参照します：

"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,  // デフォルトの帰属表示コントロールを削除します
});

帰属表示を保持したいが、UIに合わせてスタイリングする場合は、デフォルトコントロールを非表示にして、独自のものを追加します：

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

これにより、ブランディングを、UIに合わせながらOpenStreetMapのライセンスを尊重する最小限の法的準拠の帰属表示に置き換えます。プランに関係なくロゴを常に表示する必要があるGoogle Mapsとは異なり、MapAtlasはあなたに完全なコントロールを与えます。

Reactでのライト/ダークテーマトグル

CSS カスタムプロパティを使用してテーマをUIの残りの部分と同期させ、ライト/ダークトグルでマップを管理する完全なReactコンポーネントは次のとおりです：

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呼び出しはマップを新しいカラースキームで再レンダリングします。キャッシュに既にあるタイルデータは再取得されず、視覚的な解釈のみが変わります。

カスタムスタイルJSONのホスティング

完全なコントロールのために、CDNまたはS3バケットに静的ファイルとしてスタイルJSONをホストします。これにより、以下が可能になります：

• アプリケーションコードと一緒にスタイルをバージョンコントロールします。
• アプリケーションを再デプロイせずに視覚的なデザインを更新します（ホストされた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: *（またはあなたの特定のドメイン）で提供される必要があります。ブラウザがクロスオリジンで取得できるようにするためです。

スタイル開発ワークフロー

カスタムスタイルを構築する最速の方法は、反復的であり、コードを書き直すことなくリアルタイムで変更を確認することです。

1. MapAtlasベーススタイルJSONを基盤として始めます。https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEYを取得することでダウンロードします。
2. エディタでJSONを編集し、どのレイヤーがどの視覚要素に影響するかを監視します。
3. 修正されたスタイルJSONでマップを再度読み込んで、結果を確認します。
4. 安定したら、リポジトリにスタイルJSONをコミットして、CDNでホストします。

さらに詳細なカスタマイズについては、マップ可視化とスタイリングドキュメントを確認して、完全なレイヤーリファレンス、ペイントプロパティタイプ、および式の構文を確認してください。

Mapboxから来たのであれば、何が変わったのかを知りたい場合は、Mapbox vs. MapAtlas：EU プロジェクトに適したマップAPIはどちらですか？を参照して、機能と価格の並列比較を確認してください。

ベクトルタイルがすべてを可能にする建築的な基礎については、ベクトルタイル対ラスタータイルがレンダリングパイプラインを詳しく説明しています。

まとめ

カスタムマップスタイリングは贅沢ではなく、サードパーティのウィジェットのように感じるマップと、あなたのプロダクト用に構築されたように感じるマップの違いです。MapAtlasを使用すると：

• スタイル仕様はMapbox GL JSツーリングと互換性のある標準JSONです。
• ダークモードはスタイルJSONスワップであり、新しいタイルセットまたはサーバー設定ではありません。
• ブランドカラーは、ペイントプロパティを通じて道路、ラベル、POIアイコンに適用されます。
• カスタムフォントは、制御するグリフエンドポイントから読み込まれます。
• 透かしと帰属表示は完全に設定可能であり、ホワイトラベルはすべての有料プランでサポートされています。
• スタイル全体は、ページを再度読み込むことなくランタイムで切り替えることができます。

今日、ブランド化されたマップを構築し始めてください。無料のMapAtlas APIキーにサインアップして、ベーススタイルJSONを出発点として読み込みます。最初のカスタムスタイルは約30分で完成し、その後の反復は数分で完成します。