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

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

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

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

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

表示設定

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

main.js

(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から推察されるレイヤーを探し出すことになると思います。

まとめ

以上、Amazon Location Service のマップを日本語表示してみました。日本語でラベルが表示されると地図が見やすくなるので、なるべく日本語化をしておきたいですね。

どなたかのお役に立てば幸いです。それでは！

参考