maps-suite

チュートリアル 段4：インタラクションを足す

前の段でできたこと

段3で、データを属性に応じて色分けしました。この段では、マーカーをクリックしたら情報ウィンドウが出るインタラクションを追加します。

Marker と InfoWindow

maps-suite には、地図上の1点に立てる Marker と、吹き出しを出す InfoWindow のクラスがあります。マーカーのクリックイベントで情報ウィンドウを開く、という組み立てです。

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.681236, lng: 139.767125 },
  zoom: 15,
});

const marker = new geolonia.maps.Marker({
  position: { lat: 35.681236, lng: 139.767125 },
  map,
  title: "東京駅",
});

const infoWindow = new geolonia.maps.InfoWindow({
  content: "<strong>東京駅</strong><br>JR・地下鉄各線",
});

marker.addListener("click", () => {
  infoWindow.open(map, marker);
});

部品ごとに見ていきます。

地図のクリックを受け取る

マーカーではなく地図そのもののクリックも受け取れます。クリック位置の座標は e.latLng に入っています。

map.addListener("click", (e) => {
  console.log("クリック位置:", e.latLng.lat(), e.latLng.lng());
});

「クリックした場所にマーカーを立てる」なら、この中で new geolonia.maps.Marker({ position: e.latLng.toJSON(), map }) とするだけです（toJSON() で { lat, lng } のプレーンなオブジェクトに変換できます）。

動いたか確認する

マーカーをクリックして、書いた内容が吹き出しで出れば成功です。

うまくいかないとき
  • マーカーが出ない → Marker のオプションに map を渡し忘れていないか確認。map がないと、作られても地図に取り付けられません。
  • クリックしても開かない → open(map, marker) の引数の順番を確認。第1引数が地図、第2引数がマーカーです。
  • 吹き出しが空 → content が空文字になっていないか確認。

次は

地図にインタラクションを追加できました。ここまでで、地図の表示、場所の指定、データの表示、色分け、情報ウィンドウと、ひと通りの道具が揃っています。最後の段5：公開するで、ビルドして本番公開します。