LeafletのremoveLayer()でつまづいたこと。

LeafletのremoveLayer()とは？

removeLayer()とは、Leafletという地図ライブラリから、マーカーやポリゴン、その他もろもろを消すときに使うものです。
map.removeLayer(レイヤーの名前)という形で使います。

つまづき① レイヤーの名前…？

さて、2年前の私、震度分布図を開発しよう！と言って、Leafletの沼へ沈んでいったのですが、
あれ？マーカーを消さないといけないんだけど、どうやって消すんだろう？と、思い立って調べてみることにしました。

そうしたら、map.removeLayer(レイヤーの名前)でできますよ～って感じのものが、調べて10分くらいしたら出てきたので、ほーん、やってみようではないか。と思い立ち実装してみることにしました。

ちょっと当時の感覚が出てきたので愚痴りますが、
なんかLeafletのレイヤー削除周りの解説って少なくないですか？
ん？わたしの検索能力が低い…？

そして、ん？レイヤーの名前？というところにつまづいて、
その時私はpane、つまり重ね順をコントロールするやつをちょうど実装した後だったので、レイヤーの名前か…。paneの名前で行けるやろとかいうノリでpaneの名前をぶち込みました。

もちろんレイヤーは消えません。

なぜなら、paneはただのスペースであり、マーカーやポリゴンのようなオブジェクトではないからです。

結論から言ってしまうと、レイヤーの名前とは

var shindoLayer = L.layerGroup();

のshindoLayerの部分であったり、

var shingen_icon = L.marker(lnglat, { icon: shingenIcon, pane: "shingen" }).addTo(map);

のshingen_iconの部分、つまりオブジェクトの変数名だったのです。

それを知った私、なーんだ簡単じゃない。とすぐさま改修に移りますが、ここでもエラーは出ます。
次に移ります。

つまづき② なぞのundefinedError

さて、removeLayer(レイヤーの名前)のレイヤーの名前がわかった私ですが、

QuakeSelect() {
    map.removeLayer(shingen_icon);

    var shingen_icon = L.marker(lnglat,…
}

としていたんですね。

さあて、これで解決だ！残念だったなLeaflet、お前が私に抗うには100年早かったなとかいう謎の自信を胸に、いざ実行させてみました。

Uncaught ReferenceError: shingen_icon is not defined

うーん。だめですね。

なんで？
それは簡単でした。

関数を実行するときにshingen_iconが定義されていないから！

そんならどうすんの？と思った私は次のステップへ

つまづき③ 先に定義するも…

前の解決策は簡単ですね。
なぜなら、定義されていないのであれば、先に定義しておいてあげたらいいだけですので。
よって、

QuakeSelect() {
    var shingen_icon;
    map.removeLayer(shingen_icon);

    shingen_icon = L.marker(lnglat,…
}

こうなります。
先に定義しておいたらエラーとはなりません。

しかし、エラーとはなりませんがマーカーは削除されません。
なぜなら、QuakeSelect()が実行されるごとに、shingen_iconが定義されてしまっているので、前にQuakeSelect()を実行したときにのshingen_iconとは別物になってしまっているからです。

やっと解決

var shingen_icon;
QuakeSelect() {
    map.removeLayer(shingen_icon);

    shingen_icon = L.marker(lnglat,…
}

そして解決策は、関数が実行される前に変数を作っておくことで、マーカーを削除できるようになりました。
これなら、再定義されませんので、前のマーカーを消すことができます。

まとめ

よって、Leafletでのマーカーやポリゴン等、オブジェクトの消し方は、

① 消す関数の外側に、アイコンを定義する変数をおいておく
② そして、消す

でした。

以上です。
何を書きたかったのでしょうか。