Angularでleafletを使っちゃうぞ



諸事情で、Angularを用いてOpenSteetMapを利用する必要がありました。
ハードルが比較的低いと思われたleafletを用いたのですが、案外苦戦したので備忘録。
## 目的

Angularの中でleafletを使い、OpenStreetMapを表示し、
その上で図形描写ツールとマーカーを表示させる。
今回はapp.component.htmlにて表示する。

## 使用技術
- Angular4 （Angular-CLIを使った）
- leaflet関連の[ライブラリ](https://github.com/Asymmetrik/ngx-leaflet-draw)

## 手順
Angular-CLIが入っていない人は

```Terminal:Terminal
sudo npm install -g angular-cli
```

しておきましょう。
ここからが本番。
まずはターミナルにてアプリを作成。

```Terminal:Terminal
ng new angular-leaflet
```

アプリのディレクトリに移動して、

```Terminal:Terminal
cd angular-leaflet
```

[ドキュメント](https://github.com/Asymmetrik/ngx-leaflet-draw)にある通り、インストールする。

```Terminal:Terminal
npm install leaflet
npm install leaflet-draw
npm install @asymmetrik/ngx-leaflet
npm install @asymmetrik/ngx-leaflet-draw
npm install --save-dev @types/leaflet
npm install --save-dev @types/leaflet-draw
```

実際に導入していきます。

app.module.tsに記述。
ライブラリをimportして登録する。

```ts:app.module.ts
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw';

(略)

imports: [
   ...
   LeafletModule.forRoot(),
   LeafletDrawModule.forRoot()
]

(略)
```

app.component.tsを編集。
leafletをimportして(↓二行目) 

```ts:app.component.ts
import { Component } from '@angular/core';
import * as leaflet from 'leaflet'; 
```

さらに、クラスの中に必要な変数を記述

```ts:app.component.ts
export class AppComponent {
  title = 'app';
  //地図自体の描写に必要なoptions
  options = {
    layers: [
      leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ],
    zoom: 40,
    center: leaflet.latLng(35.170915, 136.881537)
  };
  
  //マーカーと円を名古屋中心にあらかじめ配置する値
  layers = [
    leaflet.circle([ 35.170915, 136.881537 ], { radius: 5000 }),
    leaflet.marker([ 35.170915, 136.881537 ], {
      icon: leaflet.icon({
        iconSize: [ 25, 41 ],
        iconAnchor: [ 13, 41 ],
        iconUrl: 'assets/marker-icon.png',
        shadowUrl: 'assets/marker-shadow.png'
      })
   })
];
  
  //図形描写ツールに関する値
  drawOptions = {
    position: 'topright',
    draw: {
       marker: {
          icon: leaflet.icon({
              iconSize: [ 25, 41 ],
              iconAnchor: [ 13, 41 ],
              iconUrl: 'assets/marker-icon.png',
              shadowUrl: 'assets/marker-shadow.png'
          })
       },
       polyline: false,
       circle: {
           shapeOptions: {
               color: '#aaaaaa'
           }
       }
    }
 };
}

```


.angular-cli.jsonにスタイルシートのリンクを追加

```json:.angular-cli.json
{
    ...
    "apps": [
        {
            ...
            "styles": [
                "styles.css",
                "../node_modules/leaflet/dist/leaflet.css"
            ],
            ...
        }
    ]
    ...
}
```

また、マーカー用に以下も追加

```json:.angular-cli.json
{
  "project": {
    ...
  },
  "apps": [
    {
      ...
      "assets": [
        "assets",
        "favicon.ico",
        {
          "glob": "**/*",
          "input": "../node_modules/leaflet/dist/images",
          "output": "./assets/"
        }
      ]
    }
  ]
}
```


最後にapp.component.html
高さを指定しないと地図の高さが0になるのでheight指定

```ts:app.component.html
<div leaflet style="height: 400px;"
     leafletDraw
     [leafletOptions]="options"
     [leafletLayers]="layers"
     [leafletDrawOptions]="drawOptions">

```
最後にangularを起動！

```Terminal:Terminal
ng serve
```

ブラウザでローカルホストにアクセスすれば、名古屋が表示されているはず！右上には円を書くツールも表示されているはず！