😸

Mapbox Newsletter WEEKLY TIPSの解説 -「生成アイコンをマップに追加」

OttyLab

2024/07/29に公開

はじめに

この記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「生成アイコンをマップに追加」についての解説です。このサンプルではMap#loadImageおよびMap#addImageの使い方について例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。

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

コードを確認

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

日本語サイト

英語サイト

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

HTML/CSS

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

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

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

Mapの作成

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

const map = new mapboxgl.Map({
  container: 'map', // container ID
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: 'mapbox://styles/mapbox/dark-v11', // style URL
  zoom: 10, // starting zoom
  center: [-77.432, 25.0306] // starting position
});

loadイベント

画像取得後の後続処理（addImage, addSource, addLayer）はスタイルの読み込み後に実行される必要があります。そこで、loadイベント(map.on('load', () => {})の中身)で以降の処理を記述しています。

画像の取得

Map#loadImageを使って画像を取得します。第1引数が画像のURL、第2引数が画像取得後に呼ばれるコールバック関数です。コールバック関数の第1引数がエラー情報、第2引数が画像データです。

map.loadImage(
  'https://docs.mapbox.com/mapbox-gl-js/assets/cat.png',
  (error, image) => {
...中略...
  }
);

fetchを用いても同様の処理は記述できますが、Map#loadImageはキューイングやImageBitmapへの変換処理を行ってくれるので便利です。

ちなみに、fetchを使った場合は以下のような処理になります。

fetch('https://docs.mapbox.com/mapbox-gl-js/assets/cat.png')
    .then((res) => {
        return res.blob();
    })
    .then(data => {
        return createImageBitmap(data);
    })
    .then(img => {
        // Add the image to the map style.
        map.addImage('cat', img);
...以下略...

画像の登録

Map#addImageを使用します。第1引数がid、第2引数が画像です。この処理を行うことで初めてGL内部で画像が使用できます。

map.addImage('cat', image);

ソースの作成

画像を表示する位置を指定するため、Pointデータを用いてGeoJSONソースを作成します。

map.addSource('point', {
  'type': 'geojson',
  'data': {
    'type': 'FeatureCollection',
    'features': [
      {
        'type': 'Feature',
        'geometry': {
          'type': 'Point',
          'coordinates': [-77.4144, 25.0759]
        }
      }
    ]
  }
});

レイヤーの作成

Symbolレイヤーを作成し、icon-imageとしてMap#addImageで定義したidを指定します。

map.addLayer({
  'id': 'points',
  'type': 'symbol',
  'source': 'point', // reference the data source
  'layout': {
    'icon-image': 'cat', // reference the image
    'icon-size': 0.25
  }
});