Angularでleafletを使っちゃうぞ

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

目的

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

使用技術

• Angular4 （Angular-CLIを使った）
• leaflet関連のライブラリ

手順

Angular-CLIが入っていない人は

Terminal

sudo npm install -g angular-cli

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

Terminal

ng new angular-leaflet

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

Terminal

cd angular-leaflet

ドキュメントにある通り、インストールする。

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して登録する。

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して(↓二行目)

app.component.ts

import { Component } from '@angular/core';
import * as leaflet from 'leaflet'; 

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

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にスタイルシートのリンクを追加

.angular-cli.json

{
    ...
    "apps": [
        {
            ...
            "styles": [
                "styles.css",
                "../node_modules/leaflet/dist/leaflet.css"
            ],
            ...
        }
    ]
    ...
}

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

.angular-cli.json

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

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

app.component.html

<div leaflet style="height: 400px;"
     leafletDraw
     [leafletOptions]="options"
     [leafletLayers]="layers"
     [leafletDrawOptions]="drawOptions">

最後にangularを起動！

Terminal

ng serve

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