Add files via upload

abumuailek · web-flow · commit 5d42b41ca0aa · 2025-04-14T11:30:11.000+02:00
diff --git a/landmark.html b/landmark.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Google Maps Landmark Icon Merger by @abumuailek</title>
+  <style>
+    body { font-family: Arial, sans-serif; padding: 20px; background: #f0f0f0; }
+    canvas { border: 1px solid #ccc; margin-top: 20px; }
+  </style>
+</head>
+<body>
+  <h2>Google Maps Landmark Icon Merger</h2>
+  <label for="landmark">Enter Landmark ID (e.g. cairo_tower):</label><br>
+  <input type="text" id="landmark" placeholder="e.g. cairo_tower" />
+  <button onclick="mergeLayers()">Merge Icon</button>
+
+  <canvas id="resultCanvas"></canvas>
+  <p><a id="downloadLink" style="display:none;" download>Download PNG</a></p>
+
+  <script>
+    async function loadImage(url) {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = url;
+      });
+    }
+
+    function formatName(slug) {
+      return slug.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    }
+
+    async function mergeLayers() {
+      const rawName = document.getElementById('landmark').value.trim();
+      const canvas = document.getElementById('resultCanvas');
+      const ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      try {
+        const baseUrl = `https://www.google.com/maps/vt/icon/name=assets/icons/poi/iconic/`;
+        const img0 = await loadImage(`${baseUrl}${rawName}_layer_1-2-medium.png&scale=4`);
+
+        canvas.width = img0.width;
+        canvas.height = img0.height;
+        ctx.drawImage(img0, 0, 0);
+
+        for (let i = 2; i <= 4; i++) {
+          const img = await loadImage(`${baseUrl}${rawName}_layer_${i}-2-medium.png&scale=4`);
+          ctx.drawImage(img, 0, 0);
+        }
+
+        const formatted = formatName(rawName);
+        const link = document.getElementById('downloadLink');
+        link.href = canvas.toDataURL();
+        link.download = `${formatted}.png`;
+        link.textContent = `Download "${formatted}" PNG`;
+        link.style.display = 'inline';
+      } catch (error) {
+        alert('Could not load one or more image layers. Please check the landmark ID.');
+      }
+    }
+  </script>
+</body>
+</html>
