@geolonia/embed-react

Geolonia Maps Embed for React

Geolonia Maps の地図を React のアプリケーションに埋め込むためのライブラリー。

デモや使い方を見る

インストール

npm install --save @geolonia/embed-react

yarn add @geolonia/embed-react

使い方

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

const Page = () => {
  return <>
    <h1>私の地図</h1>
    <GeoloniaMap
      apiKey="YOUR-API-KEY"
      style={{height: "200px", width: "100%"}}
      lat="35.681236"
      lng="139.767125"
      zoom="16"
    />
  </>
}

Geolonia Maps をご自身のサイトに表示させるために API キーが必要となります。詳しくはこちらをお読みください。

Embed API と の違い

Embed API は data-* アトリビュートで引数を渡していますが、 React インテグレーションは data-* がありません。例えば、 data-lat="35" の代わりに、 lat="35" で指定してください。 - で別れている言葉があれば camelCase でつなげてください。(例： data-navigation-control が navigationControl になります)

また、 React や JavaScript の制約上制限されている属性名が変わります。下記の表を参照しにしてください。

Embed API の属性	Embed React の props 名
data-style="geolonia/basic"	mapStyle="geolonia/basic"
data-3d="on"	render3d="on"

embed-react は使用するコンポーネントがマウントされる時に Embed API の JavaScript が読み込まれているかを確認し、読み込まれていない場合は動的に追加します。もしサイトのほとんどのページに Geolonia Maps 地図を埋め込む場合は、テンプレートの index.html に埋め込むことをおすすめします。サンプルを確認する

カスタムコントロールを追加する

<GeoloniaMap.Control /> を使うと、独自のコントロールを地図に追加することができます。

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

const Page = () => {
  return <>
    <GeoloniaMap style={{height: "200px", width: "100%"}}>
      <GeoloniaMap.Control containerProps={ { className: 'maplibregl-ctrl' } }>
        <button>{'ボタン'}</button>
      </GeoloniaMap.Control>
    </GeoloniaMap>
  </>
}

props	type
position?	"top-left" | "top-right" | "bottom-right" | "bottom-left"
onAdd?	maplibregl.IControl['onAdd']
onRemove?	maplibregl.IControl['onRemove']
containerProps?	{ className?: string }

注意

現在のバージョンでは、 GeoloniaMap の props が変わると地図の再レンダリングが行われません。

下記の props が変わる時に動的に変更を受け付けています。

• lat, lng, zoom
  • マーカーが表示されているときはマーカーの位置を変更し、地図の中央点を新しい lat, lng, zoom に飛びます。
• mapStyle