svg - LeafletポップアップでSVGグラフィックの例を探しています

Question

Leaflet と D3 でマップを作成しています。ポイントを Leaflet レイヤーとして取り込みます。ポップアップに SVG グラフィックを含むこれらのポイントのポップアップをバインドしたいと思います。

誰かがこれの例を見たことがありますか? ポップアップで HTML が許可されているので可能だと思いますが、実際の例を見つけたいと思います。

ありがとうございました、

リー

Answer 1

It's definitely possible. Use HTML in your popup as you normally would. For instance, you could add a <div class="popupGraph"/> element in your popup. Then simply use JavaScript as you normally would to display whatever you want in that element.

Edit: I'll add a bit more of an example. I have a very different look/feel for a Popup, so what I did was extend my own.

myPopup = L.Popup.extend({ ... });

When I initialize the popup, I add a wrapper for a div that I'll inflate with JavaScript Graph API later (I use JQuery Sparklines http://omnipotent.net/jquery.sparkline/).

this._graphContainer = L.DomUtil.create('div', 'myGraph', this.container);

Then I can treat this like any other graph.

$(this._graphContainer).sparkline({ /*my options here*/ });

This will display a live, updating graph in my popup.