【react-leaflet】Locateインスタンスを使用して制度の高い現在地アイコンを作成する

googlemapAPIにはハイクオリティかつ多機能なプロパティがいくつも備わっています。

react-reafletでもgoogle程ではないですがオプションで設定することで以下のようなヌルヌル動く

現在地アイコンを表示することができます。

ポイントは、drawCircleとdrawMarker。前者が現在地周辺を円形の波で浸潤させて表示するエフェクトで

後者は青丸のアイコンになります。青丸の外線には現在地測定を表すプログレスバーのようなものが

流れています。

※Locateを使用するにはnpm i leaflet.locatecontrolを実行してください。

</pre>
const locateOptions = {
position: 'bottomleft',
drawCircle: true,
drawMarker: true,
};

<LocateControl options={locateOptions} startDirectly/>
<pre>

</pre>
<div>
<div>import Locate from "leaflet.locatecontrol";</div>
</div>
class LocateControl extends Component {
componentDidMount() {
const { options } = this.props;
const { map } = this.props.leaflet;

const lc = new Locate(options);
lc.addTo(map);
}

render() {
return null;
}
}
<pre>

この現在地アイコンを別コンポーネントで作り、propsとして受け取った後にコンストラクタに設定します。

後は他のプロパティと同じaddToでマップに追加すれば完了。

完成図はこちら。

ハイブリッドアプリでここまでのクオリティに仕上がるのはすごい。