ebta-workflow-prod 4.0.7 → 4.0.9

package/src/activities/PDFMapGenerator.ts

@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable prefer-const */
 import type { IActivityHandler } from "@vertigis/workflow";
-import { PDFDocument, degrees, rgb, PDFName, PDFString, TextAlignment, PDFArray, StandardFonts,PDFRef } from 'pdf-lib';
+import { PDFDocument, degrees, rgb, PDFName, PDFString, TextAlignment, PDFArray, StandardFonts, PDFRef } from 'pdf-lib';
 import axios from 'axios';
 
 
@@ -24,13 +24,11 @@ interface PDFMapGeneratorInputs {
     /**
  * @displayName Legend img Base64 
  * @description Legend img Base64 created by Legend creator
- * @required
  */
     LegendImgBase64: string;
     /**
     * @displayName Scale Array 
     * @description Array contains the scale numbers catched from each extent
-    * @required
     */
     scaleArray: number[];
     /**
@@ -90,6 +88,16 @@ interface PDFMapGeneratorInputs {
      * @description Array of geocoded addresses
      */
     addressList: string[];
+    /**
+     * @displayName specific type name of print template
+     * @description specific type name of print template, e.g.'VMP'
+     */
+    template: string;
+    /**
+     * @displayName Object to provide extra field detail, by key-value(string)
+     * @description Object to provide extra field detail, by key-value(string)
+     */
+    extraField: object;
 }
 /** An interface that defines the outputs of the activity. */
 interface PDFMapGeneratorOutputs {
@@ -109,7 +117,7 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
             console.log('EBTA PDFMapGenerator version 1.1')
             if (typeof fetch !== 'undefined') {
                 const response = await fetch(url, {
-                    mode:   'cors',
+                    mode: 'cors',
                     credentials: 'omit'
                 });
                 if (!response.ok) {
@@ -129,42 +137,42 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
         }
     }
 
-   private async  reencodeImageToArrayBuffer(arrayBuffer: ArrayBuffer): Promise<ArrayBuffer> {
+    private async reencodeImageToArrayBuffer(arrayBuffer: ArrayBuffer): Promise<ArrayBuffer> {
         const blob = new Blob([arrayBuffer], { type: 'image/jpeg' });
         const img = new Image();
-        
+
         // Convert the array buffer to a blob URL
         img.src = URL.createObjectURL(blob);
-      
+
         return new Promise<ArrayBuffer>((resolve, reject) => {
-          img.onload = () => {
-            const canvas = document.createElement('canvas');
-            canvas.width = img.width;
-            canvas.height = img.height;
-            
-            const ctx = canvas.getContext('2d');
-            if (!ctx) return reject(new Error('Canvas context could not be created'));
-      
-            ctx.drawImage(img, 0, 0);
-      
-            canvas.toBlob((blob) => {
-              if (!blob) return reject(new Error('Failed to convert canvas to Blob'));
-              
-              const reader = new FileReader();
-              reader.onloadend = () => {
-                if (reader.result instanceof ArrayBuffer) {
-                  resolve(reader.result);
-                } else {
-                  reject(new Error('Failed to read Blob as ArrayBuffer'));
-                }
-              };
-              reader.readAsArrayBuffer(blob);
-            }, 'image/jpeg');
-          };
-      
-          img.onerror = (err) => reject(new Error('Image load error: '));
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                canvas.width = img.width;
+                canvas.height = img.height;
+
+                const ctx = canvas.getContext('2d');
+                if (!ctx) return reject(new Error('Canvas context could not be created'));
+
+                ctx.drawImage(img, 0, 0);
+
+                canvas.toBlob((blob) => {
+                    if (!blob) return reject(new Error('Failed to convert canvas to Blob'));
+
+                    const reader = new FileReader();
+                    reader.onloadend = () => {
+                        if (reader.result instanceof ArrayBuffer) {
+                            resolve(reader.result);
+                        } else {
+                            reject(new Error('Failed to read Blob as ArrayBuffer'));
+                        }
+                    };
+                    reader.readAsArrayBuffer(blob);
+                }, 'image/jpeg');
+            };
+
+            img.onerror = (err) => reject(new Error('Image load error: '));
         });
-      }
+    }
 
 
     private arrayBufferToBase64(buffer: ArrayBuffer): string {
@@ -206,7 +214,7 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
         return num;
     }
 
-    
+
 
     /** Perform the execution logic of the activity. */
     async execute(inputs: PDFMapGeneratorInputs): Promise<PDFMapGeneratorOutputs> {
@@ -234,17 +242,29 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
             const image3url = 'https://cdn.jsdelivr.net/npm/ebta-resources/resources/prints/dbyd.png'
             const imageBarurl = 'https://cdn.jsdelivr.net/npm/ebta-resources/resources/prints/Scalebar.png'
             const imageNorthUrl = 'https://cdn-icons-png.flaticon.com/512/3236/3236586.png'
-            const image1Buffer = await this.fetchData(image1url);
-            console.log('Image1 fetched successfully');
-            const image2Buffer = await this.fetchData(image2url);
-            console.log('Image2 fetched successfully');
-            const image3Buffer = await this.fetchData(image3url);
-            console.log('Image3 fetched successfully');
+            let image10Buffer, image1Buffer, image2Buffer, image3Buffer
+
+            if (inputs.template == 'VMP') {
+                const image10kmurl = 'https://ebta.maps.arcgis.com/sharing/rest/content/items/c15211b9826549f69a13c3f3d32a841b/resources/vmp_symbols/speedlimit10.svg'
+                image10Buffer = await this.fetchData(image10kmurl);
+                console.log('Image10 fetched successfully');
+            }
+            else {
+                image1Buffer = await this.fetchData(image1url);
+                console.log('Image1 fetched successfully');
+                image2Buffer = await this.fetchData(image2url);
+                console.log('Image2 fetched successfully');
+                image3Buffer = await this.fetchData(image3url);
+                console.log('Image3 fetched successfully');
+            }
             const imageBarBuffer = await this.fetchData(imageBarurl);
             console.log('Image scale bar fetched successfully');
             const imageNorthBuffer = await this.fetchData(imageNorthUrl);
             console.log('Image North Arrow fetched successfully');
-            const legendBuffer = this.base64ToArrayBuffer(inputs.LegendImgBase64);
+            let legendBuffer
+            if (inputs.LegendImgBase64) {
+                legendBuffer = this.base64ToArrayBuffer(inputs.LegendImgBase64);
+            }
             const filledPDFs: Uint8Array[] = [];
             for (let i = 0; i < imgBase64Array.length; i++) {
                 let doc = await PDFDocument.load(pdfBuffer);
@@ -259,16 +279,27 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
                 } else if (imgBase64.startsWith('data:image/jpeg;base64,') || imgBase64.startsWith('data:image/jpg;base64,')) {
                     image = await doc.embedJpg(imageBuffer);
                 }
-                const image1 = await doc.embedPng(image1Buffer);
-                const image2 = await doc.embedPng(image2Buffer);
-                const image3 = await doc.embedPng(image3Buffer);
+                let image1, image2, image3, image10
+                if (inputs.template == 'VMP') {
+                    image10 = await doc.embedPng(image10Buffer);
+                    console.log('image10 embed successfully')
+                }
+                else {
+                    image1 = await doc.embedPng(image1Buffer);
+                    image2 = await doc.embedPng(image2Buffer);
+                    image3 = await doc.embedPng(image3Buffer);
+                    console.log('image1,2,3 embed successfully')
+                }
                 const imageBar = await doc.embedPng(imageBarBuffer);
                 const imageNorth = await doc.embedPng(imageNorthBuffer);
                 let legendImage
-                if (inputs.LegendImgBase64.startsWith('data:image/png;base64,')) {
-                    legendImage = await doc.embedPng(legendBuffer);
-                } else if (inputs.LegendImgBase64.startsWith('data:image/jpeg;base64,') || inputs.LegendImgBase64.startsWith('data:image/jpg;base64,')) {
-                    legendImage = await doc.embedJpg(legendBuffer);
+                if (inputs.LegendImgBase64) {
+                    if (inputs.LegendImgBase64.startsWith('data:image/png;base64,')) {
+                        legendImage = await doc.embedPng(legendBuffer);
+                    } else if (inputs.LegendImgBase64.startsWith('data:image/jpeg;base64,') || inputs.LegendImgBase64.startsWith('data:image/jpg;base64,')) {
+                        legendImage = await doc.embedJpg(legendBuffer);
+                    }
+                    console.log('legend image embed successfully')
                 }
                 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                 newPage.drawImage(image, {
@@ -277,76 +308,117 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
                     width: width * 0.8113,
                     height: height * 0.8029,
                 });
-                //Define position & size of legend screeshot, depent on width/height ratio
-                if (legendImage.width / legendImage.height > 0.259) {
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                    newPage.drawImage(legendImage, {
-                        x: width * 0.83796,
-                        y: height * (0.94611) - width * 0.14 * (legendImage.height / legendImage.width),
-                        width: width * 0.14,
-                        height: width * 0.14 * (legendImage.height / legendImage.width),
-                    });
-                }
-                else {
-                    if (legendImage.width / legendImage.height < 0.259 / 1.6) {
-                        if (legendImage.width / legendImage.height < 0.259 / 3.95) {
-                            if (legendImage.width / legendImage.height < 0.259 / 5.5) {
-                                console.log("split legend into 3 columns");
-                                const fullLegendimg = new Image();
-                                fullLegendimg.src = inputs.LegendImgBase64;
-                                fullLegendimg.onload = async () => {
-                                    const neckHeight = Math.floor(legendImage.height * 0.33); // Approximate neck position
-                                    const waistHeight = Math.floor(legendImage.height * 0.66); // Approximate waist position
-                                    // Neck to Top
-                                    const neckUpCanvas = document.createElement('canvas');
-                                    neckUpCanvas.width = legendImage.width;
-                                    neckUpCanvas.height = neckHeight;
-                                    const neckUpCtx = neckUpCanvas.getContext('2d');
-                                    neckUpCtx!.drawImage(fullLegendimg, 0, 0, legendImage.width, neckHeight, 0, 0, legendImage.width, neckHeight);
-                                    // Waist to Neck
-                                    const waistUpCanvas = document.createElement('canvas');
-                                    waistUpCanvas.width = legendImage.width;
-                                    waistUpCanvas.height = waistHeight - neckHeight;
-                                    const waistUpCtx = waistUpCanvas.getContext('2d');
-                                    waistUpCtx!.drawImage(fullLegendimg, 0, neckHeight, legendImage.width, waistHeight - neckHeight, 0, 0, legendImage.width, waistHeight - neckHeight);
-                                    // Bottom to Waist
-                                    const waistDownCanvas = document.createElement('canvas');
-                                    waistDownCanvas.width = legendImage.width;
-                                    waistDownCanvas.height = legendImage.height - waistHeight;
-                                    const waistDownCtx = waistDownCanvas.getContext('2d');
-                                    waistDownCtx!.drawImage(fullLegendimg, 0, waistHeight, legendImage.width, legendImage.height - waistHeight, 0, 0, legendImage.width, legendImage.height - waistHeight);
-                                    const neckUpBase64 = neckUpCanvas.toDataURL('image/jpeg');
-                                    const upBuffer1 = this.base64ToArrayBuffer(neckUpBase64);
-                                    const waistUpBase64 = waistUpCanvas.toDataURL('image/jpeg');
-                                    const upBuffer2 = this.base64ToArrayBuffer(waistUpBase64);
-                                    const waistDownBase64 = waistDownCanvas.toDataURL('image/jpeg');
-                                    const downBuffer = this.base64ToArrayBuffer(waistDownBase64);
-                                    const LegendNeckUp = await doc.embedJpg(upBuffer1);
-                                    const LegendWaistUp = await doc.embedJpg(upBuffer2);
-                                    const LegendWaistDown = await doc.embedJpg(downBuffer);
-                                    newPage.drawImage(LegendNeckUp, {
-                                        x: width * 0.83796,
-                                        y: height * 0.94611 - width * 0.14 * 0.33 * (LegendNeckUp.height / LegendNeckUp.width),
-                                        width: width * 0.14 * 0.33,
-                                        height: width * 0.14 * 0.33 * (LegendNeckUp.height / LegendNeckUp.width),
-                                    });
-                                    newPage.drawImage(LegendWaistUp, {
-                                        x: width * 0.83796 + width * 0.14 * 0.33,
-                                        y: height * 0.94611 - width * 0.14 * 0.33 * (LegendWaistUp.height / LegendWaistUp.width),
-                                        width: width * 0.14 * 0.33,
-                                        height: width * 0.14 * 0.33 * (LegendWaistUp.height / LegendWaistUp.width),
-                                    });
-                                    newPage.drawImage(LegendWaistDown, {
-                                        x: width * 0.83796 + width * 0.14 * .66,
-                                        y: height * 0.94611 - width * 0.14 * 0.33 * (LegendWaistDown.height / LegendWaistDown.width),
-                                        width: width * 0.14 * 0.33,
-                                        height: width * 0.14 * 0.33 * (LegendWaistDown.height / LegendWaistDown.width)
-                                    });
+                console.log('map image drawn successfully')
+                if (inputs.LegendImgBase64) {
+                    //Define position & size of legend screeshot, depent on width/height ratio
+                    if (legendImage.width / legendImage.height > 0.259) {
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                        newPage.drawImage(legendImage, {
+                            x: width * 0.83796,
+                            y: height * (0.94611) - width * 0.14 * (legendImage.height / legendImage.width),
+                            width: width * 0.14,
+                            height: width * 0.14 * (legendImage.height / legendImage.width),
+                        });
+                    }
+                    else {
+                        if (legendImage.width / legendImage.height < 0.259 / 1.6) {
+                            if (legendImage.width / legendImage.height < 0.259 / 3.95) {
+                                if (legendImage.width / legendImage.height < 0.259 / 5.5) {
+                                    console.log("split legend into 3 columns");
+                                    const fullLegendimg = new Image();
+                                    fullLegendimg.src = inputs.LegendImgBase64;
+                                    fullLegendimg.onload = async () => {
+                                        const neckHeight = Math.floor(legendImage.height * 0.33); // Approximate neck position
+                                        const waistHeight = Math.floor(legendImage.height * 0.66); // Approximate waist position
+                                        // Neck to Top
+                                        const neckUpCanvas = document.createElement('canvas');
+                                        neckUpCanvas.width = legendImage.width;
+                                        neckUpCanvas.height = neckHeight;
+                                        const neckUpCtx = neckUpCanvas.getContext('2d');
+                                        neckUpCtx!.drawImage(fullLegendimg, 0, 0, legendImage.width, neckHeight, 0, 0, legendImage.width, neckHeight);
+                                        // Waist to Neck
+                                        const waistUpCanvas = document.createElement('canvas');
+                                        waistUpCanvas.width = legendImage.width;
+                                        waistUpCanvas.height = waistHeight - neckHeight;
+                                        const waistUpCtx = waistUpCanvas.getContext('2d');
+                                        waistUpCtx!.drawImage(fullLegendimg, 0, neckHeight, legendImage.width, waistHeight - neckHeight, 0, 0, legendImage.width, waistHeight - neckHeight);
+                                        // Bottom to Waist
+                                        const waistDownCanvas = document.createElement('canvas');
+                                        waistDownCanvas.width = legendImage.width;
+                                        waistDownCanvas.height = legendImage.height - waistHeight;
+                                        const waistDownCtx = waistDownCanvas.getContext('2d');
+                                        waistDownCtx!.drawImage(fullLegendimg, 0, waistHeight, legendImage.width, legendImage.height - waistHeight, 0, 0, legendImage.width, legendImage.height - waistHeight);
+                                        const neckUpBase64 = neckUpCanvas.toDataURL('image/jpeg');
+                                        const upBuffer1 = this.base64ToArrayBuffer(neckUpBase64);
+                                        const waistUpBase64 = waistUpCanvas.toDataURL('image/jpeg');
+                                        const upBuffer2 = this.base64ToArrayBuffer(waistUpBase64);
+                                        const waistDownBase64 = waistDownCanvas.toDataURL('image/jpeg');
+                                        const downBuffer = this.base64ToArrayBuffer(waistDownBase64);
+                                        const LegendNeckUp = await doc.embedJpg(upBuffer1);
+                                        const LegendWaistUp = await doc.embedJpg(upBuffer2);
+                                        const LegendWaistDown = await doc.embedJpg(downBuffer);
+                                        newPage.drawImage(LegendNeckUp, {
+                                            x: width * 0.83796,
+                                            y: height * 0.94611 - width * 0.14 * 0.33 * (LegendNeckUp.height / LegendNeckUp.width),
+                                            width: width * 0.14 * 0.33,
+                                            height: width * 0.14 * 0.33 * (LegendNeckUp.height / LegendNeckUp.width),
+                                        });
+                                        newPage.drawImage(LegendWaistUp, {
+                                            x: width * 0.83796 + width * 0.14 * 0.33,
+                                            y: height * 0.94611 - width * 0.14 * 0.33 * (LegendWaistUp.height / LegendWaistUp.width),
+                                            width: width * 0.14 * 0.33,
+                                            height: width * 0.14 * 0.33 * (LegendWaistUp.height / LegendWaistUp.width),
+                                        });
+                                        newPage.drawImage(LegendWaistDown, {
+                                            x: width * 0.83796 + width * 0.14 * .66,
+                                            y: height * 0.94611 - width * 0.14 * 0.33 * (LegendWaistDown.height / LegendWaistDown.width),
+                                            width: width * 0.14 * 0.33,
+                                            height: width * 0.14 * 0.33 * (LegendWaistDown.height / LegendWaistDown.width)
+                                        });
+                                    }
+                                }
+                                else {
+                                    //split into 2 columns & strectch
+                                    console.log("split legend into 2 columns & stretch ")
+                                    const fullLegendimg = new Image();
+                                    fullLegendimg.src = inputs.LegendImgBase64
+                                    fullLegendimg.onload = async () => {
+                                        const halfHeight = Math.floor(legendImage.height / 2)
+                                        const waistUpCanvas = document.createElement('canvas');
+                                        waistUpCanvas.width = legendImage.width;
+                                        waistUpCanvas.height = halfHeight;
+                                        const waistUpCtx = waistUpCanvas.getContext('2d');
+                                        waistUpCtx!.drawImage(fullLegendimg, 0, 0, legendImage.width, halfHeight, 0, 0, legendImage.width, halfHeight);
+                                        const waistDownCanvas = document.createElement('canvas');
+                                        waistDownCanvas.width = legendImage.width;
+                                        waistDownCanvas.height = halfHeight;
+                                        const waistDownCtx = waistDownCanvas.getContext('2d');
+                                        waistDownCtx!.drawImage(fullLegendimg, 0, halfHeight, legendImage.width, halfHeight, 0, 0, legendImage.width, halfHeight);
+                                        const waistUpBase64 = waistUpCanvas.toDataURL('image/jpeg');
+                                        const upBuffer = this.base64ToArrayBuffer(waistUpBase64);
+                                        const waistDownBase64 = waistDownCanvas.toDataURL('image/jpeg');
+                                        const downBuffer = this.base64ToArrayBuffer(waistDownBase64);
+                                        const LegendUp = await doc.embedJpg(upBuffer);
+                                        const LegendDown = await doc.embedJpg(downBuffer);
+
+                                        newPage.drawImage(LegendUp, {
+                                            x: width * 0.83796,
+                                            y: height * (0.94611 - 0.77),
+                                            width: height * 0.77 * (LegendUp.width / LegendUp.height),
+                                            height: height * 0.77,
+                                        });
+                                        newPage.drawImage(LegendDown, {
+                                            x: width * 0.83796 + height * 0.77 * (LegendDown.width / LegendDown.height),
+                                            y: height * (0.94611 - 0.77),
+                                            width: height * 0.77 * (LegendDown.width / LegendDown.height),
+                                            height: height * 0.77,
+                                        })
+                                    }
                                 }
                             }
                             else {
-                                //split into 2 columns & strectch
-                                console.log("split legend into 2 columns & stretch ")
+                                //split into 2 columns & no strectch
+                                console.log("split legend into 2 columns  & no strectch")
                                 const fullLegendimg = new Image();
                                 fullLegendimg.src = inputs.LegendImgBase64
                                 fullLegendimg.onload = async () => {
@@ -367,89 +439,64 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
                                     const downBuffer = this.base64ToArrayBuffer(waistDownBase64);
                                     const LegendUp = await doc.embedJpg(upBuffer);
                                     const LegendDown = await doc.embedJpg(downBuffer);
-
                                     newPage.drawImage(LegendUp, {
                                         x: width * 0.83796,
-                                        y: height * (0.94611 - 0.77),
-                                        width: height * 0.77 * (LegendUp.width / LegendUp.height),
-                                        height: height * 0.77,
+                                        y: height * (0.94611) - width * 0.14 * 0.5 * (LegendUp.height / LegendUp.width),
+                                        width: width * 0.14 * 0.5,
+                                        height: width * 0.14 * 0.5 * (LegendUp.height / LegendUp.width),
                                     });
                                     newPage.drawImage(LegendDown, {
-                                        x: width * 0.83796 + height * 0.77 * (LegendDown.width / LegendDown.height),
-                                        y: height * (0.94611 - 0.77),
-                                        width: height * 0.77 * (LegendDown.width / LegendDown.height),
-                                        height: height * 0.77,
+                                        x: width * 0.83796 + width * 0.14 * 0.505,
+                                        y: height * (0.94611) - width * 0.14 * 0.5 * (LegendDown.height / LegendDown.width),
+                                        width: width * 0.14 * 0.5,
+                                        height: width * 0.14 * 0.5 * (LegendDown.height / LegendDown.width)
                                     })
                                 }
                             }
                         }
                         else {
-                            //split into 2 columns & no strectch
-                            console.log("split legend into 2 columns  & no strectch")
-                            const fullLegendimg = new Image();
-                            fullLegendimg.src = inputs.LegendImgBase64
-                            fullLegendimg.onload = async () => {
-                                const halfHeight = Math.floor(legendImage.height / 2)
-                                const waistUpCanvas = document.createElement('canvas');
-                                waistUpCanvas.width = legendImage.width;
-                                waistUpCanvas.height = halfHeight;
-                                const waistUpCtx = waistUpCanvas.getContext('2d');
-                                waistUpCtx!.drawImage(fullLegendimg, 0, 0, legendImage.width, halfHeight, 0, 0, legendImage.width, halfHeight);
-                                const waistDownCanvas = document.createElement('canvas');
-                                waistDownCanvas.width = legendImage.width;
-                                waistDownCanvas.height = halfHeight;
-                                const waistDownCtx = waistDownCanvas.getContext('2d');
-                                waistDownCtx!.drawImage(fullLegendimg, 0, halfHeight, legendImage.width, halfHeight, 0, 0, legendImage.width, halfHeight);
-                                const waistUpBase64 = waistUpCanvas.toDataURL('image/jpeg');
-                                const upBuffer = this.base64ToArrayBuffer(waistUpBase64);
-                                const waistDownBase64 = waistDownCanvas.toDataURL('image/jpeg');
-                                const downBuffer = this.base64ToArrayBuffer(waistDownBase64);
-                                const LegendUp = await doc.embedJpg(upBuffer);
-                                const LegendDown = await doc.embedJpg(downBuffer);
-                                newPage.drawImage(LegendUp, {
-                                    x: width * 0.83796,
-                                    y: height * (0.94611) - width * 0.14 * 0.5 * (LegendUp.height / LegendUp.width),
-                                    width: width * 0.14 * 0.5,
-                                    height: width * 0.14 * 0.5 * (LegendUp.height / LegendUp.width),
-                                });
-                                newPage.drawImage(LegendDown, {
-                                    x: width * 0.83796 + width * 0.14 * 0.505,
-                                    y: height * (0.94611) - width * 0.14 * 0.5 * (LegendDown.height / LegendDown.width),
-                                    width: width * 0.14 * 0.5,
-                                    height: width * 0.14 * 0.5 * (LegendDown.height / LegendDown.width)
-                                })
-                            }
+                            // A little bit slim, just stretch
+                            newPage.drawImage(legendImage, {
+                                x: width * 0.83796,
+                                y: height * (0.94611 - 0.77),
+                                width: height * 0.77 * (legendImage.width / legendImage.height),
+                                height: height * 0.77,
+                            });
                         }
                     }
-                    else {
-                        // A little bit slim, just stretch
-                        newPage.drawImage(legendImage, {
-                            x: width * 0.83796,
-                            y: height * (0.94611 - 0.77),
-                            width: height * 0.77 * (legendImage.width / legendImage.height),
-                            height: height * 0.77,
-                        });
-                    }
+                    console.log('legend image drawn successfully')
                 }
                 const lableSize = 100
-                newPage.drawImage(image1, {
-                    x: 28,
-                    y: 145,
-                    width: lableSize,
-                    height: lableSize * (image1.height / image1.width),
-                });
-                newPage.drawImage(image2, {
-                    x: 28 + lableSize + 6,
-                    y: 145,
-                    width: lableSize,
-                    height: lableSize * (image2.height / image2.width),
-                });
-                newPage.drawImage(image3, {
-                    x: 28 + 2 * lableSize + 6 * 2,
-                    y: 145,
-                    width: lableSize * .8,
-                    height: lableSize * .8 * (image3.height / image3.width),
-                });
+                if (inputs.template == 'VMP') {
+                    newPage.drawImage(image10, {
+                        x: 28 + 200,
+                        y: 145,
+                        width: lableSize,
+                        height: lableSize * (image10.height / image10.width),
+                    });
+                    console.log('image10 drawn successfully')
+                }
+                else {
+                    newPage.drawImage(image1, {
+                        x: 28,
+                        y: 145,
+                        width: lableSize,
+                        height: lableSize * (image1.height / image1.width),
+                    });
+                    newPage.drawImage(image2, {
+                        x: 28 + lableSize + 6,
+                        y: 145,
+                        width: lableSize,
+                        height: lableSize * (image2.height / image2.width),
+                    });
+                    newPage.drawImage(image3, {
+                        x: 28 + 2 * lableSize + 6 * 2,
+                        y: 145,
+                        width: lableSize * .8,
+                        height: lableSize * .8 * (image3.height / image3.width),
+                    });
+                    console.log('image1,2,3 drawn successfully')
+                }
                 console.log(`success in page. ${i} `)
                 // north arrow
                 const centerX = 40;
@@ -524,6 +571,18 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
                 const revField = form.getTextField('Rev.' + i)
                 revField.setText(inputs.Rev)
                 revField.updateAppearances(font)
+                if (inputs.template=='VMP'){
+                //supervisor
+                const supervisorField = form.getTextField('Supervisor')
+                supervisorField.setText(inputs.extraField['supervisor'])
+                supervisorField.setAlignment(TextAlignment.Center)
+                supervisorField.updateAppearances(font)
+                //UHF
+                const uhfField = form.getTextField('UHF')
+                uhfField.setText(inputs.extraField['UHF'])
+                uhfField.setAlignment(TextAlignment.Center)
+                uhfField.updateAppearances(font)
+}
                 //date 
                 const today = new Date();
                 const formattedDate = today.toLocaleDateString('en-AU');
@@ -553,90 +612,109 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
                 }
                 console.log('Text Fields removal successful')
                 //draw a QR Code image only when Qr URL is given && QR image not given
+                const boldFont = await doc.embedFont(StandardFonts.HelveticaBold);
 
-                    if (inputs.buttonLink && inputs.buttonLink.length>0) {
-                        const buttonX=width * 0.74
-                        const buttonY=130
-                        const buttonW=90
-                        const buttonH=50
-                        const buttonBackgroundUrl = 'https://cdn.jsdelivr.net/npm/ebta-resources/resources/prints/gis-button.png'
-                        const buttonBackgroundBuffer = await this.fetchData(buttonBackgroundUrl);
-                        const buttonEmbed = await doc.embedPng(buttonBackgroundBuffer);
-                        newPage.drawImage(buttonEmbed, {
-                            x: buttonX,
-                            y: buttonY,
-                            width: buttonW,
-                            height: buttonH,
-                        });
-                        const boldFont = await doc.embedFont(StandardFonts.HelveticaBold);
-                        newPage.drawText('Go to EBTA GIS', {
-                            x: buttonX+5,
-                            y: buttonY+22,
-                            size: 10,
-                            color: rgb(1, 1, 1), // White color
-                            font: boldFont,
-                        });
+                if (inputs.template == 'VMP') {
+                    newPage.drawText('Maximum Speed 10KM/h within Work Area', {
+                        x: 28,
+                        y: 145,
+                        size: 10.5,
+                        color: rgb(255, 255, 255), // White color
+                        font: boldFont,
+                    });
+                    newPage.drawText('Maximum Speed 10KM/h within Work Area', {
+                        x: 28,
+                        y: 145,
+                        size: 10,
+                        color: rgb(255, 0, 0), // red color
+                        font: boldFont,
+                    });
+                }
 
-                        const existingAnnots = newPage.node.lookup(PDFName.of('Annots'));
-                        let annotationsArray = existingAnnots instanceof PDFArray ? existingAnnots : doc.context.obj([]);
-    
-
-                        const linkAnnotation = doc.context.register(
-                            doc.context.obj({
-                                Type: 'Annot',
-                                Subtype: 'Link',
-                                Rect: [buttonX, buttonY, buttonX+buttonW,buttonY+buttonH],
-                                Border: [0, 0, 0],
-                                A: {
-                                    Type: 'Action',
-                                    S: 'URI',
-                                    URI: PDFString.of((i <= (inputs.buttonLink.length - 1)) ? inputs.buttonLink[i] : inputs.buttonLink[inputs.buttonLink.length - 1]),
-                                },
-                            })
-                        );
-                        // Append the new annotation to the existing ones
-                        annotationsArray.push(linkAnnotation);
-                        // Set the updated annotations array back to the page
-                        newPage.node.set(PDFName.of('Annots'), annotationsArray);
-                    }
+                if (inputs.buttonLink && inputs.buttonLink.length > 0) {
+                    const buttonX = width * 0.74
+                    const buttonY = 130
+                    const buttonW = 90
+                    const buttonH = 50
+                    const buttonBackgroundUrl = 'https://cdn.jsdelivr.net/npm/ebta-resources/resources/prints/gis-button.png'
+                    const buttonBackgroundBuffer = await this.fetchData(buttonBackgroundUrl);
+                    const buttonEmbed = await doc.embedPng(buttonBackgroundBuffer);
+                    newPage.drawImage(buttonEmbed, {
+                        x: buttonX,
+                        y: buttonY,
+                        width: buttonW,
+                        height: buttonH,
+                    });
 
-                    if (inputs.QrUrl && inputs.QrUrl.length > 0 && (inputs.QrCodeImage == undefined)) {
-                        //QR Code
-                        // eslint-disable-next-line @typescript-eslint/no-var-requires
-                        const QRCode = require('qrcode');
-                        const qrDataUrl = (i <= (inputs.QrUrl.length - 1)) ? await QRCode.toDataURL(inputs.QrUrl[i]) : await QRCode.toDataURL(inputs.QrUrl[inputs.QrUrl.length - 1]);
-                        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                        const qrImageBytes = await fetch(qrDataUrl).then(res => res.arrayBuffer());
-                        const qrImage = await doc.embedPng(qrImageBytes);
-                        newPage.drawImage(qrImage, {
-                            x: 210,
-                            y: 93,
-                            width: 40,
-                            height: 40,
-                        });
+                    newPage.drawText('Go to EBTA GIS', {
+                        x: buttonX + 5,
+                        y: buttonY + 22,
+                        size: 10,
+                        color: rgb(1, 1, 1), // White color
+                        font: boldFont,
+                    });
+
+
+                    const existingAnnots = newPage.node.lookup(PDFName.of('Annots'));
+                    let annotationsArray = existingAnnots instanceof PDFArray ? existingAnnots : doc.context.obj([]);
+
+
+                    const linkAnnotation = doc.context.register(
+                        doc.context.obj({
+                            Type: 'Annot',
+                            Subtype: 'Link',
+                            Rect: [buttonX, buttonY, buttonX + buttonW, buttonY + buttonH],
+                            Border: [0, 0, 0],
+                            A: {
+                                Type: 'Action',
+                                S: 'URI',
+                                URI: PDFString.of((i <= (inputs.buttonLink.length - 1)) ? inputs.buttonLink[i] : inputs.buttonLink[inputs.buttonLink.length - 1]),
+                            },
+                        })
+                    );
+                    // Append the new annotation to the existing ones
+                    annotationsArray.push(linkAnnotation);
+                    // Set the updated annotations array back to the page
+                    newPage.node.set(PDFName.of('Annots'), annotationsArray);
+                }
+
+                if (inputs.QrUrl && inputs.QrUrl.length > 0 && (inputs.QrCodeImage == undefined)) {
+                    //QR Code
+                    // eslint-disable-next-line @typescript-eslint/no-var-requires
+                    const QRCode = require('qrcode');
+                    const qrDataUrl = (i <= (inputs.QrUrl.length - 1)) ? await QRCode.toDataURL(inputs.QrUrl[i]) : await QRCode.toDataURL(inputs.QrUrl[inputs.QrUrl.length - 1]);
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                    const qrImageBytes = await fetch(qrDataUrl).then(res => res.arrayBuffer());
+                    const qrImage = await doc.embedPng(qrImageBytes);
+                    newPage.drawImage(qrImage, {
+                        x: 210,
+                        y: 93,
+                        width: 40,
+                        height: 40,
+                    });
+
+                    const existingAnnots = newPage.node.lookup(PDFName.of('Annots'));
+                    let annotationsArray = existingAnnots instanceof PDFArray ? existingAnnots : doc.context.obj([]);
+                    const linkAnnotation = doc.context.register(
+                        doc.context.obj({
+                            Type: 'Annot',
+                            Subtype: 'Link',
+                            Rect: [210, 93, 250, 93 + 40],
+                            Border: [0, 0, 0],
+                            A: {
+                                Type: 'Action',
+                                S: 'URI',
+                                URI: PDFString.of((i <= (inputs.QrUrl.length - 1)) ? inputs.QrUrl[i] : inputs.QrUrl[inputs.QrUrl.length - 1]),
+                            },
+                        })
+                    );
+                    // Append the new annotation to the existing ones
+                    annotationsArray.push(linkAnnotation);
+                    // Set the updated annotations array back to the page
+                    newPage.node.set(PDFName.of('Annots'), annotationsArray);
+                }
 
-                        const existingAnnots = newPage.node.lookup(PDFName.of('Annots'));
-                        let annotationsArray = existingAnnots instanceof PDFArray ? existingAnnots : doc.context.obj([]);
-                        const linkAnnotation = doc.context.register(
-                            doc.context.obj({
-                                Type: 'Annot',
-                                Subtype: 'Link',
-                                Rect: [210, 93, 250, 93+40],
-                                Border: [0, 0, 0],
-                                A: {
-                                    Type: 'Action',
-                                    S: 'URI',
-                                    URI: PDFString.of((i <= (inputs.QrUrl.length - 1)) ? inputs.QrUrl[i] : inputs.QrUrl[inputs.QrUrl.length - 1]),
-                                },
-                            })
-                        );
-                        // Append the new annotation to the existing ones
-                        annotationsArray.push(linkAnnotation);
-                        // Set the updated annotations array back to the page
-                        newPage.node.set(PDFName.of('Annots'), annotationsArray);
-                    }
 
-                
                 if (inputs.QrCodeImage && inputs.QrCodeImage.length > 0) {
                     const inputQrImageUrl = (i <= (inputs.QrCodeImage.length - 1)) ? inputs.QrCodeImage[i] : inputs.QrCodeImage[inputs.QrCodeImage.length - 1]
                     const inputQrBuffer = await this.fetchData(inputQrImageUrl);
@@ -644,13 +722,13 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
                     let inputQRembed
                     console.log(inputQrImageUrl);
                     console.log(inputQrImageUrl.toLowerCase().includes(".png"));
-                    console.log(inputQrImageUrl.toLowerCase().includes(".jpg")||inputQrImageUrl.toLowerCase().includes(".jpeg"));
-                    if (inputQrImageUrl.toLowerCase().includes(".png")){
-                   inputQRembed = await doc.embedPng(inputQrBuffer);
-                   console.log('embed QR Code image as png');
+                    console.log(inputQrImageUrl.toLowerCase().includes(".jpg") || inputQrImageUrl.toLowerCase().includes(".jpeg"));
+                    if (inputQrImageUrl.toLowerCase().includes(".png")) {
+                        inputQRembed = await doc.embedPng(inputQrBuffer);
+                        console.log('embed QR Code image as png');
                     }
-                   
-                    else if (inputQrImageUrl.toLowerCase().includes(".jpg")||inputQrImageUrl.toLowerCase().includes(".jpeg")){
+
+                    else if (inputQrImageUrl.toLowerCase().includes(".jpg") || inputQrImageUrl.toLowerCase().includes(".jpeg")) {
                         console.log(inputQrBuffer)
                         const dataView = new DataView(inputQrBuffer);
                         console.log(dataView)
@@ -665,11 +743,11 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
                             console.log('SOI marker not found but forcing to be correct.');
                             let fixedArrayBuffer = await this.reencodeImageToArrayBuffer(inputQrBuffer)
                             inputQRembed = await doc.embedJpg(fixedArrayBuffer);
-                        }                       
+                        }
                         console.log('embed QR Code image as jpg successful');
                     }
 
-                    
+
                     newPage.drawImage(inputQRembed, {
                         x: 210,
                         y: 93,
@@ -699,7 +777,7 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
                 filledPDFs.push(await doc.save());
 
             }
-            
+
             const finalPDF = await PDFDocument.create();
 
             // Copy pages from all filled PDFs into the final document
@@ -711,6 +789,7 @@ export default class PDFMapGeneratorActivity implements IActivityHandler {
 
             const pdfBytes = await finalPDF.save();
             const base64String = this.arrayBufferToBase64(pdfBytes);
+            //was and still working fine, ignore the bug report
             const downloadUrl = this.createDownloadUrl(base64String);
             console.log('pdf file created and ready to download');
             return {