Leafletで表示する地図を機能拡張してみる

2023.05.12 08:00
2023.05.04 15:11
Leafletで表示する地図を機能拡張してみる

前回はLeafletを使ってReactでOpenStreetMapの地図を表示しました。今回はその前回の地図にいろいろな機能を拡張してみたいと思います。

1. マーカーをクリックできるようにする

SpotMarkerの宣言部分にイベントハンドラーを追加して、挙動を指定するようですね。今回は「click」を指定しています。そして、その関数内にclickした時の挙動を書いてみました。

  // マーカー設定
  const SpotMarker = () => {
    return (
      <Marker
        eventHandlers={{
          click: (e) => {
            alert('マーカーをクリック')
          },
        }}
        position={{ lat: map_center_lat, lng: map_center_lng }}
      ></Marker>
    );
  };

クリックしたら「マーカーをクリック」というアラートが無事出ましたね。

2. マーカーをクリックして吹き出しを出す

まずimport部分にPopupが必要なようなので追加します。

import { MapContainer, Marker, TileLayer, Popup } from "react-leaflet";

マーカー部分にPopup処理を追加します。

  // 地図の位置を設定
  const map_center_lat = 35.681393038131624;
  const map_center_lng = 139.76712479650303;

  // マーカー設定
  const LocationMarker = () => {
    return (
      <Marker
        position={{ lat: map_center_lat, lng: map_center_lng }}
      >
        <Popup>[吹き出しに表示するテキスト]</Popup>
      </Marker>
    );
  };

3. マーカーをドラッグできるようにする

Markerにdrggableプロパティを指定すればドラッグできるようになるみたいですね。簡単です。
ドラッグが終わった時の処理はイベントハンドラーでdragendを指定してあげればできますね。

  // 地図の位置を設定
  const map_center_lat = 35.681393038131624;
  const map_center_lng = 139.76712479650303;

  // マーカー設定
  const LocationMarker = () => {
    return (
      <Marker
        draggable={true}
        eventHandlers={{
          dragend: (e) => {
            alert('ドラッグ終了')
          },
        }}
        position={{ lat: map_center_lat, lng: map_center_lng }}
      >
        <Popup>[吹き出しに表示するテキスト]</Popup>
      </Marker>
    );
  };

4. マーカーを複数表示する

これは単純にMarkerを複数書けば良いようです。こちらも簡単ですね。

  // 地図の位置を設定
  const map_center_lat = 35.681393038131624;
  const map_center_lng = 139.76712479650303;
  const map_center_lat2 = 35.68212353111148;
  const map_center_lng2 = 139.80806031887934;

  // マーカー設定
  const LocationMarker = () => {
    return (
      <>
        <Marker
          draggable={true}
          position={{ lat: map_center_lat, lng: map_center_lng }}
        >
          <Popup>吹き出しに表示するテキスト</Popup>
        </Marker>
        <Marker
          draggable={true}
          position={{ lat: map_center_lat2, lng: map_center_lng2 }}
        >
          <Popup>吹き出しに表示するテキスト2</Popup>
        </Marker>
      </>
    );
  };

実際に使うときには位置の配列を用意して、mapでMarkerを複数書く感じになると思いますので、それも書いてみます。

  // マーカーの位置
  const markers = [
    {
      lat: 35.681393038131624,
      lng: 139.76712479650303,
    },
    {
      lat: 35.68212353111148,
      lng: 139.80806031887934,
    },
  ];

  // マーカーの設定
  const LocationMarker = () => {
    return (
      <>
        {markers.map((marker, index) => (
          <Marker
            key={index}
            draggable={true}
            position={{ lat: marker.lat, lng: marker.lng }}
          >
            <Popup>吹き出しに表示するテキスト</Popup>
          </Marker>
        ))}
      </>
    );
  };

無事表示されました！

今回は以上です！