ガイドAPIリファレンス
ガイド
  1. ベクタータイルAPI開発ガイド
  2. HERE Vector Tile APIの例

HERE Maps API for Javascriptを使用したベクタータイル

HERE Maps API for Javascriptは、HERE Vector Tile APIとのシームレスな統合を実現し、Webアプリケーションで高品質でスケーラブルな地図を表示できます。ベクタータイルは、ラスタータイルに比べて優れたパフォーマンスと柔軟性を提供し、ダイナミックなスタイリングとインタラクティブ性をサポートしながら、ズームレベルを問わず鮮明なビジュアルを提供します。

このチュートリアルでは、HERE Vector Tile APIをHERE Maps API for Javascriptと統合してインタラクティブなWebマップを作成する方法をご紹介します。

HTML構造と依存関係を設定する

基本的なHTMLドキュメントを作成し、必要なHERE Maps API for Javascriptライブラリを含めます。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.2/mapsjs-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <style>
        body {width: 100%; height: 100%; position: absolute; margin: 0px; padding: 0px; overflow: hidden;}
        #mapContainer {position:absolute; top:0; bottom:0; width:100vw; height: 100vh;}
    </style>
  </head>
  <body>
    <div id="mapContainer"></div>
  </body>
</html>

このHTML構造には、必要なすべてのライブラリが含まれ、レスポンシブスタイルを設定し、地図のコンテナを作成します。

プラットフォームを初期化し、地図を作成する

JavaScriptを追加してHEREサービスで認証し、地図を作成します。

// Initialize the platform with your API key
const platform = new H.service.Platform({
    'apikey': 'YOUR_HERE_APIKEY'
});

// Get the default map layers
const defaultLayers = platform.createDefaultLayers();

// Create the map
const map = new H.Map(
    document.getElementById("mapContainer"),
    defaultLayers.vector.normal.map, {
        zoom: 16,
        center: {
            lat: 52.5,
            lng: 13.4
        }
    });

前の例のコードでは、ドイツのベルリンを中心としたベクタータイルマップが作成されます。

📘

注

YOUR_HERE_APIKEYをHERE Developerポータルで取得した実際のAPIキーに置き換えてください。

双方向性とUIコントロールを追加する

ユーザーインタラクションを有効にし、標準のマップコントロールを追加します。

// Enable map interactions (pan, zoom, etc.)
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Add responsive resizing
window.addEventListener('resize', () => map.getViewPort().resize());

// Create default UI controls (zoom buttons, etc.)
const ui = H.ui.UI.createDefault(map, defaultLayers);

これにより、パンおよびズーム機能、レスポンシブデザインのサポート、ズームボタンなどのマップコントロールが追加されます。

基本例の完成形

上記すべての手順を組み込んだ完全なHTMLファイルです。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.2/mapsjs-ui.js" ></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <style>
        body {width: 100%; height: 100%; position: absolute; margin: 0px; padding: 0px; overflow: hidden;}
        #mapContainer {position:absolute; top:0; bottom:0; width:100vw; height: 100vh;}
    </style>
  </head>
  <body>
    <div id="mapContainer"></div>
    <script>
     // Initiate and authenticate your connection to the HERE platform:
     const platform = new H.service.Platform({
         'apikey': 'YOUR_HERE_APIKEY'
     });

     // Obtain the default map types from the platform object:
     const defaultLayers = platform.createDefaultLayers();

     // Instantiate (and display) a map:
     const map = new H.Map(
         document.getElementById("mapContainer"),
         defaultLayers.vector.normal.map, {
             zoom: 16,
             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 container
     window.addEventListener('resize', () => map.getViewPort().resize());

    // Create the default UI:
    const ui = H.ui.UI.createDefault(map, defaultLayers)
    </script>
  </body>
</html>

この例を使用するには、次の手順を実行します。

  1. コードをHTMLファイルとして保存します (例：vector-tile-map.html)。
  2. YOUR_HERE_APIKEYを実際のHERE APIキーに置き換えます。
  3. Webブラウザーでファイルを開き、完全な双方向性を備えたドイツのベルリンを中心とした地図を表示します。
HERE Maps API for Javascriptを使用してレンダリングされる基本的なベクタータイル

マップスタイルとフィーチャーを切り替える

HERE Vector Tile APIでは、さまざまな機能を使用して地図の動的なカスタマイズをサポートしています。たとえば、さまざまなマップスタイル (昼、夜、ライトテーマなど) を切り替えて、地図に表示するフィーチャーカテゴリーを制御できます。

マップスタイルを切り替える

HERE Maps API for Javascriptでは、platform.createDefaultLayers () メソッドを使用して、いくつかの定義済みベクタースタイルを提供します。たとえば、

  • vector.normal.map：標準デイマップ
  • vector.normal.mapnight：ナイトビュー用ダークテーマ
  • vector.normal.lite：簡略化されたデイマップ
  • vector.normal.litenight：簡略化されたナイトマップ

マップスタイルを動的に変更するには、setBaseLayerメソッドを使用します。

// Switch to night mode
const nightLayer = defaultLayers.vector.normal.mapnight;
map.setBaseLayer(nightLayer);

マップフィーチャーをフィルタリングする

HERE Vector Tile APIでは、データセットフィルターを使用して地図に表示するフィーチャーカテゴリーを制御できます。一般的なフィーチャーカテゴリーには次のものがあります。

  • pois：施設情報
  • buildings：建物のフットプリントと3D構造
  • roads：道路ネットワーク

特定のフィーチャーを切り替えるには、データセットフィルタークエリを使用してカスタムOMV (ビジュアル化に最適化した地図) レイヤーを作成します。

// Get the OMV service
const omvService = platform.getOMVService();

// Exclude POIs and buildings from the map
const datasetQuery = '(-pois, -buildings)';
omvService.getUrl().mergeQuery({ datasets: datasetQuery });

// Create a layer with the same style but filtered features
const style = defaultLayers.vector.normal.map.getProvider().getStyle();
const filteredLayer = omvService.createLayer(style);

// Apply the filtered layer
map.setBaseLayer(filteredLayer);
📘

注

データセットクエリでは、先頭にマイナス記号 (-) を付けたフィーチャーカテゴリーのカンマ区切りリストを使用して、レンダリングから除外します。

スタイルの切り替えとフィーチャーフィルタリングの完全例

次の例は、ユーザーがリアルタイムで異なるマップスタイルを切り替えたり、フィーチャーカテゴリーを切り替えたりできるコントロールパネルを使用したインタラクティブマップを示しています。

<!DOCTYPE html>
<html>
<head>
  <script src="https://js.api.here.com/v3/3.2/mapsjs-core.js"></script>
  <script src="https://js.api.here.com/v3/3.2/mapsjs-service.js"></script>
  <script src="https://js.api.here.com/v3/3.2/mapsjs-mapevents.js"></script>
  <script src="https://js.api.here.com/v3/3.2/mapsjs-ui.js"></script>
  <link rel="stylesheet" href="https://js.api.here.com/v3/3.2/mapsjs-ui.css" />
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <style>
    body { margin: 0; padding: 0; overflow: hidden; }
    #mapContainer { position:absolute; top:0; bottom:0; width:100vw; height:100vh; }
    .overlayBox {
      position: absolute; top: 12px; left: 12px; padding: 10px;
      background: rgba(255,255,255,0.95); border-radius: 8px;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto;
      z-index: 1; box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }
    .overlayBox hr { margin: 8px 0; border: none; border-top: 1px solid #e6e6e6; }
    .overlayBox label { display: block; margin: 6px 0; }
  </style>
</head>
<body>
  <div class="overlayBox">
    <div><strong>Map Style</strong></div>
    <select id="styleSelector">
      <option value="vector.normal.map" selected>Vector Day</option>
      <option value="vector.normal.mapnight">Vector Night</option>
      <option value="vector.normal.lite">Lite Day</option>
      <option value="vector.normal.litenight">Lite Night</option>
    </select>
    <hr>
    <div><strong>Features</strong></div>
    <label><input type="checkbox" class="featureToggle" data-feature="pois" checked> POIs</label>
    <label><input type="checkbox" class="featureToggle" data-feature="buildings" checked> Buildings</label>
    <label><input type="checkbox" class="featureToggle" data-feature="roads" checked> Roads</label>
  </div>
  <div id="mapContainer"></div>
  <script>
    // Initialize the platform with your API key
    const platform = new H.service.Platform({
      'apikey': 'YOUR_HERE_APIKEY'
    });
    
    // Get the default map layers with high-resolution support
    const defaultLayers = platform.createDefaultLayers();
    
    // Create the map centered on Berlin
    const map = new H.Map(
      document.getElementById("mapContainer"),
      defaultLayers.vector.normal.map, {
        zoom: 15,
        pixelRatio: window.devicePixelRatio || 1,
        center: { lat: 52.5, lng: 13.4 }
      });
    
    // Enable map interactions (pan, zoom, etc.)
    new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
    
    // Add responsive resizing
    window.addEventListener('resize', () => map.getViewPort().resize());
    
    // Create default UI controls and hide the map settings button
    const ui = H.ui.UI.createDefault(map, defaultLayers);
    ui.getControl('mapsettings').setVisibility(false);

    // Get references to the style selector and feature toggle checkboxes
    const styleSelector = document.getElementById('styleSelector');
    const featureToggles = document.querySelectorAll('.featureToggle');

    // Convert a style value like "vector.normal.map" to the actual layer object
    function baseLayerFromStyleValue(value) {
      const [type, theme, variant] = value.split('.');
      return defaultLayers[type][theme][variant];
    }

    // Get an array of feature names that are currently unchecked
    function getDisabledFeatures() {
      return Array.from(featureToggles)
        .filter(cb => !cb.checked)
        .map(cb => cb.dataset.feature);
    }

    // Create a map layer with the selected style and feature filters applied
    function createBaseLayerWithFilters(styleValue) {
      const disabled = getDisabledFeatures();
      
      // If no features are turned off, return the default layer
      if (disabled.length === 0) {
        return baseLayerFromStyleValue(styleValue);
      }
      
      // Build a dataset query to exclude turned-off features
      const datasetQuery = `(-${disabled.join(', -')})`;
      const omvService = platform.getOMVService();
      omvService.getUrl().mergeQuery({ datasets: datasetQuery });
      
      // Create a custom layer with the same style but filtered features
      const style = baseLayerFromStyleValue(styleValue).getProvider().getStyle();
      return omvService.createLayer(style);
    }

    // Apply the currently selected style and feature filters to the map
    function applySelection() {
      const layer = createBaseLayerWithFilters(styleSelector.value);
      map.setBaseLayer(layer);
    }

    // Listen for changes to the style selector and feature toggles
    styleSelector.addEventListener('change', applySelection);
    featureToggles.forEach(cb => cb.addEventListener('change', applySelection));
    
    // Apply the initial selection
    applySelection();
  </script>
</body>
</html>

applySelection関数は、選択されたスタイルと、オフまたはオンに切り替えられた機能を組み合わせて、適切なマップレイヤーを作成し適用します。次の図は、地図機能の切り替えやマップスタイルの変更が可能なコントロールを備えた更新後の地図を示しています。

インタラクティブ機能を使用したベクターマップの例

次のステップ

HERE Maps API for Javascriptを使用して、ベクターマップのカスタマイズオプションをさらに確認します。

5 時間前の更新