Second popup representing Highchart not working on leaflet geojson polygon

Question

I have leaflet polygon maps, where I am planning to give a pop up with Highchart representing the polygon information. The problem I am facing is when I click the polygon I get a popup with Highchart, however, If I click another polygon without closing the first popup results in an empty popup (however if I close the first popup and click on another polygon, popup results in the correct format). Only the problem is while clicking another polygon without closing the first popup second popup results null. Below is the JavaScript. Any advice is appreciated. Thanks in advance.

$.getJSON('data/Stat_data.json', function(dt) {
  var geojson,
    activeLayer;
  $(document).ready(function() {


    var map = new L.Map('map-holder', {
      center: new L.LatLng(53.3498, -7.2603),
      zoom: 6.6
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      minZoom: 5,
      maxZoom: 15,
      noWrap: true,
      attribution: 'Data: CSO.ie | Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    }).addTo(map);

    $.getJSON('data/County.geojson', function(data) {

      geojson = L.geoJSON(data, {
        ////////////////////////////////
        ////  Step 1 - look of the layer
        ////////////////////////////////
        style: function(feature) {
          return {
            color: '#fff',
            weight: 1,
            // fillColor: '#FED976',
            fillOpacity: 0.6,
            fillColor: '#800026'
          }
        },
        ////////////////////////////////
        ////  Step 2 - interaction
        ////////////////////////////////
        onEachFeature: onEachFeature
      }).addTo(map);
    });

    function highlightLayer(e) {
      var layer = e.target;
      activeLayer = layer;

      layer.setStyle({
        color: '#fff',
        fillColor: '#31a354'
      });

      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }

    }

    function resetHighlight(e) {
      geojson.resetStyle(e.target);
    }

    function data_pre_process(data) {
      var ind = [];
      for (var i in dt) {
        if (dt[i]['Province County or City'].toLowerCase() === data.toLowerCase()) {
          ind.push(dt[i])
        }
      }
      return ind
    }


    function onEachFeature(feature, layer) {
      layer.on({
        mouseover: highlightLayer,
        mouseout: resetHighlight

      })
      // console.log(feature.properties.COUNTY.toLowerCase());
      //layer.unbindPopup()
      var div = L.popup().setContent('<div id="popupcontainer" style="min-width: 250px; height: 250px; margin: 0 z-index: 3">Loading...</div>');
      layer.bindPopup(div);

      layer.on('popupopen', function(e) {
        var pop_2011 = []
        var pop_2016 = []
        var county = e['sourceTarget']['feature']['properties']['COUNTY'].toLowerCase()
        data = data_pre_process(county)
        for (var i in data) {
          if (data[i]['Sex'] === "Both sexes") {
            pop_2011[0] = data[i]['Population 2011 (Number)'];
            pop_2016[0] = data[i]['Population 2016  (Number)'];
          } else if (data[i]['Sex'] === "Female") {
            pop_2011[1] = data[i]['Population 2011 (Number)'];
            pop_2016[1] = data[i]['Population 2016  (Number)'];
          } else {
            pop_2011[2] = data[i]['Population 2011 (Number)'];
            pop_2016[2] = data[i]['Population 2016  (Number)'];
          }
        }

        Highcharts.chart('popupcontainer', {

          chart: {
            type: 'column',
            inverted: true
          },

          title: {
            text: 'Census, Population in ' + (county[0].toUpperCase() + county.slice(1))
          },

          xAxis: {
            categories: ['2016', '2011']
          },

          yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
              text: 'Population'
            }
          },

          tooltip: {
            formatter: function() {
              return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
            }
          },

          plotOptions: {
            column: {
              stacking: 'normal'
            }
          },

          series: [{
            name: 'Female',
            data: [pop_2016[1], pop_2011[1]]
          }, {
            name: 'Male',
            data: [pop_2016[2], pop_2011[2]]
          }]
        });
      });
    };

  });
});

ppotaczek ppotaczek · Accepted Answer · 2018-10-02T13:30:05

You create multiple div elements with the same id. Then, in Highcharts.chart metohd you use this id and the chart is created only in the first element. You should use individual id attribute for each element.

        var div = L.popup().setContent('<div id="popupcontainer" style="min-width: 250px; height: 250px; margin: 0 z-index: 3">Loading...</div>');
        layer.bindPopup(div);

Second popup representing Highchart not working on leaflet geojson polygon

1 Answers