Leafletを使用してAngularでマップを作成する方法、パート3：ポップアップサービス

序章

リーフレットはポップアップをサポートします。マップ上のマーカーまたは指定された領域をクリックすると、テキストを含むポップアップが表示されます。これは、地図上に追加情報を表示する方法を提供します。

注：これは、AngularとLeafletの使用に関する4部構成のシリーズのパート3です。

このチュートリアルでは、サービスを使用してポップアップロジックを管理し、マップにポップアップを追加する方法を学習します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

このチュートリアルは、前のパーツのインストールと手順に直接基づいています。

ステップ1—ポップアップサービスを作成する

この時点で、AngularアプリケーションにLeafletの実装が機能しているはずです。

ターミナルウィンドウを使用して、プロジェクトディレクトリに移動します。次に、次のコマンドを実行して、新しいサービスを生成します。

npx @angular/cli generate service popup --skip-tests

これにより、popup.service.tsという新しいファイルが作成されます。

次に、この新しいサービスをプロバイダーとしてapp.module.tsに追加します。

コードエディタでapp.module.tsを開き、次の変更を加えます。

src / app / app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { HttpClientModule } from '@angular/common/http';
import { MarkerService } from './marker.service';
import { PopupService } from './popup.service';

import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';

@NgModule({
  declarations: [
    AppComponent,
    MapComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    MarkerService,
    PopupService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

これで、アプリケーションは新しいPopupServiceをサポートします。

ステップ2—ポップアップを表示する

新しく作成したpopup.service.tsをコードエディタで開きます。そして、makeCapitalPopup関数を宣言します。

src / app / popup.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PopUpService {
  constructor() { }

  makeCapitalPopup(data: any): string { }
}

この関数は、パート2で使用されたGeoJSONファイルからのデータを含むポップアップを作成します。

大文字のname、state、およびpopulationを追加します。

src / app / popup.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PopUpService {
  constructor() { }

  makeCapitalPopup(data: any): string {
    return `` +
      `<div>Capital: ${ data.name }</div>` +
      `<div>State: ${ data.state }</div>` +
      `<div>Population: ${ data.population }</div>`
  }
}

次に、MarkerServiceに再度アクセスして、PopupServiceをインポートする必要があります。

src / app / marker.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';
import { PopupService } from './popup.service';

そして、PopupServiceを注入します：

src / app / marker.service.ts

constructor(
  private http: HttpClient,
  private popupService: PopupService
) { }

app.modules.ts内のprovidersスタンザにサービスを追加することで、アプリケーション全体に対するシングルトンプロバイダーとしてサービスを作成するため、Angularは依存関係について文句を言うことはありません。

MarkerServiceファイルに残っている間に、bindPopup()メソッドを追加します。

src / app / marker.service.ts

makeCapitalCircleMarkers(map: L.map): void {
  this.http.get(this.capitals).subscribe((res: any) => {
    const maxVal = Math.max(...res.features.map(x => x.properties.population), 0);

    for (const c of res.features) {
      const lat = c.geometry.coordinates[0];
      const lon = c.geometry.coordinates[1];
      const circle = L.circleMarker([lon, lat], {
        radius: MarkerService.ScaledRadius(c.properties.population, maxVal)
      });

      circle.bindPopup(this.popupService.makeCapitalPopup(c.properties));

      circle.addTo(map);
    }
  });
}

変更を保存します。次に、アプリケーションを停止して再起動します。 Webブラウザー（localhost:4200）でアプリケーションを開き、マーカーの1つを操作します。

これで、ポップアップをサポートするマップができました。

結論

この投稿では、ポップアップを作成するポップアップサービスを作成しました。 L.bindPopupを使用してポップアップをマーカーに添付する方法を学びました。

AngularとLeafletの使用に関するこのシリーズのパート4に進みます。