MapLibreとは？
地図開発の可能性を広げるオープンソース地図ライブラリ
弊社はこれまでGoogle MapsやBing Maps、Here Mapsなど、さまざまな商用地図サービスの開発に携わってきました。最近、新たにMapboxやオープンソースのMapLibre GL JSの開発機会を得て、その中でも特にMapLibreを試してみました。
今回はMapLibreを触ってみて感じたことや、技術的ポイント、そして今後の展望についてまとめます。
MapLibreの特徴
オープンソース地図ライブラリとしての魅力
MapLibreは、Mapbox GL JSのオープンソースフォークで、ベクタースタイルの地図描画が得意なライブラリです。商用マップとも組み合わせやすく、自由度の高いカスタマイズが可能です。
MapLibreを使ってみた
導入から表示までの実践レビュー
実際にシンプルなコードで地図を表示してみると、動作は軽快で、Maplibre公式のサンプルを参考にしながらスムーズに開発を進められました。今回の検証ではMapLibre GL JSを先に導入し、後にMapboxでの動作確認も行っています。
地図のベースには今回は地理院地図を使用しましたが、他の地図サービスもあわせて検証し、目的や環境に応じた使い分けの方向性も見えてきました。
（コード例は以下をご覧ください）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MapLibre Test</title>
<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const map = new maplibregl.Map({
container: "map",
style: {
version: 8,
sources: {
gsi: {
type: "raster",
tiles: [
"https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"
],
tileSize: 256,
attribution: "©国土地理院"
}
},
layers: [
{
id: "gsi-layer",
type: "raster",
source: "gsi"
}
]
},
center: [140.0535, 35.6557],
zoom: 12,
});
const bluePin = document.createElement("div");
bluePin.innerHTML = `
<svg width="24" height="36" viewBox="0 0 24 36" xmlns="http://www.w3.org/2000/svg">
<path fill="#00e" stroke="#009" stroke-width="1" d="M12 0C7 0 3 5 3 10c0 6 9 23 9 23s9-17 9-23c0-5-4-10-9-10z"/>
<circle cx="12" cy="10" r="4" fill="#fff"/>
</svg>
`;
new maplibregl.Marker(bluePin)
.setLngLat([140.0535, 35.6557])
.addTo(map);
});
</script>
</body>
</html>
技術的なポイント
MapLibre活用における要点まとめ
- スタイルはJSONで柔軟に変更可能
- GeoJSONの読み込みも簡単で、独自データの表示が可能
- 商用タイルとの連携もできて実務利用に十分対応
課題と展望
MapLibreの限界と今後の活用可能性
MapLibreは柔軟性が高く可能性を感じますが、一方で商用マップのようなサポートはなく、スタイル設計には一定の習熟が必要と感じました。
今後は地図描画とタイル提供の役割分担がより明確になると予想され、その中でMapLibreは描画エンジンとして有力だと感じています。
まとめ
MapLibreは商用地図の代替となるか？
MapLibreは商用地図サービスと対立するものではなく、地図表現の自由度を高める補完的な選択肢です。
商用マップとオープンソースをうまく使い分ける時代に、こうした技術を扱えることは、開発者としての強みになると感じます。
今回はMapLibreを使って、基本的な地図表示の流れを確認しましたが、
今後はスタイルフォーマットを自作したり、より用途に応じたカスタマイズにも挑戦してみたいと思っています。
「既存のサービスだとちょっと物足りない」「自分で地図の見た目や挙動をコントロールしたい」
そんな方にとって、MapLibreはとても相性の良いツールだと感じました。
次回は、そうしたカスタム地図づくりについて、もう少し掘り下げてみる予定です。
どうぞお楽しみに！
この記事は、弊社現役エンジニアのK.Sが執筆しました。