search

humangeo / leaflet-dvf

Leaflet Data Visualization Framework
MIT License
689 stars 153 forks source link

Div not visible inside popup #117

Open mdurazob opened 7 years ago

mdurazob commented 7 years ago

Hi

I am trying to put a HighCharts inside the default popup table that comes with this code:

`onEachRecord: function (layer,record) { var $html = $(L.HTMLUtils.buildTable(record));

        layer.bindPopup($html.wrap('<div/>').parent().html(),{
            minWidth: 600,
            maxWidth: 700
        });
    },

`

The code for the records is this:

var NLpopdens =[ { "CODIGO": "01", "NAME": "10", "POPU": "635100", "AREA": "162.18", "Density": "Title<br/><img src='http://joshuafrazier.info/images/maptime.gif' alt='maptime logo gif' width='350px'/>" }, { "CODIGO": "02", "NAME": "11", "POPU": "263500", "AREA": "227.11", "Density": "Title<br/><div id='container' style='width:200px; height:300px;'></div>" },

I was able to do it using an image for the row of Density, but not a DIV. Does anyone know how to solve this?

PS. The code for the HighChart

Highcharts.chart('container', { chart: { type: 'area' }, title: { text: 'Area chart with negative values' }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }, credits: { enabled: false }, series: [{ name: 'John', data: [5, 3, 4, 7, 2] }, { name: 'Jane', data: [2, -2, -3, 2, 1] }, { name: 'Joe', data: [3, 4, 4, -2, 5] }] });

And the Console in the browser gives me the following error:

Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13 at Object.a.error (highcharts.js:10) at a.Chart.getContainer (highcharts.js:258) at a.Chart.firstRender (highcharts.js:273) at a.Chart.init (highcharts.js:249) at a.Chart.getArgs (highcharts.js:248) at new a.Chart (highcharts.js:247) at Object.a.chart (highcharts.js:247) at HTMLDocument. (conflictdata.html:679) at c (jquery-1.9.1.min.js:3) at Object.fireWith [as resolveWith] (jquery-1.9.1.min.js:3)

sfairgrieve commented 7 years ago

I think this is an issue with the element not existing in the DOM when you call the Highcharts initialization code. When you call bindPopup, it's telling Leaflet to display the associated HTML when a user clicks on that layer. The associated HTML that you're passing to bindPopup is not part of the DOM until the layer is clicked and the popup is displayed. I would suggest handling the layer click event in onEachFeature and generating the HTML there, then passing the DOM element after Highcharts initialization to the bindPopup method followed by a call to openPopup. Does that make sense?