maps-react

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

この Step の前提

Step 0 を終えて、React アプリに地図が表示できる状態から始めます。この時点の表示範囲は既定のままです。この Step では、表示する場所と視点の角度を指定します。

場所と拡大率を指定する

maps-react の設定は、すべて Map コンポーネントの props で指定します。場所は center、拡大率は zoom です。

<Map
  apiKey="YOUR-API-KEY"
  center={[139.745438, 35.658581]}
  zoom={16}
  containerStyle={{ width: "100%", height: "100vh" }}
/>

center：地図の中心の座標。[経度, 緯度] の順で指定します。上の値は東京タワーの座標です。任意の地点の座標は、Google マップなどで右クリックすると取得できます。Google マップは「緯度, 経度」の順で表示するため、順序を入れ替えて指定します。
zoom：拡大率。数字が大きいほど寄ります。目安は、11 で都市の全体、14 で街区、16 で建物が見えるくらいです。

視点を傾けて回す

平面図だけでなく、視点の角度も指定できます。傾きは pitch、回転は bearing です。あわせて中心にマーカーを表示します。ここまでの指定を反映した全体が次のコードです。

import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { createRoot } from "react-dom/client";
import { Map } from "@geolonia/maps-react";

createRoot(document.getElementById("root")).render(
  <Map
    apiKey="YOUR-API-KEY"
    center={[139.745438, 35.658581]}
    zoom={16}
    pitch={45}
    bearing={20}
    marker
    markerColor="#e4402f"
    containerStyle={{ width: "100%", height: "100vh" }}
  />,
);

pitch：地図を手前に倒す角度（度）。0 が真上からの平面図。
bearing：地図を回す角度（度）。0 が北が上。
marker / markerColor：中心にマーカーを表示するかどうかと、その色。

動いたか確認する

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

うまくいかないとき

中心が海や別の国に飛ぶ → 経度と緯度が入れ替わっています。center は [経度, 緯度] の順です。日本国内であれば経度はおよそ 123〜146、緯度はおよそ 24〜46 です。
props を指定したのに反映されない → 値を文字列で渡していないか確認。数値と配列は zoom="16" ではなく zoom={16} のように JSX の {} で渡します。

次の Step

以上で、初期位置とズームの設定は完了です。この時点で地図に表示されているのは中心の1点だけです。次の Step 2: GeoJSON データの追加で、複数の地点データを地図に重ねます。