Map breaks into two pages in smaller screens about leaflet.browser.print HOT 6 OPEN

  onMapReady($event: L.Map) {
    this.map = $event;

    // Define your custom print options
    const printOptions = {
      title: 'Custom Print Title', // The title for the printed page
      position: 'topright', // The position of the print control
      pageSize: 'A4', // Specify the page size (e.g., 'A4', 'Letter', or custom dimensions)
      printModes: ['Portrait', 'Landscape'], // Supported print modes
      closePopupsOnPrint: true, // Close popups before printing
      contentSelector: '.leaflet-container', // CSS selector for the content to be printed
    };

    L.control
      .browserPrint({
        // title: 'Print Map',
        printOptions,
      })
      .addTo(this.map);

    this.map.on('browser-print-start', (e: any) => {
      const legend = this.createLegend();
      legend.addTo(e.printMap);
    });
  }

  onMapReady($event: L.Map) {
    this.map = $event;

    // Define your custom print options
    const printOptions = {
      title: 'Print Map', // The title for the printed page
      position: 'topright', // The position of the print control
      pageSize: 'Letter', // Specify the page size (e.g., 'A4', 'Letter', or custom dimensions)
      printModes: ['Portrait', 'Landscape'], // Supported print modes
      closePopupsOnPrint: true, // Close popups before printing
      contentSelector: '.leaflet-container', // CSS selector for the content to be printed
    };

    L.control.browserPrint({ printOptions }).addTo(this.map);

    this.map.on('browser-print-start', (e: any) => {
      const legend = this.createLegend();
      legend.addTo(e.printMap);
    });
  }