MapLibre GL JS入門 #JavaScript

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にすると表示されません
マーカーにポップアップをバインドします

アイコンをぽちっとクリックするとポップアップが表示されるようになりました～

MapLibre GL JS入門

MapLibre GL JSとは

導入

背景地図表示

アイコン表示

参考文献