Leafletにて表示されているマップを画像としてダウンロードさせる「leaflet-easyPrint」の利用方法

Leafletにて何らかのボタンをクリックすると表示されているマップを画像としてダウンロードさせたい。調べたところ「leaflet-easyPrint」というプラグインで簡単に実装できた。以下にサンプルと実装方法をメモ。

leaflet-easyPrint

GitHub

https://github.com/rowanwins/leaflet-easyPrint

デモページ

http://rowanwins.github.io/leaflet-easyPrint/

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/leaflet-easyprint@2.1.9/dist/bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/leaflet-easyprint@2.1.9/libs/leaflet.min.css" rel="stylesheet">

サンプル

https://taitan916.info/sample/leaflet.js/plugin/leaflet-easyPrint/

マップ左上の保存ボタン→サイズを選択すると画像がダウンロードされる筈。

実装方法

ソースコード

<div id="map" class="sidebar-map"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>

<script src="https://cdn.jsdelivr.net/npm/leaflet-easyprint@2.1.9/dist/bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/leaflet-easyprint@2.1.9/libs/leaflet.min.css" rel="stylesheet">

<script>
let map;
map = L.map('map');

//中心の経度緯度
const center = ['35.681236', '139.767125'];

//ズームレベル
const zoom = 12;

//マップの中心地とズームレベルを指定
map.setView(center, zoom);

const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 19
});
tileLayer.addTo(map);

//プラグインのオプション設定
const option = {
    sizeModes: ['Current', 'A4Landscape', 'A4Portrait'],
    filename: 'テストマップ',
    exportOnly: true,
    hideControlContainer: true
};

//プラグイン実行
const printer = L.easyPrint(option).addTo(map);
</script>

オプション設定について

オプション項目についてはこちらのページを参照すること。