CODEWITHSUNDEEP
leafletpopupzoomcharts
rahram
rahram

Reputation: 590

Zoomcharts's pie does not drill down to other levels on leaflet popup

I am writing a simple app containing a leaflet map, a marker and a pie chart on marker popup. If I put the pie chart inside the popup It shows the pie chart but When I click on pie slices it is not going to sub-values, The code works when I put the pie chart in a simple page. Are there any predefined limits in leaflet popup? Thanks.







var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);;
var popup = L.popup().setContent("")
var marker = L.marker([51.5, -0.09]).bindPopup(popup).addTo(mymap);
marker.setPopupContent('')

chart= new PieChart({
    "pie": {
        "innerRadius": 0
    },
    "container": "demo",
    "data": [
        {
            "url": "https:\/\/zoomcharts.com\/data\/browsers-extended.json"
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    },
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})
var htmltext = '<div>I am a standalone popup.</div> <hr><div id="test">loading chart</div>'
marker.on("click", onClick);
function onClick(e) {
  marker.setPopupContent(htmltext)
  var chart2 = new PieChart({
      "pie": {
          "innerRadius": 0
      },
      "container": "test",
      "data": [
          {
              "url": "https:\/\/zoomcharts.com\/data\/browsers-extended.json"
          }
      ],
      "toolbar": {
          "fullscreen": true,
          "enabled": true
      },
      "interaction": {
          "resizing": {
              "enabled": false
          }
      }
  })
}


#mapid { height: 500px; }


 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>   
<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>

<div id="demo"> Loading Pie Chart</div>
 <div id="mapid"></div>

Upvotes: 0

Views: 132

Answers (1)

jancha
jancha

Reputation: 4977

Apparently it's the leaflet pop up that is blocking events which are not accessing the donut in the popup. ZoomCharts comes with GeoChart component that natively lets you show donuts on map. Have a look: https://demo.zoomcharts.com/geo-chart/examples/charts-on-charts/nominal-gdp-sector-composition.html

It's also using Leaflet for the baselayer.

Upvotes: 0

Related Questions