Geolonia Maps を React のアプリに埋め込みやすくするために公式コンポーネントを公開しました。
Geolonia では React を積極的に使っています。 簡単に地図や地図のスタイルを確認できる maps.geolonia.com や Geolonia Maps のダッシュボードなど、全て React をベースとして作っています。これらの中では Geolonia の地図が当然使われていますが、今まではそれぞれのプロジェクトごとに特化した実装でなんとか地図を表示していました。今回、これを整理するために React コンポーネント化することに決めました。
それが、 @geolonia/embed-react です。GitHubで使い方を見る
私は新しいプロジェクトを始めるときに気になる技術を試してみる場として使うのが好みなんですが、今回のコンポーネントのドキュメンテーション兼、サンプルコードやデモを一体化して、 Storybook として公開することにしました。
Storybook のサンプルコードが全てコンポーネントのコードと別ファイルに、横に置いてある状態なのでエンジニアとして更新や管理しやすいというメリットがありました。
Storybook はサンプルは画像ではなく、実際に動いてるコードなので、今回は普通にサイトに埋め込まれているのと同じように操作ができ、動きがある JavaScript を見せることができます。
Storybook を開くと、左側にリストが表示されます。
選択すると、右下のコードがハイライトされ、該当のコードを右上の欄に実行させます。
このコードをご自身の React アプリケーションに貼り付けて Geolonia Maps を埋め込むことができます！
注意事項
JavaScript の制約上、 React コンポーネントの API と Embed API のパラメーター名が若干異なる場合があります。例えば、 Embed API の data-marker-color="#E4402F" を指定したい場合、 React コンポーネントでは markerColor="#E4402F" で指定します。
また、 @geolonia/embed-react の <GeoloniaMap /> コンポーネントを使うと、非同期で Embed API を読み込む仕組みになっておりますので、ご自身で Embed API の JavaScript タグを埋め込む必要がありません。
詳細は GitHub 上のページを確認してください。
もし不明点・不具合・機能要望などあれば、ぜひご報告いただけると非常に助かります。
Geolonia Maps であなたが作る作品を見ることを楽しみにしております！