I am using leaflet.js and leaflet.markercluster.js. I have a map with clusters pointed on it. It is working fine initially. In the same dashboard I have another element downloading the pdf. To download the pdf I am using jspdf. Problem : When I download pdf, after the pdf is downloaded I am facing issue in my leaflet.js in node modules. error
I am using the following scripts in my index.html
<script src="./assets/sustain/js/leaflet.js">
</script>
<script src="./assets/sustain/js/leaflet.markercluster.js">
</script>
code for downloading pdf :
var doc = new jsPDF('portrait');
const pageHeight =
doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
const totalPagesExp = "{total_pages_count_string}";
const imgWidth2 = 208;
const imgHeight2 = 73;
let contentDataURL2;
const position2 = 0;
const imgWidth3 = 208;
const imgHeight3 = 43;
const position3 = 265;
let x = 1;
const dom2 = this.htmlheader.nativeElement;
html2canvas(dom2, { scale: 2, useCORS: true }).then((canvas2) => {
contentDataURL2 = canvas2.toDataURL("image/jpeg");
const dom = this.content.nativeElement;
html2canvas(dom, { scale: 2, useCORS: true }).then((canvas) => {
const imgWidth = 208;
const imgHeight = 100;
const contentDataURL = canvas.toDataURL("image/jpeg");
const position = 50;
doc.addImage(
contentDataURL,
"JPEG",
13,
position,
imgWidth - 25,
imgHeight - 25
);
autoTable(doc, {
columnStyles: {
0: { cellWidth: "auto" },
1: { cellWidth: "auto" },
2: { cellWidth: "auto" },
3: { cellWidth: "auto" },
4: { cellWidth: "auto" },
5: { cellWidth: 15 },
6: { cellWidth: 13 },
7: { cellWidth: 13 },
8: { cellWidth: "auto" },
9: { cellWidth: "auto" },
10: { cellWidth: "auto" },
11: { cellWidth: "auto" },
},
headStyles: {
fillColor: "#0A607F",
textColor: "#ffffff",
},
styles: {
fontSize: table.fontSize,
fillColor: "#ffffff",
textColor: "#000000",
},
head: table.header,
body: table.body,
didParseCell: (data) => {
},
didDrawPage: function (data) {
x++;
},
margin: { top: 52, bottom: 32 },
startY: 130
});
this.footerURLS = [];
this.totalPages = x;
for (var i = 1; i <= this.totalPages; i++) {
let dom3 = this.htmlfooter.nativeElement;
dom3.querySelector("#pageNo").innerHTML = String(i) + " of " + String(this.totalPages);
this.getCanvasURL(dom3, i, doc, contentDataURL2, position2, imgWidth2, imgHeight2, position3, imgWidth3, imgHeight3);
}
});
});
code of leaflet and clusters:
import * as L from 'leaflet';
import 'leaflet.markercluster';
leafletMap: Map;
markerClusterData: L.Marker[] = [];
markerClusterOptions: L.MarkerClusterGroupOptions = {
disableClusteringAtZoom: 11,
spiderfyOnMaxZoom: false
};
createMap(response) {
console.log('createMap')
if (!this.fromMap) {
this.geoJsonArray = [];
const markersArr = [];
let iconClass;
// tslint:disable-next-line:forin
for (const tag in response) {
if (Array.isArray(response[tag])) {
const fieldDetails = response[tag];
this.checkForMapData(fieldDetails, markersArr, iconClass);
}
}
if (markersArr.length > 0) {
const group = L.featureGroup(markersArr);
if (this.leafletMap) {
this.leafletMap.fitBounds(group.getBounds());
}
}
setTimeout(() => {
this.markerClusterData = markersArr;
}, 500);
setTimeout(function () {
if (this.leafletMap) {
this.leafletMap.invalidateSize();
this.leafletMap.setView(this.leafletMap.getCenter(), this.leafletMap.getZoom(), true);
}
}, 200);
}
}
<div class="dashboard-map-leaflet" [ngClass]="{'small': filterName != 'profit', 'large': filterName == 'profit'}" leaflet [leafletOptions]="options" [leafletMarkerCluster]="markerClusterData" [leafletMarkerClusterOptions]="markerClusterOptions" (leafletMapReady)="onMapReady($event)"></div>
On zoom-in and zoom-out of map :
onChange(event) {
if (event.checked) {
this.countiesOn = true;
} else {
this.leafletMap.eachLayer(function (layer) {
if (layer['options']['id'] === 'county') {
if(layer !== undefined)
layer.remove();
}
});
}
this.leafletMap.on('zoomend', function () {
if (this.leafletMap.getZoom() < 8) {
this.leafletMap.eachLayer(function (lay) {
if (lay['options']['id'] === 'county') {
if(lay !== undefined)
lay.remove();
}
});
this.countiesOn = false;
}
}.bind(this));
}