Image Map Generator — Free Online Tool

Image Map Generator. Create clickable zones on images: rect, circle and poly. Undo/redo, snap to grid, zoom. HTML or JSON export. No sign-up, no ads, 100% client-side.

🌐 Demo en vivo / Live demo: miguelacm.es/tools/image-map-generator

---

✨ Features

• 🗺️ Clickable zones: Draw rect, circle and polygon hotspots over any image.
• ↩️ Pro editing: Undo/redo, snap to grid and zoom while you place each zone.
• 🔒 100% private: Maps are generated locally; export HTML or JSON.

---

🚀 Quick start

git clone https://github.com/m-a-c-m/ImageMapGenerator.git
cd ImageMapGenerator
npm install
npm run dev

Open http://localhost:3000.

Environment variables (optional)

NEXT_PUBLIC_SITE_URL=https://miguelacm.es/tools/image-map-generator
NEXT_PUBLIC_EMBED_URL=https://miguelacm.es/embed/image-map-generator

---

📦 Embed on your website

<iframe
  src="https://miguelacm.es/embed/image-map-generator"
  width="100%"
  height="700"
  style="border:none;border-radius:12px;"
  title="Image Map Generator — miguelacm.es"
  loading="lazy"
></iframe>

Link with attribution (recommended for backlink)

<a href="https://miguelacm.es/tools/image-map-generator" target="_blank" rel="noopener">
  Image Map Generator — free tool by MACM
</a>

💡 The link option generates a real backlink that benefits the project.

---

🛠 Tech Stack

Technology	Version	Purpose
Next.js	16	React framework
TypeScript	5	Type safety
Tailwind CSS	4	Styling
react-icons	5	Icons

---

📄 License

MIT © Miguel Ángel Colorado Marin (MACM)

Built with ❤️ by MACM — Full Stack Developer & Cybersecurity Specialist from Guadalajara, Spain.

• 🌐 Portfolio: miguelacm.es
• 💼 LinkedIn: linkedin.com/in/macm
• 🐙 GitHub: github.com/m-a-c-m