finalize camera-info updates

site/camera-info/main.js

@@ -109,27 +109,40 @@ window.app = {
         page.moveTo(0, 960 - 208);
         page.drawText(res, { size : 48 });
         page.moveTo(0, 960 - 256);
-        page.drawText("https://maps.google.com/maps?q=" + lat + "," + long, { size : 48, font: helvetica, color: PDFLib.rgb(0, 0.5, 1) });
+        page.drawText("https://maps.google.com/maps?q=" + lat + "," + long, { size : 48, color: PDFLib.rgb(0, 0.5, 1) });
         page.moveTo(0, 960 - 308);
-        page.drawText("Notes: " + document.getElementById("notes").value, { size : 48 });
+        page.drawText(document.getElementById("notes").value, { size : 48 });
+
         let static = await maps_static(lat, long);
-        let embeddedImage = await pdfDoc.embedPng(static);
-        let dims = embeddedImage.scale(1);
-        page.drawImage(embeddedImage, {
-          x: 365 * 2,
-          y: 960 - 320 - dims.height,
-          width : dims.width,
-          height : dims.height
-        });
+        let embeddedMap = await pdfDoc.embedPng(static);
+        let dimsMap = embeddedMap.scale(1);
         let image = document.getElementById("precanvas");
         let static2 = await fetch(image.toDataURL('image/png')).then(res => res.arrayBuffer());
-        let embeddedImage2 = await pdfDoc.embedPng(static2);
-        let dims2 = embeddedImage2.scale(1);
-        page.drawImage(embeddedImage2, {
+        let embeddedPicture = await pdfDoc.embedPng(static2);
+        let dimsPicture = embeddedPicture.scale(1);
+
+	let mapAspect = dimsMap.width / dimsMap.height;
+	let picAspect = dimsPicture.width / dimsPicture.height;
+	let mapRatio = mapAspect / (mapAspect + picAspect); // the proportion of the width filled by the map
+        let picRatio = 1 - mapRatio;
+
+	const fullWidth = 1440;
+	let mapWidth = mapRatio * fullWidth;
+	let picWidth = picRatio * fullWidth;
+
+	let combinedHeight = mapWidth / mapAspect;
+
+        page.drawImage(embeddedMap, {
+          x: fullWidth - mapWidth,
+          y: 960 - 320 - combinedHeight,
+          width : mapWidth,
+          height : combinedHeight
+        });
+        page.drawImage(embeddedPicture, {
           x: 0,
-          y: 960 - 320 - dims2.height / dims2.width * 720,
-          width : 720,
-          height : dims2.height / dims2.width * 720
+          y: 960 - 320 - combinedHeight,
+          width : picWidth,
+          height : combinedHeight
         });
         //ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
         const dataURI = await pdfDoc.saveAsBase64({ dataUri: true });