HERE Style Editorからエクスポートしたスタイルでマップをカスタマイズする

HERE Style Editorからエクスポートしたスタイルを使用して、ブランディングやデザインの要件に合わせて、独自の視覚的に魅力的な方法でデータを表示します。HERE Style Editorには、色、テクスチャ、ラベルなど、さまざまなマップ要素を変更するための幅広いオプションが用意されています。こうした柔軟性により、特定のビジネスユースケースに合った独自のデザインを実現できます。

📘

注

次のセクションでは、「HERE Maps API for Javascriptの使用を開始する」で説明したベースマップを基盤として、コードを追加する方法を説明します。

開始する前に

HERE Style Editorでカスタムスタイルを作成し、そのスタイルをエクスポートします。詳細については、HERE Style Editorユーザーガイドを参照してください。

次のチュートリアルでは、次の例に示すように、暗い環境での表示に適したカスタムダークスタイルを使用しています。

カスタムスタイルを使用した地図を読み込む

カスタムHERE Style EditorマップスタイルがHERE Maps API for Javascriptマップレイヤの一部としてインポートおよびインスタンス化されていることを確認します。

1. JavaScriptコードで、スタイル定義を保持する変数を宣言します。この変数がH.map.render.harp.Styleのインスタンスであることを確認します。また、パスを介して参照するかURLを指定することで、その値がカスタムスタイル定義に設定されていることを確認します。次の例は、URLを介してカスタムスタイルを参照する方法を示しています。

   JavaScript

   const style = new H.map.render.harp.Style('https://heremaps.github.io/maps-api-for-javascript-examples/change-harp-style-at-load/data/night.json');

2. 前の手順でインポートしたスタイルを使用して、カスタムベクターレイヤーを作成します。

   JavaScript

   const vectorLayerDark = platform.getOMVService().createLayer(style);

   📘

   注

   「HERE Maps API for Javascriptの使用を開始する」の記事の一部として提供されているコードを使用している場合、この変数によってdefaultLayers変数が置き換えられます。

3. 次の例に示すように、map変数を調整して、カスタムスタイルレイヤーを使用して地図をインスタンス化して表示します。

   JavaScript

   const map = new H.Map(
       document.getElementById("mapContainer"),
       vectorLayerDark, {
           zoom: 10,
           center: {
               lat: 52.5,
               lng: 13.4
           }
       });

次の図は、カスタムスタイルが適用された地図を示しています。

任意：デフォルトのUI要素を調整する

MapSettingsControlのUI要素を使用すると、さまざまなマップレイヤーを切り替えることができます。カスタマイズされたマップスタイルを使用する場合は、カスタムスタイルを使用するように設定を調整して、MapSettingsControlの動作が選択したマップスタイルと一致するようにしてください。

1. カスタマイズされていないマップレイヤーに使用するデフォルトマップレイヤーをインポートします。

   JavaScript

   const defaultLayers = platform.createDefaultLayers();

2. カスタムマップスタイルを使用するようにMapSettingsControlを構成します。次の例に示すように、必要に応じて他のコントロールを構成します。

   JavaScript

   const mapSettingsControl = new H.ui.MapSettingsControl({
       'baseLayers': [
       {
           'label': 'Dark',
           'layer': vectorLayerDark
       },
       {
           'label': 'Light',
           'layer': defaultLayers.vector.normal.lite
       },
       {
           'label': 'Satellite',
           'layer': [defaultLayers.hybrid.liteday.raster, defaultLayers.hybrid.liteday.vector]
       }
       ],
       'alignment': H.ui.LayoutAlignment.BOTTOM_RIGHT
   });
   const scalebarControl = new H.ui.ScaleBar({
       'alignment': H.ui.LayoutAlignment.BOTTOM_RIGHT
   });
   const zoomControl = new H.ui.ZoomControl({
       'alignment': H.ui.LayoutAlignment.RIGHT_BOTTOM
   });

   この例では、MapSettingsControlにより、"Dark" (カスタムスタイルを使用)、"Light" (vector.normal.liteスタイルを使用)、"Satellite" (ハイブリッドベクタースタイルとラスターliteスタイルの組み合わせ) の3つのスタイルを切り替えることができます。

3. カスタムUIを作成してコントロールを追加します。

   JavaScript

   const ui = new H.ui.UI(map);
   ui.addControl('zoom', zoomControl);
   ui.addControl('mapsettings', mapSettingsControl);
   ui.addControl('scalebar', scalebarControl);

HERE Maps API for JavascriptのUI要素の詳細については、「マップコントロールとUIでマップをカスタマイズする」を参照してください。

次の図は、カスタムスタイルを使用して"Dark"マップスタイルを切り替えるデフォルトのUI要素を示しています。

完全なソースコード

次のセクションでは、このチュートリアルで使用した完全なJavaScriptコードを示します。

📘

注

apikey属性の値は、独自のHERE APIキーに置き換えてください。

// Initiate and authenticate your connection to the HERE platform:
const platform = new H.service.Platform({
    'apikey': 'YOUR_HERE_API_KEY'
});

// Import the custom style
const style = new H.map.render.harp.Style('https://heremaps.github.io/maps-api-for-javascript-examples/change-harp-style-at-load/data/night.json');
const vectorLayerDark = platform.getOMVService().createLayer(style);

// Instantiate (and display) a map:
const map = new H.Map(
    document.getElementById("mapContainer"),
    vectorLayerDark, {
        zoom: 10,
        center: {
            lat: 52.5,
            lng: 13.4
        }
    });

// MapEvents enables the event system.
// The behavior variable implements default interactions for pan/zoom (also on mobile touch environments).
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Enable dynamic resizing of the map, based on the current size of the enclosing cntainer
window.addEventListener('resize', () => map.getViewPort().resize());

// Import the default layers to use for some of the UI map views:
const defaultLayers = platform.createDefaultLayers();

//Setup Map Settings and other UI controls
const mapSettingsControl = new H.ui.MapSettingsControl({
'baseLayers': [
{
    'label': 'Dark',
    'layer': vectorLayerDark
},
{
    'label': 'Light',
    'layer': defaultLayers.vector.normal.lite
},
{
    'label': 'Satellite',
    'layer': [defaultLayers.hybrid.liteday.raster, defaultLayers.hybrid.liteday.vector]
}
],
'alignment': H.ui.LayoutAlignment.BOTTOM_RIGHT
});
const scalebarControl = new H.ui.ScaleBar({
'alignment': H.ui.LayoutAlignment.BOTTOM_RIGHT
});
const zoomControl = new H.ui.ZoomControl({
'alignment': H.ui.LayoutAlignment.RIGHT_BOTTOM
});

// Create the custom UI and add the controls
const ui = new H.ui.UI(map);
ui.addControl('zoom', zoomControl);
ui.addControl('mapsettings', mapSettingsControl);
ui.addControl('scalebar', scalebarControl);

次のステップ

詳細については、APIリファレンスの次のドキュメントを参照してください。

• H.map.render.harp.Style
• H.ui.MapSettingsControl
• H.service.Platform.createDefaultLayers