Mapbox Web Maps

Mapbox GL JS は、ダイナミックなレンダリング機能、強力なマップコントロール、大規模なカスタムデータの高速処理により、ウェブ上で最も魅力的なマップ体験を提供します。

製品アップデート

Mapbox における見事な建物のファサードと新たなカラー設定

見出し

Mapbox の最新リリースでは、都市が地面から浮かび上がるように表示され、息をのむような建築的ディテールが再現されます。また、主要な地図要素のすべてをカスタマイズ可能にする新たなカラー設定もMapbox

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

3Dレンダリングのリーダー

見出し

都市の建物、ランドマーク、地形が3Dとダイナミックなライティングで生き生きと浮かび上がります。

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

最高のパフォーマンス

見出し

GL JS は、マップのロード速度を平均で最大 50% 向上させます。

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

開発者フレンドリー

見出し

すぐに使えるベースマップ、充実したドキュメント、100以上のコード例。

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

すぐに始める

クイックスタートサンプルを使って、数分でウェブマップの構築を始めましょう。

let map = new mapboxgl.Map({
    container: 'map',
    center: [2.2940, 48.8598],
    zoom: 15,
    pitch: 60,
    accessToken: '<your_access_token>'
});
let map = new mapboxgl.Map({
    container: 'map',
    center: [2.2940, 48.8598],
    zoom: 15,
    pitch:60,
    accessToken:
'<your_access_token>'
});
クイックスタートの例

リアルタイムレンダリングと最適なパフォーマンス

Mapbox Web レンダラーの高いパフォーマンスで、実行時にマップをスタイリングできます。

ダイナミックでインタラクティブなマップの構築

ライブデータでダイナミックに変化する、リッチでパワフルなマッピング体験を作成できます。ユーザーが操作でき、データ分析や意思決定を支援するマップ機能を構築できます。

開いた瞬間に目を引くウェブサイト

GL JS は、デスクトップとモバイルの両方で、最も詳細で情報量の多いマップを 60 FPS でレンダリングするよう設計されています。リソースの読み込みとタスク配分を最適化することで、高速なロード、スムーズな遷移、そしてより多くの CPU リソースの確保を実現します。

ウェブマップ体験を向上させます

GL JS は、革新的なデザイン、柔軟なコントロール、大規模なカスタムデータの優れたレンダリングを提供します。

3D で空間コンテキストを強化します

Mapbox は 3D をデジタル地図に自然に織り込みます。Mapbox Standard スタイルを使用したり、3D 地形を有効にしたり、Globe View を活用することで、没入感があり正確な地図体験を提供できます。

マップをさらに柔軟にコントロールできます。

星や霧などの大気表現がリアリティを高めます。カメラとアニメーション機能で、あらゆる角度から場所を強調できます。ズームレベルに応じて自然に変化する複数の地図投影から選択でき、どの縮尺でも高い精度を実現します。

大規模データを可視化します

ヒートマップ、クラスタリング、データドリブン式などを使って、インタラクティブマップでこれまでにないデータ表現を実現できます。GL JS は数百万のフィーチャを高速にレンダリングします。

開発時間とリソースを節約します

Mapbox GL JS は、効率的でモダンな開発ツールと高いスケーラビリティを備えたアーキテクチャにより、ウェブ開発者のマップ構築と可視化をサポートします。

開発を簡素化し、機能を強化します

地図機能はウェブとモバイルでシームレスに動作します。さらに、デザインツールや道順・検索向けのクロスプラットフォームプラグインも利用できます。

カスタムデータワークフローの合理化

カスタムマップデータの処理とホスティングにかかる時間とリソースを節約します。あらゆる規模のカスタムデータセットを、迅速かつ低コストで柔軟にマップに統合できます。

データをアップロード

お客様事例

Mapbox GL JS でレンダリングされたインタラクティブマップは、CNN のデータジャーナリストがニュース速報を迅速に可視化するために必要なツールと自信を提供します。

ショーケースを読む

WordPress 用の Mapster プラグインは Mapbox GL JS をシームレスに統合し、WP サイトにカスタムインタラクティブマップを追加する作業を簡素化します。

ショーケースを読む

Varicent にとって、Mapbox GL JS のマップは、ビジネスエンタープライズソフトウェアに組み込まれた状態でも、ダイナミックなテリトリー規則や階層に柔軟に対応できます。

ショーケースを読む

Tomorrow.io は Mapbox GL JS を採用しており、世界中のリアルタイムかつダイナミックな気象データを大量に可視化できます。

ショーケースを読む

ウェブマップリソース

見出し

ウェブマップ構築のための包括的なリソース群。

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

はじめる

見出し

ウェブサイトにカスタムマップを埋め込む。

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

マイグレーションガイド

見出し

GL JS v3にアップグレードするためのリソース。

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

GL JS ドキュメント

見出し

マップをコントロールするすべての方法については、APIリファレンスを参照してください。

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

見出し

サンプルコードでビルドし、機能を試して素早く始められます。

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

ソースコード

見出し

ソースを読み、Issue を提出し、GitHub リポジトリの改善に貢献できます。

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

スタイル・スペック

見出し

地図デザインに利用できるすべてのレイヤー、スタイリングオプション、表現をご確認ください。

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。

さあ、始めましょう

見出し

アカウントを作成するか、専門スタッフにご相談ください

これはレイアウト確認用のダミーテキストです。

これはレイアウト確認用のダミーテキストです。