序章

Angular は、HTML、CSS、および TypeScript (JavaScript) を使用して WEB、モバイル、およびデスクトップ アプリケーションを構築するための開発プラットフォームです.現在、Angular はバージョン 13 であり、Google がプロジェクトのメインメンテナーです.

@tomtom-international/web-sdk-maps は、TomTom サービスとの統合の複雑さを隠し、完全にスタイル設定可能で簡単にカスタマイズできるコンポーネントで生産性を高めるライブラリです.

前提条件

開始する前に、ツールをインストールして構成する必要があります.

git

Node.js and npm

Angular CLI

IDE (例: Visual Studio Code )

入門

TomTom でアカウントを作成して構成する

1. アカウントを作成しましょう.サイト https://www.tomtom.com/ にアクセスし、[開発者] メニューをクリックし、サブメニュー [開発者ポータル] をクリックします.



2. 登録ボタンをクリックします.



3. 氏名、ユーザー名、電子メール、パスワードのフィールドに入力し、Maps API を使用するための利用規約を読み、同意したチェックボックスをクリックします.登録ボタンをクリックします.



4. 登録したメールを確認します.



5. 送信されたメールの [ACTIVATE ACCOUNT] ボタンをクリックします.



6. [マイ ダッシュボード] リンクをクリックします.



7. [キー] メニューに表示されているキーをコピーします.私の場合、キー POQwSkANG2wVgN1qMbook38s5EMkN7pG が表示されました.これは、このキーが Angular アプリケーションで構成されるためです.



8.準備完了!アカウントが作成され、キーが生成されました.

Angular アプリケーションを作成する

1.ルートファイルとSCSSスタイル形式で@angular/cliを使用して、Angularベース構造でアプリケーションを作成しましょう.

ng new angular-tomtom --routing true --style scss
CREATE angular-tomtom/README.md (1059 bytes)
CREATE angular-tomtom/.editorconfig (274 bytes)
CREATE angular-tomtom/.gitignore (620 bytes)
CREATE angular-tomtom/angular.json (3255 bytes)
CREATE angular-tomtom/package.json (1078 bytes)
CREATE angular-tomtom/tsconfig.json (863 bytes)
CREATE angular-tomtom/.browserslistrc (600 bytes)
CREATE angular-tomtom/karma.conf.js (1431 bytes)
CREATE angular-tomtom/tsconfig.app.json (287 bytes)
CREATE angular-tomtom/tsconfig.spec.json (333 bytes)
CREATE angular-tomtom/.vscode/extensions.json (130 bytes)
CREATE angular-tomtom/.vscode/launch.json (474 bytes)
CREATE angular-tomtom/.vscode/tasks.json (938 bytes)
CREATE angular-tomtom/src/favicon.ico (948 bytes)
CREATE angular-tomtom/src/index.html (299 bytes)
CREATE angular-tomtom/src/main.ts (372 bytes)
CREATE angular-tomtom/src/polyfills.ts (2338 bytes)
CREATE angular-tomtom/src/styles.scss (80 bytes)
CREATE angular-tomtom/src/test.ts (745 bytes)
CREATE angular-tomtom/src/assets/.gitkeep (0 bytes)
CREATE angular-tomtom/src/environments/environment.prod.ts (51 bytes)
CREATE angular-tomtom/src/environments/environment.ts (658 bytes)
CREATE angular-tomtom/src/app/app-routing.module.ts (245 bytes)
CREATE angular-tomtom/src/app/app.module.ts (393 bytes)
CREATE angular-tomtom/src/app/app.component.scss (0 bytes)
CREATE angular-tomtom/src/app/app.component.html (23364 bytes)
CREATE angular-tomtom/src/app/app.component.spec.ts (1097 bytes)
CREATE angular-tomtom/src/app/app.component.ts (219 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

2. Bootstrap CSS フレームワークをインストールして構成します.投稿のステップ 2 と 3 を実行します.

3. 以下のように、src/environments/environment.ts および src/environments/environment.prod.ts ファイルで TomTom キーを構成します.

tomtom: {
  key: 'POQwSkANG2wVgN1qMbook38s5EMkN7pG',
},

4. @tomtom-international/web-sdk-maps ライブラリをインストールします.

npm install @tomtom-international/web-sdk-maps

5. @tomtom-international/web-sdk-maps ライブラリを構成します. angular.json ファイルを変更し、以下のように maps.css ファイルを追加します.

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "node_modules/@tomtom-international/web-sdk-maps/dist/maps.css",
  "src/styles.scss"
],

6. AppComponent ファイルから src/app/app.component.ts クラスの内容を削除します.以下のように getCurrentPosition および loadMap メソッドを作成します.

import { AfterViewInit, Component } from '@angular/core';
import { Observable, Subscriber } from 'rxjs';
import * as tt from '@tomtom-international/web-sdk-maps';

import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {

  map: any;

  constructor() {
  }

  public ngAfterViewInit(): void {
    this.loadMap();
  }

  private getCurrentPosition(): any {
    return new Observable((observer: Subscriber<any>) => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position: any) => {
          observer.next({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          });
          observer.complete();
        });
      } else {
        observer.error();
      }
    });
  }

  private loadMap(): void {
    this.map = tt.map({
      key: environment.tomtom.key,
      container: 'map',
    });

    this.map.addControl(new tt.FullscreenControl());
    this.map.addControl(new tt.NavigationControl());

    this.getCurrentPosition()
    .subscribe((position: any) => {
      this.map.flyTo({
        center: {
          lat: position.latitude,
          lng: position.longitude,
        },
        zoom: 13,
      });

      const popup = new tt.Popup({ anchor: 'bottom', offset: { bottom: [0, -40] } }).setHTML('Angular TomTom');

      var marker = new tt.Marker().setLngLat({
        lat: 37.7749,
        lng: -122.4194,
      }).addTo(this.map);
      marker.setPopup(popup).togglePopup();
    });
  }

}

7. src/app/app.component.html ファイルの内容を削除します.以下のようにマップ div タグを追加します.

<div class="container-fluid py-3">
  <h1>Angular TomTom</h1>

  <div id="map" class="map"></div>
</div>

8. 以下のように、src/app/app.component.scss ファイルにスタイルを追加します.

#map {
  height: 400px;
  width: 100%;
  max-width: 600px;
}

9. 以下のコマンドでアプリケーションを実行します.

npm start

> angular-tomtom@1.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   3.66 MB | 
styles.css, styles.js | styles        | 521.05 kB | 
polyfills.js          | polyfills     | 339.20 kB | 
scripts.js            | scripts       |  76.33 kB | 
main.js               | main          |  10.36 kB | 
runtime.js            | runtime       |   6.86 kB | 

                      | Initial Total |   4.59 MB

Build at: 2021-12-12T17:33:13.265Z - Hash: e4a77c4fe28aa482 - Time: 4248ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

ノート:

エラー Module '"/node_modules/@types/geojson/index"' has no default export. Did you mean to use 'import { GeoJSON } from "/node_modules/@types/geojson/index"' instead? が発生する場合は、以下のように allowSyntheticDefaultImports ファイルに設定 tsconfig.json を追加します.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

10.準備完了! URL http://localhost:4200/ にアクセスして、アプリケーションが動作しているかどうかを確認します. GitHub Pages および Stackblitz で動作するアプリケーションを参照してください.



アプリケーション リポジトリは https://github.com/rodrigokamada/angular-tomtom で入手できます.

このチュートリアルはポルトガル語で私の blog に投稿されました.