Product demos & UI / Prompt

Prompt: connect a selected map location to its details

Keep the map stable while one marker becomes the focus. Match the selected location to its detail heading so the audience can connect spatial choice with the information shown.

By AnimroUpdated 2 min readAI-assisted · independently agent-reviewed

Who this is for: Teams explaining map-based interfaces.

What to prepare

  • Approved map assets
  • Marker-selection evidence
  • Matching detail panel

Copyable creative brief

An authored planning example. Replace illustrative details with your approved product facts and assets.

Create a 30-second illustrative map demo using an approved sample map and supplied product states. Start at a fixed reference area with three fictional labeled sites: Sample North, Sample Central and Sample South. Select Sample Central through the actual marker interaction. Keep a recognizable nearby reference and the selected-marker state visible when the detail panel opens. The panel heading must read Sample Central and show only supplied illustrative fields, such as “Inspection: Pending.” Hold the marker and matching heading together before focusing on the status. End on this inspected state without suggesting a route was calculated or a real site was changed. Avoid unnecessary spinning, panning or zooming. Do not invent geographic accuracy, travel times or live location tracking.

Make it your own

Selected site
Use one fictional location consistently.
Reference area
Retain a recognizable, approved spatial anchor.
Detail focus
Choose one supplied field that answers the task.

Prepare the map evidence

Use assets you are authorized to publish and preserve any required attribution supplied with them. Verify the marker-to-panel behavior and provide matching sample data. A decorative map background alone does not prove product interaction.

Adapt the view

If the real panel covers the selected marker, establish the marker name first and retain it in the panel. For a narrow layout, use a clear map-to-detail transition rather than squeezing the entire desktop map into a phone frame.

Correct location mismatch

If the camera moves after selection, preserve a stable reference or label the new view. If the panel shows a different site, recapture the correct state. Do not manually relabel a mismatched panel while leaving incompatible underlying values.

Review checklist

  • Marker and panel identify the same site.
  • Map movement serves orientation.
  • No routing or tracking capability is invented.
Explore product demos & ui ↗