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

2023.12.17 2023.12.17

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

インストール

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

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

カレントディレクトリに次の内容でwebpack.config.jsを作成する
webpack.config.js

module.exports = {
  mode: "production",
  module: {
      rules: [
          {
              // 対象となるファイルの拡張子.
              test: /\.css$/,
              use: [
                  // スタイルシートをJSからlinkタグに展開する機能.
                  "style-loader",
                  // CSSをバンドルするための機能.
                  "css-loader",
              ]
          }
      ],
  }
};

srcディレクトリを作成し、index.jsを作成する
index.js

// leaflet のスタイルシート.
import 'leaflet/dist/leaflet.css';

// leaflet の JavaScript.
import 'leaflet/dist/leaflet.js';

カレントディレクトリでnpx webpackコマンドを使ってビルドする
```
npx webpack
```
distディレクトリが生成され、次のようなファイルが生成される
- 2b3e1faf89f94a483539.png
- 416d91365b44e4b4f477.png
- 8f2c4d11474275fbc161.png
- main.js
- main.js.LICENSE.txt
distディレクトリのファイルをクライアントが参照できる場所(public/jsなど)にコピーする
このとき、main.jsはleaflet.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');
});

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

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

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

Leaflet.markerclusterからファイルをダウンロードする

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

ファイル	コピー先の例
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

スタイルシートとスクリプトの読み込みをビューに追加する
このとき、leaflet.markercluster.jsはleaflet.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>

以下のようにして、マーカークラスターを追加する

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を利用して、地図上にルートを表示できます。

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

上記サイトからSource codeをダウンロードする

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

ファイル	コピー先の例
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

スタイルシートとスクリプトの読み込みをビューに追加する

<link rel="stylesheet" href="/css/plugin/leaflet-routing-machine.css">
<script src="/js/plugin/leaflet-routing-machine.min.js"></script>

以下のようにしてルートを表示する
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([]);

コメントコメントをキャンセル

cryptoを使って暗号化と復号を行う

winstonを使ってNode.jsで簡単ログ出力