Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

How to show a chart inside pop up window? I'm using Leaflet JS, which has support for raphael plugin Is it possible to create a div inside popup window? I was thinking about

If it's not possible with Leaflet, I am opened to only Raphael map solution.


share|improve this question
up vote 1 down vote accepted

I guess it is possible. I see this example at home page of Leaflet:

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.').openPopup();

So you can add markup as content. See the br tag above.

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <div class="popup_custom_div"></div> Easily customizable.').openPopup();
//retrieve the div by class name take care if more then one maybe opened
var mydiv = document.getElementsByClassName( 'popup_custom_div' )[0];
mydiv.innerHTML = 'I am here';
share|improve this answer

The answer by @cavila is only part of the solution. You can put the div tag for the chart in the popup, but the issue arises then because you will need to listen to the ".openPopup()" event to then have the raphy-carts javascript execute. If you do not do it on that event, then when it executes it will not find the div tag because it has not been inserted into the DOM. It looks like leaflet supports event listening so you will need to add something like this to the code above:

map.on('popup', function(e) {
    //Run the chart code here like this
    var chart = new Charts.LineChart('chart1');
        data: [[1, 828906, {tooltip: "my special point"}],[2, 566933],[3, 584150],[4,  
                 1072143],[5, 1622455],[6, 2466746],[7, 2427789]]

share|improve this answer
So the openPopup() is asynchronous? Because Javascript interpreter will not execute the next statement until the previous return except for callbacks that are executed later on time. An alternative if no event would be execute pooling for the existance of that "div" in a window.setTimeout loop. The event callback would be much more fast. – cavila Dec 27 '12 at 23:11

One way would be to listen for click events on your makers and create the charts on the fly. Here's an example:

One thing that wasn't clear to me until I started playing around is that Leaflet's bindPopup can take a string or a DOM node. The example above creates a DOM node, passes it to bindPopup then creates the chart.

share|improve this answer
Is that possible for polygon events? When clicked on some polygon, a similar popup shows up? – againstflow Feb 1 '13 at 12:24
Yes, should be possible. My example is hardcoded to use 50 as the value for the chart but you could do anything you like inside the function that creates the chart. – Derek Swingley Feb 1 '13 at 14:27
Can you please write an example with polygons or geojson data on jsfiddle like this with markers? I would appreciate so much. – againstflow Feb 4 '13 at 12:44

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.