ドキュメントを検索

maps-react

チュートリアル Step 4: イベント処理とポップアップ

この Step の前提

この Step では、マーカーのクリックに応じてポップアップを表示します。コード例は Map と Marker だけで完結する独立した例であり、Step 3 の GeoJSON と色分けは引き継ぎません。

Marker コンポーネント

maps-react は、地図上の1点を示す Marker コンポーネントを提供します。Map の子要素として配置し、lat と lng で座標を指定します。

ポップアップは個別のコンポーネントではありません。Marker の子要素が、そのままポップアップの内容になります。

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

createRoot(document.getElementById("root")).render(
  <Map
    apiKey="YOUR-API-KEY"
    center={[139.767125, 35.681236]}
    zoom={15}
    containerStyle={{ width: "100%", height: "100vh" }}
  >
    <Marker lat={35.681236} lng={139.767125} color="#e4402f">
      <strong>東京駅</strong>
      <p style={{ margin: 0 }}>JR・地下鉄各線</p>
    </Marker>
  </Map>,
);

データから複数のマーカーを作る

Marker は通常の React コンポーネントです。配列を map() で展開すると、データ駆動で複数のマーカーを表示できます。

const spots = [
  { name: "東京駅", lat: 35.681236, lng: 139.767125 },
  { name: "新宿駅", lat: 35.690921, lng: 139.700258 },
  { name: "渋谷駅", lat: 35.658034, lng: 139.701636 },
];

<Map apiKey="YOUR-API-KEY" center={[139.73, 35.68]} zoom={12}
     containerStyle={{ width: "100%", height: "100vh" }}>
  {spots.map((s) => (
    <Marker key={s.name} lat={s.lat} lng={s.lng}>
      <strong>{s.name}</strong>
    </Marker>
  ))}
</Map>

state と組み合わせると、一覧のクリックに応じて地図のマーカーを増やす UI も、通常の React の記述だけで実装できます。

動いたか確認する

マーカーをクリックし、記述した JSX の内容がポップアップに表示されれば成功です。再度クリックすると閉じます。

うまくいかないとき
  • マーカーの位置がずれる → lat と lng が入れ替わっていないか確認。center は [経度, 緯度] の配列ですが、Marker は lat= と lng= に名前付きで渡します。
  • ポップアップが開かない → 子要素が空になっていないか確認。子要素のない Marker は、ポップアップを持たないマーカーとして描画されます。
  • 複数のマーカーで警告が出る → 配列から生成する場合は key を指定します（React の通常の規則です）。

次の Step

以上で、イベント処理とポップアップの実装は完了です。ここまでで、地図の表示、場所の指定、データの表示、色分け、ポップアップという maps-react の主要な機能を扱いました。最後の Step 5: ビルドと本番公開 で、ビルドして本番環境に公開します。