2020.01.31

LeafletでMapFan APIの地図を表示する

Webページ上でマウスやタップ操作に応じた動く地図を表示するには、JavaScript地図ライブラリをページ内に組み込む必要があります。

MapFan と同じデザインの地図をWebサイト上に表示したり、地点検索やルート探索を行うための機能を備えたWebシステム向け開発キット：MapFan API でもJavaScriptライブラリを用意していますが、ここでは著名なオープンソースのJavaScriptライブラリ：Leaflet.js で、MapFan APIの地図を表示する方法をご紹介します。

MapFan API 仕様書ダウンロードはこちら＞

・Leaflet.js とは
・[Step 1]　HTML準備
・[Step 2]　認証の実装
・[Step 3]　地図表示の実装
・まとめ

Leaflet.js とは

Leaflet.jsは、オープンソースのJavaScript地図ライブラリとして最も有名なものの一つです。
以下のような特徴を持ち、多くの商用サービスでも利用実績があります。

モバイルを含む幅広いブラウザをサポート
シンプルなインターフェースで開発も比較的容易
プラグインも充実しており、拡張性も高い
ライセンスは「BSD-2-Clause」

本稿では、MapFan APIから取得した地図をLeafletで表示するまでの手順を、以下の流れでご紹介します。

Step 1：HTML準備
Step 2：認証の実装
Step 3：地図表示の実装

尚、Leafletの使い方に関するお問い合わせは、弊社技術サポートの対象外となりますのでご了承ください。

[Step 1]　HTML準備

ここでは、一つのHTMLファイルのみで地図表示を完結させるべく、cssやJavaScriptのコードはHTMLファイル内に記載していきます。
まず、ベースのHTMLを以下のように準備します。地図を表示する領域をdivタグで用意し、idを付与してください。
cssは、地図を全画面で表示するように設定しています。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>MapFan API Leafletサンプル</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        .copyright {
            font-family: 'Meiryo UI';
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <script>
        // ここに処理を実装
    </script>
</body>
</html>

Leafletのcssとjsは、公式ページで案内されているCDNから読み込むこととします。

[Step 2]　認証の実装

次に、認証処理を実装します。
『認証API：auth』をコールし、アクセスキーを取得します。
『認証API』のパラメータは以下です。

https://api-auth.mapfan.com/v1/auth?

パラメータ	名称	説明
appid	認証ID	弊社よりお客様毎に発行します。
date	利用時の現在時刻	“yyyyMMddhhmmss” の形式で指定します。
callback	JSONPで利用するコールバック用関数名	指定が無い場合は、JSONでレスポンスを返却します。

ソースコードは以下のようになります。
認証APIの処理結果は、JSONPで受け取ることとします。

var authId = '【認証ID】'
var authUrl = 'https://api-auth.mapfan.com/v1/auth?';

var date = new Date();
var now = zeroPadding(date.getFullYear(), 4) + zeroPadding(date.getMonth() + 1, 2) + zeroPadding(date.getDate(), 2) + zeroPadding(date.getHours(), 2) + zeroPadding(date.getMinutes(), 2) + zeroPadding(date.getSeconds(), 2);

var script = document.createElement('script');
script.src = authUrl + 'appid=' + authId + '&date=' + now + '&callback=authCallback';
document.head.appendChild(script);

// ゼロパディング
function zeroPadding(number, digit) {
    return (Array(digit).join('0') + number).slice(-digit);
}

// 認証APIのコールバック関数
function authCallback(result) {
    if(result.status === 'success') {
        // ここに地図表示処理を実装
    }
}

上記では認証IDをソースコード内に直接埋め込んでいますが、公開サービスなどでご利用になる場合は認証IDが漏洩しないよう管理の上、サーバサイドで認証APIをコールし取得したアクセスキーのみをページ側へ送るなどのシステム構成をご検討ください。

[Step 3]　地図表示の実装

最後に、地図表示処理を実装します。
『地図画像取得API：map』のURLをLeafletにセットすることで、Leafletが画面に表示された範囲の地図を動的にリクエストして表示してくれます。
『地図画像取得API』の代表的なパラメータは以下です。

https://api-map.mapfan.com/v1/map?

パラメータ	名称	説明
key	アクセスキー	『認証API』から取得したアクセスキーです。
tilematrix	タイルマトリックス	“EPSGコード:スケール値” の形式で指定します。 EPSGコードは、”EPSG:3857″ または “EPSG:900913″、スケール値は、”{z}”で表現します。
tilecol	WMTSタイル番号 (経度方向)	“{x}” の形式で指定します。
tilerow	WMTSタイル番号 (緯度方向)	“{y}” の形式で指定します。

コードは、先ほどの認証処理で記載した「認証APIのコールバック関数」の中に記載します。

// 認証APIのコールバック関数
function authCallback(result) {
    if(result.status === 'success') {
        var mapUrl = 'https://api-map.mapfan.com/v1/map?';

        // LeafletのMapクラスに、地図を表示する領域のdivタグのidを指定
        // 初期表示位置・スケールは、東京駅 スケール17に設定
        var map = L.map('map').setView([35.68116552628331, 139.76719388020982], 17);

        // 地図画像取得APIを、LeafletのTileLayerクラスのURLに指定
        L.tileLayer(mapUrl + 'key=' + result.key + '&tilematrix=EPSG:3857:{z}&tilecol={x}&tilerow={y}&', {
            maxZoom: 21,
            minZoom: 6,
            attribution: '<span class="copyright">&copy GeoTechnologies, Inc.</span> <a href="https://api-auth.mapfan.com/terms/mfapi_terms.pdf">利用規約</a>'
        }).addTo(map);

        // スケーラーを表示
        L.control.scale({ maxWidth: 200, position: 'bottomleft', imperial: false }).addTo(map);
    }
}

表示してみると、このようになります。

まとめ

ここまでのソースコードをまとめると以下になります。

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8' />
    <title>MapFan API Leafletサンプル</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        .copyright {
            font-family: 'Meiryo UI';
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <script>
        var authId = '【認証ID】';
        var authUrl = 'https://api-auth.mapfan.com/v1/auth?';

        var date = new Date();
        var now = zeroPadding(date.getFullYear(), 4) + zeroPadding(date.getMonth() + 1, 2) + zeroPadding(date.getDate(), 2) + zeroPadding(date.getHours(), 2) + zeroPadding(date.getMinutes(), 2) + zeroPadding(date.getSeconds(), 2);

        var script = document.createElement('script');
        script.src = authUrl + 'appid=' + authId + '&date=' + now + '&callback=authCallback';
        document.head.appendChild(script);

        // ゼロパディング
        function zeroPadding(number, digit) {
            return (Array(digit).join('0') + number).slice(-digit);
        }

        // 認証API コールバック
        function authCallback(result) {
            if(result.status === 'success') {
                var mapUrl = 'https://api-map.mapfan.com/v1/map?';

                // LeafletのMapクラスに、地図を表示する領域のdivタグのidを指定
                // 初期表示位置・スケールは、東京駅 スケール17に設定
                var map = L.map('map').setView([35.68116552628331, 139.76719388020982], 17);

                // 地図画像取得APIを、LeafletのTileLayerクラスのURLに指定
                L.tileLayer(mapUrl + 'key=' + result.key + '&tilematrix=EPSG:3857:{z}&tilecol={x}&tilerow={y}&', {
                    maxZoom: 21,
                    minZoom: 6,
                    attribution: '<span class="copyright">&copy GeoTechnologies, Inc.</span> <a href="https://api-auth.mapfan.com/terms/mfapi_terms.pdf">利用規約</a>'
                }).addTo(map);

                // スケーラーを表示
                L.control.scale({ maxWidth: 200, position: 'bottomleft', imperial: false }).addTo(map);
            }
        }
    </script>
</body>
</html>

70行弱程度で動く地図を埋め込んだページを用意できました。28行目の【認証ID】をお客様へ発行したものに差し替えることで、お手元のブラウザでも動作確認が可能です。

————————————————————————————————————————

今回は、シンプルに地図表示を行う手法についてご紹介しました。MapFan APIには他にも、以下のような機能を持つAPIをご用意しております。