例

同じGeoJSON ソースからポリゴンレイヤーと円レイヤーを追加します。

three.js のカスタムスタイルレイヤーでマップに3D モデルを追加します。

塗りつぶし・立体化・高さのペイントプロパティを持つ 3D 屋内マップを作成します。

line-gradient paint propertyとexpressionを使用して、線の始点からの距離を視覚化します。

塗りつぶしレイヤータイプを使用してポリゴンのスタイルを指定します。

GeoJSON コレクションからマップにポイントを描きます。

マップにGeoJSONラインを追加します。

最初の座標を LngLatBounds に引き継ぎ、最後の座標を含むようにチェーン拡張することで、LineString の境界を取得します。

外部Web Map Service レイヤーをマップに追加します。

マップを初期化する際は、アトリビューション（属性）を左上に配置します。

マップ上で UI ハンドラーを有効または無効にします。

カスタムスタイルレイヤーでカスタム WebGLコンテンツをレンダリングします。

この上級例では、HTMLマーカーとカスタム プロパティ式を使用した Mapbox GL JS クラスタリングを使用します。Mapbox GL layerの代わりにクラスターにHTML、または、SVG を使用するには、マップビューの変更中に継続的に更新されるマーカーオブジェクトのプールとクラスター化されたソースを手動で同期する必要があります。

Mapbox GL JS の機能で、ポイントをクラスターとして視覚化します。

マップをクリックして、queryRenderedFeature でフィーチャを問い合わせます。

ユーザーがシンボルをクリックすると、より詳細な情報を含んだポップアップを表示します。Mapbox Streets styleで使用するMaki Symbolセットからシンボルを作成します。

ユーザーがポリゴンをクリックすると、詳細情報を含むポップアップが表示されます。

ゲーム感覚でマップ上を移動します。

Mapillaryのベクターデータをレンダリングします。

Mapbox Geocoding APIのmapbox-gl-geocoderコントロール機能を使って、場所を検索します。ジオコーディングクエリパラメータと結果への影響については当社のSearch Playgroundをご確認ください。

mapbox-gl-geocoder をローカライズして UI 言語を設定し、その言語でより関連する検索結果が得られるようにします。

mapbox-gl-geocoder のカメラアニメーションオプションを使用して、結果が選択されたときにカスタムアニメーションを作成します。

mapbox-gl-geocoderのカスタムhtmlレンダリング機能を使用して、ドロップダウンメニューの表示方法をカスタマイズします。

Mapbox Geocoding APIのmapbox-gl-geocoderコントロール機能を使って、インプットとして入力された地理座標を受け取り、場所を検索します。

Mapbox Geocoding APIのmapbox-gl-geocoderコントロール機能を使って、結果領域を制限しながら、リージョンを検索します。

mapbox-gl-geocode結果の位置のマーカーを設定しましょう。

Mapbox Geocoding APIに添えられたマップ外要素のmapbox-gl-geocoderコントロール機能から場所を検索します。

2014 年の国勢調査データを使用して、ズームレベルに従い州または郡の人口を表示します。

補間式を使用して建物レイヤーをease-inし、色から色への変化をスムーズにします。

スクロールでマップを拡大しないようにします。

ストーリーをスクロールすると、チャプターの場所にマップが移動します。

範囲スライダをドラッグして、2015 年のマグニチュード 5.9 を超える地震を視覚化します。

circle-color（円の色）データ式を使用したビジュアライゼーションを作成。

line-color（線の色）データ式を使用したビジュアライゼーションの作成。

アイコン名をテキスト入力し、シンボルをフィルターします。

ポイントをマップ上の新しい位置にドラッグし、その座標をディスプレイに設定します。

マーカーをマップ上の新しい場所にドラッグし、その座標をディスプレイに設定します。

Shift キーを押したまま、マップをドラッグし、queryRenderedFeatureからフィーチャーを問い合わせます。

ヒートマップレイヤーで、位置別に地震頻度を視覚化します。

マップオプションは CameraOptionsを拡張するので、中央とズーム以外も設定できます。

データを更新して、マップ上の既存フィーチャをリアルタイムで変更します。

ローカルJSON データをベクター・タイル ジオメトリと結合して、コロプレスを設定します。

ベクターソースをマップに追加します。

setPaintProperty を使用してレイヤーの塗りつぶし色を変更します。

マップにポップアップを追加します。

イベントとフィーチャーを使用して、フィーチャーごとのホバー効果を作成します。

ユーザーがシンボルにカーソルを合わせると、詳細情報を含むポップアップを表示します。

ポップアップをマーカーに添付し、クリック時に表示します。

マーカーを使用して、カスタム アイコンをマップに追加します。

各フレームの位置をアップデートして、マーカーの位置をアニメーション化します。

queryRenderedFeature を使用して、ホバーオーバーマップ要素のプロパティを表示します。

ピクセル・緯度・経度の座標を使用して、ホバー時のマウス位置を表示します。

別のマップスタイルに切り替えます。

ズームと回転コントロールを使用して、マップ ナビゲーションをより分かりやすくします。

Canvasで実行時に生成されたマップにアニメーションアイコンを追加します。

maxBounds を設定して、マップが別の場所にパンさできないようにします。

ニューヨーク市の各自治区を自動再生する。

setLayoutProperty で言語を切り替えます。詳しくは、mapbox-gl-languageプラグインを参照してください。

ベクター・タイルレイヤー内のクエリ表示可能なフィーチャとテキスト入力からフィルターし、マップを移動します。

ユーザーがマップをローテーションできないよう設定します。

カスタムマップボックスでホストされるスタイルを使用する。

fitBounds を使用すると、ピクセルサイズに関係なく、マップの指定領域をビューに表示します。

Mapbox GL JSを使用して HTML 要素内のマップを初期化します。

2 つのマップ間をスワイプして同期するには、mapbox-gl-compare を使用します。

GeolocateControlでユーザーの位置情報を取得し、マップ上での現在位置を追跡します。

第三者のラスタ・ソースをマップに追加。

ラベルの大文字・小文字式を使用して、ラベルの大文字と小文字を変更します。

addLayer の 2 番目の引数を使用すると、より正確に行うことができます。

リアルタイムGeoJSONデータ ストリームを使用して、マップ上のシンボルを移動します。

データ内のプロパティ値に基づきシンボルのセットをフィルター処理します。

書式を使用して、英語とローカル言語の両方で国ラベルを表示します。

Turfを使うことで、ラインの距離に沿ってポイントをスムーズにアニメーション化出来ます。

Mapbox-gl directionsプラグインで、Mapbox Directions API の結果を表示します。マップをクリックし、現在地と目的地を追加します。

範囲スライダーをドラッグして、マップ上にあるラスタレイヤーの不透明度を調整します。

異なるデータセットを表示するカスタムレイヤースイッチャーを作成します。

中国語/日本語/韓国語 (CJK) の表意文字とあらかじめ構成されたハングル音は大量のフォントデータをダウンロードする必要があり、マップの読み込み時間が大幅に遅くなる可能性があります。

jumpTo機能を使用して、複数の場所を表示します。

一連の画像ソースを使用してアニメーションを作成します。

実行時に不足しているアイコンを動的に生成し、マップに追加します。

変数バインディング式で、人口密度を計算および表示します。

現在ビューと全画面表示モードを切り替えます。

Mapbox Geocoding APIのmapbox-gl-geocoderコントロール機能を使って場所を検索し、ローカルデータソースまたは関数からの結果を補完します。この場合はテキスト入力とシカゴパークの名前を一致させます。

衛星写真データ（ラスタ型）の上に動画を追加する。再生・一時停止するにはマップをクリックしてください。

text-variable-anchorで、優先度の高いラベルがマップ上に残るように位置をシフトできるようにします。

mapbox-gl-rtl-textプラグインを使用して、右から左に記述するアラビア語またはヘブライ語に対応します。Mapbox Studio はデフォルトでこのプラグインを読み込みます。

runtime styling API を Web Audio API と接続し、3D 建物が周囲環境に適応するマップを作成します。

フォワードジオコーダーで、その場所の地名または住所を使ってマーカーを追加します。

flyOptionsでflyToを使用します。

flyToを使用して、位置間をスムーズに移動します。

Mapbox GLの対応ブラウザを確認します。

立体化機能で、建物の高さを 3D で表示します。

mapbox-gl-drawでポリゴンを描き、Turf.jsで面積を平方メートル単位で計算します。

3 次ベジェ曲線式を持つ補間式を使用して、水深測量データを設定します。

各フレームの GeoJSON ソースを更新して、ポイントの位置をアニメーション化します。

実行時に生成されたアイコンをマップに追加します。

レーダー気象画像オーバーレイを持つダークベクターベースレイヤー。

worldview値を使用して、マップの対象ユーザーに基づいて管理バウンダリーを調整します。この例では、worldview変数内のワールドビューオプションを確認できます。次のとおりです。

各フレームの GeoJSON ソースを更新して、線をアニメーション化します。

衛星ラスタ・ベースレイヤー。

マップ上のポイントをクリックして、turf.lineDistanceから距離を測定する線を作成します。

ラスタ型陰影処理をマップに追加します。

インタラクティブの設定: 静的マップの作成はオフになっています。

郡にカーソルを合わせると、同じ名前を持つ郡を強調表示します。