ラスタタイルを使用してマップをレンダリングします

Maps API for JavaScript が提供するインタラクティブなマップを作成するためのツールと、 HERE Raster タイル API の幅広いマップ タイルスタイルと機能を組み合わせて、アプリケーションのユーザーエクスペリエンスを向上させるリッチで魅力的なマップを作成できます。

次のチュートリアルでは、これらの 2 つの API を使用して、ラスタイメージファイルの形式でマップを読み込んで表示する基本的な HTML ファイルを作成する方法について、順を追って説明します。

作業を開始する前に

  • API キー を取得します。 まだアカウントをお持ちでない場合は、 HERE platform アカウントにサインアップして API キー を生成します。 詳細については 、はじめにを参照してください。
  • Understand the methods for rendering raster maps through Maps API for JavaScript. For more information, see Raster map types.

Build a HTML file structure which will contain your map

マップをレンダリングする JavaScript コードのコンテナとして、基本的な HTML ページを作成します。

  1. 空の HTML ファイルを作成します。
  2. 次の例に示すように、 HTML ファイルの<head>要素に、maps-core.js、maps-service.js、およびmapsjs-mapevents.jsのライブラリへの参照を含めます。
     <!DOCTYPE html>
 <html>
 <head>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
 </head>
 <body></body>
 </html>

  3. <head> エレメント内に、 body および map エレメントの幅、高さ、および位置を設定する<style>エレメントを追加します。

     <style>
 body {
     width: 100%;
     height: 100%;
     position: absolute;
     margin: 0px;
     padding: 0px;
     overflow: hidden;
 }

 #map {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
 }
 </style>

    注

    These style settings configure the map to occupy the full width and height of the browser window.

  4. Within the <body> element of the HTML file, include a <div> element with an id of map. This is where the map will be displayed. For example:
     <div id="map"></div>
  5. <body> HTML ファイルの要素内に空の <script> 要素を作成します。 この要素には、 HERE API を初期化して新しいマップインスタンスを作成する JavaScript コードが含まれています。
  6. ファイルを保存します。

Build a raster map

Explore the available methods for building raster maps using the Maps API for JavaScript. The following sections cover the steps to create custom raster maps that suit your application's specific design and requirements.

Use a default raster tile layer

This approach involves using the rich library of predefined map styles. These map styles cater to various use cases, such as exploring cities, navigating rural areas, or visualizing specific types of data. By just selecting a map style, you can easily create compelling raster maps for your application.

  1. Within the <script> element of your HTML file, create an instance of the HERE Platform object with an API key, which is used to access the HERE services:

     // Your HERE API key
 const apiKey = 'YOUR_API_KEY';

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

  2. Instantiate and display the map on the web page:

    // Instantiate (and display) a map:
const map = new H.Map(
    document.getElementById("map"),
    defaultLayers.raster.satellite.map, 
    {
        zoom: 16,
        center: { lat: 41.902156, lng: 12.453311 }
    }
);

    この例では、

    • new H.Map() - Creates a new map instance using the HERE Maps JavaScript API
    • document.getElementById("map") - Selects the HTML element with the ID map that is the container for the map.
    • defaultLayers.raster.satellite.map - Sets the map base layer to use. This example uses the raster.satellite.map layer from the defaultLayers object.
    • zoom: 16 - Sets the initial zoom level of the map. The higher the value, the closer the map is zoomed in.
    • center: { lat: 41.902156, lng: 12.453311 } - Sets the initial center coordinates of the map.

  3. Enable basic interactions like pan and zoom to make the map interactive:

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

  4. Add a window resize event listener to ensure the map dynamically resizes based on the size of its enclosing container:

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

  5. Save the file and open it in the browser window.

Result: The browser window displays a basic map on your web page using the Maps API for JavaScript. The map is interactive, enabling panning and zooming to explore different areas.

A map rendered with a default raster tile layer
Figure 1. A map rendered with a default raster tile layer

You can further customize the map by adding markers, overlays, or custom styling based on your application's needs and requirements. For example, you can display custom markers.

Use a custom raster tile service

This approach offers you more flexibility and control over the appearance and behavior of your raster maps. You can tailor the map's design to match your application's unique requirements by creating a custom raster tile service.

  1. <script> 要素内で、 API キー を使用して HERE platform オブジェクトのインスタンスを作成します。このインスタンスは、 HERE サービスへのアクセスに使用されます。
     const platform = new H.service.Platform({
     'apikey': 'Your_API_Key'
 });

  2. Create an instance of the HERE Raster Tile Service by performing one of the following actions:

    • Instante the service with the default behavior:
        const rasterTileService = platform.getRasterTileService();

    • Adjust the HERE Raster Tile Service to your needs by providing additional parameters to the platform.getRasterTileService() method through the queryParams property, as shown in the following example:

        const rasterTileService = platform.getRasterTileService({
      queryParams: {
          'style': 'lite.day',
          'features': 'vehicle_restrictions:active_and_inactive,pois:disabled',
          'size':512
      }
  });

      この例では、

      • 'style': 'lite.day' - Sets the map style to lite.day, which represents a simplified and lightweight map style designed for daytime viewing.
      • 'features': 'vehicle_restrictions:active_and_inactive,pois:disabled' - Specifies the map features to be displayed:
        • Enables the display of both active and inactive vehicle restrictions on the map.
        • Disables the display of Points of Interest (POIs) on the map, further reducing visual clutter.
      • 'size': 512 - Sets the tile size to 512x512 pixels. The tile size determines the granularity and level of detail displayed for each tile.

      For more information about the supported parameters, see the Raster Tile API v3 Reference.

  3. ラスタタイルプロバイダオブジェクトを作成して、マップタイルを取得して表示します。
     const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService);
  4. ラスタタイルプロバイダを使用してタイルレイヤーオブジェクトを作成します。
     const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
  5. <div> マップ、タイルレイヤ、およびズーム レベルや中心点などのさまざまなオプションを表示する要素の ID を使用して、 HERE マップ オブジェクト のインスタンスを作成します。
     const map = new H.Map(
     document.getElementById("map"),
     rasterTileLayer, 
     {
         zoom: 16,
         center: { lat: 41.902156, lng: 12.453311 }
     }
 );
  6. パンニングやズームなどのデフォルトのマップ操作を有効にします。
     const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
  7. ユーザーがブラウザウィンドウのサイズを変更したときにマップのサイズを動的に変更するイベントリスナーを追加します。
    window.addEventListener('resize', () => map.getViewPort().resize());
  8. Save the file and open it in a browser window.

Result: The map adopts the requested style and display parameters, as shown in the following figure:

Customized raster tile map
Figure 2. Customized raster tile map

Similarly to raster maps generated with the default layers, you can further customize the map, based on your application's needs and requirements. For example, you can display routing information.

次のステップ

  • For more information about the Raster Tile API v3, see the corresponding Developer Guide.
  • To learn more about the Maps API for JavaScript features that you can use to increase map interactivity, see:
    • The Maps API for JavaScript 例.
    • The Tutorials section of this guide.

「」に一致する結果は 件です

    「」に一致する結果はありません