【react】reactleaflet.locatecontrolを使って現在地を表示する

react-leafletで特定の座標から現在位置に移動するにはleaflet.locatecontrolを

使う必要があります。

npmを使っている方は以下の形でインストールすることができます。

npm install leaflet.locatecontrol –save

インストールができたら単体コンポーネントを作っていきます。

使い方は、Locateオブジェクトにprop.optionsを追加してaddToするだけ。

lc.start();も忘れずに書いておくこと。

子コンポーネント

</pre>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>import React, { Component } from "react";<br />import { withLeaflet } from "react-leaflet";<br />import Locate from "leaflet.locatecontrol";</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>class Locate extends Component {<br />componentDidMount() {<br />const { options } = this.props;<br />const { map } = this.props.leaflet;</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">const lc = new Locate(options);
lc.addTo(map);

  lc.start();</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>render() {<br />return null;<br />}<br />}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>export default withLeaflet(Locate);</p>
<pre>

親コンポーネント

</pre>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>render() {<br />const baseLocateOptions = {<br />position: 'topright',<br />strings: {<br />title: 'タイトルを表示します!'<br />},<br />onActivate: () =&gt; {}<br />}</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">return (
  &lt;Map center={this.props.center} zoom={this.props.zoom}&gt;
    &lt;TileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution='© &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
    /&gt;
     &lt;LocateControl options={baseLocateOptions} startDirectly/&gt;
  &lt;/Map&gt;
);</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>}</p>
<pre>

現在地を出すだけのシンプルなボタンの場合はこれでOK。

他にも多数のpropが用意されているので味気ないと感じたらお好みでカスタマイズしてみてください。