MapLibre GL JSとは
- オープンソースのJavaScript地図ライブラリ
- Mapboxのオープンソースフォーク版
- WebGLを使用してベクトルタイルとMapLibreスタイルからインタラクティブなマップをレンダリングできる
導入
- HTMLのheadタグ内にMapLibre GL JSのcssとJavaScriptを指定する
- 執筆当時の最新バージョンは2.4.0だった
<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
背景地図表示
HTML, CSS, JavaScriptファイルを作成する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<meta name="description" content="サンプルです">
<link href="style.css" rel="stylesheet">
<!-- MapLibre -->
<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
<div id="map"></div>
<script src="main.js"></script>
</body>
</html>
- headタグ内にMapLibre GL JSのcssとJavaScriptを指定する
- 地図を配置したい場所に、あるidのdiv要素を配置する
- 今回は、idがmapのdiv要素に地図を埋め込む
style.css
html, body{
height: 100%;
}
#map{
height: 100%;
}
- 高さを指定しないと地図が表示されないので注意
main.js
var map = new maplibregl.Map({
container: 'map',
style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
center: [139.8108103, 35.7100069], // 中心座標
zoom: 16, // ズームレベル
pitch: 0 // 傾き
})
- id=mapの要素に対して、mapオブジェクトを作成する
- 中心の座標とズームレベルを設定する
- 座標は経度、緯度の順で指定する
- pitchを設定することで初期表示時の傾きを変えることができる
- スタイルにはOpenStreetMapのベクトルタイルを指定して、背景地図を表示する
- 東京スカイツリー周辺の地図を表示できました～
アイコン表示
JavaScriptファイルをいじっていきます。
var map = new maplibregl.Map({
container: 'map',
style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
center: [139.8108103, 35.7100069], // 中心座標
zoom: 16, // ズームレベル
pitch: 0 // 傾き
})
+ var marker = new maplibregl.Marker()
+ .setLngLat([139.8136911, 35.709058])
+ .addTo(map);
- markerオブジェクトを作成する
- 座標は経度、緯度の順で指定する
アイコンを表示できました！
MapLibreのデフォルトのマーカーアイコン、可愛いですね
これだけだとさみしいのでポップアップも表示してみましょう
var map = new maplibregl.Map({
container: 'map',
style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
center: [139.8108103, 35.7100069], // 中心座標
zoom: 16, // ズームレベル
pitch: 0 // 傾き
})
+var popup = new maplibregl.Popup({
+ offset: 25, // ポップアップの位置
+ closeButton: false, // 閉じるボタンの表示
+ })
+ .setText('テスト');
var marker = new maplibregl.Marker()
.setLngLat([139.8136911, 35.709058])
+ .setPopup(popup)
.addTo(map);
- ポップアップを定義します
- offsetでポップアップの位置を調整できます
- closeButtonをTrueにすると閉じるボタンが表示され、Falseにすると表示されません
- マーカーにポップアップをバインドします
アイコンをぽちっとクリックするとポップアップが表示されるようになりました～
参考文献