Highchart graph inside leaflet popup using geojson data and oneachfeature

Question

Fist of all, I am fairly new to javascript so I am still trying to learn, please bear with me. I am trying to create a map using leaflet that brings in a JSONP layer using WFS from geoserver on my localhost. I have successfully added the layer to the map and can use oneachfeature function to get feature properties upon clicking.

Now I what to create a highchart basic area graph that opens inside a popup, or a new window, that uses several feature properties from the geoJSON where clicked. I am struggling to understand the popup div and when the highchart actually gets created. Right now as I have it the popup opens a highchart graph in the popup window, but it is also behind the base map tile as I can see it if I pan across my map, before the base tiles finish loading. I also notice that the highchart graph does not appear to use the tooltip options such as hover. I suspect that I am not setting up or calling on my div correctly. Here is the relevant part of my code.

<body>
<div id="map">  
<div id="chartcontainer" class="highchart">
</div>      
<script>


    //URL for the WFS JSONP output from geoserver
    var URL = "http://localhost:8080/geoserver/Capstone/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Capstone:TrinityJSON&outputFormat=text/javascript&format_options=callback:getJson";

    //ajax to call the WFS from geoserver and add JSON to map
    var WFSLayer = null;
    var ajax = $.ajax({
        url : URL,
        dataType : 'jsonp',
        jsonpCallback : 'getJson',
        success : function (response) {
            WFSLayer = L.geoJson(response, {
                style: function (feature) {
                    return {
                        stroke: false,
                        fillColor: 'FFFFFF',
                        fillOpacity: 0.1
                    };
                },
                //onEachFeature used to create popup using the JSON data.  
                onEachFeature: function (feature, layer) {
                    layer.on('click', function(e){

                    var chartplotoptions ={
                        chart: {
                            type: 'area'
                        },
                        title: {
                            text: 'Aquifer Units'
                        },

                        xAxis: {
                            allowDecimals: false,
                            labels: {
                                formatter: function () {
                                    return this.value; 
                                }
                            }
                        },
                        yAxis: {
                                startOnTick: false,
                                minPadding: 0.05,
                            title: {
                                text: 'Elevation from Sea Level (ft)',

                            },
                            labels: {
                                formatter: function () {
                                    return this.value ;
                                }
                            }
                        },
                        tooltip: {
                            pointFormat: '{series.name}{point.y}'
                        },
                        plotOptions: {

                                area: {
                                pointStart: 0,
                                threshold: 657,
                                marker: {
                                    enabled: false,
                                    symbol: 'circle',
                                    radius: 2,
                                    states: {
                                        hover: {
                                            enabled: true
                                        }
                                    }
                                }
                            }
                        },
                        series: [{
                            name: 'Surface',
                            data: [parseFloat(feature.properties.Top1),parseFloat(feature.properties.Top1)]
                        }, 

                        ]
                    };


                    $('#chartcontainer').highcharts(chartplotoptions);
                    layer.bindPopup($('#chartcontainer').html());
                    layer.openPopup();  
                    });
                }
            }).addTo(map);
        }
    });

</script>
</body>

iH8 iH8 · Accepted Answer · 2016-03-15T17:06:34

Catch L.Map's popupopen event, it fires when a popup up is opened. That's when it's content get attached to the DOM, so that's when you need to initialize your chart:

new L.Marker([0, 0]).bindPopup('<div></div>').addTo(map);

map.on('popupopen', function (e) {
    console.log(e.popup._source); // Marker instance
    console.log(e.popup._contentNode); // Popup content element
});

So in your case, all you need to do in the onEachFeature method is initialize the popup and attach it to the layer:

new L.GeoJSON(url, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup('<div></div>');
    }
}).addTo(map);

Now when a feature gets clicked, the popup opens (it's default behaviour, you don't have to use the click event) the div gets attached to the DOM and the popupopen event fires on your L.Map instance. In the handler you have access to the layer that was clicked and the popup's content div element. That's when you need to do your highchart stuff:

map.on('popupopen', function (e) {
    console.log(e.popup._source); // Layer instance
    console.log(e.popup._source.feature); // Layer's feature 
    console.log(e.popup._contentNode); // Popup content element

    // Do highchart stuff with your element and feature data.
});

Highchart graph inside leaflet popup using geojson data and oneachfeature

1 Answers