IncrementP MP WORLD+

法人向けサービス
TOP > デジタル地図の開発者ブログ > LeafletでMapFan APIの地図を表示する
2020.01.31

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

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

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

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=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        // ここに処理を実装
    </script>
</body>
</html>

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

[Step 2] 認証の実装

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

 https://api-auth.mapfan.com/v1/auth?
 appid  認証ID  弊社よりお客様毎に発行します。
月5,000PVまで無料でご利用いただけるプランもご用意しております。
詳しくはこちらをご確認ください。
 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: '&copy INCREMENT P CORPORATION <a href="https://api-auth-pre.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=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map'></div>
    <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: '&copy INCREMENT P CORPORATION <a href="https://api-auth-pre.mapfan.com/terms/mfapi_terms.pdf">利用規約</a>'
                }).addTo(map);

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

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

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

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

  • スクロールしない静止画の地図画像を取得
  • 住所やスポット名などから緯度経度を取得(ジオコーディング)
  • 緯度経度から住所を取得(逆ジオコーディング)
  • 車/徒歩でのルート情報を取得
  • 日本測地系↔世界測地系変換

また『地図画像取得API』に関しても、地図上の表示物をコントロールしたり、地図のデザインを変えたりするパラメータをご用意しています。
それらの詳細および使用方法については、また別の機会にご紹介したいと思います。




法人向けサービスに関するお問い合わせはこちらから

法人向けサービスに関するお問い合わせはこちらから

関連サービス

関連記事