ガイドv3.2 API Referencev3.1 API Reference
ガイド
  1. 開発者ガイド
  2. 地図をカスタマイズする

DefaultLayersオプションを理解する

 HERE Maps API for JavaScript version 3.2

デフォルトでは、パラメーターを指定せずにplatform.createDefaultLayers()メソッドを呼び出した場合、Maps API for JavaScriptは標準マップ設定を返します。ただし、optionsオブジェクトを渡すことで、標準マップの外観と操作性をニーズに合わせてカスタマイズおよび調整できます。

カスタムcreateDefaultLayers()設定では、次のようなシナリオでマップを最適化できます。

  • 複数言語のサポートが必要なアプリケーション
  • パフォーマンスの最適化が必要なモバイルアプリ
  • 各国固有の地政学的見解を考慮する必要がある地域限定サービス
  • タイル品質の向上を必要とする高解像度ディスプレイ

次のセクションでは、最も一般的に使用されるcreateDefaultLayers()オプションの設定例を示します。各サンプルは、「利用開始」で説明したベースマップを基盤として、コードを追加する方法を説明します。

POIの表示 (pois)

Maps API for JavaScriptではPOI (施設情報) がデフォルトで有効になっています。しかし、POIを非表示にすることで、よりすっきりとした地図にできます。たとえば、POIによる視覚的な煩雑さなく、ルートの視覚化に集中したい場合などに有効です。以下は、POIを非表示にする方法の例です。

const defaultLayers = platform.createDefaultLayers({
    pois: false
});

次の図は、POIが表示されている地図と、非表示になっている地図を視覚的に比較したものです。

POI表示POI非表示

地図の言語 (lgとlg2)

デフォルトでは、HERE Maps API for JavaScriptは、データの利用可否に応じて、各国の現地語で地図ラベルを表示します。海洋、海、湾のフィーチャーのラベルは、それぞれの水域が隣接する国の言語で表示されます。ただし、次のオプションを使用することで、ラベルや場所名をローカライズできます。

  • lg：マップラベルの第一言語を設定します。このパラメーターには、2文字のISO-639-1言語コードを使用できます。たとえば、frはフランス語を表します。
  • lg2：マップラベルの第二言語を設定します。このパラメーターはlgパラメーターと同じ形式で、指定した言語による追加ラベルを表示できます。

次の例は、マップの第一言語が英語、第二言語が中国語に設定されている場合のユースケースを示しています。

const defaultLayers = platform.createDefaultLayers({
    lg: "en", // Primary language: English (top label)
    lg2: "zh" // Secondary language: Chinese (bottom label)
});
📘

注

When you specify only the secondary language, the map displays the default local language as the primary language in the top label while displaying the secondary label in the selected language below it.

次の図は、デフォルト設定で現地語のラベルを表示する地図と、第一言語を英語、第二言語を中国語に設定したカスタム言語設定の地図 (lg: "en", lg2: "zh") を視覚的に比較したものです。

デフォルトカスタム

地図タイプごとに利用可能な言語の詳細については、以下のドキュメントを参照してください。

タイルサイズ (tileSize)

📘

注

Set tileSize only when using raster tiles, such as with a map style set to raster.normal.map.

デフォルトのタイルサイズは512x512ピクセル (tileSize: 512) です。ほとんどのユースケースでは、この設定で問題なく動作します。ただし、解像度を256x256ピクセルに調整することで、小さな画面のデバイスにおけるパフォーマンスを向上させることができます。

次のコードは、ラスタータイルを使用してタイルサイズを調整する方法を示したものです。

const defaultLayers = platform.createDefaultLayers({
    tileSize: 256 // Adjust the tile size
});

const map = new H.Map(
    document.getElementById("mapContainer"),
    // Set the map style to use raster tiles
    defaultLayers.raster.normal.map, {
        zoom: 12,
        center: {
            lat: 52.5,
            lng: 13.4
        }
    });

次の図は、使用可能な2種類のタイルサイズを比較したものです。

512ピクセル256ピクセル

詳細については、「HERE Raster Tile APIリファレンス」を参照してください。

地政学的見解 (politicalView)

HERE Maps API for JavaScript のデフォルト表示設定では、国際的な視点が採用されており、係争地域は破線で視覚的に示されます。たとえば、ジャンムーとカシミールはラダックとともに、インドとパキスタン間の紛争地域として表示されます。

国際的な視点の例

politicalViewパラメーターを使用して、国際的な視点から特定の国の地政学的見解に切り替えることができます。パラメーターの値はISO 3166-1 alpha-2スキーマに準拠した国コードです。たとえば、インドの場合はINとなります。

次の例は、特定の政治的見解を地図のデフォルトビューとして適用する方法を示しています。

const defaultLayers = platform.createDefaultLayers({
  politicalView: "IN"
});

次の表は、インドとパキスタンの同一地域の2つの地政学的見解を比較したものです。

INPK
  • 各地図タイプで利用可能な政治的見解の詳細については、対応するドキュメントを参照してください。
  • 地政学的見解を動的に適用する方法については、「カスタムの地政学的見解を適用する」を参照してください。

ラベルとアイコンのサイズ (ppi)

📘

注

Set ppi only when using raster tiles, such as with a map style set to raster.normal.map.

視覚要素内のラベルとアイコンのサイズを調整するには、ppiパラメーターを使用します。以下のppi値を使用できます。

  • 100：より高密度な表示が優先され、ラベルとアイコンがより小さく、より鮮明に表示されます。この値は、情報を凝縮して表示する必要がある、より小型で複雑なディスプレイに使用します。
  • 200 (デフォルト)：ラベルサイズと読みやすさの間で最適なバランスを実現します。ラベルが小さすぎたり大きすぎたりするのを避けたい場合に、この設定が推奨されます。
  • 400：ラベルとアイコンが大きく表示されるため、大画面での視認性が向上します。

ppiの値を選択する際は、ディスプレイの特性と、視覚要素に求められる情報密度を考慮してください。

次の例は、ラスタータイルを使用してアイコンとラベルのサイズを調整する方法を示したものです。

const defaultLayers = platform.createDefaultLayers({
    ppi: 400 // Adjust the label and icon size
});

const map = new H.Map(
    document.getElementById("mapContainer"),
    // Set the map style to use raster tiles
    defaultLayers.raster.normal.map, {
        zoom: 12,
        center: {
            lat: 52.5,
            lng: 13.4
        }
    });

次の例は、さまざまなppi設定値の比較を示したものです。

100200400

詳細については、「HERE Raster Tile APIリファレンス」を参照してください。

14 日前の更新