maps-suite

チュートリアル Step 1: 初期位置とズームの設定

この Step の前提

Step 0 を終えて、Web ページに地図が表示できる状態から始めます。この時点の表示範囲は既定の世界全体です。この Step では、表示する場所と視点の角度を指定します。

場所と拡大率を指定する

場所と拡大率は、Map を作るときのオプションで指定します。場所は center、拡大率は zoom です。

const map = new geolonia.maps.Map(document.getElementById("map"), {
  apiKey: "YOUR-API-KEY",
  center: { lat: 35.658581, lng: 139.745438 },
  zoom: 16,
});

center：地図の中心。{ lat: 緯度, lng: 経度 } のオブジェクトで渡します。上の値は東京タワーの座標です。任意の地点の座標は、Google マップなどで右クリックすると取得できます。
zoom：拡大率。数字が大きいほど寄ります。目安は、11 で都市の全体、14 で街区、16 で建物が見えるくらいです。

生成後に変更する場合は、map.setCenter({ lat, lng }) で移動、map.panTo({ lat, lng }) でアニメーション付きの移動、map.setZoom(14) で拡大率の変更を行います。

視点を傾けて回す

視点の傾きと回転も、Map のオプションで指定できます。maps-suite では傾きを tilt、回転を heading と呼びます。

ここまでを入れた main.js の全体が次のコードです。

import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { geolonia } from "@geolonia/maps-suite";

const map = new geolonia.maps.Map(document.getElementById("map"), {
  apiKey: "YOUR-API-KEY",
  center: { lat: 35.658581, lng: 139.745438 },
  zoom: 16,
  tilt: 45,     // 地図を手前に倒す角度（度）。0 が真上からの平面図
  heading: 20,  // 地図を回す角度（度）。0 が北が上
});

tilt は地図を手前に倒す角度、heading は地図を回す角度で、どちらも度で指定します。既定はどちらも 0 で、真上から見下ろした、北が上の平面図です。

生成後に変更する場合は、傾きを map.setTilt(45)、回転を map.setHeading(20) で指定します。中心と拡大率をまとめて変更する場合は map.moveCamera({ center, zoom, tilt, heading }) を使用します。いずれも地図の読み込み完了を待つ必要はありません。

MapLibre GL JS 固有の操作が必要な場合は、map.getGeoloniaMap() で基盤の地図インスタンスを取得します。次の Step のデータ追加で使用します。

動いたか確認する

中心が東京タワーになり、地図が斜めから見た表示になっていれば成功です。center を任意の座標に差し替え、指定した地点が中心に表示されることも確認してください。

うまくいかないとき

中心が海や別の国に飛ぶ → lat と lng の取り違えを確認。日本国内なら lat はおよそ 24〜46、lng はおよそ 123〜146 です。
setPitch / setBearing で「関数がない」エラー → maps-suite での名前は setTilt / setHeading です。pitch と bearing は基盤の maplibre 側の呼び方です。
傾けたら建物が立体になった → maps-suite は 3D 建物が既定で有効です。平面で表示する場合は threeDimensional: false を渡します。

次の Step

以上で、初期位置とズームの設定は完了です。この時点で地図に重ねているデータはありません。次の Step 2: GeoJSON データの追加で、複数の地点データを地図に重ねます。