Help us understand the problem. What is going on with this article?

Angular6とLeafletで地図を表示する

More than 1 year has passed since last update.

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);
}

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

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

https://uedayou.net/AngularLeafletSampleMapViewer/

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

https://github.com/uedayou/AngularLeafletSampleMapViewer

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

uedayou
GitHub: https://github.com/uedayou
http://uedayou.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away