Leaftlet, markercluster error: Cannot read properties of undefined (reading 'prototype')\n at NewClass.fire

Viewed 24

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));
  }
0 Answers
Related