[小ネタ]Amazon Location Service のマップを日本語表示してみた

#Amazon Location Service

#AWS

大高大輔

2021.06.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！DA(データアナリティクス)事業本部インテグレーション部の大高です。

先日Amazon Location Serviceのマップを、OpenLayersを利用して表示してみました。

表示はできているのですが、一方で地図のシンボルラベルが英語で表示されているのがちょっと気になります。

今回、これを日本語表記に変更する方法がわかったので、まとめてみたいと思います。なお、ほぼ「Mapbox GL JS」の「Vector Layer」表示設定の話になるので、Amazon Location Service自体にはほとんど関係ありません！

表示設定

結論から言うと、先日作成したOpenLayersでの地図表示用スクリプトを以下のように修正しました。ポイントは、mbMap.onceの箇所です。

(snip...)
/**
 * Initialize a map.
 */
async function initializeMap() {
  // load credentials and set them up to refresh
  await credentials.getPromise();

  const mbMap = new mapboxgl.Map({
    container: "map",
    center: center, // initial map centerpoint
    zoom: 10, // initial map zoom
    style: mapName,
    transformRequest
  });
  mbMap.once('styledata', function() {
    for (layer of mbMap.style.stylesheet.layers) {
      if(mbMap.style._serializedLayers[layer.id].layout &&
         mbMap.style._serializedLayers[layer.id].layout['text-field'] &&
         mbMap.style._serializedLayers[layer.id].layout['text-field'] === '{_name_global}'){
        mbMap.setLayoutProperty(layer.id, 'text-field', '{_name_local}');
      }
    }
  });

  var mbLayer = new Layer({
    render: function (frameState) {
      var canvas = mbMap.getCanvas();
      var viewState = frameState.viewState;

      var visible = mbLayer.getVisible();
      canvas.style.display = visible ? "block" : "none";

      var opacity = mbLayer.getOpacity();
      canvas.style.opacity = opacity;

      // adjust view parameters in mapbox
      var rotation = viewState.rotation;
      mbMap.jumpTo({
        center: toLonLat(viewState.center),
        zoom: viewState.zoom - 1,
        bearing: (-rotation * 180) / Math.PI,
        animate: false,
      });

      // cancel the scheduled update & trigger synchronous redraw
      // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184
      // NOTE: THIS MIGHT BREAK IF UPDATING THE MAPBOX VERSION
      if (mbMap._frame) {
        mbMap._frame.cancel();
        mbMap._frame = null;
      }
      mbMap._render();

      return canvas;
    },
  });

  var map = new Map({
    target: "map",
    view: new View({
      center: fromLonLat(center),
      zoom: 4,
    }),
    layers: [mbLayer],
  });
}
(snip...)

Vector Layerは内部でレイアウトプロパティを持っており、これの設定値によって地図に表示されるラベルが変わります。デフォルトではtext-fieldプロパティの値が{_name_global}となっていて英語表記となっているレイヤーを、{_name_local}を指定することでローカル、つまり日本語表記に変更しています。（{_name_ja}でも問題ないかと思います）

変更後は、こちらのように日本語表記に変わります。なお、日本全体がみえるぐらい引いた地図だとまだ英語表記が残っているので、調整したい場合は該当レイヤーを探し出して同様に設定すると日本語表記になるはずです。{_name_global}以外のレイヤーはデフォルトでは{_name}になっていたので、レイヤーIDから推察されるレイヤーを探し出すことになると思います。