perfecto

BasicHtmlCoder · BasicHtmlCoder · commit 9400b4e88fc9 · 2026-01-02T13:05:57.000+01:00
diff --git a/dist/index.html b/dist/index.html
@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>🗺️ MapPornCircleJerk - Create Cursed Maps</title>
         <meta name="description" content="Color countries however you want and create the most cursed maps the internet has ever seen! No rules, just chaos! 🎨" />
-      <script type="module" crossorigin src="/assets/index-d0564ca1.js"></script>
+      <script type="module" crossorigin src="/assets/index-83d59d34.js"></script>
       <link rel="stylesheet" href="/assets/index-a2b07217.css">
     </head>
     <body>
@@ -15,6 +15,6 @@
             <div id="map"></div>
         </div>
         
-        <script defer src="http://cloud.umami.is/script.js" data-website-id="3b3aa24f-7565-42d9-b4f2-f4471bc7039c"></script>
+        <script defer src="https://cloud.umami.is/script.js" data-website-id="3b3aa24f-7565-42d9-b4f2-f4471bc7039c"></script>
     </body>
 </html>
diff --git a/src/map/MapManager.ts b/src/map/MapManager.ts
@@ -175,6 +175,94 @@ export class MapManager {
       }
     };
 
+    // Patch the _print method to add footer text before converting to blob
+    const originalPrint = bigImageControl._print.bind(bigImageControl);
+    bigImageControl._print = function() {
+      const self = this;
+
+      self.tilesImgs = {};
+      self.markers = {};
+      self.path = {};
+      self.circles = {};
+
+      let dimensions = self._map.getSize();
+
+      self.zoom = self._map.getZoom();
+      self.bounds = self._map.getPixelBounds();
+
+      self.canvas = document.createElement('canvas');
+      self.canvas.width = dimensions.x;
+      self.canvas.height = dimensions.y;
+      self.ctx = self.canvas.getContext('2d');
+
+      bigImageControl._changeScale.call(self, document.getElementById('scale').value);
+
+      let promise = new Promise(function (resolve, reject) {
+        bigImageControl._getLayers.call(self, resolve);
+      });
+
+      promise.then(() => {
+        return new Promise(((resolve, reject) => {
+          for (const [key, value] of Object.entries(self.tilesImgs)) {
+            self.ctx.drawImage(value.img, value.x, value.y, self.tileSize, self.tileSize);
+          }
+          for (const [key, value] of Object.entries(self.path)) {
+            bigImageControl._drawPath.call(self, value);
+          }
+          for (const [key, value] of Object.entries(self.markers)) {
+            self.ctx.drawImage(value.img, value.x, value.y);
+          }
+          for (const [key, value] of Object.entries(self.circles)) {
+            bigImageControl._drawCircle.call(self, value);
+          }
+
+          // ADD FOOTER TEXT HERE - after all drawing is complete
+          const canvas = self.canvas;
+          const ctx = self.ctx;
+
+          // Set text style
+          const fontSize = Math.max(16, Math.floor(canvas.width / 80)); // Dynamic font size
+          ctx.font = `${fontSize}px Arial, sans-serif`;
+          ctx.textAlign = 'center';
+          ctx.textBaseline = 'bottom';
+
+          // Draw text background for better readability
+          const text = 'Generated by https://mapporncirclejerk.xyz/';
+          const textMetrics = ctx.measureText(text);
+          const textWidth = textMetrics.width;
+          const textHeight = fontSize * 1.5;
+          const padding = fontSize * 0.5;
+
+          const x = canvas.width / 2;
+          const y = canvas.height - padding;
+
+          // Draw semi-transparent background
+          ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+          ctx.fillRect(
+            x - textWidth / 2 - padding,
+            y - textHeight,
+            textWidth + padding * 2,
+            textHeight
+          );
+
+          // Draw text
+          ctx.fillStyle = 'rgba(0, 0, 0, 0.9)';
+          ctx.fillText(text, x, y - padding / 2);
+
+          resolve();
+        }));
+      }).then(() => {
+        self.canvas.toBlob(function (blob) {
+          let link = document.createElement('a');
+          link.download = "my-image.png";
+          link.href = URL.createObjectURL(blob);
+          link.click();
+        });
+        self._containerParams.classList.remove('print-disabled');
+        self._loader.style.display = 'none';
+      });
+    };
+
     // Prepare map for export when export button is clicked
     this.map.on('click', (e: L.LeafletMouseEvent) => {
       const target = e.originalEvent.target as HTMLElement;
