leaflet JSの地図に現在地ボタンを表示するleaflet-Locateのようなボタンを自前で作る

現在地を表示するボタンをleaflet JSのマップ上に置きたい。
というときに下記のライブラリがあったので使わせてもらった

しかし、leaflet-locatecontrolをいざ導入してみると、ローディング中の表示が長い。。。

自分の他のコーディング部分がよろしくない可能性はあるものの、原因探すのがめんどくさかったので、自前で作ってみました。

自前のMy Leaflet Locate Button

アイコンは、font awesomeを使ってます。

埋め込んでるからか現在地情報がうまく取れないので、上記のcodepenのアイコンをクリックして、別ウィンドウで開いて、適当にマップをドラッグ。

左上の現在地ボタンを押すと今の現在地に戻るはず。

LeafletのControlの実装を今回試してみました。

上記codepenのJSを見てもらったらだいたい何やってるかわかると思います。

思いのほか簡単だったので、今後、Leafletのライブラリは自前で作れないか今後、検討していきたいと思います！

下の本の方が出版日が新しくておすすめ。