0

I'm creating a vehicle tracking application and I'm using the data streamed onto a cloud-based database and displaying it onto a map using AGM-maps, tracing out its movement with the help of polylines.

<agm-map #map1 [zoom]="13" [latitude]="lat" [longitude]="lng" [fullscreenControl]='true' [mapTypeControl]='true' [fitBounds]="true">
     <agm-polyline [visible]="true" [strokeWeight]="3" [strokeColor]="'#07b57a'">
          <agm-polyline-point *ngFor="let coordinate of latlng; let i=index" [latitude]="coordinate[0]" [longitude]="coordinate[1]"></agm-polyline-point>
     </agm-polyline>
</agm-map>

Is there a way where I can import this map's DOM element into a pdf file singing jspdf so that I can display it alongside other data in the report?

I had previously asked a similar question regarding inserting ng2-charts in jspdf earlier, and I was recommended converting the chart canvas into a png image and inserting the image into the jspdf file. Is there a way I can do the same for AGM too? Is there a way I can convert the map into an image and insert the image into the jspdf?

I tried using the same method for ng2-charts and implemented the following code:

@ViewChild('map1', { static: true }) canvasElem!: ElementRef<HTMLCanvasElement>;

let map1 = this.canvasElem.nativeElement.toDataURL('image/png');
doc.addImage(map1, 'PNG', 175, 75, 150, 450);

But it shot me down with an error stating:

ERROR TypeError: Cannot read properties of undefined (reading 'toDataURL') at component.SavePDF

Nooh Ahamad
  • 353
  • 10
  • 23
  • sorry, this is not related to your question. Can agm be used with latest versions of angular? It seems that package is not updated for a long time – Maksat Rahmanov Apr 15 '23 at 21:21
  • Yes, I'm using angular 15. You will have to install agm/core with --legacy-peer-deps. This is because this npm package contains outdated requirements for older Angular versions and that aborts the install. – Nooh Ahamad Apr 15 '23 at 21:26

0 Answers0