Geolonia Mapsを画像でダウンロードして著作権表示して使う方法

# 概要

地図アプリを開発していますが、たくさんの地図画像（PNG）が必要になりました。
「Python 用ライブラリの staticmap を使って OpenStreetMap の画像を取得する」方法を使っていましたが、Leaflet地図のデザインが今一つ（すみません。個人の主観です）なので、別の地図画像を探していました。

Geoloniaさんの地図は、月20,000回まで無料で地図を表示できますし、開発環境なら制限を気にせず無料で使えるので、ありがたいです。デザインも素晴らしく、こちらを使わせていただくことにしました。

[Geolonia 料金](https://geolonia.com/pricing/)

最初はCanvasをtoDataUrlメソッドで取得できると考えていましたが、透明な画像しかキャプチャできず困っていました。Geoloniaの中の人に相談したら、「@geolonia/mbgl-export-control」というパッケージを紹介してもらいました。Geolonia Mapsの画像をダウンロードする方法を解説します。Node.jsを使って実装していきます。

# 環境

MacBook Air (M1)
node v14.2.0
npm 9.4.0
express、ejs、express-ejs-layoutsパッケージをインストール済み
publicフォルダーに「img」「css」「js」「json」ファイルを配置して、配信するようにしている

# @geolonia/mbgl-export-control

@geolonia/mbgl-export-controlのGitHubを見てみましょう。

[@geolonia/mbgl-export-control](https://github.com/geolonia/mbgl-export-control)

![Demo Image](https://camo.githubusercontent.com/99004b880aa2a4a52d9689c04aa60daac0f19577b9d9f5b8cc44b8e4f38b48f2/68747470733a2f2f7777772e657665726e6f74652e636f6d2f6c2f414257374339767a6575394673724d66753930306c684f6b6e4c566463502d76634351422f696d6167652e706e67)


地図画像（Mapbox GL JS）をPNG画像でダウンロードするボタンを設置してくれるプラグインです。このプラグインを使うと、Geolonia Mapsの地図画像をダウンロードできるようになります。著作権表示も指定できる優れものです。



# パッケージのインストール

初めに、パッケージをインストールします。@geolonia/mbgl-export-controlをバンドルするために、webpackもインストールしておきます。

```
$ npm install @geolonia/mbgl-export-control
$ npm install --save-dev webpack webpack-cli
```

# 地図表示用のejsファイル

次に、地図表示用のejsファイルを作成します。

```index.ejs
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<title>Example: @geolonia/mbgl-export-control</title>
<style>
#map
{
  width: 1000px;
  height: 800px;
}
</style>
</head>
<body>

<p>/export-map?lat=緯度&lng=経度&zoom=倍率</p>

<div id="map"
     data-lat="<%= lat || "34.704395" %>"
     data-lng="<%= lng || "135.494771" %>"
     data-zoom="<%= zoom || "14" %>"
></div>

<script type="text/javascript" src="https://cdn.geolonia.com/v1/embed?geolonia-api-key=YOUR-API-KEY"></script>
<script src=/js/bundle.js"></script>
</body>
</html>
```

GitHub の doc/index.html にあるサンプルを一部改変しました。
URLクエリパラメータ「?lat=緯度&lng=経度&zoom=倍率」で地図の緯度経度、拡大倍率を指定できるようにしました。地図の表示とダウンロードボタンを設置するコードは、src/js/app.jsに記載します。

Geolonia Mapsは、次のscriptタグを入れるだけで使えるようになります。開発環境では、共通のAPI KEY「YOUR-API-KEY」を指定するだけで、簡単に地図を表示できます。至れり尽くせりで開発者に優しいですね。

```
<script type="text/javascript" src="https://cdn.geolonia.com/v1/embed?geolonia-api-key=YOUR-API-KEY"></script>
```

# 地図の表示とダウンロードボタンの設置

地図の表示とコントロール部分のコードをJavaScriptで記載します。

```src/js/app.js
import ExportControl from '@geolonia/mbgl-export-control'

const map = new mapboxgl.Map("#map");

// Add the control to download png.
map.addControl(new ExportControl({
    dpi: 300,
    attribution: "© Geolonia | © OpenStreetMap Contributors",
}));
```

READMEのサンプルを一部改変しました。
オプションで著作権表示（attribution）を指定できます。"© Geolonia | © OpenStreetMap Contributors"と、著作権表示して使うことができます。

# webpackでバンドルする

webpackを使うと、Node.jsのモジュールシステムをブラウザでも利用できるようになります。webpack.config.jsは最小の構成としました。

```webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/app.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: "js/bundle.js"
  }
}
```

コンソールで、Webpackを実行すると、public/js/bundle.jsに地図表示・ダウンロードのJavacriptコードがバンドルされて出力されます。

```console
$ webpack
```

バンドルしたJSファイル（public/js/bundle.js）を index.ejsで読み込みます。

```index.ejs
<script src=/js/bundle.js"></script>
```

# Expressでレンダーする

こちらの環境では、mapsController.js で地図関連のejsをレンダリングしています。

```mapsController.js
module.exports = {
    export_map: (req, res) => {
        res.render("index", {
            lat: req.query.lat,
            lng: req.query.lng,
            zoom: req.query.zoom,
        });
    },
    ...
```

Expressを使って、index.ejsファイルを表示できるようにします。URLクエリパラメータ（lat、lng、zoom）をejsに送ることで、任意の地図地点を指定できます。

# 地図の表示とダウンロード

ローカルでサーバーを立ち上げて、ブラウザで表示します。

```
http://localhost:3000/export-map?lat=35.6809591&lng=139.7673068&zoom=14
```

![mbgl-export-control.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/f9105797-ff17-4766-b3e0-193c97a2b68e.png)

ダウンロードボタンが設置できたので、クリックして画像をダウンロードしてください。オプションで指定した著作権表示が画像右下に入りますので、このまま使うことができます。これで完成です！

初心者なので、もっと良いやり方、書き方があればぜひ教えてください。記事を更新してより良いものにしたいと考えています。よろしくお願いいたします。

# 参考

[Geolonia](https://geolonia.com/)

[@geolonia/mbgl-export-control](https://github.com/geolonia/mbgl-export-control)