Node.jsでLeafletを使ってマップを表示する
npm leafletを利用して、LeafletをNode.jsで使う方法。
インストール
npm install webpack webpack-cli style-loader css-loader -D
npm install leaflet -Dスクリプトファイルのビルド
- カレントディレクトリに次の内容で
webpack.config.jsを作成する
webpack.config.jsmodule.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([]);
