Applications using the AED open data, Angular2 and Google Map

何かTodos以外にも作ってみようと思いAEDマップを作った。ご存知の通りAEDとは自動体外式除細動器のことを言います。

• A：Automated（自動化された）
• E：External（体外式の）
• D：Defibrillator（除細動器）

※ 日本救急医学会 市民のための心肺蘇生 より

AEDのデータはAEDオープンデータプラットフォームとして提供されているので、利用することにしました。緯度経度もあるのでGoogle Mapへの表示は容易にできます。

仕組み

このオープンデータを直接Angular2で叩くとうまく取り込めませんでした。URL叩いてGoogle Mapへの表示一度Express(Node.js)でパースさせてからAngular2へ取り込む仕組みを作りました。細かい機能は実装していません。概要はこちら：

ExpressとAngular2の通信にはJSONPを使っています。"これから作る複数サービスをAngular2でデータをまとめて"みたいなことをしたら面白いんじゃないかと考えたので。

Angular2の構成

コンポーネント志向なのでそれなりにコンポーネント分割しています。

• AppComponent: Google Mapを表示する
• MarkerComponent: Google Map上にAEDのある場所をマーキングする
• GoogleMapService: データの取得及びGoogle Mapに関係するメソッド定義

処理概要

AppComponentはGoogle Mapを使うのでAngularっぽくない書き方で（しかたない・・・）。

    <div id="map">
      <marker *ngFor="let item of items"
              lat-data="{{item.Latitude}}"
              lng-data="{{item.Longitude}}">
      </marker>
    </div>

markerコンポーネントは緯度経度を受け取りgooglemap.addMarker()メソッドで取得したマーカーをすべて入れ込みました。この"すべて入れ込む"部分の繰り返し処理ですが、JavaScriptで記述しても良いのですが、ここはやはりAngular2なのでngForで。

@Directive({
  selector: 'marker'
})

export class  MarkerComponent {
  
  @Input('lat-data')
  private lat: string;
  
  @Input('lng-data')
  private lng: string;

・・・

ここで@Component使っても良いのだがHTMLとして表示するものがないので@Directiveにしてます。

結果

Google Mapのお決まりの手続きを記述して、データ取得・表示をするところまでできた。機能的にはいろいろと入れられそうなので応用が利きそう。今取得しているデータは鹿児島県だけです。プルダウンつけて都道府県でとか表示するとか絞り込むとか今居る位置に近いところとかつける予定。

最後に

Observable<Response>を実行した後がイケてない。もう少し探ってみる。あと今はデータをとって表示しているだけなのでちょっとした機能を入れていく。

完成コードはこちら

だいぶ楽しんだ。