function createPie(data, year) { var charts = L.featureGroup(); let features = data.features.filter(f => { return f.properties.YR == year; }); let newData = {}; let moreInfo = {}; features.forEach(f => { let latlng = f.geometry.coordinates; for (property in f.properties) { const mapKey = fisheriesMap.get(property); const infoKey = fisheriesInfo.get(property); if (mapKey) { newData[mapKey] = f.properties[property]; } if (infoKey) { moreInfo[infoKey] = f.properties[property]; } } var pieData = {values: Object.values(newData), labels: Object.keys(newData)}; let chart = new PieChartMarker([latlng[1], latlng[0]], pieData, { icon: L.divIcon({className: 'leaflet-pie-chart-marker'}), width: 60, height: 60, colors: ['#ff0000', '#00ff00', '#0000ff', '#ff00ff'] }); if (Object.keys(moreInfo).length !== 0) { const popupContent = objectToTable(moreInfo); console.debug('more info fisheries: ', moreInfo); chart.bindPopup(popupContent, {maxHeight: 400}).openPopup(); } charts.addLayer(chart); }); return charts; } function objectToTable(obj) { let table = '
Species | Value |
---|---|
' + key + ' | ' + obj[key] + ' |