ガイドv3.2 API Referencev3.1 API Reference
ガイド
  1. 開発者ガイド
  2. フレームワークと統合する

TypeScriptを使用してHERE Mapsを構築する

 HERE Maps API for JavaScript version 3.2

このチュートリアルでは、HERE Maps API for JavaScriptをTypeScriptおよびWebpackと統合するプロセスについて説明します。これらの手順を実行することで、TypeScriptとWebpackを使用したHERE Maps API for JavaScriptをプロジェクトで最大限に活用するための包括的な環境が設定されます。

開始する前に

システムに次のソフトウェアがインストールされていることを確認します。

  • Node.js - Web ブラウザーの外部で JavaScript コードを実行できる JavaScript ランタイム環境
  • NPM (Node Package Manager ) - Node.js プロジェクトの依存関係 (ライブラリとツール) のインストール、共有、管理を円滑にする Node.js のパッケージ マネージャー

TypeScriptプロジェクトを構成する

HERE Maps API for Javascriptを含む基本的なTypeScriptプロジェクトを作成するには、次の手順を実行します。

  1. TypeScriptプロジェクトのフォルダーを作成します。

  2. コマンドプロンプトを開き、ディレクトリをプロジェクトフォルダーに変更します。

  3. 次のコマンドを使用して、公開されているHERE Maps API for JavaScriptリポジトリをNPM設定に追加し、NPMでHERE Maps API for JavaScriptを使用できるようにします。

    npm config set @here:registry https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/

  4. 次のコマンドを実行して、プロジェクトのpackage.jsonファイルを初期化します。

    npm init
    📘

    注

    Node.js環境では、コマンドラインに一連の質問を表示して、プロジェクトの基本設定を行うように求められます。この初期化プロセス中にpackage.jsonファイルをカスタマイズするための入力を提供することも、デフォルト設定を受け入れることもできます。

  5. 最終確認プロンプトでyesと入力し、package.jsonの生成を完了します。

  6. 次のコマンドを入力して、HERE Maps API for Javascriptライブラリを依存関係として含めます。

    npm install @here/maps-api-for-javascript

  7. 次のコマンドを使用して、Webpackの開発依存関係をインストールします。

    npm install --save-dev webpack webpack-cli

  8. 次のコマンドを入力して、TypeScriptのコンパイラとローダーをインストールします。

    npm install --save-dev typescript ts-loader

  9. プロジェクトフォルダーに、次の構造でtsconfig.jsonという名前のファイルを作成します。

    {
  "compilerOptions": {
      "outDir": "./dist/",
      "noImplicitAny": true,
      "module": "es6",
      "target": "es5",
      "jsx": "react",
      "allowJs": true,
      "moduleResolution": "node"
  }
}

    このファイルは、次の設定でTypeScriptコンパイラを構成するために使用されます。

    • "outDir": "./dist/"：コンパイルされたJavaScriptファイルの出力ディレクトリを設定します。このケースでは、tsconfig.jsonファイルと同じディレクトリにあるdist/というフォルダーにコンパイルされたファイルが配置されます。
    • "noImplicitAny": true：TypeScriptが明示的な型を指定せずに宣言されている場合に、TypeScriptがany型を変数に自動的に追加するのを防ぎます。
    • "module": "es6"：コンパイルされたJavaScriptファイルのモジュールシステムをES6に設定します。
    • "target": "es5"：コンパイルされたJavaScriptコードのターゲット言語バージョンを設定します。このケースでは、ターゲット言語がES5に設定されています。
    • "jsx": "react"：JSXファイルのコンパイル時にReact構文を使用するようにTypeScriptを構成します。
    • "allowJs": true：TypeScriptファイル (.tsおよび.tsxファイル) と一緒にJavaScriptファイル (.jsファイル) をコンパイルすることを許可します。
    • "moduleResolution": "node"：コンパイラのモジュール解決方法を設定します。このケースではNode.jsです。

  10. プロジェクトフォルダーで、次のwebpack.config.jsファイルを作成します。

    const path = require('path');

module.exports = {
    entry: './index.ts',
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        }],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'production',
    node: {
        global: false,
    },
    performance: {
        maxEntrypointSize: 2048000,
        maxAssetSize: 2048000
    }
};

    このファイルは、Webpackを使用して小規模から中規模のTypeScriptアプリケーションを構築するための開始点として使用できる基本的な構成を提供します。設定は次のとおりです。

    • index.tsにあるエントリーポイントでTypeScriptアプリケーションをコンパイルします。
    • コンパイルされたコードをdistというディレクトリに出力します。
    • 最適化にプロダクションモードを使用します。
    • 大きなファイルが生成されないように、パフォーマンス制限を設定します。

    詳細については、Webpackのドキュメントを参照してください。

  11. プロジェクトフォルダーで、次のindex.tsファイルを作成します。これはTypeScriptコードのエントリーポイントです。

📘

注

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

// Import the HERE Maps API for JavaScript library
import "@here/maps-api-for-javascript";

// Create default map layers using the HERE Maps platform
const platform = new H.service.Platform({
    apikey: 'YOUR_HERE_APIKEY',
});

// Create a new map instance with specified options
const maptypes = platform.createDefaultLayers({ppi:250});
const map = new H.Map(
    document.getElementById("mapContainer"), // Target HTML element for the map
    maptypes.vector.normal.map, // Use the vector map type
    {
        pixelRatio: 2,
        zoom: 11,
        center: { lng: 14.3279, lat: 40.8352 },
    }
);
// Enable basic map events for user interaction
new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

  1. プロジェクトフォルダーで、次のindex.htmlファイルを作成します。

    <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta charset="utf-8">
        <style>
        #map {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>
        <div id="mapContainer"></div>
        <script src="./dist/index.js"></script>
    </body>
</html>

    このファイルは、Web アプリが Web ブラウザーに読み込まれるときの主要エントリー ポイントです。

    結果：最終的なプロジェクト フォルダー構造は、次のファイルとフォルダーで構成されます。

    • project folder (root)

      • node_modules/

      • index.html

      • index.ts

      • package.json

      • package-lock.json

      • tsconfig.json

      • webpack.config.json

        👍

        ヒント

        HTML定義を使用すると、次の例に示すように、faviconなどの追加の参照を参照できます。 <link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />

  2. プロジェクトフォルダーで、package.jsonファイルを開き、次のコマンドをscriptsセクションに追加します。

    "build": "webpack"

    buildスクリプト実行コマンドを追加した後、端末でnpm run buildコマンドを実行すると、プロジェクトの設定で定義されているWebpackバンドルプロセスがbuildスクリプトによって自動的にトリガーされます。

  3. 次のコマンドを実行して、バンドルされた出力を構築して生成します。

    npm run build

    構築が完了すると、コマンド プロンプトに成功メッセージが表示され、マップの管理を行った JavaScript コードを含む dist フォルダーが作成されます。

  4. プロジェクト フォルダーから Web ブラウザー ページで index.html ファイルを開きます。

結果：次の例に示すように、Web ページに双方向的 HERE マップが表示されます。 基本的な HERE マップ

次のステップ

HERE Maps API for Javascriptの設計とフィーチャーの詳細については、「APIリファレンス」を参照してください。

14 日前の更新