Unfortunately toolbar for geochart isn't working properly right now mostly due to how the chart is integrated with Leaflet unlike other charts that are completely handling the DOM structure themselves.
The bigger problem for the export is that the export functionality in the charts currently (you can try this through api) only exports the chart overlay and not the background layer that is rendered by Leaflet.
Until now in our own projects we have used html2canvas
to export the whole map. However, html2canvas
has problems with the CSS transformations that Leaflet uses. Here is the code we have used, perhaps it will be helpful.
let mapPane = <HTMLElement>document.getElementsByClassName("leaflet-map-pane")[0];
let mapTranslate = mapPane.style.transform;
let mapParse = mapTranslate.match(/translate3?d?\((-?\d+px), (-?\d+px)/);
mapPane.style.transform = "";
mapPane.style.left = mapParse[1];
mapPane.style.top = mapParse[2];
let chartPane = document.getElementById("geochart")
.getElementsByClassName("DVSL-canvas")[0]
.parentElement;
let chartTranslate = chartPane.style.transform;
let chartParse = chartTranslate.match(/translate3?d?\((-?\d+px), (-?\d+px)/);
chartPane.style.transform = "";
chartPane.style.left = chartParse[1];
chartPane.style.top = chartParse[2];
html2canvas(container, {
taintTest: true,
useCORS: true,
logging: false
}).then((canvas: HTMLCanvasElement) => {
mapPane.style.transform = mapTranslate;
mapPane.style.left = "";
mapPane.style.top = "";
chartPane.style.transform = chartTranslate;
chartPane.style.left = "0";
chartPane.style.top = "0";
ZoomCharts.Internal.Base.Export.launchDownload(this.geochart.chart._impl, "image/png", "png", canvas.toDataURL());
});