maps
Shipping zone picker with real polygons
A schematic SVG map with four delivery zones drawn as irregular polygons and a marker dragged with pointer events: the component resolves the zone with a genuine ray crossing point in polygon test, not with bounding boxes or distance to a centroid. The matched zone lights up and redraws its border, cost and delivery time ease to the new values, and when the point falls in an uncovered gap it measures the distance to every edge of every polygon to suggest the nearest zone and move the marker onto it.
See it live and copy its promptWhat you can adjust
- Accent color
- No coverage color
- Fill opacity
- Zone fill
- Edge thickness
- Marker size
- Animation speed
- Zone labels
- Canvas height
How this catalog works
Every component ships with its reproduction prompt: the text you paste into an AI builder to get exactly this piece. The values above are editable, and the prompt you copy carries the ones you chose, so what gets generated is what you were looking at.
