ai-agent

image-map-creator: Create Interactive Maps

Name: image-map-creator: Create Interactive Maps
Author: n-peugnet

Generate HTML or SVG image maps with this tool, ideal for startup founders and developers.

From the repo · “A javascript tool to create image map that you can export in HTML or SVG”

171 stars58 forksTypeScriptUpdated 6/14/2026100% free · open source

What it does

The image-map-creator tool generates HTML or SVG image maps, allowing users to create interactive images for their websites or applications.

When to use it

•When creating interactive infographics for a website
•When developing image-based navigation menus
•When building interactive diagrams or schematics

Ready-to-paste prompt

const creator = new ImageMapCreator(); creator.addArea({ x: 10, y: 10, width: 50, height: 50, href: 'https://example.com' }); console.log(creator.generateHtml());

Heads up: The image-map-creator tool requires a valid image file to be specified as the 'imgSrc' option, which is used as the background image for the interactive map.

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/image-map-creator && curl -fsSL https://workflowstacks.com/api/skills/image-map-creator/claude-skill -o ~/.claude/skills/image-map-creator/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How image-map-creator: Create Interactive Maps works

Codeflow

Free to inspect

Image-map-creator: Create Interactive Maps is a small TypeScript project (~1k lines across 8 code files). Setup is light: installs like a normal app. Reading the code is optional. Last commit 4 months ago, MIT license, no tests found.

Size

Small codebase

~1k lines · 8 code files · 8 min skim

Setup

One-command install

Installs like a normal app. Reading the code is optional.

Runs on

Node.js

No API keys detected

TypeScript 97%Makefile 3%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
package.json
Dependencies and the commands it exposes
3
src/class.area.ts
Inside src/ — the main logic begins here
4
demos/index.html
A worked example — copy this to get going

What's in each folder

src/Core code — the actual logic8 files

docs/Documentation2 files

demos/Examples you can copy1 files

.github/CI / automation (GitHub Actions)1 files

READMENo tests foundDocumentedCI checksExamples includedMIT licenseUpdated 4 mo ago

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/image-map-creator && curl -fsSL https://workflowstacks.com/api/skills/image-map-creator/claude-skill -o ~/.claude/skills/image-map-creator/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

n-peugnet

Language

TypeScript