パントレ開発部

【MapLibre入門】地図を表示する方法と基本的な使い方

雑記
更新日
Programming

　サイトやブログにカスタマイズした地図を載せたい時がありますが、そんなときに MapLibre は有効なツールの一つです。このページでは 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
  • カスタマイズの自由度：MapLibre > OpenLayers > Leaflet

となっているので、そこまで難しくないコードで、色々なカスタマイズを行うことができるライブラリかなと思っています（コードを書くのは Leflet が圧倒的に楽です。ただし、日付変更線を跨ぐ図形の描画に問題点があったり、投影法が Web メルカトルから変更できなかったりします）。
　

MapLibre の導入方法

　まず HTML ファイルを作成して、MapLibre の JavaScript と CSS を読み込みます。CDN もあるので、今回はそちらを読み込みます。多用する方は、自分のサーバーに JavaScript と CSS を保存した方がいいと思います。

<link rel='stylesheet' href='https://unpkg.com/maplibre-gl/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl/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/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl/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 
});

実装例


　よく見慣れた安心感のあるマップが表示されました。
　

マーカーを追加する

MapLibre でマップにマーカーを追加するだけなら、下記の１行を追加するだけで大丈夫です。

const marker = new maplibregl.Marker().setLngLat([経度, 緯度]).addTo(map);

　マーカーの色も簡単に変えられます。便利ですね。

const marker = new maplibregl.Marker({color:'#ff0000'}).setLngLat([経度, 緯度]).addTo(map);

　ポップアップを追加するには、別途ポップアップを定義して、マーカーにセットするだけです。ここでは、右上にある閉じるボタンが邪魔なので、closebutton: false としました。

const popup = new maplibregl.Popup({offset: 25, closeButton: false}).setText(テキスト);
marker.setPopup(popup);

　全体のソースコードと実装例は以下のようになります。

<!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>

<!-- 以下OpenLayersのJavaScriptとCSS -->
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl/dist/maplibre-gl.js'></script>

<script>
function init_map() {
    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 
    });

    const marker = new maplibregl.Marker({color: '#ff0000'}).setLngLat([142.14, 43.65]).addTo(map);
    const popup = new maplibregl.Popup({offset: 25, closeButton: false}).setText('北海道');
    marker.setPopup(popup);
}

//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());

</script>
</body>
</html>


　ちなみに、マーカーのクリックイベントはポップアップが登録してあるため、マーカーにクリックイベントを付加しようと思うと、マーカークラスをオーバーライドする必要が有ります。リンクを貼るぐらいのイベントだったら、ポップアップにリンクを仕込んでおいた方が無難ですね。
　

ズームコントロール/コンパス/スケールを表示


　上の図のように、マップの右上にズームコントロール/コンパスを追加するには、以下のように記述します（ナビゲーションコントロールを追加します）。なお、コンパスをクリックすると、北が上の表示に戻ります。

map.addControl(new maplibregl.NavigationControl(), 'top-right');

　左下にスケールバーを追加するには、以下のように記述します。

map.addControl(new maplibregl.ScaleControl(), 'bottom-left');

　全体のソースコードは以下のようになります。

<!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>

<!-- 以下OpenLayersのJavaScriptとCSS -->
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl/dist/maplibre-gl.js'></script>


<script>
function init_map() {
    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 
    });

    map.addControl(new maplibregl.NavigationControl(), 'top-right');
    map.addControl(new maplibregl.ScaleControl(), 'bottom-left');
}

//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());

</script>
</body>
</html>

　ちなみに、ズームコントロールのみ追加したい場合は、以下のように記述します。

map.addControl(new maplibregl.NavigationControl({showCompass:false}));


　逆に、コンパスのみ追加したい場合は、以下のように記述します。

map.addControl(new maplibregl.NavigationControl({showZoom:false}));

　
　

少し宣伝

　当サイトは MapLibre を積極的に用いた海外旅ブログまとめサイトとなっています。トップページに地図がありますが、地名を押すと画像が開き、画像を押すと関連記事一覧（クリック数順）が開きます。地名もその国で記事が多い都市の文字が大きくなるようにしています。ぜひ覗いてみてください。
　当サイトで海外旅ブログを執筆することも可能です（もちろん無料です）！　また既にブログをお持ちの方も、当サイトからリンクを貼ることができるようになっています。パントレ開発部までお気軽にお問い合わせください。


　このページが皆様のプログラミングの一助となりますことをお祈りいたします

パントレ開発部