読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Azure と Angular と Wercker CI とか

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へ取り込む仕組みを作りました。細かい機能は実装していません。概要はこちら:

f:id:albatrosary:20160512202310p:plain:w250

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

Angular2の構成

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

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

f:id:albatrosary:20160512203721p:plain:w300

処理概要

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

f:id:albatrosary:20160512204510p:plain

最後に

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

完成コードはこちら

だいぶ楽しんだ。