looking for examples of SVG graphics in Leaflet po

Question

I am building a map with Leaflet and D3. I am bringing in the points as a Leaflet layer. I would like to bind popups for these points that include SVG graphics in the popup.

Has anyone seen examples of this? I think it is possible since HTML is allowed in the popup but I would like to find a working example.

Thank you,

Lee

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.