利用ガイド – MSPF-NEXT-DEV

地図表示方法

地図描画ライブラリを使用するために以下のJavaScriptとCSSの参照をHTMLファイルの<head>の中に記載する

<script src='https://{domainName}/map/v1.0.0/maplibre-gl.js'></script>
<link href='https://{domainName}/map/v1.0.0/maplibre-gl.css' rel='stylesheet' />

※URLの{domainName}部分は別途連絡

以下のライブラリ初期化処理をHTMLファイルの<body>の中に以下のコードをコピーする。style部分でMap Gatewayからスタイルを取得することによってMap Gatewayから地図データを取得する設定となっている。

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
    var map = new maplibregl.Map({
    container: 'map',
    style: 'https://{domainName}/tile/v1/awz_style.json',
    accessToken: 'apikey',
    sessionId: 'sessionid',
    center: [136.88264,35.17068], //初期緯度経度
    zoom: 14 // 初期縮尺
    });
</script>

HTMLを開くとこのように地図が描画される

独自パラメータ

地図の描画ライブラリはmaplibre-glをベースにしており基本的な使用方法はMapLibre GL JS Docsに記載されているが、認証サーバーを介して地図データを取得できるように以下オプションを追加している

パラメータ	意味
accessToken	リクエストヘッダのx-api-key にこの値が使われる
sessionId	リクエストヘッダのx-session-id にこの値が使われる

test.gif
100 KB ダウンロード