【MapLibre】埋め込み地図を表示する方法
はじめに
MapLibre とは、ブラウザでマップデータを表示する、TypeScript （Microsoft が公開した JavaScript の派生言語）のオープンソースライブラリです。もともとは Mapbox が提供する Mapbox GL JS のバージョン 1.13 が前身となるのですが、2020年12月、Mapbox GL JS がバージョン 2.0 にアップデートするときに、Mapbox はオープンソースで開発することを辞め、独自で開発し、従量課金制でサービスを提供する方針に切り替えました。これに伴って、Mapbox GL JSとは別のオープンソースプロジェクトとして MapLibre が生まれました。
ブラウザでマップデータを表示するオープンソースの JavaScript のライブラリは幾つかあるのですが、例えば MapLibre の他に Leaflet と OpenLayers があります。ソースコードを書く容易さは体感的に Leaflet >> MapLibre > OpenLayers となっているので、プログラミング初心者の方には圧倒的に Leaflet をお勧めしたいのですが、日付変更線を跨ぐ図形の描画に問題点があったり、ベクトルタイルが使えなかったり問題点もあります。そういった方には MapLibre も選択肢の一つになるかと思います。
なお当サイトでは Leaflet のプログラムを自動生成するフォームを作っています。使ってみたい方はトップページをご覧ください（例はこちら）。また、Leaflet の使い方に関する記事もいくつか書いてます。
MapLibre の導入方法
まず HTML ファイルを作成して、MapLibre の JavaScript と CSS を読み込みます。CDN もあるので、今回はそちらを読み込みます。多用する方は、自分のサーバーに保存した方がいいと思います（その方がバージョン管理が楽です）。
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.4.0/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@3.4.0/dist/maplibre-gl.js'></script>次に、マップを表示させるエリアを div タグで定義します。ここで z-index = 0 としておかないと、他の要素に潜り込んだりするので注意です。ここらへんは Leaflet や OpenLayers と共通で鉄板の流れですね。
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>マップを定義するには以下のように記載します。ここでは地理院タイルVector（仮称）を使用しました。pitch とありますが、これは見た目の傾きを変えるパラメーターです。中心位置座標の設定も [経度, 緯度] なのも注意点ですね。 Leaflet だと [緯度, 経度] なので。
const map = new maplibregl.Map({
container: 'mapcontainer',
style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',
center: [142.14, 43.65],
zoom: 5,
pitch: 0
});全体のソースコードと実装例は以下の通りです。
<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth（幅）とheight（高さ）で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0; border:1px solid #333;'></div>
<!-- 以下 MapLibre のJavaScriptとCSS -->
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.4.0/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@3.4.0/dist/maplibre-gl.js'></script>
<script>
function init_map() {
const map = new maplibregl.Map({
container: 'mapcontainer',
style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',
center: [142.14, 43.65],
zoom: 5,
pitch: 0
});
}
//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());
</script>
</body>
</html>実装例
ちなみに pitch: 60 （zoom: 8）とすると、以下のような見た目になります。斜めから俯瞰して見ている感じになりますね。3D タイルだともっと面白く表示されるかと思います。
ラスタタイルを使用する
ベクトルタイルは発展途上な上、利用規約などがラスタタイル程明確でない為、ラスタタイルを使いたいという方もいらっしゃると思います。少しだけコードは長くなりますが、以下のようにするとラスタタイルを使用できます。以下、使用するタイルは OpenStreetMap としました。
const map = new maplibregl.Map({
container: 'mapcontainer',
style: {
version: 8,
sources: {
rtile: {
type: 'raster',
tiles: [
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
],
tileSize: 256,
attribution: '©<a href="https://www.openstreetmap.org/copyright/ja">OpenStreetMap</a> contributors',
},
},
layers: [{
id: 'raster-tiles',
type: 'raster',
source: 'rtile',
minzoom: 0,
maxzoom: 18,
}]
},
center: [142.14, 43.65],
zoom: 5,
pitch: 0
});実装例
よく見慣れた安心感のあるマップが表示されました。
