またもやLeafletの記事です。
さて、今回は、Leafletのマーカーやオブジェクト等をクリックした際に、JavaScriptの関数を動作させたい！となったときに見る記事です。
↑？？？？
なんで必要になったか
わたしが開発している、アメダス天気Viewerという(ウェザ◯ニュ◯スのパクリみたいな)アプリで、アメダス観測点をクリックした際に、グラフを描画する機能をつけようと思ったところが始まりでした。
どうするか。
実は結構簡単で、マーカーオブジェクトとかに、
circle.on('click', function(e) { createGraph(element[0], e);});
とつけるだけで動作が実現できます。
circleというのは、
var circle = L.marker(amedas_latlng, …
のように、オブジェクトを宣言した変数です。
circle.on('click', function(e) { createGraph(element[0], e);});
さっきのこれであれば、クリックしたときに、createGraph()という関数を実行できます。
ここまでで以上です。
次に引数の便利な使い方を書きますね。
引数のelement[0]というのは何番目の観測点か、
eというのはこの下で解説します。
eとはなんぞか
eはとても便利なもので、そのオブジェクトのプロパティを持ってきてくれます。
まあ実演したほうが早いので実演します。
circle.on('click', function(e) { createGraph(element[0], e);});
circle.kjName = element[1]['kjName']; //(中身の例は「大阪」)
circle.knName = element[1]['knName']; //(中身の例は「オオサカ」)
じつは先程の続きはこうなっていて、
circle.kjNameとかいう変なプロパティをつけられていることがわかります。
そして、引数の渡し先の関数を見てみると、
function createGraph(stationID, e) {
console.log('createGraph('+stationID+', '+e.target.kjName+'('+e.target.knName+')'+')');
element[0]がstationIDという引数に、eはそのまま渡されています。
そして、その下には…！
e.target.kjName
ありました！kjName！
そして、このconsole.logの出力は…！
createGraph(62078, 大阪(オオサカ))
じつはこのeは…
じつはこのeというのは、
circle.kjName = "大阪";
とつけたプロパティが
e.target.kjName //(出力⇛「大阪」)
というので取り出せるのです！
これで、Leafletの点をクリックしたときに、その点にあった動作を可能にできます。
今回の例では、その点のグラフを作成すると言ったように、LeafletとJavaScriptを連動させることができました！
わからなければ
わからなければ、いったんeをconsole.logかなんかで出力して実態を探ってみてください。
そうすればどこにプロパティが来ているのか、また他の情報も探ることができて面白いですよ！
以上です。