Vue.js と Leaflet で地図を表示するまで

概要

地図のためののライブラリであるLeafletとそのVue.js用のラッパーVue2Leafletを使ってVueで地図を表示させます。

準備

まず適当なプロジェクトを作成してライブラリをインストールします。
作成にはvue-cliを使っています。

vue create leaflet-vue && cd leaflet-vue
npm install vue2-leaflet leaflet --save

地図を表示する

まずはエントリーポイントのmain.jsで以下を追記してcssファイルを読み込ませます。

main.js

import 'leaflet/dist/leaflet.css

App.vueを以下のように編集します。

ここで注意すべきはstyleのheight属性です。q
これを指定しなかったり、height: 100%;のようにピクセルで指定しないと地図が表示されません。

App.vue

<template>
  <div id="app">
    <l-map ref="map" style="height: 600px;" :zoom="zoom" :center="center">
      <l-tile-layer :url="url"></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
import { LMap, LTileLayer } from "vue2-leaflet";

export default {
  name: "app",
  components: { LMap, LTileLayer },
  data() {
    return {
      url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
      zoom: 8,
      center: [35.693825, 139.703356]
    };
  }
};
</script>

サークルを表示する

地図上にサークルを表示してみます。
サークルを表示するにはLCircleコンポーネントを使用します。

App.vue

<template>
  <div id="app">
    <l-map ref="map" style="height: 600px;" :zoom="zoom" :center="center">
      <l-tile-layer :url="url"></l-tile-layer>
      <l-circle :lat-lng="center" :radius="1000" :color="'red'"></l-circle>
    </l-map>
  </div>
</template>
<script>
import { LMap, LTileLayer, LCircle } from "vue2-leaflet";

export default {
  name: "app",
  components: { LMap, LTileLayer, LCircle },
  // ...
  // 以下略
};
</script>

マーカーを表示する

LMarkerでマーカーを表示できます。
マーカーを使用するにはコンポーネントを読み込むだけでなくもう一手間かける必要があります。
main.jsに以下を追記します。

main.js

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

あとはサークルのときと同じです。

App.vue

<template>
  <div id="app">
    <l-map ref="map" style="height: 600px;" :zoom="zoom" :center="center">
      <l-tile-layer :url="url"></l-tile-layer>
      <l-marker :lat-lng="center"></l-marker>
    </l-map>
  </div>
</template>

<script>
import { LMap, LTileLayer, LMarker } from "vue2-leaflet";

export default {
  name: "app",
  components: { LMap, LTileLayer, LMarker },
  // ...
  // 以下略
};
</script>