Mapbox Newsletter WEEKLY TIPSの解説 -「画像を追加」

はじめに

この記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「画像を追加」についての解説です。このサンプルではimageソースの使い方を例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。

以下が本サンプルのデモです。

コードを確認

まずExamplesのコードを見に行きましょう。

日本語サイト

英語サイト

基本的に同じコードですが、英語版はスタイルがMapbox Dark v11にアップグレードされているのでこちらを使用します。Mapbox Dark v10ではデフォルトのプロジェクションがWebメルカトルであるのに対し、Mapbox Dark v11ではGlobe（3D表示された地球）なので、印象がかなり異なります。また、英語版はMapbox GL JS v3が使用されています。

HTML

まずHTMLを見ていきましょう。

以下は地図を表示するエレメントです。

<div id="map"></div>

Mapの作成

JavaScriptのコードを見ていきます。以下のコードはいつも通り、Mapオブジェクトを作成しています。containerで地図を表示するHTMLエレメントのidを指定します。

const map = new mapboxgl.Map({
  container: 'map',
  maxZoom: 5.99,
  minZoom: 4,
  zoom: 5,
  center: [-75.789, 41.874],
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: 'mapbox://styles/mapbox/dark-v11'
});

ソース、レイヤーの作成

loadイベント(map.on('load', () => {})の中身)で1つのソース、1つのレイヤーを追加しています。

まず、radarというIDでソースを作成します。画像を地図上に表示する際にはimageソースを使用します。urlで画像を指定し、coordinatesは時計回りに左上、右上、右下、左下の順に座標を指定します。ここで使用している画像は普通のGIF画像で、座標情報などは含まれていません。

map.addSource('radar', {
  'type': 'image',
  'url': 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
  'coordinates': [
    [-80.425, 46.437],
    [-71.516, 46.437],
    [-71.516, 37.936],
    [-80.425, 37.936]
  ]
});

以下の記事で解説したvideoソースに似ていますね。

次にradar-layerというIDでレイヤーを作成します。画像なのでtypeはraster、sourceはソースのIDを指定します。raster-fade-durationは新しくタイルが読み込まれたときに画像をフェードインする時間を指定します。デフォルトは300msですが、ここでは0msを指定しているのでフェード効果を消しています。

map.addLayer({
  id: 'radar-layer',
  'type': 'raster',
  'source': 'radar',
  'paint': {
      'raster-fade-duration': 0
  }
});

まとめ

普通の画像も、座標を指定することで地図表示表示できることがわかりました。