8
4

More than 5 years have passed since last update.

Angular6とLeafletで地図を表示する

Last updated at Posted at 2018-07-07

Angular6 と Leaflet で地図を表示するアプリを作りました。

こちらでは、@asymmetrik/ngx-leaflet を使う方法を紹介されていますが、ここではLeaflet Quick Start Guideに沿った方法を試してみました。

初期化

最初に Angular-cli でプロジェクトを作成します。

ng new AngularLeafletSampleMapViewer
cd AngularLeafletSampleMapViewer

地図表示

leaflet と @types/leaflet を npm でインストールします。

npm install leaflet --save
npm install @types/leaflet --save-dev

leaflet 用の css や画像ファイルを Angular で使えるように angular.json に設定します。

angular.json
{
...
  "apps": [
    {
      ...
      "assets": [
        "src/favicon.ico",
        "src/assets",
        {
          "glob": "**/*",
          "input": "./node_modules/leaflet/dist/images",
          "output": "src/assets/"
        }
      ],
      ...
      "styles": [
        "styles.css",
        "./node_modules/leaflet/dist/leaflet.css"
      ],
      ...
    }
  ]
  ...
}

地図を表示するコンポーネントを作ります。

ng g component map

map.component.html, map.component.css, map.component.ts ができるのでそれぞれに以下のように書き換え・追加します。

map.component.css
#map { height:100vh }
map.component.html
<div id="map"></div>
map.component.ts
import * as L from 'leaflet';
...
map:any;
...
ngOnInit() {
  // 地図表示
  this.map = L.map('map').setView([34.702485,135.495951], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(this.map);
}

app.component.html に <app-map></app-map> を追加して、ng serveすれば地図が表示されると思います。

マーカー表示

Leaflet Quick Start Guideでのマーカー表示はvar marker = L.marker([51.5, -0.09]).addTo(mymap);と書いていますが、上の設定だけではマーカーが表示されないので、app.module.tsに以下を追加します。

app.module.ts
import {icon, Marker} from 'leaflet';
const iconRetinaUrl = 'src/assets/marker-icon-2x.png';
const iconUrl = 'src/assets/marker-icon.png';
const shadowUrl = 'src/assets/marker-shadow.png';
const iconDefault = icon({
  iconRetinaUrl,
  iconUrl,
  shadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41]
});
Marker.prototype.options.icon = iconDefault;

※参考:https://github.com/Leaflet/Leaflet/issues/4968#issuecomment-371184633

現在地表示

現在地の表示には、leaflet.locatecontrol を使いました。

npm install leaflet.locatecontrol --save
npm install @types/leaflet.locatecontrol --save-dev
npm install --save font-awesome
angular.json
{
  ...
  "apps": [
    {
      ...
      "styles": [
        "styles.css",
        "./node_modules/leaflet/dist/leaflet.css",
        "./node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css",
        "./node_modules/font-awesome/css/font-awesome.css"
      ],
      ...
    }
  ]
  ...
}
map.component.ts
import * as L from 'leaflet';
import 'leaflet.locatecontrol';
...
ngOnInit() {
  ...
  L.control.locate().addTo(this.map);
}

これで現在地が表示できる機能が地図上に付くと思います。

これらを反映したアプリは以下で公開しています。

また、ソースコードをgithubにあげました。

単純に地図を表示するだけのつもりが、いくつかつまるポイントがあったので、参考になればと思います。

8
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
4