embed-reactでReactに地図を埋め込む

　embed-reactとは

株式会社Geoloniaが提供するGeoloniaMapsをReactアプリに埋め込むためのライブラリです。

リポジトリ： https://github.com/geolonia/embed-react/tree/main

　let's coding！

◼︎ 準備

reactアプリを作成。

npx create-react-app my-app

embed-reactをインストールします。

npm install --save @geolonia/embed-react

◼︎ 地図を表示する

API Keyの取得方法は、こちらのチュートリアルを確認！

App.js

import './App.css';
import { GeoloniaMap } from '@geolonia/embed-react';

function App() {
  return (
    <div className="App">
      <GeoloniaMap 
          apiKey={api-key}
          style={{height: "400px", width: "100%"}}
          lat={127.96911949041572}
          lng={26.588972870618022}
          zoom="8"
      />
    </div>
  );
}

export default App;

◼︎ マーカーを複数表示する

App.js

import './App.css';
import { GeoloniaMap } from '@geolonia/embed-react';
import React from "react";


function App() {

  // markerの位置データ
  const data = [
    {
        lat: 26.1913942,
        lon: 127.8004151
    },
    {
        lat: 26.3351306,
        lon: 127.7993454
    },
    {
        lat: 24.3310297,
        lon: 123.9088860
    },
  ];

  const mapRef = React.useRef(null);

  // コールバック関数
  const handler = React.useCallback(() => {
    const map = mapRef.current;
    // データ分markerオブジェクトを生成
    for(let i = 0; i < data.length; i++) {
        const marker = new geolonia.Marker({color: '#F9BF3D'})
                        .setLngLat([data[i].lon, data[i].lat])
                        .addTo(map);
    }
  }, [])


  return (
    <div className="App">
      <GeoloniaMap 
          apiKey={api-key}
          style={{height: "400px", width: "100%"}}
          lat={127.96911949041572}
          lng={26.588972870618022}
          zoom="8"
          marker="off"       // これ追加
          mapRef={mapRef}    // これ追加
          onLoad={handler}   // これ追加
      />
    </div>
  );

}

export default App;

地図読み込み後、onLoadに設定したコールバック関数が実行されるので、その中でmarkerオブジェクトを生成し、mapに紐付けます。
https://github.com/geolonia/embed-react/blob/main/src/GeoloniaMap/GeoloniaMap.tsx#L61

◼︎ マーカーにイベントをつける

maplibreのmarkerには、drugイベントはあるけどclickイベントがなく、どうやってmarkerがクリックされた時に処理を実行しようか悩みましたが、普通にaddEventListenerでいけました。。

// 省略
// コールバック関数
const handler = React.useCallback(() => {
    const map = mapRef.current;
    // データ分markerオブジェクトを生成
    for(let i = 0; i < data.length; i++) {
        const marker = new geolonia.Marker({color: '#F9BF3D'})
                        .setLngLat([data[i].lon, data[i].lat])
                        .addTo(map);
        // ↓ これで
        marker.getElement().addEventListener('click', () => {
            alert("click!!")
        }, false);
    }
}, [])

参考

• https://maplibre.org/maplibre-gl-js-docs/api/markers/#marker.event:dragstart