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="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors" /></div> <div></Map></div> <div></div> </div> <pre>[javascript] </pre> <div> <div>今回追加したZoomControlコンポーネント。propsでオプションとマップを受取りL.Controlでmapに機能追加</div> <div>をしています。普通のコンポーネントとは異なりwithLeafletを使ってmapComponentとやりとりしています。</div> <div>//ZoomControl</div> <div></div> </div> <pre>[javascript]</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で追加するだけなので)