Image map maker

Image Map Maker — Clickable Hotspots on Any Picture

A picture goes in, and a clickable image map comes back — numbered hotspots sitting on the right buildings, a legend that names them, and a page you can publish or embed.

East Blue, pin open — A pin on the lighthouse rock, its name and line opening without leaving the map.
East Blue, pin open
Campus, close — Numbered pins on the hall, the yard and the gate; the legend repeats every number.
Campus, close
Ribcage, close — The hotspot layer rides on the illustration instead of sitting beside it.
Ribcage, close
Inazuma, close — Every island keeps its own pin, and the layer scales with the picture.
Inazuma, close
✦Image map
Make an image map of a harbour town at dusk, and where the five guilds keep their doors
One Piece · East Blue — Six islands and a storm belt; every pin is a place the story starts from.
One Piece · East Blue — Six islands and a storm belt; every pin is a place the story starts from.
One Piece · Water 7 — One canal ring, six stops: fountain, clock tower, docks, sea train, market, gate.
One Piece · Water 7 — One canal ring, six stops: fountain, clock tower, docks, sea train, market, gate.
One Piece · Wano — Five provinces on one walled island, with the capital in the middle.
One Piece · Wano — Five provinces on one walled island, with the capital in the middle.
Genshin Impact · Liyue — Harbour, terrace, inn, fields, stone forest and gate on one coastline.
Genshin Impact · Liyue — Harbour, terrace, inn, fields, stone forest and gate on one coastline.
Genshin Impact · Inazuma — Six islands behind a storm ring, each one its own errand.
Genshin Impact · Inazuma — Six islands behind a storm ring, each one its own errand.
Jujutsu Kaisen · Tokyo Jujutsu High — A campus plan with seven pins: hall, dorm, yard, gate, shrine, storehouse, road.
Jujutsu Kaisen · Tokyo Jujutsu High — A campus plan with seven pins: hall, dorm, yard, gate, shrine, storehouse, road.
Jujutsu Kaisen · Shibuya — Station, scramble, tower, bridge and alleys — and the veil at the edge.
Jujutsu Kaisen · Shibuya — Station, scramble, tower, bridge and alleys — and the veil at the edge.
Ribcage · the districts — A city inside a ribcage, with the pins naming the organs it lives in.
Ribcage · the districts — A city inside a ribcage, with the pins naming the organs it lives in.
Ash Harbor · the fog line — Seven pins down a crooked coast, from the tidal road to the lighthouse.
Ash Harbor · the fog line — Seven pins down a crooked coast, from the tidal road to the lighthouse.

One picture is a start. The places behind it are the world.

Neta Studio is an AI world builder — the same world keeps the map, the people who live on it and the scenes that happen between the pins. Publish the page, fork it, or keep adding places to the same map.

  • Pins that stay on the picture — Hotspots are stored as percentages of the image, so the same map holds its alignments at 900px on a desk and 390px in a hand.
  • A legend, not a coordinate table — Every number has a name and one line. Nothing to measure, nothing to type into an area tag by hand.
  • One page, ready to share — The map publishes as a page you can send, embed or keep building on inside the same world.

Questions before you make one

What is an image map?

A picture whose regions are clickable. In HTML it is an image plus a map of area shapes; here the picture and its hotspot layer are built together, so a pin opens a name and a line instead of a set of coordinates.

Do I have to plot the coordinates myself?

No. Name the places and the pins are placed on them, stored as percentages of the image. If one lands a street off, say which pin and where it belongs and it moves.

Can I use my own picture?

Yes. Attach a photo, a floor plan, a screenshot or a poster, then name the places on it. Generated art is only the default because most maps start from a blank page.

Does it write the HTML map code?

It publishes a page with a real hotspot layer — numbers, labels, links — that scales with the image. If you need to drop it into your own site, ask for the hotspot JSON and the area markup alongside the page.

Can a hotspot link somewhere?

Yes. A pin can open a panel, jump to another place on the same map, or point at a URL you give it.

Will it work on a phone?

Yes. The coordinates are percentages, so the pins stay on their buildings when the map shrinks; panels open as a card near the pin instead of a sidebar.

What can I map?

World maps, game levels, campus and floor plans, venue seating, product diagrams, a photo of a street. If it is a picture with places on it, it can carry pins.

How many hotspots should a map have?

Five to eight is the sweet spot — enough to be useful, few enough that the picture still reads. A busy city map can take twelve if the pins are grouped by district.

Give the next map a layer people can click.

Name the places once. The picture, the pins, the legend and the page come back together.

×