Responsive image map generator — free, no signup

In the account editor, check Desktop, Tablet, and Mobile, then preview a selected dot. Confirm that its card width, line breaks, media, and links work at each size. Use Appearance for one dot and Map settings for shared defaults. Image dots use percentage positions; geographic Mapbox pins use coordinates, so the two map types do not use the same placement math.

Take a 1200×800 diagram with a hotspot on a valve at 600,400 — dead centre. In classic image map markup that becomes a literal pixel value:

<img src="diagram.png" usemap="#m" width="1200" height="800">
<map name="m">
  <area shape="circle" coords="600,400,24" href="/valve">
</map>

Add one line of responsive CSS — img { max-width: 100%; height: auto; } — and on a 390px phone the browser paints the image at roughly 32% scale. The valve is now at about 195,130 on screen, but coords still says 600,400: a point past the right edge of the picture. The hotspot has not moved, it has disappeared.

Percentages describe the same point in a way that survives scaling. 600 ÷ 1200 = 50% and 400 ÷ 800 = 50%. Half of 1200px is 600px; half of 390px is 195px. The marker lands on the valve at every width, with no media queries, no resize listener, and no second mobile version to keep in sync.

You do not have to redraw anything. Every legacy coordinate can be converted with two divisions:

xPercent = (x / naturalWidth)  * 100
yPercent = (y / naturalHeight) * 100

// rect coords="300,200,700,600" on a 1200x800 image
// centre = 500, 400  ->  41.7%, 50%

In practice, clicking the point on the image is faster than the arithmetic for anything under about twenty hotspots. The full migration walkthrough is on the image map generator page, and making an image clickable without an image map compares the markup options side by side.

Three checks catch almost every alignment bug:

1. Drag the window slowly. Markers should glide with the image, not jump at breakpoints. A jump means something in the chain is still pixel-based.
2. Rotate a phone. Portrait to landscape is where resize-listener approaches most often lag or land a frame behind.
3. Check a marker near an edge. Corner hotspots expose off-by-a-few-percent errors that centre markers hide, and they are also where popups need to flip to stay on screen.

The underlying maths, including how object-fit letterboxing shifts things, is covered in why image hotspots drift on mobile.

• Image map generator — the main tool page, including legacy migration.
• HTML image map alternative — what replaces <map>/<area> and why.
• Clickable image maker — if you only need links rather than popups.
• Accessible image maps — keyboard focus, alt text, and contrast.