【react-leaflet】LocateControlライブラリを使って立体感のある現在地アイコンを作成する

今回は、react-leaflet付属のライブラリ「LocateControl」を使った現在地アイコンの

作り方を紹介します。

ポイントは、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でマップに追加すれば完了。

完成図はこちら。

ネイティブほどではないですがかなりそれに近いクオリティになりました。

iphoneでは使用時に英文で謎のメッセージ(どんな内容化は忘れましたがエラーではないです)

がでてくるので気になる場合はコルドバプラグインのgeolocationを使って直接緯度経度

を入力するという代替え手段があるのでそちらを使ってみてください。