浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【react】react-leafletのズームボタンをコンポーネント化する

react-leafletで拡張性の面を考慮してコンポーネントからズームボタンを作りたいと思い
カスタマイズして作ってみました。
作り方は特に通常のコンポーネント作成作業と変わらないかも。react-leaafletでマップが表示されれば
もう自由に作れます。一つずつ説明しようと思いましたが必須コードのみ網羅したほうが楽だと思ったので参考に
したい方はどうぞ。
まず、zoomControlをfalseにします。これがtrueまたは未設定だとZoomControl以外のデフォルトのズームボタンが表示されて
ズームボタンが二つに増えてしまうので忘れずにチェックをば。
</pre>
<div>
<div>import { withRouter } from 'react-router';</div>
<div>import L from 'leaflet';</div>
<div>import 'leaflet/dist/leaflet.css';</div>
<div>import { Map, Marker, Popup, TileLayer } from 'react-leaflet';</div>
<div>import ZoomControl from '../components/ZoomControl';</div>
<div>const zoomOptions = {</div>
<div>    position: 'topright',</div>
<div>  }</div>
<div><Map center={this.state.position} style={{height: '200px'}} zoom={15} zoomControl={false} id='map'></div>
<div>  <ZoomControl className="zoom" options={zoomOptions}/></div>
<div>  <TileLayer</div>
<div>  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"</div>
<div>  attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors" /></div>
<div></Map></div>
<div></div>
</div>
<pre>

</pre>
<div>
<div>今回追加したZoomControlコンポーネント。propsでオプションとマップを受取りL.Controlでmapに機能追加</div>
<div>をしています。普通のコンポーネントとは異なりwithLeafletを使ってmapComponentとやりとりしています。</div>
<div>//ZoomControl</div>
<div></div>
</div>
<pre></pre>
<pre></pre>
<div>import React, { Component } from "react";</div>
<div>import { withLeaflet } from "react-leaflet";</div>
<div>import L from 'leaflet';</div>
<pre></pre>
<div>class ZoomControl extends Component {</div>
<div>  componentDidMount() {</div>
<div>    const { options } = this.props;</div>
<div>    const { map } = this.props.leaflet;</div>
<pre></pre>
<div>    L.control.zoom({options}).addTo(map);</div>
<div>  }</div>
<div>  render() {</div>
<div>    return null;</div>
<div>  }</div>
<div>}</div>
<div><span style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 1rem;">export default withLeaflet(ZoomControl);</span></div>
<pre>
render部分は不要。(addToで追加するだけなので)
  • この記事いいね! (0)