Node.jsでLeafletを使ってマップを表示する

npm leafletを利用して、LeafletをNode.jsで使う方法。

インストール

npm install webpack webpack-cli style-loader css-loader -D
npm install leaflet -D

スクリプトファイルのビルド

  1. カレントディレクトリに次の内容でwebpack.config.jsを作成する
    webpack.config.js
    module.exports = {
      mode: "production",
      module: {
          rules: [
              {
                  // 対象となるファイルの拡張子.
                  test: /\.css$/,
                  use: [
                      // スタイルシートをJSからlinkタグに展開する機能.
                      "style-loader",
                      // CSSをバンドルするための機能.
                      "css-loader",
                  ]
              }
          ],
      }
    };
  2. srcディレクトリを作成し、index.jsを作成する
    index.js

    // leaflet のスタイルシート.
    import 'leaflet/dist/leaflet.css';
    
    // leaflet の JavaScript.
    import 'leaflet/dist/leaflet.js';
  3. カレントディレクトリでnpx webpackコマンドを使ってビルドする
    npx webpack
  4. distディレクトリが生成され、次のようなファイルが生成される
    • 2b3e1faf89f94a483539.png
    • 416d91365b44e4b4f477.png
    • 8f2c4d11474275fbc161.png
    • main.js
    • main.js.LICENSE.txt
  5. distディレクトリのファイルをクライアントが参照できる場所(public/jsなど)にコピーする
    このとき、main.jsleaflet.jsなどにリネ-ムしておく

マップの表示方法

ビルドしたファイルをビューから読み込みます。

<script src="/js/leaflet.js"></script>

マップの大きさを決めるスタイルを定義し、表示用のdivを設置します。

.map {
    border: 1px solid #bdbdbd;
    height: 480px;
    width: 100%;
}
<div id="map" class="map"></div>

OpenStreetMapを表示する

以下のコードでOpenStreetMapを表示します。

const map = L.map('map');
L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '<small>©</small> <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
}).addTo(map);
map.setView([35.6895, 139.6917], 15);

マップの中心位置を変更する

map.setView([latitude, longitude]);

マーカーを表示する

マップ上にマーカー(ピンやアイコン)を表示するには、次のようにします。

const icon = L.icon({
    iconUrl: '/js/2b3e1faf89f94a483539.png',
    iconAnchor: [16, 30]
});
const latitude = 35.6895;
const longitude = 139.6917;
const marker = L.marker([latitude, longitude], { icon: icon }).addTo(map);

/* 以下は任意 */
const tooltipOptions = {
    permanent: false, // true だと常に表示する
    direction: 'right',
    offset: L.point(16, -16)
};
marker.bindTooltip('hello', tooltipOptions);
  • bindTooltipは任意です
  • CDN利用のleafletと違い、iconを指定しないと壊れ画像になります

マーカー位置を変更する

表示中のマーカーに対して、以下のようにして表示位置を変更できます。

marker.setLatLng([latitude, longitude]);

マーカーを削除する

map.removeLayer(marker);

マーカークリックでページ遷移させる

marker.on('click', () => {
    window.open('https://www.yahoo.co.jp/', '_blank');
});

マーカークラスターを表示する

マーカークラスターは、マップ上の多数のマーカーをクラスター(集団)にまとめて表示するためのものです。マップの視覚的な整理と、多数のマーカーが近くに集まっている場合にマーカーのオーバーラップを避けるために使用されます。

以下にマーカークラスターの利用方法を記載します。

  1. Leaflet.markerclusterからファイルをダウンロードする
  2. ダウンロードしたファイルから、以下のファイルをクライアントが参照できる場所にコピーする

    ファイル コピー先の例
    dist/leaflet.markercluster.js /public/js/plugin/leaflet.markercluster.js
    dist/leaflet.markercluster.js.map /public/js/plugin/leaflet.markercluster.js.map
    dist/MarkerCluster.css /public/css/pluginMarkerCluster.css
    dist/MarkerCluster.Default.css /public/css/plugin/MarkerCluster.Default.css
  3. スタイルシートとスクリプトの読み込みをビューに追加する
    このとき、leaflet.markercluster.jsleaflet.jsより後に読み込むこと
    <link rel="stylesheet" href="/css/plugin/MarkerCluster.css" />
    <link rel="stylesheet" href="/css/plugin/MarkerCluster.Default.css" />
    <script src="/js/plugin/leaflet.markercluster.js"></script>
  4. 以下のようにして、マーカークラスターを追加する
    const markers = L.markerClusterGroup();
    markers.addLayer(L.marker([35.6895, 139.69175], { icon: icon }));
    markers.addLayer(L.marker([35.6895, 139.69176], { icon: icon }));
    map.addLayer(markers);

マーカークラスターを削除する

map.removeLayer(markers);

ルート探索を表示する

Leaflet Routing Machineを利用して、地図上にルートを表示できます。

以下にルート探索の利用方法を記載します。

  1. 上記サイトからSource codeをダウンロードする
  2. ダウンロードしたファイルから、以下のファイルをクライアントが参照できる場所にコピーする

    ファイル コピー先の例
    dist/leaflet-routing-machine.css /public/css/plugin/leaflet-routing-machine.css
    dist/leaflet-routing-machine.js /public/js/plugin/leaflet-routing-machine.js
    dist/leaflet-routing-machine.min.js /public/js/plugin/leaflet-routing-machine.min.js
  3. スタイルシートとスクリプトの読み込みをビューに追加する
    <link rel="stylesheet" href="/css/plugin/leaflet-routing-machine.css">
    <script src="/js/plugin/leaflet-routing-machine.min.js"></script>
  4. 以下のようにしてルートを表示する
    waypointsに通過地点を追加することで、自動でルートが表示される
    const router = L.Routing.control({
      lineOptions: {
          styles: [{color: 'cyan', opacity: .8, weight: 5}]
      },
      show: false, // ルート詳細を非表示
      createMarker: function() { return null; }, // 始点・終点のマーカーを非表示
      waypoints: [
          // 通過地点を追加する.
          L.latLng(35.17095211429092, 136.8806163784839), // 名古屋駅付近
          L.latLng(35.68124602941477, 139.76619111323873) // 東京駅付近
      ]
    }).addTo(map);

ルート探索を更新する

setWaypoints()で新しいルートを指定します。

router.setWaypoints([
    // 通過地点を追加する.
    L.latLng(34.7335322836852, 135.49864680888624), // 新大阪駅付近
    L.latLng(35.17095211429092, 136.8806163784839), // 名古屋駅付近
    L.latLng(35.68124602941477, 139.76619111323873) // 東京駅付近
]);

ルート探索を削除する

setWaypoints()で空の配列を指定することで、ルートが空になり地図から削除されます。

router.setWaypoints([]);
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です