GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 Map UI Design Patterns — Click-to-Drop Pickers

· Godrich · 9 items · 19 min read

PickersVanilla JSClickCheckout

Map UI design is the layer that turns "where should this go?" into one point a person can hand back to you, and these nine click-to-drop pickers do it

Click-to-drop pin01 map-pin-drop Count-badge cluster burst02 map-cluster-burst Two-way card-and-pin highlight03 map-card-pin-link Radius-circle distance slider04 map-radius-slider Address autocomplete dropdown05 map-address-autocomplete Current-location crosshair scan06 map-locate-crosshair Self-drawing route line07 map-route-draw Favorite pins list08 map-favorite-pins Press-to-expand mini map09 map-minimap-expand

Auto-plays · click a tile to jump to its section · all nine in one zip

The order is not popularity; it is the path someone walks while settling on a spot. The first three put a point on the board: tap the map for one (01), split a stack of overlapping markers when there are too many (02), and tie the result list to those markers so the eye can move between them (03). The next three narrow what counts: cut by distance (04), jump somewhere by typing an address (05), and anchor the search on the device itself (06). The last three happen after the choice is made: draw the route to it (07), keep it for next time (08), and glance at the whole city while the big map stays zoomed in (09). The board underneath all nine is built the same way — two crossed repeating-linear-gradient layers for roads, plus a park circle and a river band, painted once and never touched again while the map marker css moves pins, rings, and cards on top of it. If the choice is a date, css calendar design patterns is the pair; if it's a span rather than a point, time picker ui patterns inherits the role.

01Click-to-drop pin

What these map ui design examples show

The pin enters 62px above the point you clicked, falls, bounces once, and settles while its shadow spreads on impact and tightens again as it rebounds. Click coordinates are divided by the map box and clamped into a percentage, so the same tap resolves to the same building whether the frame is 480px or 320px wide.

Click-to-drop pin
Open in a new tab

01 · Click-to-drop pin — Measured area 1.535% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateYcubic-bezierclick 좌표

Where to look in the code

Replaying that fall on the same node needs a forced reflow between removing and adding the class, or the browser collapses both writes into one frame and nothing moves.

function drop(nx, ny) {
  root.classList.remove('is-demo');
  x = Math.max(8, Math.min(92, nx));
  y = Math.max(14, Math.min(90, ny));
  parts.forEach(function (el) {
    el.style.left = x.toFixed(1) + '%';
    el.style.top = y.toFixed(1) + '%';
    el.classList.remove('is-drop');
    void el.offsetWidth; // forcing a reflow is what lets the same animation run again
    el.classList.add('is-drop');
  });
  val.textContent = names[Math.floor((x + y) / 38) % names.length];
  coord.textContent = (37.52 + y / 400).toFixed(4) + ', ' + (127.03 + x / 400).toFixed(4);
}

02Count-badge cluster burst

What happens on screen

A badge holding the count sits where the markers overlap, and pressing it fans six real pins out with their labels until you press it again to fold them back into one badge. Each pin differs only by two direction coefficients, --kx and --ky, while the radius pair — --rx at 92px and --ry at 40px — is shared by all six.

Count-badge cluster burst
Open in a new tab

02 · Count-badge cluster burst — Measured area 5.049% · moving frames 13/23Original by GODRICH · SCSS and React ship in the zip · See the password

scaletransform-originaria-expanded

How to read the code

Shrinking those two numbers is the entire responsive fix, because nothing else in the burst knows how wide the board is.

@keyframes cb-burst {
  0%        { opacity: 0; transform: translate(-50%, -100%) translate(0, 0) scale(.3); }
  10%       { opacity: 0; transform: translate(-50%, -100%) translate(0, 0) scale(.3); }
  32%       { opacity: 1; transform: translate(-50%, -100%) translate(calc(var(--kx) * var(--rx)), calc(var(--ky) * var(--ry))) scale(1); }
  68%       { opacity: 1; transform: translate(-50%, -100%) translate(calc(var(--kx) * var(--rx)), calc(var(--ky) * var(--ry))) scale(1); }
  86%, 100% { opacity: 0; transform: translate(-50%, -100%) translate(0, 0) scale(.3); }
}

03Two-way card-and-pin highlight

What moves

Hovering or tabbing to a result card scales its marker to 1.42 and starts a ring spreading out from under it; pointing at the marker lights up the card border instead. The only thing joining the two halves is a matching data-id, so cards and pins can sit in any DOM order.

Two-way card-and-pin highlight
Open in a new tab

03 · Two-way card-and-pin highlight — Measured area 21.182% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

mouseenterdata-idbox-shadow

What to change

The ring runs as an infinite animation rather than a transition because both of its ends are transparent, and a transition between two invisible states shows nothing at all.

.cl__pin.is-on, .cl__pin:hover { color: $color; transform: translate(-50%, -100%) scale(1.42); }
.cl__ring {
  position: absolute;
  left: 50%; top: 100%;
  width: 34px; height: 34px;
  border: 2px solid $color;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  pointer-events: none;
}
.cl__pin.is-on .cl__ring, .cl__pin:hover .cl__ring {
  animation-name: cl-ring-pulse;
  animation-duration: $dur-enter;
  animation-timing-function: $ease-out;
  animation-iteration-count: infinite;
}
@keyframes cl-ring-pulse {
  0%   { opacity: .6; transform: translate(-50%, -50%) scale(.55); }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(1.9); }
}

04Radius-circle distance slider

What you see

Dragging the slider grows the radius circle, walks the label up to 3.2km, and leaves only the pins inside it at full strength. That circle is a square built from aspect-ratio: 1 against the map height, and it changes size through scale(var(--k)) alone, so the board never reflows while the radius breathes.

Radius-circle distance slider
Open in a new tab

04 · Radius-circle distance slider — Measured area 9.331% · moving frames 21/23Original by GODRICH · SCSS and React ship in the zip · See the password

input rangescaleopacity

Where to look in the code

Membership is a plain comparison of each pin's data-dist against the raw slider value.

function rsPaint() {
  var v = Number(rsRange.value);
  var t = (v / 100 * RS_MAX_KM).toFixed(1) + 'km';
  rsRing.style.setProperty('--k', v / 100);
  rsKm.textContent = t;
  rsRange.setAttribute('aria-valuetext', t);
  rsPins.forEach(function (p) {
    p.classList.toggle('is-in', Number(p.getAttribute('data-dist')) <= v);
  });
}

05Address autocomplete dropdown

What happens on screen

Typing opens four candidates that slide up into place above the field, the arrow keys walk them, and Enter actually moves the map pin to that address. Each option carries its destination as data-x and data-y percentages, so picking one costs two style writes and nothing more.

Address autocomplete dropdown
Open in a new tab

05 · Address autocomplete dropdown — Measured area 17.575% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

role=comboboxaria-activedescendanttyping keyframes

How to read the code

Focus never leaves the input — aria-activedescendant is what tells a screen reader which row is current.

function acPick(i) {
  var o = acOpts[i];
  acOpts.forEach(function (x, k) { x.setAttribute('aria-selected', String(k === i)); });
  acInput.value = o.lastElementChild.textContent;
  acPin.style.left = o.getAttribute('data-x');
  acPin.style.top = o.getAttribute('data-y');
  acOpen(false);
  acInput.focus({ preventScroll: true });
}

06Current-location crosshair scan

What moves

Three rings ripple outward under the crosshair for 1.4 seconds; then the scan locks and a location dot starts pulsing where it stopped. The stagger comes from negative delays of -667ms and -1334ms on the second and third rings, which start them mid-cycle instead of queuing them one after another.

Current-location crosshair scan
Open in a new tab

06 · Current-location crosshair scan — Measured area 7.419% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

ring keyframesaria-livereduced-motion

What to change

The shorthand is avoided on purpose here, since writing animation on one line would reset that delay back to zero.

.lc.is-demo .lc__ring,
.lc.is-scanning .lc__ring {
  animation-name: lc-scan;
  animation-duration: $dur-loop;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
  animation-delay: 0ms;
}
.lc.is-demo .lc__ring--2,
.lc.is-scanning .lc__ring--2 { animation-delay: -667ms; }
.lc.is-demo .lc__ring--3,
.lc.is-scanning .lc__ring--3 { animation-delay: -1334ms; }

07Self-drawing route line

What you see

The line fills from the start pin to the destination flag like a brush stroke, and a travel-time badge pops out once it lands. Setting pathLength="100" on the path normalizes its length, so the numbers handed to stroke-dasharray and stroke-dashoffset are already progress percentages.

Self-drawing route line
Open in a new tab

07 · Self-drawing route line — Measured area 3.528% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

stroke-dashoffsetpathLengtharia-label

Where to look in the code

Moving the route coordinates later changes nothing about the dash math.

.rd__line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rd__line--base { stroke: rgba(23, 20, 26, .13); stroke-width: 7; }
.rd__line--draw {
  stroke: $color;
  stroke-width: 5;
  stroke-dasharray: 100;              // pathLength="100" makes the dash number a percentage
  stroke-dashoffset: 100;
}
// under user control the line is drawn with a transition instead of the loop
.rd:not(.is-demo) .rd__line--draw { transition: stroke-dashoffset 900ms $ease-out; }
.rd.is-drawn .rd__line--draw { stroke-dashoffset: 0; }

08Favorite pins list

What happens on screen

Pressing a pin's heart flips aria-pressed, bounces the icon, and pushes that store into the chip row under the map. Chips are never removed from the DOM: they wait at max-width: 0 with padding and margin collapsed, and switching one on restores all of those values together.

Favorite pins list
Open in a new tab

08 · Favorite pins list — Measured area 3.539% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-pressedscale bouncechip stack

How to read the code

The row itself keeps gap: 0 for the same reason, since a flex gap would still reserve space around a chip folded down to nothing.

.fp__chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: $sp-1;
  height: 24px;
  max-width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.6);
  transition: max-width $duration $easing, padding $duration $easing, margin $duration $easing,
              opacity $duration $easing, transform $duration $easing;
}
.fp__chip.is-on {
  max-width: 160px;
  padding-left: $sp-2;
  padding-right: $sp-2;
  margin-right: $sp-2;
  opacity: 1;
  transform: scale(1);
}

09Press-to-expand mini map

What moves

A rectangle inside the corner map tracks the area currently in view, and pressing that mini map grows a larger overlay panel out of the same corner. transform-origin: 100% 100% anchors the growth to the bottom right, which keeps the panel from spilling past the edge of the board as it scales from .3 to 1.

Press-to-expand mini map
Open in a new tab

09 · Press-to-expand mini map — Measured area 20.717% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

transform-originoverlayaria-expanded

What to change

Escape folds it back and returns focus to the button.

.mm__panel {
  position: absolute;
  right: $sp-2;
  bottom: $sp-2;
  z-index: 1;
  box-sizing: border-box;
  width: 66%;
  height: 78%;
  padding: $sp-2;
  border-radius: $r-card;
  overflow: hidden;
  box-shadow: $shadow-raised;
  transform-origin: 100% 100%;
  transform: scale(.3);
  opacity: 0;
  pointer-events: none;
  transition: transform $duration $easing, opacity $duration $easing;
}
.mm.is-open .mm__panel { transform: scale(1); opacity: 1; pointer-events: auto; }

Where it breaks — the trap

Almost every coordinate in a map UI is a percentage, because "82% across, 38% down" has to mean the same doorway at any width. The trap is that feeding those percentages straight into left and top makes the browser recompute layout on every step, and once a pin is animating, that cost repeats every frame. The obvious swap fails in a less obvious way: a percentage inside transform: translate() resolves against the moving element itself rather than the board, so translate(82%) on a 20px pin shifts it by 16px and lands nowhere near the right place. What these nine do instead is store the coordinate in percent but never animate it — position writes happen only at the instant a person picks something, and everything that runs continuously (the fall in 01, the burst in 02, the scale in 03, the circle in 04, the overlay in 09) is expressed as transform and opacity.

The second wall is vertical room. Each demo is embedded at 480×300 and shrinks to 320×200 on a phone, which leaves 174px of height once the stage padding comes off. That is why every board's height is capped — clamp(104px, 34vw, 160px) in five of the nine, a tighter clamp or a fixed aspect-ratio in the rest; measured at 320px wide, the nine demos land between 127px and 155px, and widening the list spacing by another 4px is already enough to clip the bottom row. Taking input inside a narrow card is the exact case Login Form Design Patterns solved at the same width. The password for the archive holding these nine SCSS files and their React ports is 7ajdcn4a, and it opens the copies that carry exactly these numbers. The third break came out of 02 itself: six pins fanned at one radius with single-line labels still collide at 480px, and they only become readable after the arc spreads across angles from 170 degrees down to 10 with the labels alternating over two rows.

Accessibility (reduced-motion)

All nine drop their idle loop under prefers-reduced-motion: reduce while keeping the state that loop was showing. The pin stands on its spot without falling, the radius circle resizes with no transition, the scan collapses to one static ring around the locked dot, and the route line sits fully drawn. Pointer input is never the only way in, either.

Pattern Pointer Keyboard Announced as
01 Pin drop click the board arrows to move, Enter to re-drop place name in role="status"
03 Card and pin hover Tab, then arrows for the next entry aria-pressed, role="status"
04 Radius drag the slider arrows, Home, End distance in aria-valuetext
05 Address click up, down, Enter, Escape aria-activedescendant
06 Locate press the button Enter, Space aria-live="polite"
09 Mini map click Enter, Space, Escape aria-expanded

The mechanism behind 05, where a visual cursor walks a list while real focus stays in the text field, is specified on MDN's combobox role page. Both 05 and 09 hand focus back with focus({ preventScroll: true }), which matters because these boards sit in an iframe inside an article: without that option the reader's page yanks itself down to the demo the moment a choice is made. Other components that return a chosen value are gathered under commerce, and the ones that answer a press are under click.

FAQ

Can this map pin css run on a real map instead of the CSS board?

The pins, rings, cards and slider carry over unchanged. Every pattern treats the board as a single position: relative box with a background and reads its coordinates as percentages of that box. Swapping in a real map means replacing the background with the library's canvas and routing those percentages through its projection function, which is two places rather than nine. When the picked place has to ship out as a card, the embeds of Social Share Button Design Widgets hold it.

When should markers start clustering into a count badge?

The trigger is distance on screen, not a total: cluster as soon as the gap between two markers drops below the width of the marker icon. That is why the same three pins cluster at one zoom level and separate at the next. The demo merges six because six is roughly where fanned labels stop being readable at 480px.

How does the radius slider decide what is inside the circle?

Each pin stores a value from 0 to 100 in data-dist and the code compares it against the raw slider position. A real service would compute the distance between the center point and each pin, then map the result onto that same 0 to 100 scale. Nothing downstream of the conversion has to change.

Enter the archive password

The password is inside this article. You will find it as you read.